全网最全ES6新特性

ES6新特性 1. ES6

• ES6是ECMAscript6的简称，是Javascript的下一代标准，于2015年6月正式发布。目标是使Javascript可以用于编写复杂的大型应用程序，成为企业级开发语言。

2. ECMAscript6 2.1 let和const

• let

• let所声明的变量，只在let命令所在的代码块中生效

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

• const：声明的变量是常量，不能被修改，类似于Java中的final关键字

2.2 字符串扩展

• includes()：返回布尔值，表示是否找到了参数字符串
• startWith()：返回布尔值，表示参数字符串是否在原字符串的头部
• endWith()：返回布尔值，表示参数字符串是否在原字符串的尾部

let str = "hello ReactJS";
console.log(str,"中是否包含ReactJS",str.includes("ReactJS"));
console.log(str,"是否以h开头",str.startsWith("h"));
console.log(str,"是否以actJS结尾",str.endsWith("actJS"));

• 字符串模板：在两个``之间的部分都会被作为字符串的值，可以进行任意换行

let str = `c
y
l`;

2.3 解构表达式

• ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，称之为解构
• 1.数组

let arr = [1,2,3];
const [x,y,z] = arr;//x,y,z与arr中的每个位置对应来取值

• 2.对象

    const person = {
    name:"cyl",
    age:22,
    language: ['java','go','javascript','HTML']
};
const {name:n,age:a,language:l} = person;
console.log(n,a,l);

2.4 函数优化

function add(a,b) {
    //判断b是否为空，为空就给默认值1
    b = b || 1;
    return a + b;
}
function add(a,b = 1) {
    return a + b;
}

2.5 箭头函数

var print = function (obj) {
    console.log(obj);
}
var print = obj => console.log(obj);
var sum = function (a,b) {
    return a + b; 
}
var sum = (a,b) => a+b;
//无参函数
let sayHello = () => console.log("hello");

2.6 对象函数属性简写

let person = {
    name: "cyl",
    //以前：
    eat: function (food) {
        console.log(this.name + "在吃" + food);
    },
    //现在：这里拿不到this
    eat: food => console.log(person.anme + "在吃" +food),
    eat(food){
        console.log(this.name + "在吃" + food);
    }
}
//箭头函数结合解构表达式
//以前：
const person = {
    name: "cyl",
    age: 22,
    language: ['java','HTML','javascript']
}
function hello(person) {
    console.log("hello", + person.name);
}
//现在：
var hello = ({name}) => console.log("hello", + name);
hello(person);

2.7 map()和reduce()

• map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回

let arr = ['1','2','-1','3'];
//在map方法中传入方法(将字符串解析为int)
//s => parseInt(s)是一个回调函数
let newArr = arr.map(s => parseInt(s));
console.log(newArr);

• reduce()：接收一个函数，该函数接收两个参数
• 第一个是上一次reduce处理的结果
• 第二个参数是数组中要处理的下一个元素

const arr = [1,20,-5,3];
let result = arr.reduce((a,b) => {
    return a + b;
},1);

2.8 扩展运算符

function add(x,y) {
    return x + y;
}
var numbers = [1,2];
//将数组展开，作为参数传递到函数中
console.log(add(...numbers));
//数组合并
let arr = [...[1,2,3],...[4,5]];
console.log(arr);
//与解构表达式结合
const [first, ...rest] = [1,2,3,4];
console.log(first,rest);//1 [2, 3, 4]
//将字符串转换为数组
console.log([...'hello']);//['h', 'e', 'l', 'l', 'o']

2.9 Promise

• 即一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果
• 从语法上讲，Promise是一个对象，从它可以获取异步操作的消息
• 通过promise的构造函数来创建promise对象，并在内部封装一个异步执行结果
• 如果要等待异步执行完成之后做一些事情，可通过then方法实现
• 如果要处理promise异步执行失败的事件，可以跟上catch

const p = new Promise((resolve, reject) => {
    //异步的操作，通常是ajax操作
    //使用setTimeout()模拟异步操作
    setTimeout(() => {
        //异步操作(模拟)
        let num = Math.random();
        if (num < 0.5) {
            //代表成功
            resolve("succeed" + num);
        }else{
            //代表失败
            reject("fail" + num);
        }
    });
});
p.then(value => {
    console.log(value);
}).catch(reason => {
    console.log(reason);
});

2.10 set和map数据结构

• set集合无序且不可重复
• Java中，而js中是集合

const map = new Map([
    ['c1','c'],
    ['c2','y']
]);
map.set("c3","l");
console.log(map.get("c3"));
map.forEach((key,value) => {
    console.log(key,value);
})

• map.values() 获取value的迭代器
• map.keys() 获取key的迭代器
• map.entries() 获取entry的迭代器

//通过扩展运算符进行展开
console.log(...map.entries());

2.11 class基本用法

    class User {
        constructor(name,age = 22) {
            this.name = name;
            this.age = age;
        }
        sayHello() {
            return "hello, " + this.name;
        }
        //静态函数
        static isAdult(age) {
            if (age >= 18) {return "adult"}
            return "too young,too simple!"
        }
    }
    class c1 extends User {
        constructor() {
            super("c1",21);
        }
        test() {
            return "test" + this.name;
        }
    }
    let user = new User("cyl");
    console.log(user);
    console.log(user.sayHello());
    //静态方法的使用
    console.log(User.isAdult(user.age));
    let c = new c1();
    console.log(c);
    console.log(c.sayHello());
    console.log(c1.isAdult());

2.12 Generator函数

• 是ES6提供的一种异步编程解决方案
• function命令与函数名之间有一个星号
• 函数体内部使用yield语句定义不同的内部状态
• 每调用一次next方法返回一个对象，该对象包含了value值和done状态
• 直到执行return或函数执行完毕时，返回状态true表示执行结束

    function* hello() {
        yield "a1";
        yield "a2";
        yield "a3";
        return "a4";
    }
    let h = hello();
    console.log(h.next());
    console.log(h.next());
    console.log(h.next());
    console.log(h.next());
    //{value: 'a1', done: false}
    //{value: 'a2', done: false}
    //{value: 'a3', done: false}
    //{value: 'a4', done: true}
    for (let c of h) {
        console.log(c);
    }

2.13 转码器

• Babel是一个广为使用的ES6转码器，可将ES6代码转换为ES5代码，从而在浏览器或其他环境运行
• 谷歌出品的Traceur转码器也可实现转码
• 阿里开源企业级react框架————UmiJS

UmiJS

• 可插拔的企业级react应用框架
• 插件化：由大量插件组成
• 开箱即用：仅需一个umi依赖即可启动
• 约定式路由：类next.js的约定式路由，支持权限，动态路由，嵌套路由等

安装部署

• 1.安装node.js(小鹿的版本是v16.3.0)，通过node -v命令检测
• 2.安装yarn(小鹿的版本是1.22.17)，通过tyarn -v命令检测
• 3.安装umi tyarn global add umi，通过umi命令进行测试
• 在第三个步骤会遇到umi不是内部命令，只需配置yarn的全路径即可
• 4.初始化：tyarn init -y，通过初始化命令生成package.json文件，它是Node.js约定用来存放项目，配置的文件

2.14 修饰器(Decorator)

• 修饰器是一个用来修改类行为的函数
• 类似于Java中的注解

@T //通过@符号引用该方法，类似于Java中的注解
class User {
    constructor(name,age = 22) {
        this.name = name;
        this.age = age;
    }
}
function T(target) {//定义一个普通方法
    //target对象为修饰的目标对象，这里指目标对象
    console.log(target);
    //为User类添加一个静态属性country
    target.country = "China";
}
console.log(User.country);
// 会报如下错误：
// Uncaught SyntaxError: Invalid or unexpected token

• 因为ES6中不支持该用法，ES2017中才有，所以不能够直接运行
• 需要进行转码后才能运行，即将ES6或ES2017转为ES5执行

2.15 模块化

• 即把代码进行拆分，方便重复利用，类似于Java中的导包
• js中没有包的概念，称为模块
• 模块功能主要由两个命令构成：export和import

1.export:用于规定模块的对外接口
2.import:用于导入其他模块的功能