ES6让普通JS开发看不懂的基本语法（快速上手ES6）

我就是我 2022-07-13 05:49 46阅读 0赞

# ES6 #

[详细参考页面][Link 1]

## 简介 ##

*  ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。一般来说，这两个词是可以互换的。

## let命令 ##

*  ES6新增了`let`命令，用来声明变量，它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
      let a = 10;
      var b = 1;
    }
    
    a // ReferenceError: a is not defined.
    b // 1

*  `let`命令避免了循环变量泄露为全局变量

var s = 'hello';
 
 for (var i = 0; i < s.length; i++) {
 console.log(s[i]);
 }
 
 console.log(i); // 5

上面代码中，变量i只用来控制循环，但是循环结束后，它并没有消失，泄露成了全局变量。

## 变量的解构赋值 ##

*  ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
 *  本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
    foo // 1
    bar // 2
    baz // 3
    
    let [ , , third] = ["foo", "bar", "baz"];
    third // "baz"
    
    let [x, , y] = [1, 2, 3];
    x // 1
    y // 3
    
    let [head, ...tail] = [1, 2, 3, 4];
    head // 1
    tail // [2, 3, 4]
    
    let [x, y, ...z] = ['a'];
    x // "a"
    y // undefined
    z // []
    
    var { foo, bar } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
    
    var { bar, foo } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
    
    var { baz } = { foo: "aaa", bar: "bbb" };
    baz // undefined

*  解构赋值允许指定默认值。

var [foo = true] = [];
    foo // true
    
    [x, y = 'b'] = ['a']; // x='a', y='b'
    [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

## 模版字符串 ##

传统的JavaScript语言，输出模板通常是这样写的。

$('#result').append(
 'There are ' + basket.count + ' ' +
 'items in your basket, ' +
 '' + basket.onSale +
 ' are on sale!'
 );

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

$('#result').append(`
 There are ${basket.count} items
 in your basket, ${basket.onSale}
 are on sale!
 `);

模板字符串（template string）是增强版的字符串，用反引号（\`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
    `In JavaScript '\n' is a line-feed.`
    
    // 多行字符串
    `In JavaScript this is
     not legal.`
    
    console.log(`string text line 1
    string text line 2`);
    
    // 字符串中嵌入变量
    var name = "Bob", time = "today";
    `Hello ${name}, how are you ${time}?`

## Number全局对象 ##

ES6将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

## 函数变化 ##

*  ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
      console.log(x, y);
    }
    
    log('Hello') // Hello World
    log('Hello', 'China') // Hello China
    log('Hello', '') // Hello

*  参数默认值可以与解构赋值的默认值，结合起来使用。

function foo({x, y = 5}) {
      console.log(x, y);
    }
    
    foo({}) // undefined, 5
    foo({x: 1}) // 1, 5
    foo({x: 1, y: 2}) // 1, 2
    foo() // TypeError: Cannot read property 'x' of undefined

*  ES6引入rest参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
        
      let sum = 0;
    
      for (var val of values) {
        sum += val;
      }
    
      return sum;
    }
    
    add(2, 5, 3) // 10

*  箭头函数  
    ES6允许使用“箭头”（=>）定义函数。

## 扩展运算符 ##

扩展运算符（spread）是三个点（…）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

function push(array, ...items) {
        
      array.push(...items);
    }
    
    function add(x, y) {
        
      return x + y;
    }
    
    var numbers = [4, 38];
    add(...numbers) // 42

扩展运算符的应用

// ES5
    [1, 2].concat(more)
    // ES6
    [1, 2, ...more]
    
    var arr1 = ['a', 'b'];
    var arr2 = ['c'];
    var arr3 = ['d', 'e'];
    
    // ES5的合并数组
    arr1.concat(arr2, arr3);
    // [ 'a', 'b', 'c', 'd', 'e' ]
    
    // ES6的合并数组
    [...arr1, ...arr2, ...arr3]
    // [ 'a', 'b', 'c', 'd', 'e' ]
    
    // ES5
    a = list[0], rest = list.slice(1)
    // ES6,与解构赋值结合
    [a, ...rest] = list
    
    //函数的返回值
    var dateFields = readDateFields(database);
    var d = new Date(...dateFields);

## 对象 ##

*  ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

var birth = '2000/01/01';
    
    var Person = {
    
      name: '张三',
    
      //等同于birth: birth
      birth,
    
      // 等同于hello: function ()...
      hello() { console.log('我的名字是', this.name); }
    
    };

*  属性名表达式,ES6 允许字面量定义对象时，用方法二（表达式）作为对象的属性名，即把表达式放在方括号内。

let propKey = 'foo';
    
    let obj = {
      [propKey]: true,
      ['a' + 'bc']: 123
    };

[Link 1]: http://es6.ruanyifeng.com/#docs/function