应用场景:
频繁使用对象方法、数组元素,就可以使用解构赋值形式;
4、模板字符串
概述:
模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:
-
字符串中可以出现换行符;
-
可以使用 ${xxx} 形式引用变量;
代码演示及相关说明:
应用场景:
当遇到字符串与变量拼接的情况使用模板字符串;
5、简化对象写法
概述:
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁;
代码示例及相关说明:
6、箭头函数
概述:
ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿 名函数的定义;
箭头函数的注意点:
-
如果形参只有一个,则小括号可以省略;
-
函数体如果只有一条语句,则花括号可以省略,函数的返回值为该条语句的执行结果(花括号省略后 return 必须省略);
-
箭头函数 this 指向声明时所在作用域下 this 的值;箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值;
-
原始的function 的 this是看 调用这个this的属性的函数属于哪一个对象
-
箭头函数不能作为构造函数实例化;
-
不能使用 arguments变量;
箭头函数应用示例
-
箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
-
箭头函数不适合与 this 有关的回调. DOM元素事件回调, 对象的方法
7、ES6中函数参数的默认值
-
ES6 允许给函数参数赋值初始值
-
形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
-
与解构赋值结合
8、rest参数
概述:
ES6 引入 rest 参数,用于获取函数的实参,用来代替 arguments;
rest 参数必须要放到参数最后
9、扩展运算符
介绍:
… 扩展运算符能将数组转换为逗号分隔的参数序列;
『扩展运算符』 可以对 集合实现了 iterator接口的对象操作
扩展运算符(spread)也是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列,对数组进行解包;
扩展运算符的应用
10、Symbol
Symbol 概述:
ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是JavaScript 语言的第七种数据类型,是一种类似于字符串的数据类型;
Symbol 特点:
-
Symbol 的值是唯一的,用来解决命名冲突的问题;
-
Symbol 值不能与其他数据进行运算;
-
Symbol 定义的对象属性不能使用for…in循环遍历 ,但是可以使用Reflect.ownKeys 来获取对象的所有键名;
Reflect.ownKeys 来获取对象的所有键名
class Person {
constructor() {
this.a = 1
this.b = 2
this[Symbol.for(‘a’)] = 3
this[Symbol()] = ‘test’
this[Symbol()] = ‘sucess’
}
}
let person = new Person;
for (var a in person) {
console.log(a + ‘:’ + person[a]);
}
console.log(‘\n’);
console.log(‘属性:’);
console.log(Reflect.ownKeys(person));
//取出第一个Symbol() 的值
let t = Reflect.ownKeys(person)[3]
console.log(person[t] + ‘\n’);
//遍历
for (var i of Reflect.ownKeys(person)) {
console.log(i);
console.log(: ${person[i]}\n
);
}
执行结果:
对象添加symbol 类型的属性
| 内置Symbol的值 | 调用时机 |
| — | — |
| Symbol.hasInstance | 当其他对象使用 instanceof 运算符,判断是否为该对象的实例时,会调用这个方法 |
| Symbol.isConcatSpreadable | 对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值,表示该对象用于Array.prototype.concat()时,是否可以展开。 |
| Symbol.species | 创建衍生对象时,会使用该属性 |
| Symbol.match | 当执行 str.match(myObject) 时,如果该属性存在,会调用它,返回该方法的返回值。 |
| Symbol.replace | 当该对象被 str.replace(myObject)方法调用时,会返回该方法的返回值。 |
| Symbol.search | 当该对象被 str. search (myObject)方法调用时,会返回该方法的返回值。 |
| Symbol.split | 当该对象被 str. split (myObject)方法调用时,会返回该方法的返回值。 |
| Symbol.iterator | 对象进行 for…of 循环时,会调用 Symbol.iterator 方法,返回该对象的默认遍历器 |
| Symbol.toPrimitive | 该对象被转为原始类型的值时,会调用这个方法,返回该对象对应的原始类型值。 |
| Symbol. toStringTag | 在该对象上面调用 toString 方法时,返回该方法的返回值 |
| Symbol. unscopables | 该对象指定了使用 with 关键字时,哪些属性会被 with环境排除。 |
特别的: Symbol内置值的使用,都是作为某个对象类型的属性去使用; 【拓展对象功能】
//一些不理解的代码
//Symbol内置值给类使用时,需要作为静态属性
class Person {
}
function Person1() {
}
class Person2 {
static Symbol.hasInstance {
console.log(param);
console.log(“我被用来检测类型了”);
return false;
}
}
Person[Symbol.hasInstance] = (param) => {
console.log(param);
console.log(“我被用来检测类型了”);
return true;
}
Person1[Symbol.hasInstance] = (param) => {
console.log(param);
console.log(“我被用来检测类型了”);
return true;
}
let o = {};
console.log(Person); console.log(Person1); console.log(Person2);
console.log(Person[Symbol.hasInstance]);
console.log(Person1[Symbol.hasInstance]);
console.log(Person2[Symbol.hasInstance]);
console.log(o instanceof Person);
console.log(o instanceof Person1);
console.log(o instanceof Person2);
11、迭代器
概述:
遍历器(Iterator)就是一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数 据结构只要部署 Iterator 接口,就可以完成遍历操作;
特性:
ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费; 原生具备 iterator 接口的数据(可用 for of 遍历):
工作原理:
-
创建一个指针对象,指向当前数据结构的起始位置;
-
第一次调用对象的 next 方法,指针自动指向数据结构的第一个成员;
-
接下来不断调用 next 方法,指针一直往后移动,直到指向最后一个成员;
-
每调用 next 方法返回一个包含 value 和 done 属性的对象;
注:需要自定义遍历数据的时候,要想到迭代器;
代码示例及相关说明:
迭代器自定义遍历对象:
12、生成器
概述:
生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同;
next()方法是可以传入参数的,传入的参数作为第一条(上一条)语句yield 111的返回 结果
解决回调地狱
1)生成器函数声明与调用
2)生成器函数的参数传递:
3)生成器应用实例1,解决回调地狱问题
4)生成器应用实例2 顺序获得用户数据 订单数据 商品数据
13、Promise
概述:
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数,用来封装异步操作并可以获取其成功或失败的结果;
-
Promise 构造函数: Promise (excutor) {};
-
Promise.prototype.then 方法;
-
Promise.prototype.catch 方法;
1)基本使用:
2)Promise封装读取文件:
一般读取文件写法:(需要node.js 环境 ,运行方式:在终端: node 文件名)
//1. 引入 fs 模块
const fs = require(‘fs’);
//2. 调用方法读取文件
fs.readFile(‘./resources/为学.md’, (err, data)=>{
//如果失败, 则抛出错误
if(err) throw err;
//如果没有出错, 则输出内容
console.log(data.toString());
});
Promise封装:
//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/为学.md”, (err, data)=>{
//判断如果失败
if(err) reject(err);
//如果成功
resolve(data);
});
});
p.then(function(value){
console.log(value.toString());
}, function(reason){
console.log(“读取失败!!”);
});
3)Promise封装Ajax请求:
4)Promise.prototype.then 返回值为Promise
代码实现及相关说明:
5)Promise-catch方法:相当于Promise.prototype.then:只有第二个参数
//catch 能捕捉某个阶段的错误,并处理
const p = new Promise(function (resolve, reject) {
let data = ‘success’
resolve(data)
// reject(‘读取失败’)
})
p.then((value) => {
// throw ‘4’
// return 5
}).then(value => {
// throw 6
return 4
}).catch(err =>
console.log(err)
)
6)Promise读取多个文件实践练习:(node.js环境在终端运行)
//引入 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’));
});
14、Set集合
概述:
ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯一的,集合实现了 iterator接口,所以可以使用『扩展运算符』和『for…of…』进行遍历,集合的属性和方法:
-
size 返回集合的元素个数;
-
add 增加一个新元素,返回当前集合;
-
delete 删除元素,返回 boolean 值;
-
has 检测集合中是否包含某个元素,返回 boolean 值;
-
clear 清空集合,返回 undefined;
基本使用:
Set集合实践:
15、Map集合
概述:
ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历;
Map 的属性和方法:
-
size 返回 Map 的元素个数;
-
set 增加一个新元素,返回当前 Map;
-
get 返回键名对象的键值;
-
has 检测 Map 中是否包含某个元素,返回 boolean 值;
-
clear 清空集合,返回 undefined;
简单使用:
16、class类
概述:
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键字,可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已;
知识点:
-
class 声明类;
-
constructor 定义构造函数初始化;
-
extends 继承父类;
-
super 调用父级构造方法;
-
static 定义静态方法和属性;
-
父类方法可以重写;
1)class初体验:
代码实现:
2)class静态成员:
代码实现:
3)ES5构造函数实现继承:
代码实现:
4)ES6class类继承(及其方法的重写):
重写后不能再调用父类的方法
代码实现:
5)class的set-get
17、数值扩展
Number.EPSILON:
Number.EPSILON 是 JavaScript 表示的最小精度;
EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16;
二进制和八进制:
ES6 提供了二进制和八进制数值的新的写法,分别用前缀 0b 和 0o 表示;
当然八进制也可以只加一个前缀0
Number.isFinite() 与 Number.isNaN() :
Number.isFinite() 用来检查一个数值是否为有限的;
Number.isNaN() 用来检查一个值是否为 NaN;
Number.parseInt() 与 Number.parseFloat():
ES6 将全局方法 parseInt 和 parseFloat,移植到 Number 对象上面,使用不变;
Number.isInteger:
Number.isInteger() 用来判断一个数值是否为整数;
**Math.trunc: **
用于去除一个数的小数部分,返回整数部分;
Math.sign
判断一个数到底为正数 负数 还是零
代码实现和相关说明:
代码实现:
18、对象扩展
概述:
ES6 新增了一些 Object 对象的方法:
-
Object.is 比较两个值是否严格相等,与『===』行为基本一致(+0 与 NaN);
-
Object.assign 对象的合并,将源对象的所有可枚举属性,复制到目标对象;
-
proto、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型;
代码实现及相关说明:
代码实现:
Object.create()
方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。
const person = {
isHuman: false,
printIntroduction: function () {
console.log(My name is ${this.name}. Am I human? ${this.isHuman}
);
}
};
const me = Object.create(person);
me.name = ‘Matthew’; // “name” is a property set on “me”, but not on “person”
me.isHuman = true; // inherited properties can be overwritten
me.printIntroduction();
// expected output: “My name is Matthew. Am I human? true”
19、模块化
概述:
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来;
模块化的好处:
模块化的优势有以下几点:
-
防止命名冲突;
-
代码复用;
-
高维护性;
模块化规范产品:
ES6 之前的模块化规范有:
-
CommonJS => NodeJS、Browserify(前端代码打包);
-
AMD => requireJS;
-
CMD => seaJS;
ES6 模块化语法:
模块功能主要由两个命令构成:export 和 import;
-
export 命令用于规定模块的对外接口(导出模块);
-
import 命令用于输入其他模块提供的功能(导入模块);
三种暴露方式和对应导入方式简单使用:
m.js(导出模块):
模块化.html(导入和使用模块):
ES6暴露数据语法汇总:
m1.js(逐个导出模块):
//分别暴露
export let school = ‘尚硅谷’;
export function teach() {
console.log(“我们可以教给你开发技能”);
}
m2.js(统一导出模块):
//统一暴露
let school = ‘尚硅谷’;
function findJob(){
console.log(“我们可以帮助你找工作!!”);
}
//
export {school, findJob};
m3.js(默认导出模块):
//默认暴露
export default {
school: ‘ATGUIGU’,
change: function(){
console.log(“我们可以改变你!!”);
}
}
模块化.html(导入和使用模块)(好像有跨域的问题,需要构建服务器打开html文件,否则会报错):
三种导入方式
-
通用导入方式
-
解构赋值形式
-
简便形式 针对默认暴露
模块化方式二
app.js
//入口文件
//模块引入
import * as m1 from “./m1.js”;
import * as m2 from “./m2.js”;
import * as m3 from “./m3.js”;
// console.log(m1);
// console.log(m2);
// console.log(m3);
// m1.teach();
// m2.findJob();
// m3.default.change();
//修改背景颜色为粉色
import $ from ‘jquery’;// const $ = require(“jquery”);
$(‘body’).css(‘background’,‘pink’);
20、Babel对ES6模块化代码转换
Babel概述:
Babel 是一个 JavaScript 编译器;
Babel 能够将新的ES规范语法转换成ES5的语法;
因为不是所有的浏览器都支持最新的ES规范,不能导入npm导入的模块,所以,一般项目中都需要使用Babel进行转换;
步骤:使用Babel转换JS代码——打包成一个文件——使用时引入即可;
步骤:
第一步:安装工具babel-cli(命令行工具) babel-preset-env(ES转换工具) browserify(打包工具, 项目中使用的是webpack);
第二步:初始化项目
npm init -yes
第三步:安装
npm i babel-cli babel-preset-env browserify -D
第四步:使用babel转换
src/js :(js目录);dist/js:(转化后的js目录)
npx babel src/js -d dist/js --presets=babel-preset-env
第五步:打包
npx browserify dist/js/app.js -o dist/bundle.js
第六步:在使用时引入bundle.js
21、ES6模块化引入NPM包
演示:
第一步:安装jquery:
npm i jquery
第二步:在app.js使用jquery
//入口文件
//修改背景颜色为粉色
import $ from ‘jquery’;// 相当于const $ = require(“jquery”); $(‘body’).css(‘background’,‘pink’);
0、功能概述
1、Array.prototype.includes
判断数组中是否包含某元素,语法:arr.includes(元素值);
2、指数操作符
幂运算的简化写法,例如:2的10次方:2**10;
1、Array.prototype.includes
概述:
Includes 方法用来检测数组中是否包含某个元素,返回布尔类型值; 判断数组中是否包含某元素,语法:arr.includes(元素值);
// includes indexOf
const mingzhu = [‘西游记’, ‘红楼梦’, ‘三国演义’, ‘水浒传’];
//判断
console.log(mingzhu.includes(‘西游记’));//true
console.log(mingzhu.includes(‘金瓶梅’));//false
console.log(mingzhu.indexOf(‘西游记’)); //0
console.log(mingzhu.indexOf(‘金瓶梅’));//-1
2、指数操作符
概述:
在 ES7 中引入指数运算符「」,用来实现幂运算,功能与 Math.pow 结果相同; 幂运算的简化写法,例如:2的10次方:210;
代码实现:
// **
console.log(2 ** 10);// 1024
console.log(Math.pow(2, 10));//1024
0、功能概述
1、async 和 await
简化异步函数的写法;
2、对象方法扩展
对象方法扩展;
1、async 和 await
概述:
async 和 await 两种语法结合可以让异步代码看起来像同步代码一样; 简化异步函数的写法;
1)async 函数:
1.async 函数的返回值为 promise 对象;
2.promise 对象的结果由 async 函数执行的返回值决定;
//async 函数
async function fn() {
// 返回一个字符串
//return ‘尚硅谷’;
// 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
// return;
//抛出错误, 返回的结果是一个失败的 Promise
// throw new Error(‘出错啦!’);
//返回的结果如果是一个 Promise 对象
return new Promise((resolve, reject)=>{
resolve(‘成功的数据’);
// 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;
//
console.log(result);
} catch (e) {
console.log(e);
}
}
//调用函数
main();
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() {
try {
//获取为学内容
let weixue = await readWeiXue();
//获取插秧诗内容
let chayang = await readChaYangShi();
// 获取观书有感
let guanshu = await readGuanShu();
console.log(weixue.toString());
console.log(chayang.toString());
console.log(guanshu.toString());
} catch (e) {
console.log(e.message);
}
}
main();
运行结果:
没有nodejs 可以用下列代码测试