ES6初识

 

初始化项目（npm init -y）（ps:-y是指全部默认）

全局安装Babel-cli（npm install -g babel-cli）

本地安装babel-preset-es2015和babel-cli（npm install --save-dev babel-preset-es2015 babel-cli）

在根目录新建.babelrc文件，内容如下：

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

现在就可以将ES6转换成ES5了，终端打包（babel src/index.js -o dist/index.js）

简化命令：在package.json文件中修改如下内容：

"scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },

新的声明方式：var、let、const

var：全局变量。

var a=2;
{
   var a=3;
}
console.log(a);

输出结果为3。

let：局部变量声明。只在区块内作用，外部不可调用。可以防止数据污染。

var a=2;
{
   let a=3;
}
console.log(a);

输出结果为2。

const：声明常量。声明开始这个变量不再变化。

变量的解构赋值

数组解构赋值：按照位置一一对应给变量赋值

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

等号两边的形式要相同，否则结构将失败。

可以使用默认值：

let [a, b = '默认值'] = ['9'];
console.log(a + b);

输出结果为：9默认值

若有默认值时赋值为undefined，输出为默认值；若有默认值时赋值为null，输出为null。

对象的解构赋值：按照属性名给相同的变量名赋值

let { foo, bar } = { bar: 'bar' , foo:'foo'};
console.log(foo + bar);

输出结果为：foobar

若解构之前就定义了变量，需要在解构的语句外边加一个圆括号，否则会报错。

let foo;
({ foo } = { foo: 'foo' });
console.log(foo);

字符串结构：字符串被转换成一个类数组的对象。

let [a,b,c] = 'car';
console.log(a,b,c);

扩展运算符和rest运算符

对象扩展运算符(...)：应用场景为方法参数不确定时（例1）以及变量赋值而不是引用内存堆栈时（例2）。

//例1
function fun(...arg){
    console.log(arg[0],arg[1],arg[2])
}
fun(1,2);

输出结果为：1，2，undefined

let arr1=['a','b','c'];
let arr2=arr1;
console.log(arr2);
arr2.push('d');
console.log(arr1);

输出结果为：['a','b','c']   ['a','b','c','d']

此时arr1的值被改变了，这是对内存堆栈的引用而不是真正的赋值，可利用对象扩展运算符解决。

let arr1=['a','b','c'];
let arr2=[...arr1];
console.log(arr2);
arr2.push('d');
console.log(arr1);

rest运算符： 

function fun(first, ...arg) {
    console.log(arg.length)
    for (let val of arg) {
        console.log(val)
    }
}
fun(0, 1, 2, 3, 4)

输出结果为：4;1 2 3 4

for...of循环可以避免开拓内存空间按，，增加代码运行效率。

模板字符串

let a = '模板';
let b = `Hello,<br>${a}字符串`;

模板字符串支持运算、html标签、字符串查找（支持中文）、复制字符串。

let e = '我是';
let f = '我是模板字符串';
//判断是否存在
document.write(f.includes(e));
//判断开头是否存在
document.write(f.startsWith(e));
//判断结尾是否存在
document.write(f.endsWith(e));
//复制字符串
document.write('模板'.repeat(3));