你是否曾经在 JavaScript 代码中迷失过？ 是否曾经感到自己的代码像一团乱麻？ 别担心，这就是我们需要设计模式的时候了！ 让我们一起探索这些神奇的模式，让你的代码变得像个天才！ 序言 ---- 总体来说设计模式分为三大类： _创建型模式：_ [工厂方法模式](https://link.juejin.cn/?target=https%3A%2F%2Fso.csdn.net%2Fso%2Fsearch%3Fq%3D%25E5%25B7%25A5%25E5%258E%2582%25E6%2596%25B9%25E6%25B3%2595%25E6%25A8%25A1%25E5%25BC%258F%26spm%3D1001.2101.3001.7020 "https://so.csdn.net/so/search?q=%E5%B7%A5%E5%8E%82%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8Fspm=1001.2101.3001.7020")、抽象工厂模式、单例模式、建造者模式、原型模式。 _结构型模式：_ 适配器模式、装饰模式、代...

今天这篇文章，主要想跟大家分享6个实用的ES6技巧，希望这6个小技巧能够帮助到你。 下面我们开始今天的内容吧。 1. Array.of 关于奇怪的 Array 函数： 众所周知，我们可以通过Array函数来做以下事情。 初始化一个指定长度的数组。 设置数组的初始值。 // 1. Initialize an array of the specified length const array1 = Array(3) // [ , , ] // 2. Set the initial value of the array const array2 = Array() // [] const array3 = Array(undefined) // [ undefined ] const array4 = Array(1, 2, 3) // [ 1, 2, 3 ] 传递给Array函数的参数个数不一样，其功能也不一样。这常常让我感到困惑。 幸运的是，我们可以使用 Array.of 来弥补 Array 的不足。 // it's not in

上一篇文章 [Tree-Shaking性能优化实践 原理篇](https://zhuanlan.zhihu.com/p/32554436) 介绍了 tree-shaking 的原理，本文主要介绍 tree-shaking 的实践 [](https://zhuanlan.zhihu.com/p/32554436) 三. tree-shaking实践 -------------------- webpack2 发布，宣布支持tree-shaking，webpack 3发布，支持作用域提升，生成的bundle文件更小。 再没有升级webpack之前，增幻想我们的性能又要大幅提升了，对升级充满了期待。实际上事实是这样的 升级完之后，bundle文件大小并没有大幅减少，当时有较大的心理落差，然后去研究了为什么效果

一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。 图1 Tree-shaking 较早由 Ri...

相关问题 new 操作符做了什么 new 操作符的模拟实现 回答关键点 构造函数 对象实例 new 操作符通过执行自定义构造函数或内置对象构造函数，生成对应的对象实例。 知识点深入 1\. new 操作符做了什么 1. 在内存中创建一个新对象。 2. 将新对象内部的 \_\_proto\_\_ 赋值为构造函数的 prototype 属性。 3. 将构造函数内部的 this 被赋值为新对象（即 this 指向新对象）。 4. 执行构造函数内部的代码（给新对象添加属性）。 5. 如果构造函数返回非空对象，则返回该对象。否则返回 this。 2\. new 操作符的模拟实现 js function fakeNew() { // 创建新对象 var obj = Object.create(null); var Constructor = [].shift.call(arguments); // 将对象的 __proto__ 赋值为构造函数的 prototype 属性 obj.__proto__

相关问题 关于 ES5 和 ES6 的继承问题 原型链概念 回答关键点 原型链继承 构造函数继承 ES6 类继承 继承是指子类型具备父类型的属性和行为，使代码得以复用，做到设计上的分离。JavaScript 中的继承主要通过原型链和构造函数来实现。常见的继承方法有：ES6 中 class 的继承、原型链继承、寄生组合式继承等。 知识点深入 1\. 原型链 原型链的本质是拓展原型搜索机制。每个实例对象都有一个私有属性 \_\_proto\_\_。该属性指向它的构造函数的原型对象 prototype。该原型对象的 \_\_proto\_\_ 也可以指向其他构造函数的 prototype。依次层层向上，直到一个对象的 \_\_proto\_\_ 指向 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。 当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或直到这个链表结束（ Object.prototype.__pr...

一、等于操作符 等于操作符用两个等于号（ ）表示，如果操作数相等，则会返回 true 前面文章，我们提到在 JavaScript 中存在隐式转换。等于操作符（ ）在比较中会先进行类型转换，再确定操作数是否相等 遵循以下规则： 如果任一操作数是布尔值，则将其转换为数值再比较是否相等 js let result1 = (true 1); // true 如果一个操作数是字符串，另一个操作数是数值，则尝试将字符串转换为数值，再比较是否相等 js let result1 = ("55" 55); // true 如果一个操作数是对象，另一个操作数不是，则调用对象的 valueOf() 方法取得其原始值，再根据前面的规则进行比较 js let obj = {valueOf:function(){return 1}} let result1 = (obj 1); // true null 和 undefined 相等 js let result1 = (null undefi

一、var 在ES5中，顶层对象的属性和全局变量是等价的，用 var 声明的变量既是全局变量，也是顶层变量 注意：顶层对象，在浏览器环境指的是 window 对象，在 Node 指的是 global 对象 js var a = 10; console.log(window.a) // 10 使用 var 声明的变量存在变量提升的情况 js console.log(a) // undefined var a = 20 在编译阶段，编译器会将其变成以下执行 js var a console.log(a) a = 20 使用 var ，我们能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明 js var a = 20 var a = 30 console.log(a) // 30 在函数中使用使用 var 声明变量时候，该变量是局部的 js var a = 20 function change(){ var a = 30 } change() console.log(a) //

如果要用一句来描述，我们可以说 Set 是一种叫做集合的数据结构， Map 是一种叫做字典的数据结构 什么是集合？什么又是字典？ 集合 是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合 字典 是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同 区别？ 共同点：集合、字典都可以存储不重复的值 不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储 一、Set Set 是 es6 新增的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值，我们一般称为集合 Set 本身是一个构造函数，用来生成 Set 数据结构 js const s = new Set(); 增删改查 Set 的实例关于增删改查的方法： add() delete() has() clear() add() 添加某个值，返回 Set 结构本身 当添加实例中已经存在的元素， set 不会进行处理添加 js s.add(1

一、介绍 Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同 回顾下上文提到的解决异步的手段： 回调函数 promise 那么，上文我们提到 promsie 已经是一种比较流行的解决异步方案，那么为什么还出现 Generator ？甚至 async/await 呢？ 该问题我们留在后面再进行分析，下面先认识下 Generator Generator函数 执行 Generator 函数会返回一个遍历器对象，可以依次遍历 Generator 函数内部的每一个状态 形式上， Generator 函数是一个普通函数，但是有两个特征： function 关键字与函数名之间有一个星号 函数体内部使用 yield 表达式，定义不同的内部状态 javascript function helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } 二、使用 Generator

一、参数 ES6 允许为函数的参数设置默认值 js function log(x, y = 'World') { console.log(x, y); } console.log('Hello') // Hello World console.log('Hello', 'China') // Hello China console.log('Hello', '') // Hello 函数的形参是默认声明的，不能使用 let 或 const 再次声明 js function foo(x = 5) { let x = 1; // error const x = 2; // error } 参数默认值可以与解构赋值的默认值结合起来使用 js function foo({x, y = 5}) { console.log(x, y); } foo({}) // undefined 5 foo({x: 1}) // 1 5 foo({x: 1, y: 2}) // 1 2 foo() // TypeError: Ca