手撕ES6新特性

前言

ES6：ECMAScript 6。

在2009年ES5问世以后，javaScript的标准就一直没有更新。从那时起ES标准委员会就已经开始筹划新的ES标准，在2015年发布了ES6。ES6是ECMAScript 的第6个版本。

ES6现已彻底改变程序员们的编码风格。

一、变量声明的方式

新增了 let 和 const 两个声明方式；

let：声明变量； const：声明常量。

相同点：

识别块级作用域；  不存在变量提升；  不支持重复声明。

不同点：
const声明的同时要赋值；同时const赋值对象的话是可以修改属性名和属性值的（地址不能改）。

// 因为对象存的是地址，而现在我们改的是值
const my_obj = {name: "阮晓锋", age: 22};
my_obj.sex = "男";
console.log(my_obj);                // {name: "阮晓锋", age: 22, sex: "男"}
// 如果改了地址就会报错：
my_obj = {};                        // Uncaught TypeError

二、rest参数

接收剩余实参

// 实参 > 形参
my_fn(1, 2, 3, 4, 5, 6);
function my_fn(v1, v2, ...v3) {
    console.log(v1, v2, v3);            // 1, 2, [3, 4, 5, 6]
}

// 实参 < 形参
my_fn2(1);
function my_fn2(v1, v2, ...v3) {
    console.log(v1, v2, v3);            // 1, undefined, []
}

三、块级作用域{}

for、if、函数等后面都有{}，let、const识别块级作用域。

四、参数默认值

function my_fn(num = 1) {
    console.log(num);        // 1
}
my_fn();

五、箭头函数

  1. 只有一个参数一条语句时，返回值不需要return和{}

// 正常函数
function my_fn(v) {
    return v;
}
var fn = my_fn(1);
console.log(fn);                   // 1

// 箭头函数
var fn = v => v;
console.log(fn(1));                // 1

 2. 没有参数或者参数多于一个，要加()

function my_fn(a, b) {
    return a+b;
}
console.log(my_fn(10, 20));        // 30

var my_fn = (a, b) => {
    return a+b;
}
console.log(my_fn(10, 20));        // 30

  3. 函数体多于一条，需要添加{}

// 普通函数
function my_fn(a, b) {
    return sum = a + b;
}
console.log(my_fn(10, 20));        // 30

// 箭头函数
var my_fn = (a, b) => {
    return sum = a + b;
}
console.log(my_fn(10, 20));        // 30

六、模板字符串

`${变量名}`

七、对象属性与方法的简写

var obj = {
    age,	// age:age,
    name,		// names:names,
    play() {}	// play:function() {}
}

八、解构赋值

// 数组的解构赋值
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);                // 1  2  3

// 对象的解构赋值
let my_obj = {name: '阮晓锋', age: 22};
let {name, age} = my_obj;
console.log(name, age);             // 阮晓锋 22

九、扩展运算符...

// 将数组转换为序列
console.log(...["a", "b", "c"];)            // a   b   c    (字符串)

十、promise对象

const promise = new Promise((resolve, reject) => {
     console.log("第一个输出");
     setTimeout(() => {
     console.log("第四个输出");
     resolve("success");
     console.log("第五个输出");
}, 0);
     console.log("第二个输出");
     });
     promise.then((res) => {
         console.log(res);
     });
console.log("第三个输出");

十一、Set结构

Set是一个构造函数，用来生成 Set 的数据结构。类似于数组，但成员的值唯一。

// 数组去重        （因为成员的值唯一）
var arr = [1, 2, 3 ,4, 5, 4, 3, 1, 3, 6, 4, 5];
var s = new Set();
arr.forEach(v=>s.add(v));
console.log(s);                    // {1, 2, 3, 4, 5, 6}
// 复习一下之前的扩展运算符
console.log(...s);                 // 1, 2, 3, 4, 5, 6
console.log([...s]);               // [1, 2, 3, 4, 5, 6]

十二、Map结构

Map是一个构造函数，提供了值 - 值（对象中是 字符串（不是键，键不限于字符串） - 值）

var m = new Map();
var obj = {name: 'zs'};
// 添加键
m.set(obj, "content");
console.log(m);
// 访问键
m.get(obj);
console.log(m);
// 删除键
m.delete(obj);
console.log(m);