写在最前面

写在最前面

2018年7月30日，开始不定期的更新ES6的语法，文章的主要思路来自:

渡一课堂的网上视频课
阮老师的ES6标准入门
GitHub上的开源内容
以及结合自己的项目经验
…(如果后期再有补充在弥补)

好了,不在废话直接正题

ES

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是javascript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

ECMAScript 是 JavaScript语言的国际标准,JavaScript 是 ECMAScript的实现

1.1 let命令

1.1.1 基本用法

ES5的时候只有两种作用域一种是函数作用域一种是全局作用域

比如:

// 函数作用域
function fun () {
    var a = 1;
}
console.log(a);//报错 ReferenceError: a is not defined
// 全局作用域
var arr = [];
for (var i = 0; i < 8; i++){
    arr[i] = function () {
    console.log(i) ;   
    }
};
arr[3]();// 打印出来8
console.log(i);//打印出来8

1.1.2 块级作用域

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

{
    let a = 10;
    var b = 20;
}

console.log(a);//报错ReferenceError: a is not defined
console.log(b);// 20

上面的代码在代码块中分别用了let和var声明了两个变量。然后在代码块的外面调用这两个变量然后let声明的变量报错，var声明的变量返货了正确的结果。所以说，let声明的变量值在其所作在的代码块内有效

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

1.1.3 不存在变量提升

var命令会有’变量提升’现象,即变量可以在声明之前使用,值为undefined。let命令则没有变量提升否则会报错

//var 的情况
console.log(a); // 输出undefined
var a = 2;

// let 的情况
console.log(b); // 报错ReferenceError: b is not defined
let b = 2;

在上面的代码中变量a用var声明会发生变量提升,即在代码执行开始AO/GO就已经存在了,但是值是undefined。变量b用命令let声明就不会发生变量提升，表示在声明它之前变量b是不存在的。所以如果在声明之前用到它，就会抛出一个错误

1.1.4 暂时性死区

只要块级作用域内存在let命令,它所声明的变量就是“绑定”这个区域，不在受外部的影响

var a = 123;
if (true) {
    a  = 'abc'; //报错ReferenceError
    let a;
}

在上面的代码中存在一个全局变量a,但是块级作用域内let又声明的一个局部变量a,导致后者会绑定这个块级作用域,所以在let声明变量前,对a赋值会报错

比较常见的‘死区’

function a (x = y; y = 1) {
    return[x,y]
}
a();//报错
//因为y在还没有声明之前就赋值给了x

//所以要
function b (x = 2, y = x){
    return[x,y]
}
a();//[2,2]


//还有

var c = c;//不报错
let d = d;//报错ReferenceError: d is not defined

暂时性死区的意思就是,只要进入的当前作用域,所要使用的变量就已经存在,但是不能获取,只有等变量变量的那一行代码出现,才可以使用和过去该变量

1.1.5 不允许重复声2明

let 不允许在相同作用域内重复声明同一种变量

//报错
function (){
    var a = 1;
    let a = 12;
}

//报错
function (b){
    let b
}

//不报错
function (c) {
    {
        let c
    }
}

1.2 const

const 于 let 的共同点不在下面叙述暂时性死区、不能重复声明。

const 是用来常量声明的


const a;

a = 10;

// 报错 Uncaught SyntaxError: missing initialization in const declaration

const 不能只声明不赋值。


const a = 20;

a = 10;

// 报错 // TypeError: Assignment to constant variable.

const 改变常量的值会报错。


const a = 20;

a = 10;

// 报错 // TypeError: Assignment to constant variable.

const 存储常量的空间里面的值不能发生改变


const a = {};

a.push(20);

a = {};
// TypeError: "a" is read-only

常量 a 储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把 a 指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

同理数组也是一样


const a = [];

a.push(20);

a = [];
// TypeError: "a" is read-only

扩展运算符

扩展运算符具备两个功能，一个 spreed 展开功能 & rest 收集功能。ES6可以处理数组，ES7能处理对象。

扩展运算符的使用

function sum(...arg){
    console.log(arg); // 输出 [5,2,7,1,3,8]
}
sum(5,2,7,1,3,8);

function sum(a,b,...arg){
    console.log(a,b) // 输出5,2
    console.log(arg); // 输出 [7,1,3,8]
}
sum(5,2,7,1,3,8);

function sum(a,...arg,b){
    console.log(arg); // 报错: 扩展运算符的参数必须是最后一个
}
sum(5,2,7,1,3,8);

let a = [1,2,3,4,5];
let b = [6,7,8,9];
let c = [...a,...b]; // 可以拼接数组

我们先写一个 ES5 中不定参的例子，下面的例子中，sum 函数在被调用的过程中传的参数是不固定的

function sum (){

}
sum(1,2,3);
sum(1,2,3,4,5)

这种在 ES5 中遇到这种问题我们一般会用 arguments 去解决，

function sum (){
    let sumNumber = 0;
    for (let i = 0; i < arguments.length; i++){
        sumNumber += arguments[i];
    };
    return sumNumber;
}
sum(1,2,3);
sum(1,2,3,4,5)

这么写看上去还好，但是如果你要在函数中写排序和出去最大值最小值。

function sum (){
    let sumNumber = 0;
    let arg = [].slice.call(arguments);
    arg.sort();
    arg.pop();
    agr.shift()
    for (let i = 0; i < agr.length; i++){
        sumNumber += arguments[i];
    };
    return sumNumber;
}
sum(5,2,7,1,3,8);

代码没有问题，但是比较麻烦，如果用扩展运算符

function sum(...arg){
    let sumNumber = 0;
    // 因为本身 arg 就是数组所以不用在转成数组
    arg.sort();
    arg.pop();
    agr.shift()
    arg.forEach(function(ele){
        sumNumber += ele
    })
    console.log(sumNumber);
}
sum(5,2,7,1,3,8);

ES7 中的的扩展运算符

ES7 扩展运算符处理对象

let company = {
    name: 'chengcheng',
    age: 18
}

let b = {
    c:{
        name: 'haha',
        age: 50
    },
    d: 30
}

let obj = {
    ...company,
    ...b
}

完成了一个浅克隆。

可以用通过 ES6 新增的方法 assign 去实现一个深克隆 Object.assign(target, ...sources)

澄澄澄写的JavaScript

ES6 1 let&const&扩展运算符