三十七、前端基础 JavaScript

基础 JavaScript"/>

三十七、前端基础 JavaScript

JavaScript

• 一 JavaScript简介
• 二 JavaScript引入方式
• 三 JavaScript语言规范
• 四 变量
• 五 JavaScript数据类型
• • 5.1 数值(number)
  • 5.2 字符(string)
  • 5.3 布尔值(boolean)
  • 5.4 对象
  • 5.5 数组
• 六 运算符
• • 6.1 算数运算符
  • 6.2 比较运算符
  • 6.3 逻辑运算符
• 七 流程控制
• • 7.1 if判断
  • 7.2 for循环
  • 7.3 while循环
• 八 函数
• • 8.1 函数定义
  • 8.2 函数中的arguments参数
  • 8.3 函数的全局变量和局部变量
• 九 内置对象和方法
• • 9.1 Date对象
  • 9.2 JSON对象
  • 9.3 RegExp对象
  • 9.3 Math对象

一 JavaScript简介

1996年11月，JavaScript的创造者–Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

二 JavaScript引入方式

1. script标签内写

<script>// JS代码
<\script>

2. 引入外部JS文件

<script src=""></script>

3. 浏览器中右键鼠标选择检查然后选择console

三 JavaScript语言规范

注释

// 这是单行注释
/* 
这是多行注释  
*/

结束符
Javascript中的语句要以分号为结束符

四 变量

1. JavaScript的变量名可以使用字母数字下划线和$，不能以数字开头。
2. 使用变量要用关键字声明
3. 变量名是区分大小写的
4. 推荐使用驼峰体

var name = 'jasper';
let age = 18;

ES6新增了let用来声明变量，声明的变量只在let命令所在的代码块有效。
const可以声明常量，一旦声明，其值九不能改变。

const PI = 3.14;

五 JavaScript数据类型

Javascript是动态类型

var x = 123;  //number类型
var x = 'jasper';  //string类型

5.1 数值(number)

Javascript不区分整型和浮点型

var a = 10;
var b = 10.1;

NaN表示不是一个数字

parseINT('ABC');  //返回NaN

5.2 字符(string)

var a = 'hello';
var b = 'world';
var c = a + b;
console.log(c);  //返回helloworld

常用方法：

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, …)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

字符串中嵌入变量

var name = "jasper";
var age = 18;
`My name is ${name} age is ${age}`

5.3 布尔值(boolean)

区别于python，true和false都是小写。

空字符串、0、null、undefined、NaN都是false。

null和undefined的区别：

• null表示值为空，一般在需要指定或清空一个变量时才会使用。
• undefined表示变量的值是空的，表示只声明了变量，但没有赋值。

5.4 对象

JavaScript中所有的事物都是对象：字符串、数组、函数…JavaScript允许自定义对象。对象就是存储属性和方法的容器。

5.5 数组

数组对象的作用是：使用单独的变量名来存储一些列的值。

var arr = [1,2,3,4,5]
arr
// (5) [1, 2, 3, 4, 5]
typeof(arr)
//'object'

常用方法

方法	描述
length	数组大小
push()	尾部追加元素
pop()	获取尾部元素
unshift()	头部插入元素
shift()	头部移除元素
slice()	切片
reverse()	反转
join()	将数组元素拼接成字符串
concat()	拼接
sort()	排序
forEAch()	将数组的每个元素传递给回调函数
splice()	删除元素，并添加元素
map	返回一个数组元素调用函数处理后的值的新数组

forEach():

map()

splice()

六 运算符

6.1 算数运算符

x++是先赋值在自增，而++x是先自增在赋值

6.2 比较运算符

== 是弱等于，===是强等于

6.3 逻辑运算符

&& 和 ，|| 或， ！非

七 流程控制

7.1 if判断

var a = 10;
if (a > 0){console.log('大于0')
}else{console.log('小于0')
}

var a = 10;
if (a > 5){console.log("a > 5");
}else if (a < 5) {console.log("a < 5");
}else {console.log("a = 5");
}

7.2 for循环

for (var i=0;i<10;i++){console.log(i);
}

7.3 while循环

var i = 0;
while (i < 10) {console.log(i);i++;
}

八 函数

8.1 函数定义

// 普通函数定义
function f1 () {console.log('Hello World!');
}// 有参函数定义
function f2 (x,y) {console.log(arguments);  //内置对象console.log(arguments.length);console.log(x,y);
}//带返回值函数
function sum(a, b) {return a + b;
}sum(1,2)  // 调用函数// 匿名函数
var sum = function(a, b){return a + b;
}

补充：箭头函数

var f = v => v;
// 等同于
var f = function(v){return v;
}

8.2 函数中的arguments参数

function add(a,b){console.log(a+b);console.log(arguments.length);console.log(arguments[0]);//arguments相当于将出传入的参数全部包含，这里取得就是第一个元素1
}

8.3 函数的全局变量和局部变量

• 局部变量：在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
• 全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
• 变量生存周期：JavaScript变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
• 作用域：首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。与python作用域关系查找一模一样！

九 内置对象和方法

创建对象

var person=new Object();
person.name = 'jasper';
person.age = 18;

9.1 Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完整年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

9.2 JSON对象

var dict = {"name":"jasper","age":18}// 将对象转换成json格式
var jsonStr = JSON.stringfy(dict);//将json格式字符串转成对象
var obj = JSON.parse(jsonstr);

9.3 RegExp对象

// 定义正则表达式两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;// 正则校验数据
reg1.test('jasper')
reg2.test('jasper')

9.3 Math对象

abs(x)      返回数的绝对值。
exp(x)      返回 e 的指数。
floor(x)    对数进行下舍入。
log(x)      返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)      返回数的正弦。
sqrt(x)     返回数的平方根。
tan(x)      返回角的正切。