ES6
Posted kk12138
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6相关的知识，希望对你有一定的参考价值。
一.定义：ECMAScript6(第六个版本)
javascript组成部分——ECMAScript DOM BOM
二.什么是ECMA？
ECMA师是标准，js是实现者；
类似是标准，浏览器也是标准
三.
1.es6中的let & const
（1）.回顾var（变量声明）
变量声明提升，可重复定义，全局变量挂在到window
（2）.回顾作用域（变量生命周期）
全局作用域 函数作用域
（3）.代码迁移需要注意:
能用const用const，不能再用let
（4）.let(块级变量声明)
没有变量声明提升，不能重复定义，不挂载到window
声明的变量和配合产生块级作用域——声明在花括号内部的变量无法在外部使用
产生临时死区（Temporal Dead Zone）
const A = 100;
{ //临时死区
// console.log(A);
const A = 200;
}
let num = 200;
{
console.log(num);
let num = 100;
}
解决必包问题（es6引入的规范）
2.spree & rest 收集与展开
...展开&收集符：（超引用）
（1）此运算符在不同地方是用有不同的功效，可以从度和写两个角度考虑
写：function test（...arg）{};test(1,2,3) 收集作用
//计算n个数的平均值
function fun(...arg){
console.log(arguments)
let sum=0;
arg.forEach(function(ele){
sum+=ele;
})
return sum /arg.length;
}
console.log(fun(97,99,94,93,92,87,120,100))
//去掉最高分和最低分
function fun1(...abc){
console.log(abc);
abc.sort(function(a,b){
return a-b;
})
abc.pop();
abc.shift();
console.log(abc);
return fun.apply(this,abc);
// return fun(...abc);
}
读：var arg =[1,2,3]; console.log(...arg) 展开作用
let arr=[1,2,3];
let arr1=[4,5,6];
let arr2=[...arr,...arr1];
console.log(arr2);
作用：简化书写长度，提升开发效率
（2）.ES6/ES7
ES6可以处理数组，ES7可以处理对象
（3）.Object.assign()
let obj1={
name : ‘jack‘,
age:18,
play:"wan"
}
console.log(Object.assign({},obj1）);
完成一个深层克隆：
var obj={
a:1,
b:2,
c:3,
d:4
}
var obj1=obj;//属于一个浅层克隆
var obj3=JSON.parse( JSON.stringify(obj) )
obj.a="测试浅层克隆与深层克隆"
console.log(obj);//原对象
console.log(obj1);//浅层克隆浅层克隆，跟jquery中的$.extend相同
console.log(obj3);//深层克隆
3.desructuring
解构（结构化赋值）：
解构过程中，具备赋值和变量声明两种功能
// 解构一个对象
// let obj = {
// name : "jack",
// // age : 18,
// sex : "nan",
// abc : "123"
// }
// let name,age;
// ({name,age} = obj );
// let {name,age,sex} = obj;
// let {name:oName,age:oAge=30,sex,abc="bcd"} = obj;
// console.log(oName,oAge,sex,abc)
// function sum(a = 10,b = 20){
// return a+b;
// }
// console.log(sum(1,6))
作用：简化书写长度，提升开发效率
默认参数：let{ name，age=“man” }=obj；
4.箭头函数
作用：函数目的指向性更强，可读性更高，简化代码，提升开发效率
特点：
（1）.不用写function关键字
（2）.只能作为函数使用，不能new ，没有原型
（3）.参数不能重复命名
（4）.返回值可以不写return
（5）.内部arguments this 由定义是最接近一层的非箭头函数的arguments和this决定值
//函数声明
function sub(a,b){
return a-b;
};
//函数表达式
var sub = function(a,b){
return a-b;
}
//箭头函数写法
let sub = (a,b) => {
return a-b;
}
let sub = (a,b) => a-b;
function mul(l){
return function(y){
return function(x){
return l*y*x}
}
}
es6:
let mul=l=>y=>z=>l*y*z;
console.log(mul(1)(2)(3))
5.ES6常见的一些语法
1.map对象
（1）.var map =new Map();
（2）.map对象的增删改查
1——set——将数据存储到map中去
语法：map.set("a","1")=>属性名+属性值
//添加新数据
map.set("1","na men hao");
map.set("2","hello world");
map.set("3","how are you")
console.log(map);
2——get——获取到map中的数据
语法：map.get("a")=>属性名
//获取数据
map.get("1");
console.log(map.get("1"));
3——delete——删除map中的数据
语法：map.delete("a")=>获取到删除的属性名
//删除数据
map.delete("2");
console.log(map);
2.循环（for of）——不能循环对象 可以遍历数组（但主要用来循环map对象的）
（1）for of=>用于map的循环
（2）循环
循环属性名和属性值，并用逗号隔开
//输出对应的属性名与属性值，并用逗号隔开
for(var name of map){
console.log(name);
}
循环输出属性值
//循环输出的属性值
for(var val of map.values()){
console.log(val);
}
用数组的形式循环输出
//用数组将属性名与属性值包起来；
for(var index of map.entries()){
console.log(index);
}
循环输出属性名与属性值
//循环输出属性值与属性名
for(var [key,value] of map.entries()){
console.log(key,value)
}
3.
（1）es6类
class Person{
constructor(name,age,sex){（构造函数）
this.name=name;
this.age=age;
this.age=age;
}
}
（2）.类的继承
var bul=new People("rose","18","女")；
class Person estends Person();
var p1=new Person("jack","21","男")；
继承属性
class Woman{
constructor(name,age){
this.age=age;
this.name=name;
}
}
class Man extends Woman{
constructor(name ,sex, age){
super(name ,age);————（继承中必须加上super）
this.sex=sex;
}
}
4.promise（Promise对象是一个构造函数）
new Promise(function(resolve,reject){
if(成功){——条件判定
resolve(成功的数据)——成功时运行的数据
}else{
reject(失败的原因)
}
})
（promise共有3种状态：
（1）：pending 等待的状态
（2）：resolve 成功的状态
（3）：reject 失败的状态
）
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
(1).then方法（Promise实例生成后，可以用then方法分别指定resolved状态和reject状态
//then调用以后返回一个promise对象
var promise =new Promise(function(resolve,reject){
resolve(a);
reject(b);
})
promise.then(function(value) {
// success
}, function(error) {
// failure
});
(2).ajax与promise的结合使用
运行的环境：在服务器中运行。通过xampp实现
(3).promise.all()——所有的promise对象是成功，才能走成功
var pr1 = new Promise(function(resolve,reject){
resolve(‘通过测试‘);
})
var pr2 = new Promise(function(resolve,reject){
reject;
})
var pr3 = Promise.resolve(‘通过测试‘);
var pr4 = Promise.reject("未通过测试");
Promise.all([pr1,pr3]).then(function(data){（全部成功；都通过测试）
console.log(‘全部resolve‘) ——输出
},function(err){
console.log(‘至少一个reject‘)
})
(4).promise.race()
.race()
var p1 = new Promise(function (resolve,reject){
setTimeout(resolve,50,‘p1_second‘);
})
var p2 = new Promise(function (resolve,reject){
setTimeout(resolve,100,‘p2_frist‘);
})
Promise.race([p1,p2]).then(function(data){
console.log(data);（50的速度快，最终输出“p1_second”）
})
（5）.catch（）——用于指定发生错误时的回调函数.
var pr=new Promise(function(reslove,reject){
resolve("通过")
})
pr.then (function(data){
console.log(data);
throw "出现错误"
}).catch（function（err）{
console.log（err）
}）
以上是关于ES6的主要内容，如果未能解决你的问题，请参考以下文章