前端开发

ECMAScript6为数据类型添加的新方法

ECMAScript6在2015年6月正式发布。它的目标，是是的JavaScript语言可以用来编写复杂的大型应用陈旭，称为企业级开发语言。ECMAScript是JavaScript的规格，后者有时前者的一种实现。

let和const命令

let命令

ES6新增let命令，用来声明变量，用法类似于var。区别为：

  • let所声明的变量，只在let命令所在的代码块内有效。
  • let不存在“变量提升”现象，即其变量的定义是在JavaScript的代码执行阶段。
  • let存在暂时性死区，即又要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。
  • let实际上为JavaScript新增了块级作用域；
    如此便解决了块级局部变量以及for循环中局部变量的问题。解决了如下一个大问题：
1
2
3
4
5
6
7
var a=[];
for(let i=0;i<10;i++){
	a[i]=function(){  
		console.log(i); //i为局部变量，
	}
}
a[5](); //5，每次的i都是一个新的变量

const命令

const用来定义常量，一旦声明，常量的值就不能改变。

  • 严格模式下，重新赋值会报错，常规模式下，赋值无效不报错；
  • const声明时不赋值则不能赋值，常量为undefind。严格模式下，const声明时必须赋值，否则报错；
  • const存在块级作用域。

变量的结构赋值

只要等号两边的模式相同，左边的变量就会被赋予对应的值。可以用于交换变量的值、从函数返回多个值、函数参数定义、解析jsondata等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var [foo,[[bar],baz]] = [1,[[2],3]]; 
bar //2

var [a,b] = [1]; //a=1,b=undefined
var [a,b] = [1,2,3]; //解构不完全，但可以成功

//设置默认值
var [c=1,d=2,e=3] = [undefined,null,5]; //1,null,5

//用途
[x,y] = [y,x]; //交换变量的值

function example(){ 
	return [1,2,3];
}
var [a,b,c] = example(); //从函数返回多个值

function f([x,y,z]){……}
f([1,2,3]); //函数参数定义

//解析jsondata等

字符串的扩展

String类型主要添加了遍历字符、字符串的头尾判断、字符串重复、字符的有关Unicode表示等。

1
2
3
4
5
6
7
8
9
10
for(let codePoint of 'foo'){
	console.log(codePoint); //分别显示 f o o ，遍历字符
}

var s='Hello world';
s.startWith('Hello'); //true
s.endWith('Hello',5); //true,可以添加第二个参数，表示搜索的位置。
s.includes('Hello'); //true

'hello'.repeat(2); //"hellohello"

数值的扩展

新增了是否为无穷、NaN判断，是否为整数，安全整数，另外，parseInt()、parseFloat()方法也放到了Number对象的下面。Math对象的话则添加了获取整数部分，返回正负值，立方根、对数等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
0b111110111 === 503 // 0b二进制 true
0o767 === 503 // 0o八进制 true

Number.isFinite(0.8); //true 是否为非无穷,检查Infinate特殊值
Number.isNaN(NaN); //true 是否为NaN，检查NaN特殊值

Number.parseInt('12.34'); //12 将全局方法parseInt()、parseFloat()，移植到Number对象上
Number.parseFloat('12.45#'); //12.45

Number.isInteger(3.0); //true 是否为整数，JavaScript中，整数和浮点数使用同样的存储方法，所以3和3.0视为一个值
Number.isSafeInteger(Math(2,53)-1); /true，JavaScript能够精确表示-2^53到-2^53间的整数（不含端点），超过则无法精确表示这个值

Math.trunc(4.1); //4 用于取出一个数的小数部分，返回整数部分
Math.sign(-5); //-1 参数为正数返回+1 其他返回+0、0、+0、-1和NaN
Math.cbrt(2); //1.2599210498948734 返回一个数的立方根

//还有对数方法、关于32位无符号数的方法等

数组的扩展

新增了将类数组转换为数组、将一组值转换为数组的方法，通过find()查找第一个符合条件的数组成员，通过fill填充数组，还可以通过entries()等方法返回键值对数组等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let arrayLike={'0':'a','1':'b','2':'c',length:3};
var arr1 = [].slice.call(arrayLike); //['a','b','c'] ES5的方法
let arr2 = Array.from(arrayLike); //['a','b','c'] ES6的方法
Array.from('abcde'); //['a','b','c','d','e']
Array.from([1, 2, 3], (x) => x * x); //[1,4,9] 接收第二个参数，对每个元素进行处理

Array.of(3,11,8); //[3,11,8] 将一组值，转换为数组，主要目的是弥补数组构造函数Array()的不足

[1,4,-5,10].find((n) => n<0); //-5 用于找出第一个符合条件的数组成员

['a','b','c'].fill(7,1,2); //['a',7,'c'] 第一个参数表示填充值，剩下两个表示填充起始位置和结束位置

//entries() keys() values()用于遍历数组，分别表示遍历键值对、键、值
for(let [index,elem] of ['a','b'].entries()){
	console.log(index,elem);
} //0 "a"   1  "b" 

[1,2,3].includes(2); //true 是否包含给定数值

函数参数的扩展

函数中新增了设置参数默认值、rest参数等功能，并且新增了箭头函数，尾递归优化等，并且可以通过函数的length属性获取其无默认值参数的个数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function Point(x = 0, y = 0) { //设置参数默认值
  this.x = x;
  this.y = y;
}
var p = new Point(5); //p.x=5,p.y=0 

//通常定义了默认值的参数，应该是函数的尾参数，因为输入f(,)这种没有赋值的函数会出错
function f(x,y=1){
	return [x,y];
}
f(2); //[2,1] 这样就可以省略尾部的有默认值的参数

(function(a,b,c=1){}}).length //2 返回没有指定默认值的参数个数

//指定参数是否可以省略
function throwIfMissing() {
  throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}
foo(); //会抛出错误，因为mustBeProvided默认值为抛出错误

//变量数量不定，rest参数。values变量表示一个数组
function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}
add(2, 5, 3) // 10

//箭头函数
var f = v => v*v; //f(2)等于4
var sum = (num1,num2) => num1+num2 //等同于下面
var sum = function (num1,num2){ return num1+num2; }

//尾递归，只保留一个调用记录（严格模式下开启），复杂度O(1)
function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}
factorial(5, 1) // 120

对象的扩展

对象的扩展对象合并、属性遍历、返回对象键值数组等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Object.is(NaN,NaN) //true 只要两个值一样，就相等，不同于===
Object.is("12",12) //false 不进行自动转换类型，不同于==

//对象合并，常用于为对象添加属性和方法以及克隆对象等
var target = { a: 1, b: 1 }; //合并对象，只是浅复制
var source1 = { b: 2, c: 2 };
Object.assign(target, source1); //{ a:1, b: 2, c: 2}将后面的对象都复制到第一个对象

//属性的遍历
for……in //遍历对象自身和继承的可枚举属性
Object.keys(obj)  //返回一个数组，包含对象自身（不含继承的）所有可枚举属性
Object.getOwnPropertyNames(obj)  //返回一个数组，包含对象自身的所有属性（不含Symbol属性，但是包括不可枚举属性）

//返回对象的键值对数组、键数组和值数组
Object.values(obj); //返回obj对象的值数组
Object.keys(obj); //返回obj对象的键数组
Object.entries(obj); //[["a","1"],["b",2]] 返回obj对象的值数组