es6的新特性分析

1.字符串扩展

includes()：返回布尔值，表示是否找到了参数字符串。

var str ='hello.vue';str.inclides('v');//返回true

startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。

var str='hello.vue';str.startsWith('hello');//返回true

endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

var str ='hello.vue';str.endswith('vue');//true

2.解构表达式

数组解构

let arr = [1,2,3]const [x,y,z] = arr;// x，y，z将与arr中的每个位置对应来取值// 然后打印console.log(x,y,z);//1 2 3

对象解构

const person = { name:"jack", age:21, language: ['java','js','css']}// 解构表达式获取值const {name,age,language} = person;// 打印console.log(name); //jackconsole.log(age); //21console.log(language);['java','js','css']

3.函数优化

函数参数默认值

function add(a , b = 1) { return a + b;}// 传递一个参数console.log(add(10));//11

箭头函数

var sum3 = (a,b) => { return a + b;}

对象的函数属性简写

let person = { name: "jack", // 以前： eat: function (food) { console.log(this.name + "在吃" + food); }, // 箭头函数版： eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this // 简写版： eat3(food){ console.log(this.name + "在吃" + food); }}

箭头函数结合解构表达式

const person = { name:"jack", age:21, language: ['java','js','css']}var hi = ({name}) => console.log("hello," + name);

4.map和reduce

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

reduce()：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：

const arr = [1,20,5,30];//未给初始值arrnum.reduce((a,b)=>a+b);//输出所有数的和，56，arrnum.reduce((a,b)=>a*b);//输出所有输的乘积，3000,//给一个初始值arrnum.reduce((a,b)=>a+b,5);//输出所有数的和，61，arrnum.reduce((a,b)=>a*b,-1);////输出所有输的乘积，-3000,

5.promise

const promise = new Promise(function(resolve, reject) { // ... 执行异步操作 if (/* 异步操作成功 */){ resolve(value);// 调用resolve，代表Promise将返回成功的结果 } else { reject(error);// 调用reject，代表Promise会返回失败结果 }});# 如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现,语法：# 如果想要处理promise异步执行失败的事件，还可以跟上catch：promise.then(function(value){ // 异步执行成功后的回调}).catch(function(error){ // 异步执行失败后的回调})

6.set和map

set

// Set构造函数可以接收一个数组或空let set = new Set();set.add(1);// [1]// 接收数组let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]

set.add(1);// 添加set.clear();// 清空set.delete(2);// 删除指定元素set.has(2); // 判断是否存在set.keys();// 返回所有keyset.values();// 返回所有值set.entries();// 返回键值对集合// 因为set没有键值对，所有其keys、values、entries方法返回值一样的。set.size; // 元素个数。是属性，不是方法。

map

7.模块化

模块功能主要由两个命令构成：export和import。

export命令用于规定模块的对外接口，import命令用于导入其他模块提供的功能。

export

const util = { sum(a,b){ return a + b; }}export util;

export const util = { sum(a,b){ return a + b; }}

export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

var name = "jack"var age = 21export {name,age}

import

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

// 导入utilimport util from 'hello.js'// 调用util中的属性util.sum(1,2)

或者

import {name, age} from 'user.js'console.log(name + " , 今年"+ age +"岁了")