ES6简介

开发环境搭建

使用babel工具，将一些浏览器不兼容的语法，转化为兼容语法。例如：

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

因此，需要安装babel工具：

npm install --save-dev @babel/core @bable/cli @babel/preset-env

将ES 6 的语法，转换为ES 5。

在项目根目录下创建babel.config.json

{
  "presets": ["@babel/env"]
}

这样，就可以将ES 6+ 句法通过babel命令行，转化为ES 5 语法：

npx babel src/index.js -o dist/index.js

新的声明方式

使用 var 关键词定义变量时，实际上是全局声明。

使用let关键词定义变量时，是块级变量，即局部变量，建议多使用。

使用const关键词，定义不可改变的变量，即常量。

字符串模板

字符串模版的出现让我们再也不用拼接变量了，而且支持在模板里有简单计算操作。

let a=1;
let b=2;
let result=`${a+b}`;
console.log(result);// 3

ES6直接用includes就可以判断字符串中是否包含某个字符串，不再返回索引值，更直接。

let str='test';
let template = 'this is a test string';
console.log(template.includes(str));

数组新特性

快速将json转换为数据

Array.from(xxx)可将json转换成数组：

let  json = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length:3
}

let arr=Array.from(json);
console.log(arr)

把一堆文本或者变量转换成数组

let arr =Array.of(3,4,5,6);
console.log(arr);

for…of 遍历数组

let arr=['a','b','c']

for (let item of arr){
    console.log(item);
}
for (let index of arr.keys()){
    console.log(index);
}
for (let [index,val] of arr.entries()){
    console.log(index+':'+val);
}

变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰。

数组的解构赋值

在解构赋值时，赋值运算符两边的结构应该一致：

let [a, b, c] = [1, 2, 3];
console.log(a, b, c);
// 1 2 3

对象的解构赋值

let { foo, bar } = { foo: 'hello', bar: 'world' };
console.log(foo, bar);
// hello world

对象的key值应该和变量对象中的key值一致，否则会出现undefined，如果变量对象之前已经定义过，需要使用解构复制时，需要使用圆括号进行标注：

let foo;
({foo} ={foo:'hello'});
console.log(foo); //控制台输出hello

字符串的解构赋值

const [d, e, f] = 'hello';
console.log(d, e, f);
// h e l

字符串解构赋值，可以将字符串的单个字符复制到对应的变量中。

扩展运算符和rest运算符

扩展运算符和rest运算符，它们都是…（三个点）。它们可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。当编写一个方法时，我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数:

function test(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);

}
test(1,2,3);//1 2 3 undefined

参考文献

1. https://babel.docschina.org/docs/en/