ECMAScript（ECMA,ES）标准
JavaScript是ECMA中的一种
ES6新语法
es6支持IE9以上浏览器
1，变量/赋值
var ----------------可以重复定义，不能限制修改，没有块级作用域
let ----------------不能重复定义，变量
const------------- 不能重复定义，常量，唯一定义
结构赋值：
1.左右两边都一样。
2.必须定义和赋值同步完成。
let a=[1,3,4]=[a,b,c]
let {a,b,c}={a:1,b:2,c:8}
//粒度
let [a,b,c]=[1,{a:{n1:1,n2:2},b:2,c:3},3]
console.log(a,b,c)
//答案
a=1
b={a:{n1:1,n2:2},b:2,c:3}
c=3
2.函数
1.箭头函数（简写函数）//不能带名字
function ( 参数1，参数2 ){ 函数体；} = ( 参数1，参数2 ) => { 函数体； }
//列如 window.onload=()=>{ alert( 'abc' ) }
1.如果有且只有一个参数，()可以省略
let show = function (a) { returm a*3; };
let show = a => a*3;
2.如果函数里只有一句话，而且是return和{}可以一起省略
let a=[1,2,3,4,5,6]
a.sort( ( n1, n2 )=>{ return n1 - n2; } );
a.sort( ( n1, n2 )=> n1 - n2 );
//*关于this
2.默认参数
function show ( a, b, c ){
b=b||5;
c=c||12;
console.log(a,b,c)
}
show(12,37)
//答案 12 37 12
//默认参数
function show ( a, b=5, c=12 ){
console.log(a,b,c)
}
show(12,37)
//答案 12,37,12
3.参数展开/数组展开
// ... 剩余列表必须在参数最后面，不然会报错！！ //
function show ( a, b,...args ){
console.log(a,b,args )
}
show(12,37,88,99,123)
//答案 12,37,array[88,99,123]
... 既可以展开 也可以压缩
1.接受剩余的参数
2.展开一个数组
let arr=[1,2,3,4]
//...arr => 1,2,3,4
let arr2=[1,2,3,...arr,31,23,12,1]
//答案1,2,3,1,2,3,4,31,23,12,1
let arr3=[...arr,...arr2]
//答案1,2,3,4，1,2,3,1,2,3,4,31,23,12,1
3，数组/json
数组-5种变化
map //映射 ：一个对一个
//求及格
[100,2,3,4,5,,95] => [true,false,false,false，true]
let arr=[100,2,3,4,5,,95]
let arr2=arr.map(item=> item>=60 );
reduce //减少，和map相反，汇总
//求平均值
let arr=[100,2,3,4,5,,95]
//tmp 表示中间值 第一个值加第二个值得和
arr.reduce(tmp,item,index)=>{
console.log(tmp,item,index)
return tmp+item；
//102,5,1
})
filter //过滤筛选
//求奇数
let arr=[100,2,3,4,5,,95]
let arr2=arr.filter(item=>item%2)
alert(arr2)
forEach //遍历
//求和
let arr=[100,2,3,4,5,,95]
let sum=0
arr.forEach(item=>sum+=item);
from //把类似数组转变成真正的数组
array-from([array-like]=>[x,x,x])
json-2种变化
1.简写，名字和值一样可也省。
let json={a:a,b:b} => {a,b}
2.function可也不写
let json={a:12,b:5, show:function(){ alert(this.a=this.b)} }json.show()
let json={a:12,b:5, show(){ alert(this.a=this.b)} }json.show()
4，字符串
1.字符串模板： `` 1，可也植入变量 ，2 可也随意换行
let json={a:'123a',b:'asd1}
console.log('AA'+json.a+'sss'+josn.b) => console.log(`AA：$(json.a),sss$(json.b)`)
startsWith :判断以什么什么开头
if(data.startsWith ('135')){
alert('移动')
}else{
alert('联通')
}
endsWith:可以判断什么东西结尾
if(data.endsWith('.txt')){
alert('文本文件')
}else{
alert('图片')
}
5，面向对象
class 定义一个类 extends 继承 constructor构造器 super 继承父类
class woeker extends Person{
constructor(name,age,obj){
super(name,age)
this.name=name;
this.age=age;
this.obj=obj;
}
showJob(){
alert(`我是做$(this.obj)`)
}
showName(){
alert(`我是做$(this.name)`)
}
showAge(){
alert(`我$(this.age)岁`)
}
}
let p=new woeker ('刘松阳',19,'打杂')
p.showName()
p.showAge()
p.showobj()
箭头this，bind
bind给一个函数绑定死一个this
普通this 根据调用的函数 谁调用我我调用谁
箭头this 取决于他在哪 跟着环境走 根据作用域
- promise:可以把异步操作同步化 解决异步操作 同步的方式写异步 （请求数据） 有局限性 带逻辑的异步操作比较麻烦
同步：串行 简单方便
异步：并发 性能高 可以同时进行多部分操作 用户体验好
//resolve:成功
//reject：失败
//then（(成功)=>{},(失败)=>{}）:然后
let p =new Promise((resolve,reject)=>{
$.ajax({
url:'/',
dataType:'json',
success:(json){
resolve(json)，
},error(err){
reject(err)，
}
})
})
p.then((json=>{
alert('成功')
},err=>{
alert('失败')
}))
//all 与 获取全部
let p = new Promise((reslove,reject)=>{})
let p1 = new Promise((reslove,reject)=>{})
let p2 = new Promise((reslove,reject)=>{})
Promise.all([p,p1,p2]).then(arr=>{ //arr是一个数组
alert('成功')
let [a,w,e]=arr
},err=>{
alert('失败')
})
用法 new Promise（（resolve,reject）=>{
resolve()
reject()
}）
race// 或 只要有一个就完成 网络测速多条线路
- generator：生成器函数 可以把一个函数才分若干小块分多次执行 可以暂停
//坐飞机 和做 出租车的区别
//yield 暂时放弃当前函数的执行
1可以传参 只能传一个
2 可以返回值
//next 下一步
写法 function *show(){}
与普通函数的不同 不会直接执行函数体里面的东西 会赋返回一个generator对象 有了这个对象之后 可以拿着这个对象执行 优点
function *show(){
alert('aaa');
yield;
alert('bb')
}
let gen=show()
let.next() // aaa yield上面的代码
let.next() // bbb yield下面的代码
generator和Promeis配合使用
1外来runner不同意，不标准性能低，
2generator不能用箭头函数
- es7 async/await await 会检测后面是否是异步，不是异步会不停，普通异步不可以
写法 async function show(){
await ；
}
try catch
9，模块
打包 ：压缩包 优点：减少http的请求
编译:一个语言变成另一种语言
Es6 —>编译 babel
cnpm install babel-cli -D
变量提升、预编译
变量预解析 ：会把所有变量定义提升到所有的作用域上
网友评论