ES6-ES11新特性知识点

一、ES6

1、查看ES6兼容性

http://kangax.github.io/compat-table/es6/ 可查看兼容性

2、let定义变量

快速入门：

//特点：
//1.let变量不能重复声明,只在当前块生效
//2.不存在变量提升
//3.不影响作用域链效果
//4.存在 暂时性死区：代码块内，使用let命令声明变量之前，该变量都是不可用的
let star = '小猪';

深入理解：

3、const定义常量

快速入门：

//特点：
//1.const声明常量时必须赋初值，值一旦确认便不可修改，一般常量名大写(代码规范)
//2.const常量同块内不能重复声明,只在当前块生效
//3.不影响作用域链效果
//4.不存在变量提升
//5.存在暂时性死区：代码块内，使用const命令声明常量之前，该常量都是不可用的
const star = '小猪';

深入理解：

4、作用域

快速入门：

ES6之后作用域为：全局作用域、函数作用域、{}块级作用域（新增）、eval（ES严格模式下存在）

深入理解：

5、变量的解构赋值

快速入门：

//ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，
//这被称为解构赋值。
//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);/*** ƒ (){console.log("我可以演小品");}*/xiaopin();//我可以演小品//结构对象，需要与对象zhao 内部函数属性同名let {xiaopin} = zhao;xiaopin();//我可以演小品

深入理解：

6、模板字符串

快速入门：

// ES6 引入新的声明字符串的方式 『``』 反引号
//语法
let str1=`我也是一字符串哦`
//2. 内容中可以直接出现换行符
let str2 = `<ul><li>沈腾</li><li>玛丽</li><li>魏翔</li><li>艾伦</li></ul>`;
//3. 变量拼接 ${}
let lovest = '魏翔';
let out = `${lovest}是我心目中最搞笑的演员!!`;
console.log(out);

深入理解：

7、简化对象写法

快速入门：

<script>
//ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
//这样的书写更加简洁let name = '尚硅谷';let change = function(){console.log('我们可以改变你!!');}//ES6允许在大括号里面，直接写入变量和函数名，作为对象的属性和方法// ES6还允许在对象中声明函数时，去掉:和functionlet SCHOOL = {name,//等价于name:namechange,//等价于change(){}//简化函数声明等价于improve:function(){}improve(){console.log("我们可以提高你的技能");}}console.log(school);</script>

8、箭头函数

快速入门：

// ES6 允许使用「箭头」（=>）定义函数。//声明一个函数
// let fn = function(a,b){return a + b;}
let fn = (a,b) => {return a + b;
}
//调用函数
let result = fn(1, 2);
console.log(result);//3//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);//ATGUIGU 普通函数this指向调用它的对象
// getName2.call(school);//尚硅谷  箭头函数this依旧指向window//2. 不能作为构造函数实例化对象 报错Unacught TypeError:XXX is not a constructor
// let Person = (name, age) => {//     this.name = name;
//     this.age = age;
// }
// let me = new Person('xiao',30);
// console.log(me);//3.不能使用 arguments 变量  报错Uncaught ReferenceError:arguments is not defined// let fn = () => {//     console.log(arguments);// }// fn(1,2,3);
//4.箭头函数简写//(1) 省略小括号, 当形参有且只有一个的时候// let add = n => {//     return n + n;// }// console.log(add(9));//18//(2) 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略// 而且语句的执行结果就是函数的返回值//let pow = n => n * n;// console.log(pow(8));//64

9、参数默认值

//ES6 允许给函数参数赋值初始值//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)}let option = { //this指向 optionhost: this.host,username: this.username,password: this.password,port: this.port}option.host = "localhost"option.username = "user"//解构赋值  类似 {host,username,password,port}=option connect(option)

10、rest参数

// 新特性:ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments// ES5 获取实参的方式// function date(){//     console.log(arguments);// }// date('白芷','阿娇','思慧');// rest 参数 获取实参的方式// function date(...args){  //res参数  ...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);

11、拓展运算符

// 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』//声明一个数组 ...const tfboys = ['易烊千玺', '王源', '王俊凯'];// 声明一个函数function chunwan() {console.log(arguments); // '易烊千玺','王源','王俊凯'}chunwan(...tfboys); //...后等同于 chunwan('易烊千玺','王源','王俊凯')

与rest参数不同的是拓展运算符书写在函数调用的实参位置

应用场景：

<body><div></div><div></div><div></div><script>//1. 数组的合并 情圣  误杀  唐探// const kuaizi = ['王太利','肖央'];// const fenghuang = ['曾毅','玲花'];// //ES5做法 const zuixuanxiaopingguo = kuaizi.concat(fenghuang);// ES6做法: 拓展运算符// 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');console.log(divs); //对象const divArr = [...divs]; //数组console.log(divArr); // arguments</script>
</body>

12、Symbol

**含义：**ES6引入的一种新的数据类型 Symbol，表示独一无二的值，

主要作用是给对象添加属性和方法

是js第七种数据类型

特点：

1、Symbol的值唯一，用来解决命名冲突问题

2、Symbol值不能与其他数据类型进行运算

3、 Symbol定义的对象属性不能使用 for…in循环遍历，

但可以使用Reflect.ownKeys来获取对象的所有键名

一、创建方式

 //创建Symbol//Symbol是一个函数对象let s = Symbol();//console.log(s, typeof s);//Symbol('xuexi') 这种方式创建的Symbol值是变化的 let s2 = Symbol('xuexi'); // xuexi是类似注释的功能let s3 = Symbol('xuexi');console.log(s2 === s3); //false //Symbol.for 创建   for() 根据参数字符串创建Symbol,得到唯一的Symbol值// Symbol.for('xuexi') 这种方式创建的Symbol值是不变的let s4 = Symbol.for('xuexi');let s5 = Symbol.for('xuexi');console.log(s4 === s5); //true//注意点//不能与其他数据进行运算//ncaught TypeError: Cannot convert a Symbol value to a number at//let result = s + 100;//    let result = s > 100;//    let result = s + s;// USONB  you are so niubility  Js七种数据类型// u  undefined// s  string  symbol// o  object// n  null number// b  boolean

二、应用场景

   //向对象中添加方法 up down//ES5方式 //若在已存在的对象上进行添加属性时,//直接声明方式可能存在与原对象属性命名冲突问题let game = {name: '俄罗斯方块',up: function () {},down: function () {}};//ES6 利用Symbol解决//添加方式一:// 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)//youxi[Symbol('say')]();报错 无法调用 因为 Symbol('say') 方式创建Symbol的值是动态变化的//console.log(Symbol('say')===Symbol('say')); falseyouxi[Reflect.ownKeys(youxi)[1]](); //调用方法

三、内置属性

//Symbol内置属性 控制对象在特定情景下的表现 定义后在特定场景自动触发 拓展了对象的功能//1. 例子 Symbol.hasInstance//其他对象 与当前对象进行instanceof时 [Symbol.hasInstance] 会被触发调用 控制类型检测// class Person{//     static [Symbol.hasInstance](param){ //param实参为 instanceof表达式左侧内容//         console.log(param);//         console.log("我被用来检测类型了");//         return false;//instanceof结果为false//     }// }// let o = {};// console.log(o instanceof Person);//2.例子 [Symbol.isConcatSpreadable]// 设置数组是否在合并时展开(数组传化为逗号隔开的数字序列)// const arr = [1,2,3];// const arr2 = [4,5,6];// arr2[Symbol.isConcatSpreadable] = false;//不可展开// console.log(arr.concat(arr2));//1,2,3,arr2数组

13、迭代器

含义：遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

Iterator 在js中指对象的一个属性，也就是Symbol(Symbol.Iterator)

ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费

原生具备Iterator接口的数据：

a) Array

b) Arguments

c) Set

d) Map

e) String

f) TypedArray

g) NodeList

原理：

a) Symbol.Iterator返回创建一个指针对象，指向当前数据结构的起始位置

b) 指针对象第一次调用对象的 next ()方法，指针自动指向数据结构的第一个成员

c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员

d) 每调用 next 方法返回一个包含 value 和 done 属性的对象

 //声明一个数组const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];console.log(xiyou);//使用 for...of 遍历数组// for(let v of xiyou){//     console.log(v);// }//原理 //iterator对象的next方法执行返回 遍历数组 内容let iterator = xiyou[Symbol.iterator]();//调用iterator对象的next方法console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());console.log(iterator.next());

自定义迭代器遍历对象

      //声明一个对象  自定义对象无法使用 for of 遍历const banji = {name: "六年级一班",stus: ['xiaoming','xiaoning','xiaotian','knight'],/*对象进行 for...of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器*/[Symbol.iterator]() {//this 当前对象=banjilet keys = Object.keys(this)let len = keys.lengthlet values = Object.values(this)//索引变量let index = 0;let _this = this;return { //a.返回一个对象 为指针对象next: function () { //b.c.指针对象里设置next方法if (index < len) {//console.log(_this);const result = {value: {k: keys[index],v: values[index]},done: false //表遍历未结束};//下标自增index++;//返回结果return result;} else {//d.返回一个包含value合done属性的对象return {value: undefined,done: true //遍历结束};}}};}}//遍历这个对象 for (let v of banji) {console.log(v);}

14、生成器函数

概念： 生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

特点：

1、生成器函数执行时是可暂停的，之后又能从暂停处继续执行。（暂停标识：yield）

2、其中yield语句类似于return：可以返回一个内部状态值，yield 后跟要返回的内容

但不同的是，return结束函数执行，让生成器对象的done状态变为true

yield* 表示将任务交给别的生成器执行

3、调用生成器函数返回一个迭代器

5、生成器执行方法：next()的参数表示上一条yield语句的返回值，所有第一次使用next方法时，传递的参数是无效的。

入门语法示例：

//生成器其实就是一个特殊的函数,主要进行异步编程//异步编程  纯回调函数  node fs  ajax mongodb//yield 算是函数代码的分隔符，将函数代码分块，next方法分块执行//声明方式 *function * gen(){console.log(111);yield '一只没有耳朵';//第一次next()返回 {value: '一只没有耳朵', done: false}console.log(222);yield '一只没有尾部';//第二次next()返回 {value: '一只没有尾部', done: false}console.log(333);yield '真奇怪';console.log(444);}let iterator = gen();//执行方式：生成器返回迭代器next()调用执行  done:false执行未结束console.log(iterator.next());//执行显示 111 返回对象{value: '一只没有耳朵', done: false}console.log(iterator.next());//执行显示 222 返回对象{value: '一只没有尾部', done: false}console.log(iterator.next());console.log(iterator.next());//遍历// for(let v of gen()){//     console.log(v);// }

一、生成器函数的参数传递

      //next传入的参数将作为上一个yeild语句的返回结果 function * gen(arg){console.log(arg);let one = yield 111;//111为返回结果console.log(one);let two = yield 222;console.log(two);let three = yield 333;console.log(three);}//执行获取迭代器对象let iterator = gen('AAA');//第一次调用next()console.log(iterator.next());//第二次调用next()  传入的参数将会是上一个next的返回值console.log(iterator.next('BBB'));//第三次调用next()console.log(iterator.next('CCC'));//console.log(iterator.next('DDD'));

三、实际应用

案例1：

1s 后控制台输出 111 2s后输出 222 3s后输出 333

   // 异步编程 应用 ：文件操作 网络操作(ajax, request) 数据库操作// 任务: 1s 后控制台输出 111  2s后输出 222  3s后输出 333// ES5 写法// ：产生的回调地狱 代码可读性极差// setTimeout(() => {//     console.log(111);//     setTimeout(() => {//         console.log(222);//         setTimeout(() => {//             console.log(333);//         }, 3000);//     }, 2000);// }, 1000);//ES6 实现//声明第一个异步任务function one(){setTimeout(()=>{console.log(111);iterator.next();//调用two()方法},1000)}//声明第二个异步任务function two(){setTimeout(()=>{console.log(222);iterator.next();//调用three()方法},2000)}//声明第三个异步任务function three(){setTimeout(()=>{console.log(333);iterator.next(); //继续向下调用},3000)}function * gen(){//统一管理调用yield one();yield two();yield three();}//调用生成器函数let iterator = gen();iterator.next();

案例2：

模拟获取 1、用户数据 2、订单数据 3、商品数据

   //模拟获取 1、用户数据  2、订单数据  3、商品数据//定时器模拟  请求过程//1、获取用户数据function getUsers(UserID){setTimeout(()=>{console.log("getUsers()获取到的用户数据")console.log(UserID)let data = '用户数据'+UserID;iterator.next(data);//传递给下一个next()的参数将作为本次函数调用的返回值}, 1000);}//2、获取订单数据function getOrders(userData){setTimeout(()=>{console.log("getOrder获取到的用户数据")console.log(userData)let data = '订单数据'+123456;iterator.next(data);}, 1000)}//3、获取商品数据function getGoods(orderData){setTimeout(()=>{console.log("getGoodsr获取到的订单数据")console.log(orderData)let data = '商品数据';iterator.next(data);}, 1000)}function * gen(UserId){let users = yield getUsers(UserId);let orders = yield getOrders(users);let goods = yield getGoods(orders);}//调用生成器函数let iterator = gen("992285544");iterator.next();//执行getUser()

[译] 什么是 JavaScript 生成器？如何使用生成器？ - 知乎 (zhihu.com)

15、class

含义：ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对

象的模板。

通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是

一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象

原型的写法更加清晰、更像面向对象编程的语法而已。

class定义静态成员属性

//static 修饰成员属性 由类名调用
class Phone{//静态属性static name = '手机';static change(){console.log("我可以改变世界");}}let nokia = new Phone();console.log(nokia.name);//undeifindconsole.log(Phone.name);//手机

实现继承

1、es5 方式

//手机  父类function Phone(brand, price){this.brand = brand;this.price = price;}Phone.prototype.call = function(){console.log("我可以打电话");}//智能手机  子类function SmartPhone(brand, price, color, size){//this.Phone(brand,price)等价于//SmartPhone.Phone(brand,price)子类调父类获得父类所有属性和函数Phone.call(this, brand, price);this.color = color;this.size = size;}//设置子级构造函数的原型SmartPhone.prototype = new Phone;SmartPhone.prototype.constructor = SmartPhone;//声明子类的方法SmartPhone.prototype.photo = function(){console.log("我可以拍照")}SmartPhone.prototype.playGame = function(){console.log("我可以玩游戏");}const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');console.log(chuizi);

2、ES6方式

方法重写

很像java的

//父类
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方法

 // get 和 setclass Phone{//默认无参构造get price(){console.log("价格属性被读取了");return 'iloveyou';}set price(newVal){//必须有参数console.log('价格属性被修改了');}}//实例化对象let s = new Phone();console.log(s.price);// iloveyou  执行class类中的price()方法s.price = 'free';

(49条消息) JavaScript系列—class（静态方法和属性、实例属性、私有方法和属性）_jiaojsun的博客-CSDN博客

16、ES6数值拓展

 //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);//fasle 不符合常理// 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));//true// console.log(Number.isFinite(100/0));//false// console.log(Number.isFinite(Infinity));//false//Infinity  表无线//3. Number.isNaN 检测一个数值是否为 NaN（与数字相关） // console.log(Number.isNaN(123)); //4. Number.parseInt Number.parseFloat 字符串转整数/小数 自动截取// console.log(Number.parseInt('5211314love'));//5211314// console.log(Number.parseFloat('3.1415926神奇'));3.1415926//5. Number.isInteger 判断一个数是否为整数// console.log(Number.isInteger(5));//true // console.log(Number.isInteger(2.5));//false//6. Math.trunc 将数字的小数部分抹掉  // console.log(Math.trunc(3.5)); //3//7. Math.sign 判断一个数到底为正数 负数 还是零console.log(Math.sign(100)); //1console.log(Math.sign(0)); //0console.log(Math.sign(-20000)); //-1

17、对象方法拓展

//1. Object.is 判断两个值是否完全相等 // console.log(Object.is(120, 120));// === true// console.log(Object.is(NaN, NaN));// === true//直接=== 永远false// console.log(NaN === NaN);// === false//2. Object.assign(obj1,obj2) 对象的合并// 属性内容冲突时 obj2对象覆盖前面obj1对象// 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',//     tes2: 'test2'// }// console.log(Object.assign(config1, config2));//3. Object.setPrototypeOf(目标对象，原型对象) 设置原型对象  Object.getPrototypeof//不推荐const school = {name: '尚硅谷'}const cities = {xiaoqu: ['北京', '上海', '深圳']}Object.setPrototypeOf(school, cities);console.log(Object.getPrototypeOf(school));console.log(school);

18、ES6模块化

模块化是指将大的程序文件，拆分成有联系的小文件即模块

一、模块化优势

1、防止命名冲突

2、代码复用

3、高维护性

二、模块化规范产品

ES6之前js没有自己的模块规范化

ES6 之前的模块化规范有：

CommonJS 规范=> NodeJS、Browserify
AMD规范 => requireJS
CMD规范 => seaJS

三、ES6模块化语法

模块功能主要由两个命令构成：export 和 import。

⚫ export 命令用于规定模块的对外接口

⚫ import 命令用于输入其他模块提供的功能

四、实例

//./js/module1.js文件//export 对外暴露 school  和 teach()//分别暴露方式
export let school='xuexiao'
export function teach(){console.log("我可以教学生");
}

//./js/module2.js文件let job="js开发"function findJob(){console.log("找工作！！！");
}//统一对外暴露
export {job,findJob}

//./js/module3.js
//默认暴露
export default{school:'xuexiao',change:function(){console.log("改变你");}
}

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script type="module">//1、通用导入方式//./index.html 文件//引入module1.js 取到所有export暴露数据(分别暴露) 存入module1 import * as m1 from './js/module1.js'console.log(m1);//引入module2.js 内容(统一暴露)import * as m2 from './js/module2.js'console.log(m2);//引入module3.js 默认暴露import * as m3 from './js/module3.js'console.log(m3); m3.default.change();//2、结构赋值形式import {school,teach} from './js/module1.js'//重名时 可以使用别名,导入名称应和包内名称一致import {school as qinghua,findJob} from './js/module2.js'//默认暴露不可直接defaultimport {default as module3} from './js/module3.js'console.log(school);console.log(teach);console.log(qinghua);console.log(findJob);console.log(module3);//3、简便形式 （只针对默认暴露）import mm3 from './js/module3.js'console.log(mm3);</script><!-- 导入入口文件 --><script src="./js/app.js" type="module"></script></body></html>

入口文件 ./js/app.js

//4、书写入口文件引入模块
import * as m1 from './module1.js'
import * as m2 from './module2.js'
import * as m3 from './module3.js'
console.log(m1);
console.log(m2);
console.log(m3);

五、模块化代码在项目中的使用方式

Bable转化

主要作用：将最新的ES6语法转化为浏览器可以识别的ES5语法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!--1、安装babel-cli babel命令行工具babel-preset-env 预设包包含最新es语法browserify 轻量打包工具，类似webpack输入命令安装:npm初始化:>npm init --yes安装工具:?>npm i babel-cli / babel-preset-env / browserify -d2、执行babel转换局部安装：>npx babel 源代码目录 -d 编译结果目录 --presets=babel-preset-env全局安装：>babel3、打包 针对模块化入口文件,否则无法正常引入>npx browserify 编译结果目录入口文件 -o 打包输出目录例子：>npx browserify dist/js/app.js -o dist/index.js-->
</body></html>

ES6模块化引入NPM包

二、ES7

/*** 1、Array.prototype.includes() 检测数组是否包含某个元素* 返回值  Boolean* /* // const mingzhu = ['西游记','红楼梦','三国演义','水浒传'];//判断// console.log(mingzhu.includes('西游记')); //true// console.log(mingzhu.includes('金瓶梅')); //false/*** 2、   **  幂运算* */console.log(2 ** 10); // ES7console.log(Math.pow(2, 10)); //ES5

三、ES8

1、async函数

作用：

async和await两种语法结合可以让异步代码像同步代码一样书写

特点：

1、async函数返回值为promise对象。

2、promise对象的结果由async函数执行的返回值决定

语法：

 //async 函数（呃think）//特殊函数 总是返回promise对象 //声明方式：async function fn() {//返回值特点：//  返回的结果不是一个 Promise 类型的对象, 则就是成功 Promise 对象// 1、返回一个字符串 返回结果仍是成功状态的Promise对象//return '尚硅谷';// 2、return 返回一个成功的promise对象// return;// 3、抛出错误, 返回的结果是一个失败的 Promise// throw new Error('出错啦!');// 4、返回的结果如果是一个 Promise 对象return new Promise((resolve, reject) => {resolve('成功的数据'); //成功的promise对象//reject("失败的错误");});}const result = fn();console.log(result);//调用 then 方法result.then(value => { //成功时console.log(value);}, reason => { //失败时console.warn(reason);})

2、await表达式

特点:

1、await 必须写在 async 函数中

2、 await 右侧的表达式一般为 promise 对象

3、 await 返回的是 promise 成功的值

4、 await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

语法：

   //创建 promise 对象const p = new Promise((resolve, reject) => {// resolve("用户数据");reject("失败啦!");})// await 要放在 async 函数中.async function main() {try {let result = await p;//await表达式只返回成功的Promise对象 失败会抛出异常console.log(result);} catch (e) {console.log(e);}}//调用函数main(); //失败啦！

async和await结合案例

1、结合读取文件

//1. 引入nodejs  fs 模块
const fs = require("fs");//读取『为学』
function readWeiXue() {return new Promise((resolve, reject) => {//读取 为学.mdfs.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);})})
}//2、声明一个 async 函数
async function main(){//获取为学内容 promise对象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();
//运行指令 》 node 文件名.js

2、结合发送Ajax请求

 // 发送 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();

3、对象方法的拓展

Object.values()方法返回一个给定对象的所有可枚举属性值的数组
Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组
Object.getOwnPropertyDescriptors()该方法返回指定对象所有自身属性的描述对象

 //声明对象const school = {name: "尚硅谷",cities: ['北京', '上海', '深圳'],xueke: ['前端', 'Java', '大数据', '运维']};//1、获取对象所有的键// console.log(Object.keys(school));//获取对象所有的值// console.log(Object.values(school));//2、获取元素键值 entries// console.log(Object.entries(school));//创建 Map// const m = new Map(Object.entries(school));// console.log(m.get('cities'));//3、对象属性的描述对象// console.log(Object.getOwnPropertyDescriptors(school));// const obj = Object.create(null, {//     name: {//         //设置值//         value: '尚硅谷',//         //属性特性//         writable: true,//是否可写//         configurable: true, //是否可配置//         enumerable: true//是否可以枚举//     } // });

js对象属性描述对象参考：

属性描述对象 – JavaScript 标准参考教程（alpha） (ruanyifeng.com)

四、ES9

1、对象的拓展运算符

 /**Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符*///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: '天音波',f: '闪现'}const skillTwo = {w: '金钟罩'}const skillThree = {e: '天雷破'}const skillFour = {r: '猛龙摆尾'}const mangseng = {...skillOne,...skillTwo,...skillThree,...skillFour};console.log(mangseng)

2、正则拓展：命名捕获分组

 //声明一个字符串// 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);

3、正则拓展2:反向断言

  //声明字符串let str = 'JS5211314你知道么555啦啦啦';//正向断言const reg = /\d+(?=啦)/;const result = reg.exec(str);//反向断言const reg = /(?<=么)\d+/;const result = reg.exec(str);console.log(result);

3、正则拓展:dotAll模式

  //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);

javaScript ES6-ES11新特性总结相关推荐

ES6 — ES11 新特性一篇通
一.ES6 1.1.let 变量不能重复声明有块级作用域不存在变量提升(必须先声明后使用) 不影响作用域链 <script>//声明变量let a;let b, c, d;let e ...
使用JavaScript ES6的新特性计算Fibonacci（非波拉契数列）
面试题:用JavaScript开发一个函数,打印非波拉契数列. 我们只要记住非波拉契数列的计算公式,就不难写出来了: F(0)=1,F(1)=1, F(n)=F(n-1)+F(n-2) 我写的Java ...
七月学习之E6、ES7、ES8、ES9、ES10、ES11新特性
目录 ES6新特性(2015) 1. let 和 const 命令 2. 解构赋值 3. 扩展运算符(spread) 4. 箭头函数 5. 函数参数默认值 6. 模板字符串 7. 对象属性和方法的简写 ...
ES6常用新特性---笔记一
ES6的新特性 1.定义函数不一定需要function 2.创建类,constructor 3.模块,JavaScript支持了原生的module,将不同的代码分别写在不同的文件,最后只需export ...
ES7、ES8、ES9、ES10、ES11 新特性总结
目录 ES7新特性一.Array.prototype.includes 二.指数操作符 ES8新特性一.async 和 await 1.async 函数 2.await 表达式 async和awa ...
ES7、ES8、ES9、ES10、ES11新特性
一.ES7新特性 1. Array.prototype.includes includes 方法用来检测数组中是否包含某个元素,返回布尔值 2. 指数操作符指数运算符 ** ,用来实现幂运算,功能与 ...
ES6一些新特性记录
ES6一些新特性记录 1.箭头操作符箭头操作符左边是需要输入的参数,右边是返回值比如运用到js回调函数中可以使书写更加方便 var array=[1,3,5]; //标准写法 array.fore ...
ES6 的新特性总结
ES6 的新特性总结关于声明变量由 var 变成 let 和 const 区别: var声明的变量会挂载到window上,let和const声明的变量不会 var声明的变量存在变量提升,而let和 ...
ES6~ES12新特性
ES6新特性 let属性 <div class="item">记得刷卡</div> <script type="text/javascrip ...
es5和es6的区别、以及es6的新特性
es5和es6的区别系统库的引入 es5:ES5中的引用需要先使用require导入React包,成为对象,再去进行真正引用 es6:ES6里,可以使用import方法来直接实现系统库引用,不需要额 ...

javaScript ES6-ES11新特性总结

ES6-ES11新特性知识点

一、ES6

1、查看ES6兼容性

2、let定义变量

3、const定义常量

4、作用域

5、变量的解构赋值

6、模板字符串

7、简化对象写法

8、箭头函数

9、参数默认值

10、rest参数

11、拓展运算符

12、Symbol

13、迭代器

14、生成器函数

15、class

16、ES6数值拓展

17、对象方法拓展

18、ES6模块化

二、ES7

三、ES8

1、async函数

2、await表达式

3、对象方法的拓展

四、ES9

1、对象的拓展运算符

2、正则拓展：命名捕获分组

3、正则拓展2:反向断言

javaScript ES6-ES11新特性总结相关推荐

最新文章

热门文章