超凡网络网站,东莞网络推广运营平台,郑州网站建,做网站兼容ie主要记录学习ES6的语法
1、let和const
同es5中的var来声明变量。三者的区别分别是#xff1a;
var声明的变量存在变量提升#xff0c;先声明未赋值#xff0c;值为undefined。且变量声明可在函数块内使用。变量声明之后可以重复声明let声明的变量无变量提升。作用域是块级…主要记录学习ES6的语法
1、let和const
同es5中的var来声明变量。三者的区别分别是
var声明的变量存在变量提升先声明未赋值值为undefined。且变量声明可在函数块内使用。变量声明之后可以重复声明let声明的变量无变量提升。作用域是块级例如if或者for等等。不能被重复声明。声明的变量可以被修改但是变量的类型不能被改变。const声明的变量无变量提升。作用域是块级。不能被重复声明。并且声明之后的常量不可以被修改。const还可以声明对象并且可以修改对象内部的常量。let和const声明的变量不会污染全局变量。这也是两者相对于var的一个优点。建议在默认情况下用const。在知道变量值要修改时用let。
2、模板字符串
模板字符串是一种字符串字面量。可以在tab键上的反引号 之间插值变量、函数或其他有效的表达式用${}括起来。
3、函数默认值、剩余参数
①带参数的默认值
function add(a10, b20){return ab;
}
// 默认a30
console.log(add(30)) // 50②默认的表达式也可以是一个函数 ③剩余参数由…和一个紧跟的具名参数指定例如…keys。解决了arguments的问题。剩余参数会将函数的所有参数收集到一个数组中这个数组是一个真正的数组具有数组的所有特性和方法此外剩余参数还可以提供更加可靠的类型处理避免类型错误 arguments的问题包括arguments是一个类数组对象不能直接使用数组相关的方法和操作。arguments没有明确的参数类型声明需要手动进行类型检查。arguments是一个未规范的对象不同的JavaScript引擎可能会有不同的实现行为。
4、扩展运算符、箭头函数
1、扩展运算符用…表示。
它可以将一个数组或者对象展开使其成为各自独立的值。在函数调用时可以使用扩展运算符传递任意数量的参数。 ①合并数组
const arr1 [1, 2, 3];
const arr2 [4, 5, 6];
const newArr [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]②复制数组
const arr [1, 2, 3];
const newArr [...arr];
console.log(newArr); // [1, 2, 3]③获得数组的最大最小值
const arr [1, 2, 3, 4, 5];
const maxVal Math.max(...arr);
const minVal Math.min(...arr);
console.log(maxVal); // 5
console.log(minVal); // 1④将字符串转为数组
const str hello;
const arr [...str];
console.log(arr); // [h, e, l, l, o]⑤将类数组转换为数组
const args function() { return arguments } (1, 2, 3);
const arr [...args];
console.log(arr); // [1, 2, 3]⑥合并对象
const obj1 { a: 1, b: 2 };
const obj2 { b: 3, c: 4 };
const newObj { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 3, c: 4 }⑦将对象转为数组
const obj1 { a: 1, b: 2 };
const obj2 { b: 3, c: 4 };
const newObj { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 3, c: 4 }2、箭头函数
是一种简洁的函数定义方式可以用来替代传统的function定义方式。有以下特点
使用来定义函数相比于function更简洁箭头函数可以省略函数体中的花括号和return关键字如果箭头函数只有一个参数可以省略参数周围的括号箭头函数的this转向是定义时所在的作用域而不是调用时所在的作用域。
// 传统的函数定义方式
function add(a, b) {return a b;
}
// 箭头函数定义方式
const add (a, b) a b;5、箭头函数this指向和注意事项
箭头函数没有this指向内部this值只能通过查找作用域来确定一旦使用箭头函数不存在作用域链。 注意事项 ①()内部没有arguments ②()不能使用new关键字实例化对象。function函数也是一个对象但是() 不是一个对象其实就是一个语法糖
6、解构赋值
解构赋值是对赋值运算符的扩展针对数组和对象操作
// 数组的解构赋值
const [a, b, c] [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
// 以上都属于不完全解构,不完全解构可以忽略某些属性
// 完全解构
console.log(a,b,c); //1,2,3// 对象的解构赋值
const {a, b, c} {a: 1, b: 2, c: 3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3还可以使用默认值避免无法结构的情况
const [a 1, b, c] [undefined, 2, 3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3const {a 1, b, c} {b: 2, c: 3};
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3解构赋值可以使用剩余用算符也可以嵌套使用例如
let [a,[b],c] [1,[2],3]7、扩展的对象的功能
es6允许直接写入变量和函数作为对象的属性和方法。其中有两个重要的方法 ①is()比较两个值是否严格相等
console.log(Object.is(NaN, NaN))//true
console.log(Object.is(undefined, null))//false
console.log(Object.is(0, null))//false②assign()浅拷贝用于对象的合并
Object.assign(target, ...sources)//target:目标对象source:一个或者多个源对象
//例如
const target { a: 1, b: 2 };
const source { b: 4, c: 5 };
const result Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: 5 }
console.log(result); // { a: 1, b: 4, c: 5 }8、Symbol类型
用Symbol声明的值是独一无二存在的一般用于定义对象的私有属性取值时用[]取值。例如
let s Symbol(s)
let obj {}
obj[s] hollow
console.log(obj[s])// hollowSymbol定义的对象没有key。可以用Reflect.ownkey和Object.getOwnPropertySymbols()方法获取Symbol声明的属性名作为对象的key
9、Set数据集合类型
Set表示无重复的有序列表。Set可以通过扩展运算符转化成数组。例如
let set1 new Set([1,2,3,4,5])
let arr [...set1]①一般其他对象释放方法是置null。set中的对象的引用无法被释放需要在创建时用WeakSet创建。该类型只允许存储对象的弱引用而不能存储基本类型的值。对象的弱引用在它自己成为该对象的唯一引用时不会阻止垃圾回收。WeakSet有几个特点
不能传入非对象类型的参数不可迭代没有forEach没有size属性
10、Map数据类型
是键值对的有序列表键和值是任意类型。其中键不会重复。Map常用于存储和查找数据。类比于SetMap也有WeakMap创建的数据类
11、数组的扩展方法
数组的方法 ①from() :将数组转换为真正的数组利用扩展运算符也可以。from可以接受第二个参数用来对每个元素进行处理。 ②of():将一组值转换成数组可以是任意数据类型 ③conpywithin()、find()、findIndex() ④entries()返回一个键值对keys()返回键values()返回值 返回一个遍历器可以用for…of遍历 ⑤include()返回一个布尔值表示某个数组最后是否包含给定的值
12、迭代器Intertor的用法
例
const item [one, two]
const it item[Symbol.iterator]()
it.next()
// 返回value为当前值done为false表示没有遍历完成会继续遍历。为true表示遍历完成①迭代器是一个接口能快捷访问数据通过Symbol.iterator来创建迭代器通过迭代器的next()获取迭代之后的结果 ②迭代器是用于遍历数据结构的指针数据库指标
13、生成器Generator的用法
可以通过yield关键字将函数挂起为了改变执行流提供了可能。 与普通函数区别①function后函数名前有* ②只能在函数内部使用yield表达式将函数挂起返回一个遍历器对象可以调用next() generator函数是分段执行的yield语句是暂停执行而next()恢复执行。 使用场景为不具备Interator接口的对象提供了遍历操作
14、Generator的应用
回调地狱可以使异步代码同步化
// *表示函数为Generator函数function* func(a) {console.log(one);yield a;console.log(two);yield 2;console.log(three);return 3;}// 每次执行函数都会返回一个遍历器对象let fn func(1);// console.log(fn);// 必须调用遍历器对象的next方法,使得指针移向下一个状态console.log(fn.next());// one// {value: 1, done:false}console.log(fn.next());// two// {value: 2, done:false}console.log(fn.next());// three// {value: 3, done:true}
// 总结: Generator函数是分段执行的,yield语句是暂停执行,而next方法可以恢复执行15、Promise的基本使用
解决异步编程的方法相当于一个容器保存着未来才会结束的事件异步操作的一个结果各种异步操作都可以用同样的方法进行处理。 特点①对象的状态不受外界影响处理异步操作三个状态Pending进行中Resolved成功 Rejected失败 ②一旦状态改变就不会再变。任何时候都可以得到这个结果。状态改变只有两种情况Pending-Resolved和Pending-Rejected 常用方法①then()方法第一个参数是relove回调函数第二个参数是可选的是rejected状态回调的函数。 then()返回一个新的promise实例。可以采用链式编程。 ②resolve()方法能将现有任何对象转换为promise对象
let p Promise.resolve(foo);// 等价于 new Promise(resolveresolve(foo));/* console.log(p);p.then((val){console.log(val);}) */③rejected()方法也会返回一个新的promise对象
// let p2 Promise.reject(new Error(出错了));// p2.catch(err {// console.log(err);// })// Promise的all方法提供了并行执行异步操作的能力并且在所有异步操作执行完后才执行回调// let Promise1 new Promise(function (resolve, reject) {})// let Promise2 new Promise(function (resolve, reject) {})// let Promise3 new Promise(function (resolve, reject) {})// let p3 Promise.all([Promise1, Promise2, Promise3])// p3.then(() {// // 三个都成功 则成功// }).catch(err {// // 只要有失败,都失败// })④all()方法异步执行应用在一些游戏类素材图片多都加载完成才渲染页面
⑤race()某个异步请求设置超时时间并在超时后执行相应的操作。例如
//请求某个图片资源/* function requestImg(imgSrc) {var p new Promise((resolve, reject) {var img new Image();img.onload function () {resolve(img);}img.src imgSrc;});return p;}//延时函数用于给请求计时function timeout() {var p new Promise((resolve, reject) {setTimeout(() {reject(图片请求超时);}, 5000);});return p;}Promise.race([requestImg(images/2.png), timeout()]).then((data) {console.log(data);}).catch((err) {console.log(err);}); */⑤done() 处于回调函数的末端,保证抛出任何可能出现的错误 ⑥finally方法用于指定不管Promise对象最后状态如何都会执行的操作。它与done方法的最大区别它接受一个普通的回调函数作为参数该函数不管怎样都必须执行。
server.listen(0)
.then(function () {// run test
})
.finally(server.stop);16、async的用法
使异步操作更方便。基本操作async会返回一个promise对象可以调用then、catch… async是Generator的一个语法糖 如果async函数中有多个await那么then函数会等所有的await命令都运行完成只要有一个await的promis状态失败了那么之后的await不会运行。
async function f() {await Promise.reject(出错了);await Promise.resolve(hello world); // 不会执行}有时我们希望即使前一个异步操作失败也不要中断后面的异步操作。 这时可以将第一个await放在try…catch结构里面这样不管这个异步操作是否成功第二个await都会执行。
async function f() {try {await Promise.reject(出错了);} catch (e) {}return await Promise.resolve(hello world);}f().then(v console.log(v))或者
async function f() {await Promise.reject(出错了).catch(e console.log(e));return await Promise.resolve(hello world);}f().then(v console.log(v))async函数返回一个 Promise 对象。 async函数内部return语句返回的值会成为then方法回调函数的参数。
async function f() {return hello world;}f().then(v console.log(v))// hello worldasync函数内部抛出错误 会导致返回的 Promise 对象变为reject状态。 抛出的错误对象会被catch方法回调函数接收到。
async function f() {throw new Error(出错了);}f().then(v console.log(v),e console.log(e))// Error: 出错了正常情况下await命令后面是一个 Promise 对象。如果不是会被转成一个立即resolve的 Promise 对象
async function f() {return await 123;}f().then(v console.log(v))async function load() {loadUI();await showData();hideUI();}load();// console.log(itLoad);// 第一次调用会显示加载UI界面,并且异步的加载数据function loadUI() {console.log(加载loading界面.....);}function showData() {return new Promise((resolve, reject) {setTimeout(() {console.log(数据加载完成.....);// 第二调用,会调用hideUI(),隐藏Loadingresolve();}, 1000);})}function hideUI() {console.log(隐藏loading....);}
