2021-03-21

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  = `   

       
               
  •            
  •            
  •            
  •            
  •        
   
    `; 支持嵌入变量     var item = "标题";    var container = document.querySelector(".container");    container.innerHTML  = `   
       
               
  • ${item}
  •            
  •            
  •            
  •            
  •        
   
    `; 新增方法 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 的键值对个数只能手动计算。   

你可能感兴趣的:(2021-03-21)