ES6

历史

    ECMAScript是96年网景公司把javascript提交给欧洲计算器制作联合会
    版本
        97年 1.0
        98年2.0
        99nian3.0(之前学的js版本)
        2000年4.0被和谐
        09年5.0(很多新特性没有学)
15年es6正式确定

前端框架与语言

        js
        jquery
        angular
        react
        vue
        typescript趋势

let与Const

let局部变量声明

        1.只能在一对{}里面有用
        2.不能重复声明
        3.不会变量提升

const常亮声明

        1.生命必须赋值
        2.赋值不能修改(简单数据类型)
        3.建议变量名 大小

解构

对象

基本
            let(name,age) = (name:"mumu",age:18)
            let(name:foo) = (name:"mumu")
                            foo值就是mumu

剩余值

...rest

默认值

let{name,age,weight=120} = {name:"mumu",age:18}
没有顺序
    变量名必须和对象的键名一致

js数据类型

        int
        Boolean
        Number
        Sring
        null
        undefined
        Array
        Object

数组

基础
            let[a,b] = [12,18];
              //a 12
              //b  18

可以嵌套

        let [a,b,[c,d,e]] = [1,2,[3,4,5]]
                  //c3 d4  e5

可以忽略

        let [a,b] = [1,2,3];
                //a 1  ,b  3

剩余值

        let [a,...rest] = [1,2,3,4,5];
        rest[2,3,4,5]

字符串

    let[a,b,c,d] = "中国加油";
            //a 中
            //b 国

默认值

            let [a,b=20] = [30];
                            //b 20
                        如果解析出来的值是 undefined 那么就会用默认值代替

字符串

空白
        trim() 去掉空白
        trimLeft() 去掉左侧空白
        trimRight() 去掉右侧空白
检测包含
            includes(s) 布尔值解构 查找字符串中是否包含s字符
             startsWitj(s) 是否以s字符串开头
            endsWitj(s) 是否以s字符串结尾
重复
            repeat() 重复字符串n次
填充
             padStart(len,s) 以s字符补齐长度开始
            padEnd(len,s) 以s字符补齐长度结束
模板
            1.符号``
            2.可以在字符串模板里任意换行
            3.单双引号特殊符号不需要转义
            4.添加变量名 ${变量名}
                  var name = "mm";
                   var age = 19;
                  var str = `大家好,我的名字是${name}今年我${age}岁了`

数字

         Number.isInteger  是否是整数
        Number.isNaN() 是否是not a Number
        Number.isFinite 是否是无穷

**运算符号

            2**3 == 2x2x2

Number.parseInt

Number.parseFloat

  转换为整数浮点数

迭代数组

迭代方法

forEach()遍历数组
map()返回一个Array
通过原来的数组映射出新的数据
filter()返回一个Array
  如果遍历时返回的值为true,则最中返回时保留该元素
  如果遍历时返回的值为false,则最中返回过滤该元素
reduce(function(a,b){}) 返回一个Any
    a参数是上一次遍历时的结果,b参数是当前遍历元素
some()返回一个boll
          如果遍历的值有一个返回为true,最终返回结果是true
            如果遍历的值有一个返回为false,最终返回结果是false
every()返回一个boll
            如果遍历的值有一个返回为false,最终返回结果是false
            如果遍历的值有一个返回为true,最终返回结果是true
查找
          find()  查找数组中符合条件的元素
          findIndex()查找数组中符合条件的元素的下标
          flat(n)扁平化数组 n 是扁平的层级
        includes(el)查找数组是否包含el元素
fill(value,start,end)
    填充数组value 填充值,start填充开始位置,end填充的结束位置
copyWithin(start,start,end)
          从数组中拷贝内容替换
          rsart 替换开始的位置 start拷贝开始,end拷贝结束

函数

箭头函数

函数的简写
特点
                1.=> 左边是函数的参数
                2. => 右边是函数的执行语句,也是返回值(语句只有一条)
                    arr.forEach(item=>console.log(item))
                    arr.map(item*2)
                3. =>  如果参数不受一个,那么参数要用()包裹
                    arr.reduce((a,b)=>a+b)
                4. => 执行语句不止一条,还有返回值要用return  如果返回值是对象,要用()包裹
                    arr.map(item=>({ppic:item}))
                5.=> 执行语句不止一条,要用{}包裹
                6.=> 箭头函数的this指向当前的执行环境
        默认参数
            function add(a=1,b=1){
             alert(a+b);
              }
            add(4,5);
            add();
不定参数
            function add(...args){
             //args就是函数参数的数组列表
          }
对象
        1.对象的简写(变量名和对象的键一致的时候)
        2.对象属性的表达式[ ]
        3.对象的拷贝合并 Object.assign()
        4.对象扩展
            {...a,...b}
复制与合并对象
    map
        特点
            1.有顺序
            2.键名可以是任意类型
            3.size长度
        初始化
            var map= newMap([[key,val],[key2,val2]])
        方法
            set(k,v)设置
            get(k) 获取
            delete(k)删除
            has(k) 检测是否有
        属性
            for of
                for(let[k,v] of map){
                 //k 键名
                //v 值
              }
转数组
            Array.fom{map}
展开合并
            [...map1,...map2]
set
        不重复的数组
        初始化 new set([]}
方法
            add()添加
            has()检测
            delete()删除
            clear()清空
        属性 size 长度
转数组
            [...set]
            Array.from(set)
遍历for of
            for(let v of set){
               console.log(v0;)
               }

模块

1。导出export
            1.基本 export{name,age,fun,Animal}
            2.使用as   export{Animal as An}
            3.default默认    export default Animal;
            4.先声明,在导出
               class Ball{}
               export default Ball;
2.导入import
        1.基本  import{name,age,fun,Animal} from"./xx.js"
        2.import {An}  from “./xxx.js”
        3.import 也可以使用as
            import {Animal as An} from “./xxx.js”;
            var a1 = new An();
3.  import Animal from "./xxx.js"

定义:创造实例对象的一个模板

class 类名{}

        class Animal{}
        constructor(){}

构造函数

            constructor(name,color){}
            new Animal(“小乖乖”,"blue");

say(){}

一般方法

        var d1 = new Animal():
          d1.say()

静态方法

        static toName(){}
        Animal.toName()

静态属性

Static price=100;
Animal.price

继承

   class 类名 extends 父类名{}
      super()
      class Dog extends Animal{
         constructor(){
          super();
        }
    }
getter setter
    1. 成对出现
    2. 不能够直接赋值 和设置已经有的属性
        consturctor(age){
        this.age = age;
          }


get Age(){
   return this.age;
  }
    d1.Age 调用大写的Age属性是会执行 get Age()这个函数返回的小写age的值

set Age(val){
  this.age = val
}
当 d1.Age=15抵用 set Age 这个方法最终设置是小写age的值
    Promise

承诺

        定义:返回一个延期的承诺,用then 来接受结果
        resolve解决(兑现)
         reject拒绝
作用
            1.按顺序执行异步调用
            2.避免回调函数 多层嵌套
            race 偶一个resolve就调用then
            all等于所有结果都resolve才调用then方法
基本写法
            new Promise ((resolve,reject)=>{
             resovle(结果)
            reject(原因)
           })
.then(
 res=>{//获取结果}
 err=>{//捕捉错误}
  .catch(err=>{捕捉错误})

race
            Promise.race{[多个异步调用]}
            .then(res=>{返回的是最快resolve结果})
all
Promise.all{[多个异步调用]}
.then(res=>{所有的resolve结果列表})
    generator

生成器

        定义
            遇到yield会挂起 (暂停)
            执行时候next( )再次执行
            通常去做异步请求
1.function * say( ){
   yield "1";
    yield "2";
    yield"3"
}
        2.  var it = say();
            it.next()//{value:"1",done:false}
            it.next()//{value:"2",done:false}
            it.next()//{value:"3",done:false}
            it.next()//{value:undefined,done:true}

async 异步

await 等待

        异步编程
        function say(){return new Promise}
        async function doit(){
       await say("初次见面",2000);
        await say("我喜欢你",5000);
        await say("你真可爱",3000);
}
 say()
.then(res=>(return say()))
.then(res=>(return say()))
    proxy
代理
        1.目标对象
        2.处理
            子主题 1
        3.let proxy = new Proxy(target,handel)
        4.处理函数
            set
            get
            has()
            oewnkeys
            apply

......

Reflect反射

        对 对象进行一些操作,方便代理处理
        常用
            Reflect.ownKeys(obj)获得对象键的列表
            Relext.ownKeys(obj,key,value)获得对象键的列表
            Relect.get(obj,key)获得对象的值
            Reflext.has(obj,key)检测是否有某个值
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容

  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,767评论 0 1
  • 《ECMAScript6 入门》阮一峰 读书笔记 let和constlet声明的变量仅在块级作用域内有效,var声...
    亲爱的孟良阅读 709评论 1 2
  • 第一章:块级作用域绑定 块级声明 1.var声明及变量提升机制:在函数作用域或者全局作用域中通过关键字var声明的...
    BeADre_wang阅读 807评论 0 0
  • 看这本书是在markdown在做的笔记,更友好的阅读方式访问: github es6.md(https://git...
    汪汪仙贝阅读 444评论 0 0
  • es6总结 往期文章 ES5总结 1.es6简介 回顾javascrip组成:核心(ECMAScript)由ECM...
    理想三旬7阅读 580评论 0 5