es6语法

2020-03-03  本文已影响0人  刘松阳

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 取决于他在哪 跟着环境走 根据作用域
  1. 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// 或 只要有一个就完成 网络测速多条线路


  1. 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不能用箭头函数

  1. es7 async/await await 会检测后面是否是异步,不是异步会不停,普通异步不可以
    写法 async function show(){
    await ;
    }
    try catch

9,模块
打包 :压缩包 优点:减少http的请求
编译:一个语言变成另一种语言
Es6 —>编译 babel
cnpm install babel-cli -D
变量提升、预编译
变量预解析 :会把所有变量定义提升到所有的作用域上

打包 browserify

上一篇下一篇

猜你喜欢

热点阅读