ES6 — ES11 新特性一篇通
2024-04-11 03:30:54
一、ES6
1.1、let
- 变量不能重复声明
- 有块级作用域
- 不存在变量提升（必须先声明后使用）
- 不影响作用域链
<script>//声明变量let a;let b, c, d;let e = 100;let f = 521, g = 'iloveyou', h = [];//1. 变量不能重复声明let star = '罗志祥';let star = '小猪';//2. 块儿级作用域 全局, 函数, evalif else while for {let girl = '周扬青';}console.log(girl);//3. 不存在变量提升console.log(song);let song = '恋爱达人';//4. 不影响作用域链{let school = '尚硅谷';function fn() {console.log(school);}fn();}
</script>
1.2、const
- 一定要赋初始值
- 一般常量使用大写（潜规则）
- 常量的值不能修改
- 块级作用域
- 对于数组和对象的元素修改，不算作对常量的修改，不会报错
<script>//声明常量const SCHOOL = '尚硅谷';//这些个是错误示范//1. 一定要赋初始值const A; //2. 一般常量使用大写(潜规则)const a = 100;//3. 常量的值不能修改SCHOOL = 'ATGUIGU';//4. 块儿级作用域{const PLAYER = 'UZI';}console.log(PLAYER);//5. 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错const TEAM = ['UZI','MXLG','Ming','Letme'];TEAM.push('Meiko');</script>
1.3、变量解构赋值
ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
- 数组解构
- 对象的解构
<script>// 1. 数组的结构const F4 = ['小沈阳','刘能','赵四','宋小宝'];let [xiao, liu, zhao, song] = F4;console.log(xiao);console.log(liu);console.log(zhao);console.log(song);// 2. 对象的解构const zhao = {name: '赵本山',age: '不详',xiaopin: function(){console.log("我可以演小品");}};let {name, age, xiaopin} = zhao;console.log(name);console.log(age);console.log(xiaopin);xiaopin();let {xiaopin} = zhao;xiaopin();</script>
1.4、模板字符串
ES6 引入新的声明字符串的方式 『``』 ‘’ “”
<script>// ES6 引入新的声明字符串的方式 『``』 '' "" //1. 声明// let str = `我也是一个字符串哦!`;// console.log(str, typeof str);//2. 内容中可以直接出现换行符let str = `<ul><li>沈腾</li><li>玛丽</li><li>魏翔</li><li>艾伦</li></ul>`;//3. 变量拼接let lovest = '魏翔';let out = `${lovest}是我心目中最搞笑的演员!!`;console.log(out);</script>
1.5、简化对象写法
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法，这样的书写更加简洁。
<script>let name = '尚硅谷';let change = function(){console.log('我们可以改变你!!');}const school = {name,change,improve(){console.log("我们可以提高你的技能");}}console.log(school);</script>
1.6、箭头函数以及声明特点
ES6 允许使用「箭头」（=>）定义函数。
- this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值
- 不能作为构造实例化对象
- 不能使用 arguments 变量
- 箭头函数的简写
- 箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
- 箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
<script>//声明一个函数let fn = function(){}let fn = (a,b) => {return a + b;}//调用函数let result = fn(1, 2);console.log(result);//1. this 是静态的. this 始终指向函数声明时所在作用域下的 this 的值function getName(){console.log(this.name);}let getName2 = () => {console.log(this.name);}//设置 window 对象的 name 属性window.name = '尚硅谷';const school = {name: "ATGUIGU"}//直接调用getName();getName2();//call 方法调用getName.call(school);getName2.call(school);//2. 不能作为构造实例化对象let Person = (name, age) => {this.name = name;this.age = age;}let me = new Person('xiao',30);console.log(me);//3. 不能使用 arguments 变量let fn = () => {console.log(arguments);}fn(1,2,3);//4. 箭头函数的简写//1) 省略小括号, 当形参有且只有一个的时候let add = n => {return n + n;}console.log(add(9));//2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略,而且语句的执行结果就是函数的返回值let pow = n => n * n;console.log(pow(8));</script>
1.7、函数参数的默认值
ES6 允许给函数参数赋值初始值
- 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
- 与解构赋值结合
<script>//1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)function add(a,c=10,b) {return a + b + c;}let result = add(1,2);console.log(result);//2. 与解构赋值结合function connect({host="127.0.0.1", username,password, port}){console.log(host)console.log(username)console.log(password)console.log(port)}connect({host: 'atguigu.com',username: 'root',password: 'root',port: 3306})</script>
1.8、rest参数
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
<script>// ES5 获取实参的方式function date(){console.log(arguments);}date('白芷','阿娇','思慧');// rest 参数function date(...args){console.log(args);// 可以使用数组的 filter some every map 方法}date('阿娇','柏芝','思慧');// rest 参数必须要放到参数最后function fn(a,b,...args){console.log(a);console.log(b);console.log(args);}fn(1,2,3,4,5,6);</script>
1.9、扩展运算符
扩展运算符能将『数组』转换为逗号分隔的『参数序列』
- 数组的合并
- 数组的克隆
- 将伪数组转为真正的数组
<script>// 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』//声明一个数组 ...const tfboys = ['易烊千玺','王源','王俊凯'];// => '易烊千玺','王源','王俊凯'// 声明一个函数function chunwan(){console.log(arguments);}chunwan(...tfboys);// chunwan('易烊千玺','王源','王俊凯')//1. 数组的合并 情圣 误杀 唐探const kuaizi = ['王太利','肖央'];const fenghuang = ['曾毅','玲花'];// const zuixuanxiaopingguo = kuaizi.concat(fenghuang);const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];console.log(zuixuanxiaopingguo);//2. 数组的克隆const sanzhihua = ['E','G','M'];const sanyecao = [...sanzhihua];// ['E','G','M']console.log(sanyecao);//3. 将伪数组转为真正的数组const divs = document.querySelectorAll('div');const divArr = [...divs];console.log(divArr);// arguments
</script>
1.10 、Symbol
<script>//创建Symbollet s = Symbol();// console.log(s, typeof s);let s2 = Symbol('尚硅谷');let s3 = Symbol('尚硅谷');//Symbol.for 创建let s4 = Symbol.for('尚硅谷');let s5 = Symbol.for('尚硅谷');//不能与其他数据进行运算// let result = s + 100;// let result = s > 100;// let result = s + s;// USONB you are so niubility // u undefined// s string symbol// o object// n null number// b boolean//向对象中添加方法 up downlet game = {name: '俄罗斯方块',up: function () { },down: function () { }};//声明一个对象let methods = {up: Symbol(),down: Symbol()};game[methods.up] = function(){console.log("我可以改变形状");}game[methods.down] = function(){console.log("我可以快速下降!!");}console.log(game);// ----------------------let youxi = {name: "狼人杀",[Symbol('say')]: function () {console.log("我可以发言")},[Symbol('zibao')]: function () {console.log('我可以自爆');}}console.log(youxi)class Person{static [Symbol.hasInstance](param){console.log(param);console.log("我被用来检测类型了");return false;}}let o = {};console.log(o instanceof Person);const arr = [1,2,3];const arr2 = [4,5,6];arr2[Symbol.isConcatSpreadable] = false;console.log(arr.concat(arr2));
</script>
1.11、迭代器
ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of
原生具备 iterator 接口的数据(可用 for of 遍历)
- Array
- Arguments
- Set
- Map
- String
- TypedArray
- NodeList
工作原理
- 创建一个指针对象，指向当前数据结构的起始位置
- 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
- 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
- 每调用 next 方法返回一个包含 value 和 done 属性的对象
注: 需要自定义遍历数据的时候，要想到迭代器。
<script>//声明一个数组const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];//使用 for...of 遍历数组// for(let v of xiyou){// console.log(v);// }let iterator = xiyou[Symbol.iterator]();//调用对象的next方法console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());//声明一个对象const banji = {name: "终极一班",stus: ['xiaoming','xiaoning','xiaotian','knight'],[Symbol.iterator]() {//索引变量let index = 0;//let _this = this;return {next: function () {if (index < _this.stus.length) {const result = { value: _this.stus[index], done:false};//下标自增index++;//返回结果return result;}else{return {value: undefined, done: true};}}};}}//遍历这个对象 for (let v of banji) {console.log(v);}</script>
1.12、生成器
生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同
注意事项：
- * 的位置没有限制
- 生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到 yield 语句后的值
- yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next 方法，执行一段代码
- next 方法可以传递实参，作为 yield 语句的返回值
<script> //生成器其实就是一个特殊的函数//异步编程 纯回调函数 node fs ajax mongodb//函数代码的分隔符function * gen(){// console.log(111);yield '一只没有耳朵';// console.log(222);yield '一只没有尾部';// console.log(333);yield '真奇怪';// console.log(444);}let iterator = gen();console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());//遍历// for(let v of gen()){// console.log(v);// }//实例1// 异步编程 文件操作 网络操作(ajax, request) 数据库操作// 1s 后控制台输出 111 2s后输出 222 3s后输出 333 // 回调地狱// setTimeout(() => {// console.log(111);// setTimeout(() => {// console.log(222);// setTimeout(() => {// console.log(333);// }, 3000);// }, 2000);// }, 1000);function one(){setTimeout(()=>{console.log(111);iterator.next();},1000)}function two(){setTimeout(()=>{console.log(222);iterator.next();},2000)}function three(){setTimeout(()=>{console.log(333);iterator.next();},3000)}function * gen(){yield one();yield two();yield three();}//调用生成器函数let iterator = gen();iterator.next();//实例2//模拟获取 用户数据 订单数据 商品数据 function getUsers(){setTimeout(()=>{let data = '用户数据';//调用 next 方法, 并且将数据传入iterator.next(data);}, 1000);}function getOrders(){setTimeout(()=>{let data = '订单数据';iterator.next(data);}, 1000)}function getGoods(){setTimeout(()=>{let data = '商品数据';iterator.next(data);}, 1000)}function * gen(){let users = yield getUsers();let orders = yield getOrders();let goods = yield getGoods();}//调用生成器函数let iterator = gen();iterator.next();</script>
1.13、promise
1.13.1、介绍与基本使用
<script>//实例化 Promise 对象const p = new Promise(function(resolve, reject){setTimeout(function(){//// let data = '数据库中的用户数据';// resolve// resolve(data);let err = '数据读取失败';reject(err);}, 1000);});//调用 promise 对象的 then 方法p.then(function(value){console.log(value);}, function(reason){console.error(reason);})
</script>
1.13.2、封装读取文件
//1. 引入 fs 模块
const fs = require('fs');//2. 调用方法读取文件
// fs.readFile('./resources/为学.md', (err, data)=>{// //如果失败, 则抛出错误
// if(err) throw err;
// //如果没有出错, 则输出内容
// console.log(data.toString());
// });//3. 使用 Promise 封装
const p = new Promise(function(resolve, reject){fs.readFile("./resources/为学.mda", (err, data)=>{//判断如果失败if(err) reject(err);//如果成功resolve(data);});
});p.then(function(value){console.log(value.toString());
}, function(reason){console.log("读取失败!!");
});
1.13.3、封装AJAX请求
// 接口地址: https://api.apiopen.top/getJokeconst p = new Promise((resolve, reject) => {//1. 创建对象const xhr = new XMLHttpRequest();//2. 初始化xhr.open("GET", "https://api.apiopen.top/getJ");//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);});
1.13.4、then方法
//创建 promise 对象const p = new Promise((resolve, reject)=>{setTimeout(()=>{resolve('用户数据');// reject('出错啦');}, 1000)});//调用 then 方法 then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定//1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值// const result = p.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);// });//链式调用p.then(value=>{}).then(value=>{});
1.13.5、多文件读取
//引入 fs 模块
const fs = require("fs");// fs.readFile('./resources/为学.md', (err, data1)=>{// fs.readFile('./resources/插秧诗.md', (err, data2)=>{// fs.readFile('./resources/观书有感.md', (err, data3)=>{// let result = data1 + '\r\n' +data2 +'\r\n'+ data3;
// console.log(result);
// });
// });
// });//使用 promise 实现
const p = new Promise((resolve, reject) => {fs.readFile("./resources/为学.md", (err, data) => {resolve(data);});
});p.then(value => {return new Promise((resolve, reject) => {fs.readFile("./resources/插秧诗.md", (err, data) => {resolve([value, data]);});});
}).then(value => {return new Promise((resolve, reject) => {fs.readFile("./resources/观书有感.md", (err, data) => {//压入value.push(data);resolve(value);});})
}).then(value => {console.log(value.join('\r\n'));
});
1.13.6、catch方法
const p = new Promise((resolve, reject)=>{setTimeout(()=>{//设置 p 对象的状态为失败, 并设置失败的值reject("出错啦!");}, 1000)});// p.then(function(value){}, function(reason){// console.error(reason);// });p.catch(function(reason){console.warn(reason);
});
1.14、Set
- 数组去重
- 交集
- 并集
- 差集
<script>//声明一个 setlet s = new Set();let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);//元素个数// console.log(s2.size);//添加新的元素// s2.add('喜事儿');//删除元素// s2.delete('坏事儿');//检测// console.log(s2.has('糟心事'));//清空// s2.clear();// console.log(s2);for(let v of s2){console.log(v);}let arr = [1,2,3,4,5,4,3,2,1];//1. 数组去重// let result = [...new Set(arr)];// console.log(result);//2. 交集let arr2 = [4,5,6,5,6];// let result = [...new Set(arr)].filter(item => {// let s2 = new Set(arr2);// 4 5 6// if(s2.has(item)){// return true;// }else{// return false;// }// });// let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));// console.log(result);//3. 并集// let union = [...new Set([...arr, ...arr2])];// console.log(union);//4. 差集let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));console.log(diff);</script>
1.15、Map
- 添加
- 删除
- 获取
- 清空
- 遍历
<script>//声明 Maplet m = new Map();//添加元素m.set('name','尚硅谷');m.set('change', function(){console.log("我们可以改变你!!");});let key = {school : 'ATGUIGU'};m.set(key, ['北京','上海','深圳']);//size// console.log(m.size);//删除// m.delete('name');//获取// console.log(m.get('change'));// console.log(m.get(key));//清空// m.clear();//遍历for(let v of m){console.log(v);}// console.log(m);</script>
1.16、class
- 静态成员
- 类属性
- 子类对父类的重写
- get和set
<script>//手机function Phone(brand, price) {this.brand = brand;this.price = price;}//添加方法Phone.prototype.call = function () {console.log("我可以打电话!!");}//实例化对象let Huawei = new Phone('华为', 5999);Huawei.call();console.log(Huawei);//classclass Shouji {//构造方法 名字不能修改constructor(brand, price) {this.brand = brand;this.price = price;}//方法必须使用该语法, 不能使用 ES5 的对象完整形式call() {console.log("我可以打电话!!");}}let onePlus = new Shouji("1+", 1999);console.log(onePlus);// -----------------------------------------// 静态成员 // function Phone(){// }// Phone.name = '手机';// Phone.change = function(){// console.log("我可以改变世界");// }// Phone.prototype.size = '5.5inch';// let nokia = new Phone();// console.log(nokia.name);// // nokia.change();// console.log(nokia.size);class Phone {//静态属性static name = '手机';static change() {console.log("我可以改变世界");}}let nokia = new Phone();console.log(nokia.name);console.log(Phone.name);// --------------------------------------------// 类继承class Phone {//构造方法constructor(brand, price) {this.brand = brand;this.price = price;}//父类的成员属性call() {console.log("我可以打电话!!");}}class SmartPhone extends Phone {//构造方法constructor(brand, price, color, size) {super(brand, price);// Phone.call(this, brand, price)this.color = color;this.size = size;}photo() {console.log("拍照");}playGame() {console.log("玩游戏");}call() {console.log('我可以进行视频通话');}}const xiaomi2 = new SmartPhone('小米', 799, '黑色', '4.7inch');// console.log(xiaomi);xiaomi.call();xiaomi.photo();xiaomi.playGame();// -------------------------------------------------------------------// 子类对父类方法的重写class Phone {//构造方法constructor(brand, price) {this.brand = brand;this.price = price;}//父类的成员属性call() {console.log("我可以打电话!!");}}class SmartPhone extends Phone {//构造方法constructor(brand, price, color, size) {super(brand, price);// Phone.call(this, brand, price)this.color = color;this.size = size;}photo() {console.log("拍照");}playGame() {console.log("玩游戏");}call() {console.log('我可以进行视频通话');}}const xiaomi = new SmartPhone('小米', 799, '黑色', '4.7inch');// console.log(xiaomi);xiaomi.call();xiaomi.photo();xiaomi.playGame();// ----------------------------------------------------------------// get 和 set class Phone {get price() {console.log("价格属性被读取了");return 'iloveyou';}set price(newVal) {console.log('价格属性被修改了');}}//实例化对象let s = new Phone();// console.log(s.price);s.price = 'free';
</script>
1.17、数值扩展
<script>//0. Number.EPSILON 是 JavaScript 表示的最小精度//EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16// function equal(a, b){// if(Math.abs(a-b) < Number.EPSILON){// return true;// }else{// return false;// }// }// console.log(0.1 + 0.2 === 0.3);// console.log(equal(0.1 + 0.2, 0.3))//1. 二进制和八进制// let b = 0b1010;// let o = 0o777;// let d = 100;// let x = 0xff;// console.log(x);//2. Number.isFinite 检测一个数值是否为有限数// console.log(Number.isFinite(100));// console.log(Number.isFinite(100/0));// console.log(Number.isFinite(Infinity));//3. Number.isNaN 检测一个数值是否为 NaN // console.log(Number.isNaN(123)); //4. Number.parseInt Number.parseFloat字符串转整数// console.log(Number.parseInt('5211314love'));// console.log(Number.parseFloat('3.1415926神奇'));//5. Number.isInteger 判断一个数是否为整数// console.log(Number.isInteger(5));// console.log(Number.isInteger(2.5));//6. Math.trunc 将数字的小数部分抹掉 // console.log(Math.trunc(3.5));//7. Math.sign 判断一个数到底为正数 负数 还是零console.log(Math.sign(100));console.log(Math.sign(0));console.log(Math.sign(-20000));</script>
1.18、对象方法扩展
<script>//1. Object.is 判断两个值是否完全相等 // console.log(Object.is(120, 120));// === // console.log(Object.is(NaN, NaN));// === // console.log(NaN === NaN);// === //2. Object.assign 对象的合并// const config1 = {// host: 'localhost',// port: 3306,// name: 'root',// pass: 'root',// test: 'test'// };// const config2 = {// host: 'http://atguigu.com',// port: 33060,// name: 'atguigu.com',// pass: 'iloveyou',// test2: 'test2'// }// console.log(Object.assign(config1, config2));//3. Object.setPrototypeOf 设置原型对象 Object.getPrototypeofconst school = {name: '尚硅谷'}const cities = {xiaoqu: ['北京','上海','深圳']}Object.setPrototypeOf(school, cities);console.log(Object.getPrototypeOf(school));console.log(school);
</script>
1.19、模块化
1.19.1、暴露数据
- 分别暴露
- 统一暴露
- 默认暴露
// 分别暴露
export let school = '1'export function teach(){console.log(1);
}// 统一暴露
let school = '2'
function a(){console.log(2);
}
export {school,a}// 默认暴露
export default{school:'3'change:function(){console.log(3);}
}
1.19.2、引入数据
- 通用式引入数据
- 解构赋值形式
- 简便形式 针对默认暴露
// 通用式引入数据
import * as m1 from "./文件相对路径"
// 解构赋值形式
import {数据名称(也可以：数据名称as别名 作用：避免冲突),数据名称} from "文件相对路径"
import {default as 别名} from "相对路径"
// 简便形式 针对默认暴露
import 变量名 from "文件相对路径"
二、ES7
- 数组是否包含某一元素
- 幂运算
<script>// includes indexOf// const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];//判断// console.log(mingzhu.includes('西游记'));// console.log(mingzhu.includes('金瓶梅'));// **console.log(2 ** 10);// console.log(Math.pow(2, 10));
</script>
三、ES8
3.1、async函数
- async 函数的返回值为 promise 对象，
- 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>
3.2、await函数
- await 必须写在 async 函数中
- await 右侧的表达式一般为 promise 对象
- await 返回的是 promise 成功的值
- 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>
3.3、async与await结合读取文件
//1. 引入 fs 模块
const fs = require("fs");//读取『为学』
function readWeiXue() {return new Promise((resolve, reject) => {fs.readFile("./resources/为学.md", (err, data) => {//如果失败if (err) reject(err);//如果成功resolve(data);})})
}function readChaYangShi() {return new Promise((resolve, reject) => {fs.readFile("./resources/插秧诗.md", (err, data) => {//如果失败if (err) reject(err);//如果成功resolve(data);})})
}function readGuanShu() {return new Promise((resolve, reject) => {fs.readFile("./resources/观书有感.md", (err, data) => {//如果失败if (err) reject(err);//如果成功resolve(data);})})
}//声明一个 async 函数
async function main(){//获取为学内容let weixue = await readWeiXue();//获取插秧诗内容let chayang = await readChaYangShi();// 获取观书有感let guanshu = await readGuanShu();console.log(weixue.toString());console.log(chayang.toString());console.log(guanshu.toString());
}main();
3.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/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')console.log(tianqi);}main();</script>
3.5、对象方法扩展
- Object.values：返回一个给定对象的所有可枚举属性值的数组
- Object.entries()：返回一个给定对象自身可遍历属性 [key,value] 的数组
- Object.getOwnPropertyDescriptors：方法返回指定对象所有自身属性的描述对象
<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>
四、ES9
4.1、rest与spread
<!-- Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符
--><script>//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'});//对象合并const skillOne = {q: '天音波'}const skillTwo = {w: '金钟罩'}const skillThree = {e: '天雷破'}const skillFour = {r: '猛龙摆尾'}const mangseng = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};console.log(mangseng)// ...skillOne => q: '天音波', w: '金钟罩'</script>
4.2、正则命名分组
<script>//声明一个字符串// let str = '<a href="http://www.atguigu.com">尚硅谷</a>';// //提取 url 与 『标签文本』// const reg = /<a href="(.*)">(.*)<\/a>/;// //执行// const result = reg.exec(str);// console.log(result);// // console.log(result[1]);// // console.log(result[2]);let str = '<a href="http://www.atguigu.com">尚硅谷</a>';//分组命名const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;const result = reg.exec(str);console.log(result.groups.url);console.log(result.groups.text);</script>
4.3、反向断言
<script>//声明字符串let str = 'JS5211314你知道么555啦啦啦';//正向断言const reg = /\d+(?=啦)/;const result = reg.exec(str);//反向断言const reg = /(?<=么)\d+/;const result = reg.exec(str);console.log(result);
</script>
4.4、正则dotAll
<script>//dot . 元字符 除换行符以外的任意单个字符let str = `<ul><li><a>肖生克的救赎</a><p>上映日期: 1994-09-10</p></li><li><a>阿甘正传</a><p>上映日期: 1994-07-06</p></li></ul>`;//声明正则// const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/;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);
</script>
五、ES10
5.1、Object.fromEntries
用来创建对象 接收二维数组或者Map，将其转化为对象
<script>//二维数组// const result = Object.fromEntries([// ['name','尚硅谷'],// ['xueke', 'Java,大数据,前端,云计算']// ]);//Map// const m = new Map();// m.set('name','ATGUIGU');// const result = Object.fromEntries(m);//Object.entries ES8const arr = Object.entries({name: "尚硅谷"})console.log(arr);
</script>
5.2、trimStart 和 trimEnd
用来清除字符串左右两边的空格
<script> // trimlet str = ' iloveyou ';console.log(str);console.log(str.trimStart());console.log(str.trimEnd());
</script>
5.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>
5.4、Symbol.prototype.description
用于获取字符串
<script>//创建 Symbollet s = Symbol('尚硅谷');console.log(s.description);
</script>
六、ES11
6.1、String.prototype.matchAll
<script>let str = `<ul><li><a>肖生克的救赎</a><p>上映日期: 1994-09-10</p></li><li><a>阿甘正传</a><p>上映日期: 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>
6.2、类的私有属性
<script>class 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>
6.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>
6.4、可选链操作符
<script>// ?.function 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>
6.5、动态 import 导入
实现按需加载，即懒加载
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态 import </title>
</head>
<body><button id="btn">点击</button><script src="./js/app.js" type="module"></script>
</body>
</html>
// import * as m1 from "./hello.js"; 不在一开始就导入
//获取元素
const btn = document.getElementById('btn');btn.onclick = function(){import('./hello.js').then(module => { //在用的时候导入module.hello();});
}
export function hello(){alert('Hello');
}
6.6、globalThis 对象
指向全局对象
6.7、BigInt
<script>//大整形// let n = 521n;// console.log(n, typeof(n));//函数// let n = 123;// console.log(BigInt(n));// console.log(BigInt(1.2));//大数值运算let max = Number.MAX_SAFE_INTEGER;console.log(max);console.log(max + 1);console.log(max + 2);console.log(BigInt(max))console.log(BigInt(max) + BigInt(1))console.log(BigInt(max) + BigInt(2))
</script>
本文参考自：https://www.bilibili.com/video/BV1uK411H7on?p=1&vd_source=cf6bad7b1e51cd74d81db0e2dd8f8521
ES6 — ES11 新特性一篇通相关推荐
- ES7、ES8、ES9、ES10、ES11 新特性 总结
目录 ES7新特性 一.Array.prototype.includes 二.指数操作符 ES8新特性 一.async 和 await 1.async 函数 2.await 表达式 async和awa ...
- 七月学习之E6、ES7、ES8、ES9、ES10、ES11新特性
目录 ES6新特性(2015) 1. let 和 const 命令 2. 解构赋值 3. 扩展运算符(spread) 4. 箭头函数 5. 函数参数默认值 6. 模板字符串 7. 对象属性和方法的简写 ...
- ES7、ES8、ES9、ES10、ES11新特性
一.ES7新特性 1. Array.prototype.includes includes 方法用来检测数组中是否包含某个元素,返回布尔值 2. 指数操作符 指数运算符 ** ,用来实现幂运算,功能与 ...
- ES6常用新特性---笔记一
ES6的新特性 1.定义函数不一定需要function 2.创建类,constructor 3.模块,JavaScript支持了原生的module,将不同的代码分别写在不同的文件,最后只需export ...
- ES6一些新特性记录
ES6一些新特性记录 1.箭头操作符 箭头操作符左边是需要输入的参数,右边是返回值 比如运用到js回调函数中可以使书写更加方便 var array=[1,3,5]; //标准写法 array.fore ...
- ES6 的新特性总结
ES6 的新特性总结 关于声明变量 由 var 变成 let 和 const 区别: var声明的变量会挂载到window上,let和const声明的变量不会 var声明的变量存在变量提升,而let和 ...
- C# 10 新特性 —— 补充篇
C# 10 新特性 -- 补充篇 Intro 前面已经写了几篇文章介绍 C# 10 新特性的文章,还有一些小的更新 Constant interpolated strings 在之前的版本中,如果想要 ...
- C# 9 新特性 —— 补充篇
C# 9 新特性 -- 补充篇 Intro 前面我们分别介绍了一些 C# 9 中的新特性,还有一些我觉得需要了解一下的新特性,写一篇作为补充. Top-Level Statements 在以往的代码里 ...
- JDK8之新特性扩展篇
转载自 JDK8之新特性扩展篇 BASE64 base64编码解码已经被加入到了jdk8中了. import java.nio.charset.StandardCharsets; import jav ...
最新文章
- 【Linux】10.安装和开启ftp服务
- Python中数据的保存和读取
- swift变量和函数
- 情人节用python写个贪吃蛇安慰自己
- 最常见的水平拆分规则
- 电商大厂面试都有哪些套路?
- [转]WTL的windows mobile环境的配置(vs2008)[最终版，验证通过]
- Chapter 7 代理模式
- VS code 快捷键常用
- java poi 合并单元格 边框显示不全
- 三次样条插值证明过程及代码实现
- 前端下载图片（文件）以及打包下载图片（文件）
- excel图片 html,微商相册生成EXCEL表格中将原图按HTML格式显示的实例
- 李德毅：自动驾驶炒作这么久为什么老百姓仍没有坐上
- cocos2d-x精灵的放大和缩小
- 【UML】UML常见的几种视图
- HMS Core音频编辑服务音源分离与空间音频渲染，助力快速进入3D音频的世界
- 字符串的方法练习------Python篇
- 复杂度分析（大O表示法）
- 改变世界vs娱乐自己