标签:oid -- 完全 不可 操作 调用 形参 变量提升 highlight
ES6: ①let 特点:1 只能作用域当前作用域中; 2 使用let或者const声明的变量,不能再被重新声明; 3 let不存在变量提升 比如: console.log(dad); var dad = 1; 不会报错,因为上面的代码会被变量提升为: var dad; console.log(dad); dad = 1; ②const 特点:1 声明时必须赋值 2 特性与let类似 3 不可变。但常量为引用类型时,不能保证不变 ③扩展运算符 const arr1 = [1,2]; const arr2 = [3]; console.log([...arr1,...arr2]); // [1,3,4]; ④解构赋值 解释:是一个语法,使得可以将值从数组或属性从对象提取到不同的变量中 1 数组的解构赋值 const arr = [1,2,3,4]; let [a,b,c,d] = arr; 复杂点的 const arr = [1,[2,3]]; let [,[,x]] = arr; 与扩展运算符相结合的: const arr1 = [1,2,3]; const [a,...b] = arr1; console,log(b); // [2,3] 交换变量: let a = 2,b=3; [a,b] = [b,a]; 2 字符串解构赋值 const arr = ‘i am a teacher‘; const [a,b,c,...oth] = arr; 3 对象的解构赋值 const obj = { saber:‘xx‘, archar:‘yy‘, } const {saber,archar} = obj; 常用用法:接收函数的返回值解构赋值与函数形参接收实参的解构赋值 ⑤模板字符串 let demo = "c"; let html = ` <li>${demo}</li> `; ⑥箭头函数 const add1 = (a, b) => a + b; const add2 = arr => void arr.push(‘b‘); 等比于: const add1 = function(a,b){ return a + b; } const add2 = function(arr){ arr.push(‘b‘); } 两者区别: 箭头函数没有argument对象; 箭头函数的this指向当前环境所处的this; 例子: const add1 = function({name}){ this.name = name; setTimeout(() => { this.age = 123; console.log(this); // [object Object]: {age: 123, name: "tom"} }) } new add1({name:‘tom‘}); ⑦对象的简洁表示法 let name = ‘tom‘; const user = { name, say(){ console.log(‘i am ‘+this.name); } } ⑧对象的属性名表达式 let name = ‘huam‘; const user = { [name] : ‘xx‘ } ⑨Promise 解释:Promise对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值 要点:promise改善了传统回调造成的代码难维护,控制反转等问题,它是异步的 传统回调: function f(cb){ setTimeout(function(){ cb && cb(); },1000) } f(function(){ console.log(1) f(function(){ console.log(2) f(function(){ console.log(3) f(function(){ console.log(4) f(function(){ console.log(5) f(function(){ console.log(6) }); }); }); }); }); }) promise回调: function f(){ return new Promise((resolve,reject) => { setTimeout(function(){ console.log(0); // 一旦决议不可逆,且不再执行下面的 // 决议:succ resolve(); // 决议:err reject(); },1000); }); } // 回调链 f() .then(data=>{ console.log(1); return f(); },err => { console.log(‘err1‘); return f(); }) .then(data=>{ console.log(2); },err => { console.log(‘err‘); }) Promise.rece() 竞速 function getData1(){ return new Promise((resolve,reject) => { setTimeout(() => { console.log(‘第一条数据加载成功‘); reject(‘err‘); },1000) }) } function getData2(){ return new Promise((resolve,reject) => { setTimeout(() => { console.log(‘第二条数据加载成功‘); resolve(1); }) }) } function getData3(){ return new Promise((resolve,reject) => { setTimeout(() => { console.log(‘第三条数据加载成功‘); resolve(); },1000) }) } let p = Promise.race([getData1(),getData2(),getData3()]); p.then(data => { console.log(data); },err => { console.log(e); }) /* 第二条数据加载成功 demo.html:35 1 demo.html:8 第一条数据加载成功 demo.html:27 第三条数据加载成功 */ Promise.all() 把多个promise实例包装成一个新的promise实例 function getData1(){ return new Promise((resolve,reject) => { setTimeout(() => { console.log(‘第一条数据加载成功‘); resolve(‘‘); },1000) }) } function getData2(){ return new Promise((resolve,reject) => { setTimeout(() => { console.log(‘第二条数据加载成功‘); resolve(1); },1000) }) } function getData3(){ return new Promise((resolve,reject) => { setTimeout(() => { console.log(‘第三条数据加载成功‘); resolve(); },1000) }) } let p = Promise.all([getData1(),getData2(),getData3()]); p.then(data => { // 请求成功的返回值组成的数组 console.log(data); },err => { // 万一失败,进入这里 console.log(err); }) // p1,p2完全是等价的 let p1 = new Promise(resolve => { resolve(‘succ‘); }) let p2 = Promise.resolve(‘succ‘); p1.then(res => { console.log(res); }) p2.then(res => { console.log(res); }) // 同步任务 变成 异步任务 // -- 异步任务一定是在同步任务之后执行的 function createAsyncTask(syncTask){ return Promise.resolve(syncTask).then(syncTask => syncTask()); } createAsyncTask(()=>{ console.log(‘异步来了‘) return 1; }).then(res => { console.log(res); }) ①0 //类与对象,ES6的类是ES5类的语法糖 class Car{ // 静态属性 static area = ‘美国‘; // 构造函数 constructor(wheel,color){ // new.target -- 指向new关键字后面的类 if(new.target !== Car){ throw Error(‘必须使用new关键字调用Car!‘); } // this -- 当前对象 this.wheel = wheel; this.color = color; this.speed = 0; console.log(‘c‘) } // 加速 speedUp() { this.speed += 1; } // 静态属性 static getArea(){ // this -- 当前类 alert(this.area); } // setter 设置器 set color(v){ console.log(‘设置color值:‘+v); this.v = v; } // getter 获取器 get color(){ console.log(‘获取color值‘); // 获取color值 return ‘颜色‘+this.v; } } const car = new Car(3,‘#ff0‘); Car.getArea(); car.color;
标签:oid -- 完全 不可 操作 调用 形参 变量提升 highlight
原文地址:https://www.cnblogs.com/cl94/p/12210032.html