肯德基网站开发,网页设计视频,页面设计费用,代做百度首页排名1、什么是 ECMAScript
ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。
从第 6 版开始#xff0c;发生了里程碑的改动#xff0c;并保持着每年迭代一个版本的习惯。
ES62015年#xff0c;ES72016年#xff0c;ES82017年#xff0c;ES92018年#…1、什么是 ECMAScript
ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言。
从第 6 版开始发生了里程碑的改动并保持着每年迭代一个版本的习惯。
ES62015年ES72016年ES82017年ES92018年ES102019年ES112020年以此类推。
1.1 为什么要学习 ES6 ⚫ ES6 的版本变动内容最多具有里程碑意义 ⚫ ES6 加入许多新的语法特性编程实现更简单、高效 ⚫ ES6 是前端发展趋势就业必备技能 2、ECMASript 6 新特性
2.1.let 关键字 let 关键字用来声明变量使用 let 声明的变量有几个特点 1) 不允许重复声明 2) 块儿级作用域 3) 不存在变量提升 4) 不影响作用域链 应用场景以后声明变量使用 let 就对了 script//声明变量let a;let b, c, d;let e 100;let f 521, g iloveyou, h [];//1. 变量不能重复声明//let star 罗志祥;//let star 小猪;//console.log(Uncaught SyntaxError: Identifier star has already been declared);//2. 块儿级作用域 全局, 函数, eval//类似块级作用于的还有if else while for {let girl 周扬青;console.log(girl);//可以正确输出}//console.log(girl);//console.log(Uncaught ReferenceError: girl is not defined at);//3. 不存在变量提升// console.log(song);// let song 爱唱歌;// console.log(Uncaught ReferenceError: Cannot access song before initialization);//4. 不影响作用域链{let school 清华大学;function fn() {console.log(school);}fn();}/script
2.2. const 关键字 const 关键字用来声明常量 const 声明有以下特点 1) 声明必须赋初始值 2) 标识符一般为大写 3) 不允许重复声明 4) 值不允许修改 5) 块儿级作用域 注意 : 对象属性修改和数组元素变化不会出发 const 错误 应用场景声明对象类型使用 const 非对象类型声明选择 let script//声明常量const SCHOOL 清华大学;//1. 一定要赋初始值//const A;//console.log(Uncaught SyntaxError: Missing initializer in const declaration);//2. 一般常量使用大写(潜规则)const a 100;//3. 常量的值不能修改//SCHOOL 北京大学;//console.log(Uncaught TypeError: Assignment to constant variable);//4. 块儿级作用域// {// const PLAYER 乔丹;// }// console.log(PLAYER);// console.log(Uncaught ReferenceError: PLAYER is not defined at);//5. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错const BAT [百度, 阿里巴巴, 腾讯];BAT.push(字节跳动);console.log(BAT);//输出[百度, 阿里巴巴, 腾讯, 字节跳动]/script
2.3.变量的解构赋值 ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构赋值。 script//ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值这被称为解构赋值。//1. 数组的结构const SCHOOL [清华大学, 北京大学];let [qinghua, beida] SCHOOL;console.log(qinghua);//输出清华大学console.log(beida);//输出北京大学//2. 对象的解构const student {name: 小明,age: 18,like: function () {console.log(我喜欢打篮球);}}let { name, age, like } student;console.log(name);//输出小明console.log(age);//输出18console.log(like);//输出ƒ () {console.log(我喜欢打篮球);}like();//输出我喜欢打篮球/script 注意频繁使用对象方法、数组元素就可以使用解构赋值形式 2.4.模板字符串 模板字符串 template string 是增强版的字符串用反引号 标识特点 1) 字符串中可以出现换行符 2) 可以使用 ${xxx} 形式输出变量 script// ES6 引入新的声明字符串的方式 『』 //1. 声明let str 这是一个字符串;console.log(str, typeof str);//输出这是一个字符串 string//2. 内容中可以直接出现换行符let SCHOOL ulli清华大学/lili北京大学/li/ul;//3.变量拼接let boy 马云;let word ${boy}说让天下没有难做的生意;console.log(word);//输出马云说让天下没有难做的生意/script 注意当遇到字符串与变量拼接的情况使用模板字符串 2.5.简化对象写法 ES6 允许在大括号里面直接写入变量和函数作为对象的属性和方法。这样的书写更加简洁。 script//ES6 允许在大括号里面直接写入变量和函数作为对象的属性和方法。//这样的书写更加简洁let name 马云;let word function () {console.log(让天下没有难做的生意);}const obj {name,word,say() {console.log(幸福是奋斗出来的);}}console.log(name);//输出马云console.log(word);//输出ƒ () { console.log(让天下没有难做的生意); }console.log(obj);//输出{name: 马云, word: ƒ, say: ƒ}/script 注意对象简写形式简化了代码所以以后用简写就对了 2.6.箭头函数 ES6 允许使用「箭头」 定义函数。 箭头函数的注意点 : 1) 如果形参只有一个则小括号可以省略 2) 函数体如果只有一条语句则花括号可以省略函数的返回值为该条语句的执行结果 3) 箭头函数 this 指向声明时所在作用域下 this 的值 4) 箭头函数不能作为构造函数实例化 5) 不能使用 arguments script// ES6 允许使用「箭头」定义函数。//声明一个函数let fn (a, b) {return a b;}//调用函数let result fn(3, 5);console.log(result);//输出8//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值function getName() {console.log(this.name);}let getName2 () {console.log(this.name);}//设置 window 对象的 name 属性window.name 清华大学;const school {name: 北京大学}//直接调用getName();//输出清华大学作用域是 windowgetName2();//输出清华大学作用域是 window//call 方法调用getName.call(school);//输出北京大学getName2.call(school);//输出清华大学作用域是 window//2. 不能作为构造实例化对象// let Person (name, age) {// this.name name;// this.age age;// }// let me new Person(张三, 18);// console.log(me);//输出错误信息Person is not a constructor at//3. 不能使用 arguments 变量// let fn () {// console.log(arguments);// }// fn(1, 2, 3);//输出错误信息Uncaught SyntaxError: Identifier fn has already been declared//4. 箭头函数的简写//1) 省略小括号, 当形参有且只有一个的时候let add n {return n n;}console.log(add(6));//输出12//2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略// 而且语句的执行结果就是函数的返回值let pow n n * n;console.log(pow(9));//输出81/script 注意箭头函数不会更改 this 指向用来指定回调函数会非常合适 箭头函数适合与 this 无关的回调比如定时器、数组的方法回调 箭头函数不适合与 this 有关的回调有事件回调、对象的方法 2.7. rest 参数 ES6 引入 rest 参数用于获取函数的实参用来代替 arguments bodydiv我是div1/divdiv我是div2/divdiv我是div3/divscript// ES6 引入 rest 参数用于获取函数的实参用来代替 arguments// rest 参数function getUserName(...args) {console.log(args);}getUserName(刘亦菲, 关之琳, 刘雯雯);//输出[刘亦菲, 关之琳, 刘雯雯]// rest 参数必须要放到参数最后function fn(a, b, ...args) {console.log(a);console.log(b);console.log(args);}fn(1, 2, 3, 4, 5, 6);//输出1、2、 [3, 4, 5, 6]//1. 数组的合并const university [清华大学, 北京大学];const foreign [哈佛大学, 牛津大学];const concat1 university.concat(foreign);console.log(concat1 concat1);//输出concat1清华大学,北京大学,哈佛大学,牛津大学const concat2 [...university, ...foreign];console.log(concat2 concat2);//输出concat2清华大学,北京大学,哈佛大学,牛津大学//2. 数组的克隆const student [小明, 小花, 小聪];const copy1 [...student];console.log(copy1 copy1);//输出copy1小明,小花,小聪//3. 将伪数组转为真正的数组const divs document.querySelectorAll(div);//注意在文档顶部有3个divconst divArr [...divs];console.log(divArr);//输出[div, div, div]/script/body 注意 rest 参数适合不定个数参数函数的场景 2.8. spread 扩展运算符 扩展运算符 spread 也是三个点 ... 。它好比 rest 参数的逆运算将一个数组转为用逗号分隔的参数序列对数组进行解包。 script// 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』//声明一个数组 ...const F4 [刘德华, 黎明, 张学友, 郭富城];// 声明一个函数function tianwang() {console.log(arguments);}tianwang(...F4);//输出Arguments(4) [刘德华, 黎明, 张学友, 郭富城, callee: ƒ, Symbol(Symbol.iterator): ƒ]/script 2.9.Symbol ES6 引入了一种新的原始数据类型 Symbol表示独一无二的值。它是JavaScript 语言的第七种数据类型是一种类似于字符串的数据类型。 Symbol 特点 1) Symbol 的值是唯一的用来解决命名冲突的问题 2) Symbol 值不能与其他数据进行运算 3) Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 但 是可 以 使 用 Reflect.ownKeys 来获取对象的所有键名。 script//创建 symbollet s1 Symbol();console.log(s1, typeof s1);//输出Symbol() symbollet s2 Symbol(清华大学);let s3 Symbol.for(广东省深圳市);//不能与其他数据进行运算//let result1 s1 100;//console.log(result1);//输出Uncaught TypeError: Cannot convert a Symbol value to a number//let result2 s2 教授;//console.log(result2);//输出Uncaught TypeError: Cannot convert a Symbol value to a stringlet youxi {name: 王者荣耀,[Symbol(zhongdan)]: function () {console.log(我可以中单)},[Symbol(daye)]: function () {console.log(我可以打野);}}console.log(youxi)/script 注 : 遇到唯一性的场景时要想到 Symbol 2.10. 迭代器 遍历器 Iterator就是一种机制。它是一种接口为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口就可以完成遍历操作。 1) ES6 创造了一种新的遍历命令 for...of 循环 Iterator 接口主要供 for...of 消费 2) 原生具备 iterator 接口的数据 ( 可用 for of 遍历 ) a) Array b) Arguments c) Set d) Map e) String f) TypedArray g) NodeList 3) 工作原理 a) 创建一个指针对象指向当前数据结构的起始位置 b) 第一次调用对象的 next 方法指针自动指向数据结构的第一个成员 c) 接下来不断调用 next 方法指针一直往后移动直到指向最后一个成员 d) 每调用 next 方法返回一个包含 value 和 done 属性的对象 注 : 需要自定义遍历数据的时候要想到迭代器。 scriptlet F4 [刘德华, 郭富城, 黎明, 张学友];//使用 for...of 遍历数组for (let v of F4) {console.log(v);//循环输出刘德华、郭富城、黎明、张学友}let iterator F4[Symbol.iterator]();//调用对象的next方法console.log(iterator.next());//输出{value: 刘德华, done: false}console.log(iterator.next());//输出{value: 郭富城, done: false}console.log(iterator.next());//输出{value: 黎明, done: false}console.log(iterator.next());//输出{value: 张学友, done: false}console.log(iterator.next());//输出{value: undefined, done: true}//自定义遍历数据const NBA {name: 美国篮球协会,player: [乔丹, 麦迪, 姚明],[Symbol.iterator]() {//索引变量let index 0;let _this this;return {next: function () {if (index _this.player.length) {const result {value: _this.player[index], done: false};//下标自增index;return result;} else {return { value: undefined, done: true };}}};}}//遍历这个 NBA 对象for (let v of NBA) {console.log(v);//输出乔丹、麦迪、姚明}/script 2.11. 生成器 生成器函数是 ES6 提供的一种异步编程解决方案语法行为与传统函数完全不同。生成器其实就是一个特殊的函数。 script//生成器其实就是一个特殊的函数//异步编程 纯回调函数//函数代码的分隔符function* NBA() {yield 乔丹;yield 麦迪;yield 姚明;}let iterator NBA();console.log(iterator.next());//输出{value: 乔丹, done: false}console.log(iterator.next());//输出{value: 麦迪, done: false} console.log(iterator.next());//输出{value: 姚明, done: false}console.log(iterator.next());//输出{value: undefined, done: true}//遍历for (let v of NBA()) {console.log(v);//输出乔丹、麦迪、姚明}//生成器函数参数function* university(arg) {console.log(arg arg);let one yield 清华大学;console.log(one one);let two yield 北京大学;console.log(two two);let three yield 哈佛大学;console.log(three three);}//执行获取迭代器对象let iter university(上海交大);console.log(iter.next1 iter.next());//next方法可以传入实参console.log(iter.next2 iter.next(医科大));console.log(iter.next3 iter.next(中山大学));console.log(iter.next4 iter.next(复旦大学));//依次输出/*arg上海交大iter.next1[object Object]one医科大iter.next2[object Object]two中山大学iter.next3[object Object]three复旦大学iter.next4[object Object]*///生成器函数实例//异步编程、文件操作、网络操作ajax、Request、数据库操作//模拟获取用户数据、订单数据、商品数据function getUserInfo() {setTimeout(() {let data 用户数据;console.log(data);//调用 next 方法并且将数据传入info.next(data);}, 1000)}function getOrderInfo() {setTimeout(() {let data 订单数据;console.log(data);info.next(data);}, 1000)}function getGoodsInfo() {setTimeout(() {let data 商品数据;console.log(data);info.next(data);}, 1000)}function* getMallInfo() {yield getUserInfo();yield getOrderInfo();yield getGoodsInfo();}//调用生成器函数let info getMallInfo();info.next();//依次输出用户数据、订单数据、商品数据/script 代码说明 1) * 的位置没有限制 2) 生成器函数返回的结果是迭代器对象调用迭代器对象的 next 方法可以得到 yield 语句后的值 3) yield 相当于函数的暂停标记也可以认为是函数的分隔符每调用一次 next 方法执行一段代码 4) next 方法可以传递实参作为 yield 语句的返回值 2.12. Promise重点掌握 Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数用来封装异步操作并可以获取其成功或失败的结果。 1) Promise 构造函数 : Promise (excutor) {} 2) Promise.prototype.then 方法 3) Promise.prototype.catch 方法 2.12.1 Promise基本语法 script// promise 基本语法//实例化 Promise 对象const promise new Promise(function (resolve, reject) {/* 正常读取数据*/setTimeout(function () {let data 数据库中的用户数据;resolve(data);}, 1000);/*setTimeout(function () {let err 数据读取失败;reject(err);});*/});//调用 promise 对象的 then 方法promise.then(function (value) {console.log(value);}, function (reason) {console.error(reason);})/script 2.12.2 Promise封装AJAX scriptconst p new Promise((resolve, reject) {//1. 创建对象const xhr new XMLHttpRequest();//2. 初始化xhr.open(GET, 输入具体的 URL 地址比如 http://www.baidu.com/);//3. 发送xhr.send();//4. 绑定事件, 处理响应结果xhr.onreadystatechange function () {//判断if (xhr.readyState 4) {//判断响应状态码 200-299if (xhr.status 200 xhr.status 300) {//表示成功resolve(xhr.response);} else {//如果失败reject(xhr.status);}}}})//指定回调p.then(function (value) {console.log(value);}, function (reason) {console.error(reason);});/script 2.12.3 Promise then方法 script//创建 promise 对象const p2 new Promise((resolve, reject) {setTimeout(() {resolve(用户数据);// reject(出错啦);}, 1000)});//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定//1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值// const result p2.then(value {// console.log(value);// //1. 非 promise 类型的属性// // return iloveyou;// //2. 是 promise 对象// // return new Promise((resolve, reject){// // // resolve(ok);// // reject(error);// // });// //3. 抛出错误// // throw new Error(出错啦!);// throw 出错啦!;// }, reason{// console.warn(reason);// });//链式调用p2.then(value {}).then(value {});/script 2.12.3 Promise catch方法 scriptconst p3 new Promise((resolve, reject) {setTimeout(() {//设置 p 对象的状态为失败, 并设置失败的值reject(出错啦!);}, 1000)});// p3.then(function(value){}, function(reason){// console.error(reason);// });p3.catch(function (reason) {console.warn(reason);});/script 2.13. Set ES6 提供了新的数据结构 Set集合。它类似于数组但成员的值都是唯一的集合实现了 iterator 接口所以可以使用『扩展运算符』和『 for…of…』进行遍历集合的属性和方法 1) size 返回集合的元素个数 2) add 增加一个新元素返回当前集合 3) delete 删除元素返回 boolean 值 4) has 检测集合中是否包含某个元素返回 boolean 值 5) clear 清空集合返回 undefined script//创建一个空集合let emptySet new Set();//创建一个非空集合let wangzhe new Set([射手, 法师, 打野, 上单, 辅助]);//返回集合的元素个数console.log(wangzhe.size);//输出5//遍历集合for (let v of wangzhe) {console.log(v);//输出射手、法师、打野、上单、辅助}//添加新元素console.log(wangzhe.add(野怪));//输出Set(6) {射手, 法师, 打野, 上单, 辅助, 野怪}//删除元素console.log(wangzhe.delete(野怪));//输出true//检测是否存在某个值console.log(wangzhe.has(野怪));//输出false//清空集合console.log(wangzhe.clear());//输出undefined//set 集合的去重、并、交、差集合let arr1 [北京, 上海, 广州, 深圳, 上海];//数组去重let repeat [...new Set(arr1)];console.log(repeat repeat);//输出repeat北京,上海,广州,深圳//交集let arr2 [广州, 深圳, 武汉];let intersection [...new Set(arr1)].filter(item new Set(arr2).has(item));console.log(intersection intersection);//输出intersection广州,深圳//并集let union [...new Set([...arr1, ...arr2])];console.log(union union);//输出union北京,上海,广州,深圳,武汉//差集let diff [...new Set(arr1)].filter(item !(new Set(arr2).has(item)));console.log(diff diff);//输出diff北京,上海/script 2.14. Map ES6 提供了 Map 数据结构。它类似于对象也是键值对的集合。但是“键”的范围不限于字符串各种类型的值包括对象都可以当作键。 Map 也实现了iterator 接口所以可以使用『扩展运算符』和『 for…of… 』进行遍历。 Map 的属性和方法 1) size 返回 Map 的元素个数 2) set 增加一个新元素返回当前 Map 3) get 返回键名对象的键值 4) has 检测 Map 中是否包含某个元素返回 boolean 值 5) clear 清空集合返回 undefined script//声明一个 maplet map new Map();//添加元素map.set(name, 马云);map.set(word, function () {console.log(让天下没有难做的生意);});let school {name: 浙江师范大学};map.set(school, [北京大学, 清华大学]);//map集合数据长度console.log(map.size map.size);//输出map.size3//删除console.log(map.delete(name));//输出true//获取map数据console.log(word map.get(word));//输出wordfunction () {console.log(让天下没有难做的生意);}console.log(school map.get(school));//输出schoolundefined//遍历for (let m of map) {console.log(m);}/*输出[word, ƒ][{…}, Array(2)]*///清空 mapconsole.log(map.clear());//输出undefined/script 2.15. class 类 ES6 提供了更接近传统语言的写法引入了 Class类这个概念作为对象的模板。通过 class 关键字可以定义类。基本上 ES6 的 class 可以看作只是一个语法糖它的绝大部分功能 ES5 都可以做到新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 知识点 1) class 声明类 2) constructor 定义构造函数初始化 3) extends 继承父类 4) super 调用父级构造方法 5) static 定义静态方法和属性 6) 父类方法可以重写 scriptclass Phone {//构造方法constructor(brand, price) {this.brand brand;this.price price;}//方法必须使用该语法不能使用 ES5 的对象完整形式call() {console.log(我是一部手机);}}let Huawei new Phone(华为折叠手机, 8999);console.log(Huawei);//输出Phone {brand: 华为折叠手机, price: 8999}//class 的 get、setclass Game {get name() {console.log(游戏的名字属性被读取了);return 王者荣耀;}set name(newName) {console.log(游戏的名字属性被修改了);}}//实例化对象let play new Game();console.log(play.name);//输出游戏的名字属性被读取了、 王者荣耀play.name 打野;//游戏的名字属性被修改了//类的静态成员class University {static name 清华大学;static word() {console.log(自强不息厚德载物);}student() {console.log(好好学习天天向上);}}let Tom new University();console.log(Tom.name Tom.name);//输出Tom.nameundefinedconsole.log(Tom.word Tom.word);//输出Tom.wordundefinedconsole.log(Tom.student Tom.student);//输出Tom.studentstudent() {console.log(好好学习天天向上);}console.log(University.name University.name);//输出University.name清华大学console.log(University.word University.word);//输出University.wordword() {console.log(自强不息厚德载物);}//结论类的静态成员只能被该类访问//类的继承class Person {constructor(age, sex) {this.age age;this.sex sex;}//父类的成员属性call() {console.log(我的人类共有的特征);}}//子类继承class OtherPeople extends Person {constructor(age, sex, name) {super(age, sex);this.name name;}//唱歌sing() {console.log(我会唱歌);}codding() {console.log(我会编程);}}const XiaoMing new OtherPeople(18, 男, 我叫小明);XiaoMing.call();//输出我的人类共有的特征XiaoMing.sing();//输出我会唱歌XiaoMing.codding();//输出我会编程/script 2.16. 数值扩展 2.16.1. 二进制和八进制 ES6 提供了二进制和八进制数值的新的写法分别用前缀 0b 和 0o 表示。 2.16.2. Number.isFinite() 与 Number.isNaN() Number.isFinite() 用来检查一个数值是否为有限的 Number.isNaN() 用来检查一个值是否为 NaN 2.16.3. Number.parseInt() 与 Number.parseFloat() ES6 将全局方法 parseInt 和 parseFloat 移植到 Number 对象上面使用不变。 2.16.4. Math.trunc 用于去除一个数的小数部分返回整数部分。 2.16.5. Number.isInteger Number.isInteger() 用来判断一个数值是否为整数 script//1、Number.EPSILON 是 JavaScript 表示的最小精度//EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16function equal(a, b) {if (Math.abs(a, b) Number.EPSILON) {return true;} else {return false;}}console.log(1 2 3);//输出trueconsole.log(1 2 3);//输出trueconsole.log(0.1 0.2 0.3);//输出falseconsole.log(0.1 0.2 0.3);//输出falseconsole.log(equal(0.1 0.2, 0.3));//输出false//2、Number.isFinite 检测一个数值是否为有限数console.log(-------------------------------------);console.log(Number.isFinite(100));//输出trueconsole.log(Number.isFinite(100 / 0));//输出falseconsole.log(Number.isFinite(Infinity));//输出false//3. Number.isNaN 检测一个数值是否为 NaNconsole.log(-------------------------------------);console.log(Number.isNaN(123));//输出falseconsole.log(Number.isNaN(NaN));//输出true//4. Number.parseInt Number.parseFloat字符串转整数console.log(-------------------------------------);console.log(Number.parseInt(123砍三刀));//输出123console.log(Number.parseFloat(3.1415926圆周率));//输出3.1415926//5. Number.isInteger 判断一个数是否为整数console.log(-------------------------------------);console.log(Number.isInteger(666));//输出trueconsole.log(Number.isInteger(8.88));//输出falseconsole.log(Number.isInteger(一刀999));//输出false//6. Math.trunc 将数字的小数部分抹掉console.log(-------------------------------------);console.log(Math.trunc(1.25));//输出1//7. Math.sign 判断一个数到底为正数 负数 还是零console.log(-------------------------------------);console.log(Math.sign(0));//输出0console.log(Math.sign(12306));//输出1console.log(Math.sign(-2.98));//输出-1/script 2.17. 对象扩展 ES6 新增了一些 Object 对象的方法 1) Object.is 比较两个值是否严格相等与『 』行为基本一致 0 与 NaN 2) Object.assign 对象的合并将源对象的所有可枚举属性复制到目标对象 3) __proto__ 、 setPrototypeOf 、 setPrototypeOf 可以直接设置对象的原型 script//1. Object.is 判断两个值是否完全相等 console.log(Object.is(666, 666));//输出trueconsole.log(Object.is(NaN, NaN));//输出trueconsole.log(NaN NaN);//输出false//2. Object.assign 对象的合并const dbConfigDev {host: http://127.0.0.1,port: 3306,name: dev,pass: dev,dbName: dev数据库,remark: 这是备注开发环境数据库};const dbConfigTest {host: http://127.0.0.2,port: 8848,name: test,pass: test,dbName: test数据库,info: 请开启防火墙}console.log(Object.assign(dbConfigDev, dbConfigTest));//输出{host: http://127.0.0.2, port: 8848, name: test, pass: test, dbName: test数据库, info: 请开启防火墙,remark: 这是备注开发环境数据库}//3. Object.setPrototypeOf 设置原型对象 Object.getPrototypeofconst school {name: 清华大学}const cities {xiaoqu: [北京, 上海, 深圳]}Object.setPrototypeOf(school, cities);console.log(Object.getPrototypeOf(school));//输出{xiaoqu: Array(3)}[北京, 上海, 深圳]console.log(school);//输出{name: 清华大学}/script 2.18. 模块化 模块化是指将一个大的程序文件拆分成许多小的文件然后将小文件组合起来。 2.18.1. 模块化的好处 模块化的优势有以下几点 1) 防止命名冲突 2) 代码复用 3) 高维护性 2.18.2. 模块化规范产品 ES6 之前的模块化规范有 1) CommonJS NodeJS 、 Browserify 2) AMD requireJS 3) CMD seaJS 2.18.3. ES6 模块化语法 模块功能主要由两个命令构成 export 和 import 。 ⚫ export 命令用于规定模块的对外接口 ⚫ import 命令用于输入其他模块提供的功能 第 3 章 ECMASript 7 新特性 3.1.Array.prototype.includes Includes 方法用来检测数组中是否包含某个元素返回布尔类型值 3.2.指数操作符 在 ES7 中引入指数运算符「**」用来实现幂运算功能与 Math.pow 结果相同 script// includes indexOf// const mingzhu [西游记,红楼梦,三国演义,水浒传];//判断// console.log(mingzhu.includes(西游记));// console.log(mingzhu.includes(金瓶梅));// **console.log(2 ** 10);// console.log(Math.pow(2, 10));/script 第 4 章 ECMASript 8 新特性 4.1.async 和 await async 和 await 两种语法结合可以让异步代码像同步代码一样 4.1.1.async 函数 1. async 函数的返回值为 promise 对象 2. promise 对象的结果由 async 函数执行的返回值决定 script//async 函数async function fn(){// 返回一个字符串// return 清华大学;// 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象// return;//抛出错误, 返回的结果是一个失败的 Promise// throw new Error(出错啦!);//返回的结果如果是一个 Promise 对象return new Promise((resolve, reject){resolve(成功的数据);// reject(失败的错误);});}const result fn();//调用 then 方法result.then(value {console.log(value);}, reason {console.warn(reason);})/script 4.1.2.await 表达式 1. await 必须写在 async 函数中 2. await 右侧的表达式一般为 promise 对象 3. await 返回的是 promise 成功的值 4. await 的 promise 失败了 , 就会抛出异常 , 需要通过 try...catch 捕获处理 script//创建 promise 对象const p new Promise((resolve, reject) {// resolve(用户数据);reject(失败啦!);})// await 要放在 async 函数中.async function main() {try {let result await p;//console.log(result);} catch (e) {console.log(e);}}//调用函数main();/script 4.2.Object.values 和 Object.entries 1. Object.values() 方法返回一个给定对象的所有可枚举属性值的数组 2. Object.entries() 方法返回一个给定对象自身可遍历属性 [key,value] 的数组 4.3.Object.getOwnPropertyDescriptors 该方法返回指定对象所有自身属性的描述对象 4.4 async与await封装AJAX请求 script// 发送 AJAX 请求, 返回的结果是 Promise 对象function sendAJAX(url) {return new Promise((resolve, reject) {//1. 创建对象const x new XMLHttpRequest();//2. 初始化x.open(GET, url);//3. 发送x.send();//4. 事件绑定x.onreadystatechange function () {if (x.readyState 4) {if (x.status 200 x.status 300) {//成功啦resolve(x.response);}else{//如果失败reject(x.status);}}}})}//promise then 方法测试// sendAJAX(https://api.apiopen.top/getJoke).then(value{// console.log(value);// }, reason{})// async 与 await 测试 axiosasync function main(){//发送 AJAX 请求let result await sendAJAX(https://api.apiopen.top/getJoke);//再次测试let tianqi await sendAJAX(https://www.tianqiapi.com/api/?versionv1city%E5%8C%97%E4%BA%ACappid23941491appsecretTXoD5e8P)console.log(tianqi);}main();/script 4.5 ES8 对象方法扩展 script//声明对象const school {name:清华大学,cities:[北京,上海,深圳],xueke: [前端,Java,大数据,运维]};//获取对象所有的键// console.log(Object.keys(school));//获取对象所有的值// console.log(Object.values(school));//entries// console.log(Object.entries(school));//创建 Map// const m new Map(Object.entries(school));// console.log(m.get(cities));//对象属性的描述对象// console.log(Object.getOwnPropertyDescriptors(school));// const obj Object.create(null, {// name: {// //设置值// value: 清华大学,// //属性特性// writable: true,// configurable: true,// enumerable: true// } // });/script 第 5 章 ECMASript 9 新特性 5.1.Rest/Spread 属性 Rest 参数与 spread 扩展运算符在 ES6 中已经引入不过 ES6 中只针对于数组在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符。 function connect({host, port, ...user}) {console.log(host);console.log(port);console.log(user);
}
connect({host: 127.0.0.1,port: 3306,username: root,password: root,type: master
}); 5.2.正则表达式命名捕获组 ES9 允许命名捕获组使用符号『 ?name 』 , 这样获取捕获结果可读性更强 let str a hrefhttp://www.baidu.com百度/a;
const reg /a href(?url.*)(?text.*)\/a/;
const result reg.exec(str);
console.log(result.groups.url);
console.log(result.groups.text); 5.3.正则表达式反向断言 ES9 支持反向断言通过对匹配结果前面的内容进行判断对匹配进行筛选。 //声明字符串
let str JS5211314 你知道么 555 啦啦啦;
//正向断言
const reg /\d(?啦)/;
const result reg.exec(str);
//反向断言
const reg /(?么)\d/;
const result reg.exec(str);
console.log(result); 5.4.正则表达式 dotAll 模式 正则表达式中点 . 匹配除回车外的任何单字符标记『 s』改变这种行为允许行终止符出现 let str
ullia肖生克的救赎/ap上映日期: 1994-09-10/p/lilia阿甘正传/ap上映日期: 1994-07-06/p/li
/ul;
//声明正则
const reg /li.*?a(.*?)\/a.*?p(.*?)\/p/gs;
//执行匹配
const result reg.exec(str);
let result;
let data [];
while(result reg.exec(str)){data.push({title: result[1], time: result[2]});
}
//输出结果
console.log(data); 第 6 章 ECMASript 10 新特性 6.1.Object.fromEntries script//二维数组// const result Object.fromEntries([// [name,北京大学],// [xueke, Java,大数据,前端,云计算]// ]);//Map// const m new Map();// m.set(name,BEIJING);// const result Object.fromEntries(m);//Object.entries ES8const arr Object.entries({name: 北京大学})console.log(arr);/script 6.2.trimStart 和 trimEnd script // trimlet str iloveyou ;console.log(str);console.log(str.trimStart());console.log(str.trimEnd());/script 6.3.Array.prototype.flat 与 flatMap script//flat 平//将多维数组转化为低位数组// const arr [1,2,3,4,[5,6]];// const arr [1,2,3,4,[5,6,[7,8,9]]];//参数为深度 是一个数字// console.log(arr.flat(2)); //flatMapconst arr [1,2,3,4];const result arr.flatMap(item [item * 10]);console.log(result);/script 6.4.Symbol.prototype.description script//创建 Symbollet s Symbol(清华大学);console.log(s.description);/script 第 7 章 ECMASript 11 新特性 7.1.String.prototype.matchAll scriptlet str ullia肖生克的救赎/ap上映日期: 1994-09-10/p/lilia阿甘正传/ap上映日期: 1994-07-06/p/li/ul;//声明正则const reg /li.*?a(.*?)\/a.*?p(.*?)\/p/sg//调用方法const result str.matchAll(reg);// for(let v of result){// console.log(v);// }const arr [...result];console.log(arr);/script 7.2. 类的私有属性 scriptclass Person{//公有属性name;//私有属性#age;#weight;//构造方法constructor(name, age, weight){this.name name;this.#age age;this.#weight weight;}intro(){console.log(this.name);console.log(this.#age);console.log(this.#weight);}}//实例化const girl new Person(小梅, 18, 45kg);// console.log(girl.name);// console.log(girl.#age);// console.log(girl.#weight);girl.intro();/script 7.3.Promise.allSettled script//声明两个promise对象const p1 new Promise((resolve, reject){setTimeout((){resolve(商品数据 - 1);},1000)});const p2 new Promise((resolve, reject){setTimeout((){resolve(商品数据 - 2);// reject(出错啦!);},1000)});//调用 allsettled 方法// const result Promise.allSettled([p1, p2]);// const res Promise.all([p1, p2]);console.log(res);/script 7.4. 可选链操作符 scriptfunction main(config){// const dbHost config config.db config.db.host;const dbHost config?.db?.host;console.log(dbHost);}main({db: {host:192.168.1.100,username: root},cache: {host: 192.168.1.200,username:admin}})/script 7.5. 动态 import 导入 bodybutton idbtn点击/buttonscript src./js/app.js typemodule/script
/body 7.6.globalThis 对象 scriptconsole.log(globalThis);/script
