ECMAscript6介绍
ECMA是一个浏览器脚本标准制定的公司，Netscape 创造了 JavaScript 由于商标原因，
后面ECMA公司取名ECMAscript 1 发布，JavaScript 也就是 ECMAscript.到现在最新的版本是6，简称es6.
新增let 与const
let 与const 除了都是快作用域 { } const不同的是声明必须赋值且不能更改。
模版字符串``
var a="AAAAAA";
var str=`<div>${a}${a}</div>`;
document.querySelector("#div_1").innerHTML=str;
扩展运算符 …keys,接收参数
function fun1(obj,...keys){
alert(keys[0]);//a
}
fun1({"name":"php"},"a","b","c")
//数组扩展运算法
var arrs=[1,5,4,9,5,3];
//找出数组中最大值
alert(Math.max(...arrs));
箭头函数
var fun1=(a)=>a*10;
var fun2=(a,b)=>a*b;
var fun3=(a,b)=>{return a*b};
alert(fun3(10,30))
document.querySelector("#div_1").innerHTML=fun1(10);
数组的扩展
Array.from();
1.将方法的参数转为数组
function aa(...keys){ console.log(Array.from(keys))} aa(1,2,"qqq") //[1,2,"qqq"]
2.对数组进行遍历处理
console.log(Array.from([1, 2, 3], (x) => x + x));
// Expected output: Array [2, 4, 6]
3.将字符串转为数组
console.log(Array.from('foo'));
// Expected output: Array ["f", "o", "o"]
4.操作DOM
let ps = document.querySelectorAll('p');//获取所有P元素
Array.from(ps).filter(p => {//转成数组后，查找>100的元素
return p.textContent.length > 100;
});
Array.of() 生成一个新数组，不考虑里面的类型
let a=Array.of('丽丽','北京',123);
console.log(a);//["丽丽", "北京", 123]
object.assign() 将多个对象合并为一个对象
Object.assign({"name":"php"},{"age":20})//{name: 'php', age: 20}
object.is()严格比较 === 比较值还比较类型
Object.is(1,1)//true
Object.is(1,"1")//false
Object.is(NaN,NaN)//true, ===就为false
Set()与Map() 两种新的数据结构
Set() 不能有重复值
var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
// 去除数组的重复成员
[...new Set(array)]
Map（）键值对的数组，key可以是任意类型
var m = new Map();
var o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
symbol 新增的数据类型
表示独一无二的值，内部的指针地址，不一样 object.is()都会为false
var s1 = Symbol('foo'); var s2 = Symbol('foo'); s1==s2 //false
Promise对象
ES6专门为异步请求封装的一个对象。他有三种状态，Pending（进行中）、Resolved（已完成），Rejected（已失败）
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject，这个参数都是方法，成功时执行resolve(),失败执行reject()
function getJson(url){
var promise = new Promise(function(resolve, reject) {
const xhr= new XMLHttpRequest();//使用原生异步请求，使用promise封装
xhr.open('GET',URL);
xhr.onreadystatechange=handler;
xhr.responseType='json';
xhr.setRequestHeader('Accept','application/json');
//发送请求
xhr.send();//
function handler(){
if (this.readyState==4){
if(this.status==200)
resolve(value);
else
reject(error);
}
}
});
}
//调用
getJson("http://xxxx").then((v)=>{}).catch((v)=>{})
async 与 await ES7中的特性 主要用于异步等待
async 里面会自动转为Promise对象
await 必须在async中使用不能单独使用，可多个await.
async function fun2(){
await let a= axios.post();
a=""//会等待上面的执行完在执行这一行
}
///
async function fun1(){
return await "abc";
}
fun1().then((v)=>{
return v+"d";
}).then((v)=>console.log(v+"e")
).finally(()=>console.log("finally!"))
/// 一般配合异步请求使用，.then((v)=>{})为成功回调，.catch((v)=>{})为失败回调
async function fun1(){ return await new Error("错误le"); }
fun1().then((v)=>console.log(v)).catch((v)=>{console.log(v);})
Class
ES6引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
es5定义类：看上去还是像一个方法
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
es6定义类： 更像正真意义上的类
//定义类
class person{
//constructor构造函数
constructor(name, age) {
this.name = name;
this.age = age;
}
//方法不用加逗号
showname() {
return this.name;
}
}
类的继承
class php extends person {
constructor(name, age,zhiye) {
super(name,age)
this.zhiye= zhiye;
}
//方法不用加逗号
showzhiye() {
return this.zhiye;
}
//可以重写父类的方法
showname() {
return this.name+this.age;
}
}
const obj=new php('php',20,"工程师");
obj.showname2();
obj.showname()
module 模块化
es5中使用一个外部js 必须
export function a(){
console.log('a');
}
export function b(){
console.log('b');
}
//引入
import {a,b} from './text.js'
a() // 'a'
b() // 'b'
统一暴露
function a(){
console.log('a');
}
function b(){
console.log('b');
}
export {a,b}
//引入
import {a,b} from './text.js'
a() // 'a'
b() // 'b'
默认暴露
export default {
a(){
console.log('a');
},
b(){
console.log('b');
}
}
//引入
import qwe from './text.js'
qwe.a() // 'a'
qwe.b() // 'b'
