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)
ES6
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- let关键字 <!DOCTYPE html> 01_let关键字 测试1 测试2 测试3 <!-- ***le...
- let关键字 <!DOCTYPE html> 01_let关键字 测试1 测试2 测试3 <!-- ***le...