ES 6 语法小结(1)

151 阅读4分钟

let和const

在块级作用域中,用let声明的变量只在当前作用域中有效,且不会受到外部的影响,所以块级作用域可以替代自执行函数表达式。

理论上,函数在块级作用域中声明行为和let类似,但在es6浏览器环境中,为了兼容老版本,函数声明与var声明变量类似,会提升到全局作用域头部,和当前块级作用域的头部,为了避免差异,可以将函数声明写成函数表达式:

let fn = function () {}; //函数表达式

声明常量必须马上赋值且不能再改变。const和let有类似的特点:在块级作用域内有效,声明不提升,存在暂存死区,不可重复声明。

解构赋值

从数组和对象中提取值,对变量进行赋值,称为解构(destructuring)

数组的解构赋值,按照对应的顺序赋值,如果值数量超出则多余的值被抛弃,如果值不够则为undefined。

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

对象的解构赋值必须要属性名相同,顺序毫无影响。如果属性名不同,需要写成如下形式

let {a: b} = {c: 1}; // b=1

函数参数的解构赋值,传入的参数不是数组或对象,而是变量。

let fn({a=1, b=2} = {}) {return [a,b]}
fn({a:10})  // [10,2]

解构赋值应用:

//交换变量的值
let a = 1, b = 2;
[a,b] = [b, a];

//函数返回多个值
let fn = () => {x: 1, y: 2}

//提取json数据
let {a, b} = obj;

箭头函数

箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替
  • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数

箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。

除了this,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:arguments、super、new.target。

不能用call()、apply()、bind()这些方法去改变this的指向。

默认参数值

JavaScript 中函数的参数默认是undefined。然而,在某些情况下可能需要设置一个不同的默认值。这是默认参数可以帮助的地方。

以前,一般设置默认参数的方法是在函数体测试参数是否为undefined,如果是的话就设置为默认的值。

现在有了默认参数,我们不需要再在函数体内做不必要的检查。可以在函数头将b的默认值置为1:

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5);    // 5

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3));
// expected output: 6

console.log(sum(1, 2, 3, 4));
// expected output: 10

如果函数的最后一个命名参数以...为前缀,则它将成为一个由剩余参数组成的真数组,其中从0(包括)到theArgs.length(排除)的元素由传递给函数的实际参数提供。

剩余参数和 arguments对象之间的区别主要有三个:

剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参。 arguments对象不是一个真正的数组,而剩余参数是真正的 Array实例,也就是说你能够在它上面直接使用所有的数组方法,比如 sort,map,forEach或pop。 arguments对象还有一些附加的属性 (如callee属性)。

剩余参数可以被解构,这意味着他们的数据可以被解包到不同的变量中:

function f(...[a, b, c]) {
  return a + b + c;
}

f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

展开语法

展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

构造字面数组:

var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]

数组拷贝:

var arr = [1, 2, 3];
var arr2 = [...arr]; // like arr.slice()
arr2.push(4); 

// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

连接多个数组:

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];