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 的键值对个数只能手动计算。
2021-03-21
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...