初步了解ECMAScript 6

Posted 2021-02-10 qingtiao

一、let和const命令

ES6 规定暂时性死区和let、const语句不出现变量提升；如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错；并且不可以在这个区域块外面调用声明的变量

1、let

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

2、const

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

 

上面代码表明改变常量的值会报错。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const foo;
// SyntaxError: Missing initializer in const declaration

 

上面代码表示，对于const来说，只声明不赋值，就会报错。

二、变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

1、数组的解构赋值

按照数组成员顺序进行解构

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

 

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

 

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

注意事项：

（1）、等号左边比等号右边多

let [foo] = [];
let [bar, foo] = [1];

以上两种情况都属于解构不成功，foo的值都会等于undefined。

（2）、等号右边比等号左边多

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

上面两个例子，都属于不完全解构，但是可以成功。

2、对象的解构赋值

对象按照属性名进行解构

解构不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

 

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

3、字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = ‘hello‘;
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

 

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = ‘hello‘;
len // 5

 

三、数组的扩展

1、Array.from（）：将类数组转换成真正的数组

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

下面是一个类似数组的对象，Array.from将它转为真正的数组。

let arrayLike = {
    ‘0‘: ‘a‘,
    ‘1‘: ‘b‘,
    ‘2‘: ‘c‘,
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // [‘a‘, ‘b‘, ‘c‘]

// ES6的写法
let arr2 = Array.from(arrayLike); // [‘a‘, ‘b‘, ‘c‘]

值得提醒的是，扩展运算符（...）也可以将某些数据结构转为数组。

// arguments对象
function foo() {
  const args = [...arguments];
}

 

2、Array.of() ：将一组值转换为数组

Array.of方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

 

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

 

上面代码中，Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于 2 个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。

Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

 

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

四、Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set本身是一个构造函数，用来生成 Set 数据结构。

set必须传一个可以遍历的数据；

可以采用扩展运算符将set数据转成数组；

• add(value)：添加某个值，返回 Set 结构本身。

• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

• size（）：返回类数组长度

s.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

实现数组去重：

var ary = [12,1,2,2,1,12,2];
var c = new Set(ary);
console.log([...c]);//=>[12, 1, 2]

 五、函数扩展

函数的参数可以赋默认值

如果有实参，那么会将默认值覆盖

如果实参是undefined的话，不能改变形参的默认值；

function fn(x=100,y=100) {
console.log(x);
}
fn(undefined,200);

 

可以和解构赋值结合，给形参赋值；

function f({x,y=7}) {
console.log(x);
console.log(y);
}
f({x:100,y:200})

作用域

如果函数形参赋默认值，在函数初始化形参时，就会形成一个单独的作用域；初始化完成之后，作用域会消失；

var x = 1;
function fn(x=y,y=x) {
console.log(x);
console.log(y);
}
fn();

 六、箭头函数

1、箭头函数和普通函数的区别

（1）、形式上

1. 箭头函数没有function这个关键字；并且在形参和{}之间要有箭头；

2.如果形参只有一个，可以省略形参的小括号；

3.如果大括号只有一条语句时，可以省略{}；

4.如果大括号中只有return一条语句时，可以把大括号和return都省略；

5. 如果return出一个对象时，需要在对象的大括号外面加上小括号；

（2）、执行上

1. 箭头函数中没有this；那么如果输出this，就会输出箭头函数定义时所在的作用域中的this；

2. 在箭头函数中，不能使用arguments；

3. 箭头函数不能作为构造函数；

4. 不可以使用yield命令，不能作为Generator函数；