ES6-11，web开发流程

2.9.2 Symbol内置值

除了定义自己使用的 Symbol 值以外， ES6 还提供了 还提供了 11个内置的 Symbol值指向语言内部使用的方法，可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。

| 方法 | 解释 |

| — | — |

| Symbol.hasInstance | 对象的Symbol.hasInstance属性，指向一个内部方法。当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法。 |

| Symbol.isConcatSpreadable | 对象的Symbol.isConcatSpreadable属性等于一个布尔值，表示该对象用于Array.prototype.concat()时，是否可以展开。 |

| Symbol.species | 对象的Symbol.species属性，指向一个构造函数。创建造衍生对象时，会使用该属性。 |

| Symbol.match | 对象的Symbol.match属性，指向一个函数。当执行str.match(myObject)时，如果该属性存在，会调用它，返回该方法的返回值。 |

| Symbol.replace | 对象的Symbol.replace属性，指向一个方法，当该对象被String.prototype.replace方法调用时，会返回该方法的返回值。 |

| Symbol.search | 对象的Symbol.search属性，指向一个方法，当该对象被String.prototype.search方法调用时，会返回该方法的返回值。 |

| Symbol.split | 对象的Symbol.split属性，指向一个方法，当该对象被String.prototype.split方法调用时，会返回该方法的返回值。 |

| Symbol.iterator | 对象的Symbol.iterator属性，指向该对象的默认遍历器方法。 |

| Symbol.toPrimitive | 对象的Symbol.toPrimitive属性，指向一个方法。该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。 |

| Symbol.toStringTag | 对象的Symbol.toStringTag属性，指向一个方法。在该对象上面调用Object.prototype.toString方法时，如果这个属性存在，它的返回值会出现在toString方法返回的字符串之中，表示对象的类型。也就是说，这个属性可以用来定制[object Object]或[object Array]中object后面的那个字符串。 |

| Symbol.unscopables | 对象的Symbol.unscopables属性，指向一个对象。该对象指定了使用with关键字时，哪些属性会被with环境排除。 |

例如：

// Symbol.hasInstance

class Person {

static Symbol.hasInstance{

console.log(param);

console.log(‘检测类型’);

return true;

}

}

let o = {};

console.log(o instanceof Person);

let arr1 = [1,2,3];

let arr2 = [4,5,6];

console.log(arr1.concat(arr2));

arr2[Symbol.isConcatSpreadable] = false;

console.log(arr1.concat(arr2));

2.10 迭代器

---

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

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

2. 原生具备iterator接口的数据（可用for…of遍历）

• Array

• Arguments

• Set

• Map

• String

• TypedArray

• NodeList

3. 工作原理

• 创建一个指针对象，向当前数据结构的起始位置

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

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

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

注：需要自定义遍历数据的时候，要想到迭代器

4. 实例

const banji = {

name : ‘终极一班’,

stus : [

‘xiaoming’,

‘xiaoning’,

‘xiaotian’,

‘knight’

],

Symbol.iterator{

// 索引变量

let index = 0;

// 保存变量

let _this = this;

return{

next : function(){

return index < _this.stus.length ? {value : _this.stus[index++], done : false} : {value : undefined, done : true};

}

};

}

}

// 遍历对象

for(let v of banji){

console.log(v);

}

2.11 生成器

---

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

function * gen(){

yield ‘一只没有耳朵’;

yield ‘一只没有尾巴’;

return ‘真奇怪’;

}

let iterator = gen();

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

代码说明：

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.13 Set

---

ES6提供了新的数据结构Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符和for…of进行遍历，集合的属性和方法：

1. size 返回集合的元素个数

2. add 增加一个新元素，返回当前集合

3. delete 删除元素，返回 boolean 值

4. has 检测集合中是否包含某个元素，返回 boolean值

5. clear 清空集合，返回 undefined

//创建一个空集合

let s = new Set();

//创建一个非空集合

let s1 = new Set([1,2,3,1,2,3]);

//集合属性与方法

//返回集合的元素个数

console.log(s1.size);

//添加新元素

console.log(s1.add(4));

//删除元素

console.log(s1.delete(1));

//检测是否存在某个值

console.log(s1.has(2));

//清空集合

console.log(s1.clear());

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

//创建一个空

map let m = new Map();

//创建一个非空

map let m2 = new Map([

[‘name’,‘尚硅谷’],

[‘slogon’,‘不断提高行业标准’]

]);

//属性和方法

//获取映射元素的个数

console.log(m2.size);

//添加映射值

console.log(m2.set(‘age’, 6));

//获取映射值

console.log(m2.get(‘age’));

//检测是否有该映射

console.log(m2.has(‘age’));

//清除

console.log(m2.clear());

2.15 Class类

---

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，他的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

1. class声明类

2. constructor定义构造函数初始化 定义构造函数初始化

3. extends继承父类

4. super调用父级构造方法 调用父级构造方法

5. static定义静态方法和属性 定义静态方法和属性

6. 父类方法可以重写

//父类

class Phone {

//构造方法

constructor(brand, color, price) {

this.brand = brand;

this.color = color;

this.price = price; }

//对象方法

call() {

console.log(‘我可以打电话!!!’)

}

}

//子类

class SmartPhone extends Phone {

constructor(brand, color, price, screen, pixel) {

super(brand, color, price);

this.screen = screen;

this.pixel = pixel;

}

//子类方法

photo(){

console.log(‘我可以拍照!!’);

}

playGame(){

console.log(‘我可以玩游戏!!’);

}

//方法重写

call(){

console.log(‘我可以进行视频通话!!’);

}

//静态方法

static run(){

console.log(‘我可以运行程序’)

}

static connect(){

console.log(‘我可以建立连接’)

}

}

//实例化对象

const Nokia = new Phone(‘诺基亚’, ‘灰色’, 230);

const iPhone6s = new SmartPhone(‘苹果’, ‘白色’, 6088, ‘4.7inch’,‘500w’);

//调用子类方法

iPhone6s.playGame();

//调用重写方法

iPhone6s.call();

//调用静态方法

SmartPhone.run();

2.16 数值扩展

---

2.16.1 Number.EPSILON

Number.EPSILON是JavaScript表示的最小精度

2.16.2 二进制和八二进制

ES6 提供了二进制和八数值的新写法，分别用前缀 0b和 0o表示。

2.16.3 Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的

Number.isNaN() 用来检查一个值是否为 NaN

2.16.4 Number.parseInt() 与 Number.parseFloat()

ES6 将全局方法 parseInt和 parseFloat，移植到 Number对象上面，使用不变。

2.16.5 Math.trunc

用于去除一个数的小部分，返回整数部分。

2.16.6 Number.isInteger

Number.isInteger() 用来判断一个数是否为整数。

2.17 对象扩展

---

ES6新增了一些 Object对象的方法

1. Object.is 比较两个值是否严格相等，与『 ===』行为基本一致（ +0 与 NaN）

2. Object.assign 对象的合并，将源所有可枚举属性，复制到目标对象

3. _proto_、setPrototypeOf、 setPrototypeOf可以直接设置对象的原型

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命令用于输入其他模块提供的功能

第三章 ECMASript 7新特性

=============================================================================

3.1 Array.prototype.includes

---

Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值

3.2.指数操作符

---

在 ES7中引入指数运算符「 **」，用来实现幂运算，功能与 Math.pow结果相同

第四章 ECMASript 8新特性

=============================================================================

4.1 async和await

---

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

4.1.1 async

1. async函数的返回值为promise对象

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

4.1.2 await

1. await必须写在async函数中

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

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

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

4.2 Object.values和 Object.entries

---

1. Object.values()方法返回一个给定对象的所有可枚举属性值数组

2. Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组

4.3 Object.getOwnPropertyDescriptors

---

该方法返回指定对象所有自身属性的描述对象

第五章 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允许命名捕获组使用符号『?』，这样获取捕获结果的可读性更强

let str = ‘尚硅谷’;

const reg = /(? .*)</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 = `

• 肖生克的救赎

  上映日期: 1994-09-10

• 阿甘正传

  上映日期: 1994-07-06

  `;

  //声明正则

  const reg = /

• .?(.?)</a>.?

  (.?)</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

  ---

  // 二维数组

  const result = Object.fromEntries([

  [‘name’,‘尚硅谷’],

  [‘xueke’,‘java,大数组，前端，云计算’]

  ]);

  console.log(result)

  

  // Map

  const map = new Map();

  map.set(‘name’,‘ATGUIGU’);

  map.set(‘xueke’,‘java,大数组，前端，云计算’);

  const result = Object.fromEntries(map);

  console.log(result);

  

  6.2 trimStart和 trimEnd

  ---

  清除左侧还是右侧的空格字符

  let str = " iloveu ";

  console.log(str);

  console.log(str.trim());

  console.log(str.trimStart());

  console.log(str.trimEnd());

  

  6.3 Array.prototype.flat 与 flatMap

  ---

  Array.prototype.flat ：将数组内部数组展开，可以传递参数为深度

  const arr = [1,2,3,4,[5,6,[7,8]]];

  console.log(arr.flat());

  console.log(arr.flat(2));

  

  flatMap：方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组

  6.4 Symbol.prototype.description

  ---

  // 创建Symbol

  let s = Symbol(‘Kai’);

  console.log(s.description)

  

  第7章 ECMASript 11 新特性

  ===============================================================================

  7.1 类的私有属性

  ---

  使用#标识私有属性，无法直接访问，只能通过内部方法进行访问

  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); // 无法直接访问

  7.2 Promise.allSettled

  ---

  Promise.allSettled方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。

  // 声明两个promise对象

  const p1 = new Promise((resolve, reject)=>{

  setTimeout(()=>{

  resolve(‘商品数据 - 1’);

  }, 1000);

  })

  const p2 = new Promise((resolve, reject)=>{

  setTimeout(()=>{

  resolve(‘商品数据 - 2’);

  }, 1000);

  })

  // 调用Promise.allSettled

  const result = Promise.allSettled([p1,p2]);

  console.log(result);

  

  // 声明两个promise对象

  const p1 = new Promise((resolve, reject)=>{

  setTimeout(()=>{

  resolve(‘商品数据 - 1’);

  }, 1000);

  })

  const p2 = new Promise((resolve, reject)=>{

  setTimeout(()=>{

  reject(‘请求失败’);

  }, 1000);

  })

  // 调用Promise.allSettled

  const result = Promise.allSettled([p1,p2]);

  console.log(result);

  

  与all区别。all必须全部成功才返回成功

  // 声明两个promise对象

  const p1 = new Promise((resolve, reject)=>{

  setTimeout(()=>{

  resolve(‘商品数据 - 1’);

  }, 1000);

  })

  const p2 = new Promise((resolve, reject)=>{

  setTimeout(()=>{

  reject(‘请求失败’);

  }, 1000);

  })

  // 调用Promise.allSettled

  const result = Promise.all([p1,p2]);

  console.log(result);

  

  7.3 String.prototype.matchAll

  ---

  String.prototype.matchAll方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

  let str = `

• 肖申克的救赎

  上映时间：1994-09-10

• 阿甘正传

  上映时间：1994-07-06

  `

  // 声明正则

  const reg = /

• .?(.?)</a>.?

  (.?)</p>/sg

• // 调用方法

  const result = str.matchAll(reg);

  // 查看结果

  for(let r of result){

  console.log®

  }

  

  7.4 可选链操作符

  ---

  通过?.进行层次判断

  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’

  }

  })

  7.5 动态 import导入

  ---

  通过import实现按需加载，返回的是一个promise对象

  

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  

  完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可免费领取了。

  前端实习面试的套路

  ---

  回顾项目

  往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

  面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

  重点在于基础知识

  这里指的基础知识包括：前端基础知识和学科基础知识。

  前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

  学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
  你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
  这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！*

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-wrXZlmI0-1712098930077)]

  [外链图片转存中…(img-LdUHz031-1712098930077)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  [外链图片转存中…(img-aszOXlq4-1712098930078)]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  

  完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可免费领取了。

  前端实习面试的套路

  ---

  回顾项目

  往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

  面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

  重点在于基础知识

  这里指的基础知识包括：前端基础知识和学科基础知识。

  前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

  学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
  你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
  这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。