ES6

ES6 声明与表达式 let 作用域在块里面 var 全局 注意 函数有自己的作用域 const 常量 常量的值 是不能被更改的 可以使用const 来做预定义 处理 应用场景 1.私有协议 即时通讯 与硬件通讯 2.预定义数据值 网络接口 解构赋值 定义 解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取 数组格式的解构赋值 基本 let [a,b] = [2,3]; let [username,age] = ["小明",2] 可嵌套 let [username,[boy,girl],age] = ["小明",["小猫","小花"],12]; 可省略   /*    * 可以省略部分变量名    * */    let [a,,,b] = [1,3,5,6];    console.log(a)    console.log(b) 不完全解构 如果有变量 不需要初始化值 就可以使用不完全解构 let [view = document.createElement("div"),timer] = []; 剩余运算符 var [timer,...views] = [0,[document.createElement("div"),document.createElement("div")]]    console.log(views[0][0]); 字符串 let [a, b, c, d, e] = 'hello';// a = 'h'// b = 'e'// c = 'l'// d = 'l'// e = 'o' 对象模型的解构(Object) 基本 let { foo, bar } = { foo: "哈哈哈", bar: 'bbb' };    console.log(foo,bar); 可嵌套 {        let {a:[b,c]} = {a:[22,33]}        console.log(b)        console.log(c)        let {key:[name1,name2]} = {key:["属性1的值","属性2的值"]}        console.log(name1)        console.log(name2)        let {            listener:[                click,                dlclick,                tapstart            ],            event:[ce,de,te]        } = {            listener:[                function () {                    console.log("click")                },                function () {                    console.log("dlclick")                }            ],            event:[{name:"点击"},{name:"双击"}]        }        click();        console.log(ce)        /*        * 定义接口文件 http        *        * 主机地址 host:"api.bianmazhe.com"        * 测试环境 evn:true        * api:        *  login:"/login"        *  register:"/register"        * */        let {http:[host,evn,api]} = {            http:["api.bianmazhe.com",false,{login:"/login",register:"/register"}]        }        console.log(api.login)        let {http:[host1,evn1,[login,register]]} = {            http:["api.bianmazhe.com",false,["/login","/register"]]        }        console.log(login);    } 可省略 let {key:[]} = {key:[2,3]}        let {key:[]} = {key:[2,3],key2:"dfk"}        let {} = {key:[2,3]} 不完全解构 let obj = {p: [{y: 'world'}] };let {p: [{ y }, x ] } = obj;// x = undefined// y = 'world' 剩余运算符 let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};// a = 10// b = 20// rest = {c: 30, d: 40} Symbol 用于定义一个独一无二的属性 通过Symbol创建出来的两个属性是不相同的     let n1 = Symbol(2);    let n2 = Symbol(2);    console.log(n1 === n2); 数据类型 string 模板字符串 `` 允许换行     var container = document.querySelector(".container");    container.innerHTML  = `    <div>        <ul>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </div>    `; 支持嵌入变量     var item = "标题";    var container = document.querySelector(".container");    container.innerHTML  = `    <div>        <ul>            <li>${item}</li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </div>    `; 新增方法 includes():返回布尔值,判断是否找到参数字符串。 startsWith():返回布尔值,判断参数字符串是否在原字符串的头部。 endsWith():返回布尔值,判断参数字符串是否在原字符串的尾部。 字符串重复 repeat console.log("Hello,".repeat(2));  // "Hello,Hello," 字符串补全 padStart padEnd console.log("h".padStart(5,"o"));  // "ooooh"console.log("h".padEnd(5,"o"));    // "hoooo"console.log("h".padStart(5));      // "    h" array 创建数组 Array.of() Array.from() 查找符合的元素 find     var arr = [33,4,2,99];    var v = arr.find(function (item) {        return item<10;    });    console.log(v); 查找符合元素的下标 findIndex()     var index = arr.findIndex(function (item) {        return item < 10;    })    console.log(index); 填充 fill(要填充的值,填充的位置,可选(填充结束的位置))  返回一个填充好的数组 let arr = Array.of(1, 2, 3, 4);// 参数1:用来填充的值// 参数2:被填充的起始索引// 参数3(可选):被填充的结束索引,默认为数组末尾console.log(arr.fill(0,1,2)); // [1, 0, 3, 4] 嵌套数组(多维)转一维数组 flat     var arr5 = [[[[1,4,5]],[55,77]],[3,9]]    //Infinity 无穷数    var arr6 = arr5.flat(Infinity);    console.log(arr6); 合并数组     var arr7 = [3,4,88];    console.log([1,...arr7]); set 类似数组 set里面的数据 都是唯一的 初始化 new Set() 存取值 存值 add(); 数组去重     var arr7 = [77,55,77,99,55];    var set2 = new Set(arr7);    console.log(set2); map 类似Object 一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值。 Map 中的键值是有序的(FIFO 原则),而添加到对象中的键则不是。 Map 的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。 Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。 初始化 new Map() 存取之 存 set(key,value) 取 get(key) 长度 size 遍历 for in     for (let key in map){        console.log(map.get(key));    } for of     for ( let [key,value] of map){        console.log(key,value);    } forEach     map.forEach(function (item,key) {        console.log(item,key)    }) 函数 可以给函数的形参 添加默认值     function f(a=1,b=3) {    } 箭头函数 作用 语法简洁 var fun2 = function () {        console.log("...");    }    var fun2 = ()=>{        console.log("....");    }    fun2();    //传参数 简化写法    var fun3 = a => {        console.log(a);    }    var fun4 = (a,b) => {        console.log(a,b);    }    //函数体比较简单 省略花括号    var sum = (a,b) => a+b;    var sum = function (a,b) {        return a+b;    } 无需在箭头函数中 再去设置this指向   function View() {        this.title = "标题";        var self = this;        this.dom = document.querySelector(".container");        this.dom.onclick = function () {            alert(self.title)        }        this.dom.onclick =  ()=> {            alert(this.title)        }    }    new View(); 对象 简写 属性 var obj = {uname,uage}; 方法 var obj = {        run(){}    } 使用...合并对象 var obj1 = {a:1,b:3}var obj2 = {...obj1}; is 类方法(静态方法)     var obj3 = {};    var obj4 = {};    var obj5 = obj3;    console.log(Object.is(obj3,obj4));    console.log(Object.is(obj3,obj5)); assign 浅拷贝 是一个静态方法     var tObj = {}    var sObj = {a:1,b:2};    Object.assign(tObj,sObj);    console.log(tObj); 类 class关键字 定义类   /*    * class 关键字 创建类    * */    class Person{} constructor 构造函数 注意: 1.构造函数 是一个特殊的函数 在实例化对象(new)的时候 就会自动调用这个函数 2.不一定必须实现构造函数->可以省略 如   /*    * class 关键字 创建类    * */    class Person{}    /*    * ES6 构造函数    * */    class Animation{        constructor(...args) {            console.log(args);        }    }    new Animation(1,2);    new Person(); 属性 原型属性 实例属性   class ImageView{        //原型属性        path = "";        constructor() {            this.ttt = "实例属性"        }            } set get 方法 防止类中的set get方法的递归调用         get hname(){            return this.hname;        }        set hname(_name){            console.log(_name);            this.hname = _name;        } 注意 使用set get方法的属性名前 添加_   class Hero {        constructor(_name) {            this.hname = _name;        }        get hname(){            return this._hname;        }        set hname(_name){            console.log(_name);            this._hname = _name;        }    } 静态属性 静态方法 需要使用 static 关键字   class Weapon{        static type = "魔法装";        static att(){            console.log("攻击")        }    }    console.log(Weapon.type);    Weapon.att(); 继承 使用extends 实现继承 super 调用父类的构造函数 如     class Student{        constructor() {            console.log("我要学到很多知识");        }        study(){console.log("好好学习")}    }    //extends 关键字  可用于继承    class TangZhi extends Student{        constructor() {            //使用父类的构造函数            super();            console.log("我得学好了 找个合心的工作");        }    }    let haoXueSheng = new TangZhi();    haoXueSheng.study(); 模块 把具有相同功能的代码 组织到一起 ->这一块 代码 就可以看成一个模块 ES6 1.引入js 需要添加type属性 属性值是module <script src="StringTool.js" type="module"></script> 2.导出模块 导入模块 导出模块 export 1. export {obj999,obj777} 可以同时导出多个 对象 2.导出一个模块 export default StringTool; 导入模块 import 1.    import {obj999,obj777} from "./StringTool.js"  可以同时导入多个对象    console.log(obj999) 2.导入一个模块 import StringTool from "./StringTool.js"; as 给模块 重命名 export {StringTool as ST} import {ST} from "./StringTool"; 异步编程 Promise 允诺 承诺 完成 then 出现意外 catch 创建 new Promise(function(success,fail){}) new Promise((success,fail)=>{}) async 异步 函数 会得到一个promise对象 await 可以让修饰的部分 等待执行(必须与异步函数配合使用) 如果promise对象有结果的时候 再执行     function fun() {        return new Promise(success=>setTimeout(()=>success(111),1000))    }    async function fun2() {        let a = await fun();        console.log(a);        console.log("fun2")    }    fun2() 如果等待的是promise对象,先等待promise有回应了 并且解析要传递出来的数据 才会继续执行 js实现同步 Generator 函数 定义 一是在 function 后面,函数名之前有个 * ; 就可以定义成 一个生成器类型的函数 函数内部有 yield 表达式。 调用 使用生成器里面的每一个模块 let f = fun();//得到生成器对象f.next();//可以执行通过yield分成的模块f.next();f.next();//如果f.next();done:true已经执行完所有的模块 注意: 不要每一次调用next函数 都是用一个新的生成器对象调用 这样执行的永远都是第一个模块的内容 fun().next();//可以执行通过yield分成的模块fun().next();fun().next();//如果f.next();done:true已经执行完所有的模块 next会返回一个对象 value done 迭代器 核心概念 迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.iterator 的方法来实现。 迭代器是用于遍历数据结构元素的指针(如数据库中的游标 如     let arr = [1,2,3,45,7,5];    let it = arr[Symbol.iterator]();    console.log(it.next()); 代理、映射 代理 帮别人干某些事 Proxy 可以对目标对象的读取、函数调用等操作进行拦截,然后进行操作处理。它不直接操作对象,而是像代理模式,通过对象的代理对象进行操作,在进行这些操作时,可以添加一些需要的额外操作 如     //想找代理的人    let xiaoMao = {        username:"小毛",        age:18    }    //帮忙干事的人(做代理的人)    let handler = {        get(target,key){            console.log("收100元");            //...            return target[key];        },        set(target,key,value){            console.log("收500元");            //..            target[key] = value;        }    };    //组织两人关系的地方    let py = new Proxy(xiaoMao,handler);    console.log(py.username);    py.age = 30; 映射 反射 Reflect Reflect.get(target, name, receiver)

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

推荐阅读更多精彩内容