geminate

ES6 常用特性

2018/03/02

一. 参数默认值

ES5中我们只能在函数内部设定参数的默认值，写起来比较麻烦，而且一旦当参数赋值了但对应值为false会使用默认值，例如下面的例子中如果fun(123,’‘)中b会被置为ss。

function fun(a, b) {
    a = a || 50;
    b = b || 'ss';
}

ES6中直接写在参数定义的后面即可。

function fun(a = 50, b = 'ss') {
}

需要注意的是参数默认值不是传值的，而是每次都重新计算默认值表达式的值。

let x = 1;

function fun(a = x + 50) {
    console.log(a);
}

x = 2;
fun();// 输出 52

二. 块作用域、let和const

ES6提出的 let 命令有块级作用域、没有声明提升、不可重复声明、有暂时性死区，完全可以取代var且没有副作用。

块级作用域：

for (let i = 0; i < 10; i++) {
}
console.log(i);// Uncaught ReferenceError: i is not defined

无声明提升：

console.log(a);
let a = '123'; // ReferenceError: a is not defined

不可重复声明：

if (true) {
    let a = 'ss';
    let a = 'dd';// Uncaught SyntaxError: Identifier 'a' has already been declared
}

暂时性死区：只要块级作用域内存在 let 命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。

var a = 'ss';
if (true) {
    console.log(a);
    let a = 'kk'; // Uncaught ReferenceError: a is not defined
}

const 命令用来声明 地址常量，有块级作用域、没有声明提升、不可重复声明、有暂时性死区。注意 const 的不可修改是针对地址的，如果声明的是个对象，那么不可变的仅仅是对象地址，对象内部是可变的。

在使用的时候，优先使用const。其声明时必须赋值，可以减小犯错率。

三.解构

数组解构

const [one, two] = [1, 2, 3];
one // 1
two // 2

const [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

const [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

const [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

const [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

const [x, y = 1] = [2];
x // 2
y //1

对象解构

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

对象解构是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

const { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。如果变量和匹配模式相同，则可以简写为一个。

使用注意

如果函数的参数如果是对象的成员，优先使用对象解构赋值。如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。

四. Class

使用ES6的Class代替ES6的prototype操作，使用extends实现继承，比ES5的通过修改原型链实现继承，要清晰和方便很多。

五. 函数

箭头函数。箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

rest参数用于获取函数的多余参数。形式为 …，利用 rest 参数，可以向函数传入任意数目的参数。

function add(...values) {
  let sum = 0;

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

  return sum;
}

add(2, 5, 3) // 10

六.数组

扩展运算符（…）可将一个数组转为用逗号分隔的参数序列。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

七.模块

使用 import 和 export 进行模块的加载与输入。

八. Set

Set 中没有重复的值，可接受数组作为参数，有add、delete、has、clear等方法。

文章导航