总结
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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 可以用下列代码测试
4)async 和 await 结合发送ajax请求：
代码实现：
2、对象方法扩展
1.Object.values()方法：返回一个给定对象的所有可枚举属性值的数组；
2.Object.entries()方法：返回一个给定对象自身可遍历属性 [key,value] 的数组；
3.Object.getOwnPropertyDescriptors()该方法：返回指定对象所有自身属性的描述对象；
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
