前端面试七

秒速五厘米 2022-03-01 03:44 181阅读 0赞

优化问题-----什么是长缓存？在webpack中如何做到长缓存优化？

浏览器在用户访问页面的时候，为了**加快加载速度**，会对**用户访问的静态资源进行存储**，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。在webpack中，可以在output给出输出的文件制定chunkhash,并且分离经常更新的代码和框架代码，通过NamedModulesPlugin或者HashedModulesIdsPlugin使再次打包文件名不变

47、谈谈对webpack的理解

**WebPack的定义：**

WebPack 是一个模块打包工具，可以使用WebPack管理模块之间的依赖，最后生成优化且合并后的静态资源。

它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。

对于不同类型的资源，webpack有对应的模块加载器

和其他的工具最大的不同在于他支持**code-splitting**（代码分割）,**模块化**（AMD,ES6,CommonJs），**全局解析**

**WebPack的原理：**

webpack**把项目当作一个整体**，通过一个**给定的的主文件**，webpack将**从这个文件开始**找到你的**项目的所有依赖文件**，使用**loaders**处理它们，**最后打包成一个或多个**浏览器可识别的**js文件**

1）解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生成最后的配置结果

2）注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以作出对应的反应

3）从配置的entrey入口文件，开始解析文件，构建AST语法树，找出每个文件所依赖的文件，递归下去

4）在解析文件递归过程，根据文件类型和loader配置，找出合适的loader来对文件进行转换

5）递归完后，得到每个文件的最终结果，根据entry配置生成代码块chunk

6）输出所有chunk到文件系统

webpack常用到哪些功能

**1）entry：设置入口文件**，它将是整个依赖关系的根

// 设置单个入口
    var baseConfig = {
            entry: './src/index.js'
    }
    
    // 设置多个入口文件，将entry写成一个对象
    var baseConfig = {
        entry: {
            main: './src/index.js'
        }
    }

**2）output：设置输出目录**， 即使入口文件有多个，但是只有一个输出配置

// 入口文件只有一个
    var path = require('path')
    var baseConfig = {
        entry: {
            main: './src/index.js'
        },
        output: {
            filename: 'main.js',
            path: path.resolve('./build')
        }
    }
    module.exports = baseConfig
    
    
    // 入口文件有多个，需要使用占位符来确保输出文件的唯一性
    output: {
        filename: '[name].js',
        path: path.resolve('./build')
    }

**3）设置loader  extract-text-webpack-plugin**

var baseConfig = {
                    entry: {
                        main: './src/index.js'
                    },
                    output: {
                        filename: '[name].js',
                        path: path.resolve('./build')
                    },
                    devServer: {
                        contentBase: './src',
                        historyApiFallBack: true,
                        inline: true
                    },
                    module: {
                        rules: [
                            {
                                test: /\.less$/,
                                use: [
                                    {loader: 'style-loader'},
                                    {loader: 'css-loader'},
                                    {loader: 'less-loader'}
                                ],
                                exclude: /node_modules/
                            }
                        ]
                    }
                }

**4）Plugins-**\------plugins**并不是直接操作单个文件**，它直接**对整个构建过程**起作用

**下面是一些常用的plugins**

**a）extract-text-webpack-plugin**: 将入口中引用的css文件，都打包到独立的css文件中，而不是内嵌在js打包文件中

var ExtractTextPlugin = require('extract-text-webpack-plugin')
    var lessRules = {
        use: [
            {loader: 'css-loader'},
            {loader: 'less-loader'}
        ]
    }
    
    var baseConfig = {
        // ... 
        module: {
            rules: [
                // ...
                {test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)}
            ]
        },
        plugins: [
            new ExtractTextPlugin('main.css')
        ]
    }

**b）html-webpack-plugin**： 依据一个简单的index.html模版，生成一个**自动引用你打包后的js文件的新index.html**

var HTMLWebpackPlugin = require('html-webpack-plugin')
    var baseConfig = {
        // ...
        plugins: [
            new HTMLWebpackPlugin()
        ]
    }

**c）hot-module-replacement-plugin**: 它允许你**在修改组件代码**时，**自动刷新实时预览修改后的结果**。注意永远不要在生产环境中使用HMR。这儿说一下一般情况分为**开发环境，测试环境，生产环境**

**5）将css，js代码合并 **

**6）处理图片、文字等功能**

**7）解析jsx**

**8）解析bable**

webpack的两大特色：

**a) code splitting----代码分割**（可以自动完成）

**b) loader** 可以处理**各种类型的静态文件**，并且支持串联操作

webpack 是以commonJS的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

1）对 CommonJS 、 AMD 、ES6的语法做了兼容  
  
2） 对js、css、图片等资源文件都支持打包  
  
3） 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持  
  
4） 有独立的配置文件webpack.config.js  
  
5） 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间  
  
6） 支持 SourceUrls 和 SourceMaps，易于调试  
  
7） 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活  
  
8）webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

webpack打包慢的原因以及解决方法：

模块太多。解决方法：webpack可以设置externals来将依赖的库指向全局变量，从而不再打包这个库。

什么是bundle，chunk，module

**module**是开发中的**单个模块**

**chunk**是指webpack在进行**模块的依赖分析**的时候，**代码分割出来的代码块**

**bundle**是由**webpack打包**出来的**文件，**chunk 打包后变成bundle

**39、比较一下jQuery，Angular.js，React.js ，vue.js等框架的优缺点  **

jquery和vue.js的区别：

jquery到vue.js（MVVM模式）是一个思想的转变，由原来的直接操作DOM的思想，转变到直接操作数据。

● jQuery是JavaScript的一个库，将原生的js对象和事件进行封装

● 极大地简化了 JavaScript 编程，

● 随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的js的区别只在于可以更方便的选取和操作DOM对象，而**数据和界面**是在一起的。比如需要获取label标签的内容：`$("lable").val();`,它还是依赖DOM元素的值。

● vue是一个近年来才兴起的前端js框架

● vue是一套用于构建用户界面的**渐进式框架**

**● **vue是一款基于MVVM方式的轻量级的框架

**● **vue是一款基于数据驱动、组件化思想的框架

**● **vue被设计为可以**自底向上、逐层应用**的框架

从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层（也就是vue的实例对象），它通过双向数据绑定把 View 层和ViewModel 层连接了起来，通过对数据的操作就可以完成对页面视图的渲染，对数据进行操作时不**再需要引用相应的DOM对象** 。vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起。

举例子说明jquery与vue操作的区别

**场景一**：**列表添加一个元素**。vue只需要向数据message里面push一条数据即可完成添加一个li标签的操作，而jquery则**需要获取dom元素节**点，并对dom进行**添加一个标签的操作**，如果dom结构特别复杂，或者添加的元素非常复杂，则代码会变得非常复杂且阅读性低

//在vue中添加一个li
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    </head>
    
    <body>
        <div id="app">
            <ul>
                
                <li v-for="item in message">{
       {item}}</li>
            </ul>
            <button @click="add">添加数据</button>
        </div>
    </body>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: ["第1条数据","第2条数据"],
                i:2
            },
            methods:{
                //向数组添加一条数据即可
                add:function(){
                    this.i++
                    this.message.push("第"+this.i+"条数据")
                }
            }
        })
    </script>
    </html>
    
    //在jquery中添加一个li
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <div id="app">
            <ul id="list">
                <li>第1条数据</li>
                <li>第2条数据</li>
            </ul>
            <button id="add">添加数据</button>
        </div>
    </body>
    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {  
        var i=2;
        $('#add').click(function() { 
           i++; 
           //通过dom操作在最后一个li元素后手动添加一个标签
          $("#list").children("li").last().append("<li>第"+i+"条数据</li>")
        });  
      }); 
    </script>

**场景二**：**控制按钮的显示隐藏**。vue只需要控制属性isShow的值为true和false即可，而jquery则还是需要**操作dom元素**控制按钮的显示和隐藏

//Vue中控制按钮的显示与隐藏
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    </head>
    
    <body>
        <div id="app">
            <ul>
                
                <li v-for="item in message">{
       {item}}</li>
            </ul>
            <button @click="add" v-show="isShow">添加数据</button>
            <button @click="showButton">隐藏按钮</button>
        </div>
    </body>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: ["第1条数据","第2条数据"],
                i:2,
                isShow:true
            },
            methods:{
                //向数组添加一条数据即可
                add:function(){
                    this.i++
                    this.message.push("第"+this.i+"条数据")
                },
                //控制isShow的值即可
                showButton:function(){
                    this.isShow=false;
                }
            }
        })
    </script>
    </html>
    
    //jquery控制按钮的显示与隐藏
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    </head>
    
    <body>
        <div id="app">
            <ul id="list">
                <li>第1条数据</li>
                <li>第2条数据</li>
            </ul>
            <button id="add">添加数据</button>
            <button id="showButton">隐藏按钮</button>
        </div>
    
    </body>
    
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {  
        var i=2;
        $('#add').click(function() { 
           i++; 
           //通过dom操作在最后一个li元素后手动添加一个标签
          $("#list").children("li").last().append("<li>第"+i+"条数据</li>")
        });  
        //需要手动隐藏dom元素
        $("#showButton").click(function(){
            $("#add").hide()
        })
      }); 
    </script>
    </html>

**vue.js与react.js的比较**

相同点：

在设计的时候都用到了component组件，props参数传递，组件之间的通信，state状态管理器，lifecircle声明周期等等  
不同点：

个人认为vue和react.js最大的不同之处在于：它们**对DOM的渲染方式不**同，vue可以直接**在vue文件**中使用**html****标签**，数据绑定时类似angular，可以进行**条件渲染**，而**react.js**则采用了**jsx语法**，运用**虚拟DOM 的概念**进行DOM对页面元素**进行渲染**，获取页面元素需要用**ref**来获取，似乎更加安全...

**vue.js与AngularJS的区别**

相同点：

● 都支持**指令**：内置指令和自定义指令  
● 都支持**过滤器**：内置过滤器和自定义过滤器  
● 都支持**双向数据绑定**  
● 都不支持**低端浏览器**  
  
不同点：

● AngularJS的**学习成本高**，比如增加了**Dependency Injection**特性，而Vue.js本身提供的**API都比较简单、直观**

● 在**性能**上，AngularJS**依赖对数据做脏值检查**，所以**Watcher越多越慢。**Vue.js使用**观察者模式**和**异步队列**更新，所有的**数据**都是**独立触发**的  
  
对于庞大的应用来说，这个**优化差异**还是比较明显的。

**vue.js与react.js的区别**

相同点：

● **React**采用特殊的**JSX语法**，Vue.js在组件开发中也推崇编写**.vue特殊文件格式**，对**文件内容**都有一些**约定**，两者都**需要编译后使用**

● **都有组件思想**：一切都是组件，**组件实例**之间可以**嵌套**

● 都提供合理的**钩子函数**，可以让开发者定制化地去处理需求

● 都**不内置AJAX**，**Route**等功能到**核心包**，而是以**插件的方式**加载

●在组件开发中都支持mixins的特性  
  
不同点：  
● **React**依赖**Virtual DOM，**而**Vue.js**使用的是**DOM模板**。**React**采用的Virtual DOM会对**渲染出来的结果做脏检查**

● Vue.js在**模板**中提供了**指令**，**过滤器**等，可以非常**方便**，**快捷**地**操作DOM**。

**40、介绍下let，var，和const的区别**

● **let和const**都是es6新版本的js语言**规范出来的定义**，在这以前定义一个变量**只能用var,function**

● **let和const**都是为了弥补**var的一些缺陷**而设计出来的。

● **l****et和const 简单来说**：

**let**修复了**var的作用域**的一些bug：

比如var中函数声明和变量声明会提升到作用域的顶部，但let不会。

var的作用域是函数作用域，而let的作用域是块级别（大括号括起来的内容）

const声明的变量只可以**在声明时赋值，不可随意修改。实际上不能修改的是指向的地址，如果是数组或对象类型，里面的数据结构是可以改变的**

**let和const类型必须先声明后使用**

**let和const的区别**

let声明的变量可以改变，值和类型都可以改变，没有限制

const声明的变量不得改变值

**41、使用Promise而非回调（callbacks）优缺点是什么？**

**Promise的定义**

● Promise，**简单来说**是一个**容器**，里面保存着某个**未来才会结束的事件**（通常是一个**异步**操作）的**结果**

● 从**语法**上说，Promise是一个**对象**，从它可以**获取异步操作的消息**

● Promise提供**统一的API**，各种**异步操作**都可以**用同样的方法**进行**处理**

**Promise的优点**

●  Promise 对象用于延迟(deferred) 计算和异步(asynchronous ) 计算，是**异步编程**的一种**解决方案**，比传统的解决方案——**回调函数和事件**——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象

● 有了**Promise对象**，就可以将**异步操作**以**同步操作**的**流程**表达出来，避免了**层层嵌套的回调函数，**简化代码，使代码结构清晰明了

● 此外，Promise对象提**供统一的接口**，使得**控制异步操作**更加容易

**Promise的缺点**

● **无法取消Promise**，一旦新建它，就会**立即执行**，无法中途取消  
● 如果**不设置回调函数**，Promise**内部**抛出的错误，不会反应到**外部**  
● 当处于**Pending**状态时，无法得知目前**进展**到哪一个**阶段**（**刚刚开始**还是**即将完成**）

Promise的基本用法

Promise对象是一个构造函数，用来生成Promise实例

// resolve--状态从“未完成”变为“成功”（即从 pending 变为 resolved），
    // 在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
    // reject--状态从“未完成”变为“失败”（即从 pending 变为 rejected），
    // 在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去
    // Promise 新建后就会立即执行
    const promise = new Promise(function(resolve, reject) {
      // ... some code
     
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });
     
    // Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数
    // 分别为resolve(param1)-必写，reject(param2)--可选
    // param1--可以是普通变量也可以是Promise对象
    // then(resolve(param1),reject(param2))
    promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });

**Promise的特点**

**a)对象的状态不受外界影响**

Promise对象有3种状态

1）pending: 表示一个初始状态, 非 fulfilled 或 rejected

2）fulfilled: 成功的操作

3）rejected: 失败的操作

**b)状态一旦改变，就不会再发生变化**

状态的改变是单向的，只能由pending  ->  fulfilled             pending  ->  rejected，只要这两种情况发生状态就凝固了，这时称为resolved(已定型)。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果

Promise对象的集中API

**1）Promise.prototype.then()**：promise实例具有then方法，它的作用是为promise实例添加状态改变时的回调函数

then()方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。then方法返回的是一个新的promise实例，非原来的那个promise实例，因此可以采用链式写法，then方法之后还可调用一个then方法。第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。

var p=new Promise(function(resolve,eject){
        resolve("ok");    
    });
    p.then(function(value){console.log(val)},
     function(err)(console.log(err))       
    );

getJSON("/posts.json").then(function(json) {
      return json.post;
    }).then(function(post) {
      // ...
    });

**2）Promise.prototype.catch()**：这个方法是**Promise.prototype**.then(null,rejection)的别名，专门只能用来捕获错误信息，用于指定发生错误时的回调函数，then方法指定的回调函数，如果运行中抛出错误，也会被catch方法捕获

getJSON('/posts.json').then(function(posts) {
      // ...
    }).catch(function(error) {
      // 处理 getJSON 和 前一个回调函数运行时发生的错误
      console.log('发生错误！', error);
    });

Promise 在resolve语句后面，再抛出错误，错误不会被捕获，等于没有抛出。因为 Promise 的状态一旦改变，就永久保持该状态，不会再变了；Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止

**3）Promise.resolve()**：将现有的对象转为Promise对象，进而可以执行这些方法

参数种类：

a) 参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例

b) 参数是一个thenable对象，将这个对象转为 Promise 对象，然后就立即执行thenable对象的then方法，状态为resolved

c) 参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的 Promise 对象，状态为resolved

d) Promise.resolve方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象

**4）Promise.reject()**：返回一个新的 Promise 实例，状态为rejected，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数

**5）Promise.all()**：将多个promise实例，包装成一个新的promise实例，用于解决多个请求

// 参数为数组，数组里面每个元素都是Promise实例
    // p1、p2、p3都是 Promise 实例
    // 参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例
    // p的状态由p1、p2、p3决定：只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled
    // 此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
    // 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返
    // 回值，会传递给p的回调函数
    const p = Promise.all([p1, p2, p3]);

**6）Promise.race()**：将多个promise实例，包装成一个新的promise实例

// 只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。
    // 那个率先改变的 Promise 实例的返回值，就传递给p的回调函数
    const p = Promise.race([p1, p2, p3]);

详细介绍的链接：https://www.cnblogs.com/huangzhilong/p/5358493.html

**用js实现原生的Promise**

**41、ECMAScript5和6有什么区别？**

ECMScript的介绍

ECMScript是一种由Ecma国际（前身为欧洲计算机制造商协会）制定和发布的**脚本语言规范**，javascript在它基础上经行了自己的**封装**。但通常来说，术语ECMAScript和javascript指的是同一个。业界所说的ECMAScript其实是指一**种规范**，或者说是**一个标准**。具体点来说，它其实就是一份文档，**JS**包含三个部分：**ECMAScript（核心）、DOM（文档对象模型）、BOM（浏览器对象模型）**，**ECMAScript是js语言的基础**。

EMAScript5与6的区别

主要区别就是ES6改良了ES5的缺陷。

● **ES6新增块级作用域：**在块级作用域声明的变量，不会被外层所引用，也就是说不需要ES5通过函数（闭包）来解决全局变量污染的问题，let   const

● **箭头函数代替词法作用域的this**：在ES5中,"this"作用域会随着**函数调用位置**(全局/闭包)，和**函数调用方式**(构造/普通)改变；ES6箭头函数中的"this"**总是指向声明时**的那个**对象**

● **处理函数的属性“arguments”**： 在ES5中, arguments是一个**类数组，**可以使用**length**来遍历他，但却不能使用完全**Array的api(slice/sort)**

在ES6中,可以使用**新特性rest参数，**他的形式为 **...参数名**，比如**...args，**rest是一个真数组可以调用Array所有api

**● 类**：从概念上讲，**在 ES6 之前**的 JS 中并没有和其他**面向对象语言**那样的“类”的概念。长时间里，人们把**使用 new 关键字调用的函数**（也叫构造器）**当做“类”**来使用。 通过**原型链**来实现继承(不方便)

● **严格模式**："use strict"，在 ES5 中, **严格模式是可选项**，但是在 ES6 中，**许多特性要求必须使用严格模式**。 因此**大多数开发者和 babel 之类的工具**默认添加 use strict 到 JS 文件的头部，以确保整个 JS 文件的代码都采用严格模式，这个习惯有助于我们写更好的 JavaScript

ES6新增的一些特性

1) 默认参数，形如下面：

var link = function( height=50,color='red' ){
      .....
    };

2) 模板对象，在es5中要将变量拼接在字符串中，在es6中可以使用$\{param\}把他放在反引号里面，形如下面所述：

var name = `your name is ${first} ${last}`;
    var url = `http://localhost:8080/api/message/${id}`;

3) 多行字符串，使用\`\`

var name = `your name is jiang
    and my name is keke. i am happy
    to know you`;

4) 解构赋值：

5) 增强的字面量：

6) 箭头函数：箭头函数是函数的扩展中的一个扩展。箭头函数中的this总是指向声明时的变量对象，弥补了es5中this对象由运行时函数的调用方式和调用的位置决定的缺陷

7) promise对象

8) 块作用域，构造let和const，let声明的变量是有块作用域的，在es5中块作用域起不了任何 作用，var是函数作用域，const声明的变量在声明时要初始化并且变量指向的内存地址的值不能修改

9) 类，es6采用语法糖的形式实现类，类的主体包含构造函数、静态方法（类名调用）、原型方法（初始化对象调用）

10) 模块，在es6之前并不支持本地模块，使用AMD，CommonJS，RequireJS等解决方法，在ES6中可以使用模块import  export操作

带栗子讲解的链接：http://www.css88.com/archives/6200

http://yijiebuyi.com/blog/e45098e9a0531cad19a3b98cfea1f032.html

https://blog.csdn.net/u012028371/article/details/52540619

1）块级作用域：let   const  -----  ES6新增的命令，用于声明变量，只在所在的代码块有效

ES5 只有全局作用域和函数作用域，没有块级作用域

在全局作用域下,let  const不会添加为全局对象的属性，如果有同名只会遮蔽它而不是替换他

在js中声明的变量全部在**作用域链\[\[Scopes\]\]数组**里面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70][]

在全局作用域通过**let    const   class**声明的变量会保存在**Script对象**里面

而**var  function**在全局作用域声明的变量会保存在**全局对象Global**里面，**而在浏览器下，Global对象就指window对象**

使用块级绑定的 最佳实践：默认使用const，只在确实需要改变变量的值时使用let

**没有块级作用域的坏处**：内层变量可能会覆盖外层变量；用来计数的循环变量泄露为全局变量

let声明的变量不存在变量提升，变量必须先声明后使用；在块级作用域内有效；暂时性死区（在同一作用域不允许使用未声明的变量）；不允许在相同作用域内，重复声明同一个变量；

//let块级作用域
    {
      let a = 10;
      var b = 1;
    }
    
    a // ReferenceError: a is not defined.
    b // 1
    
    
    
    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 10
    
    //和上面分开的
    var a = [];
    for (let i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 6
    
    
    
    //for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域
    for (let i = 0; i < 3; i++) {
      let i = 'abc';
      console.log(i);
    }
    // abc
    // abc
    // abc
    
    
    
    
    //不存在变量提升
    // var 的情况
    console.log(foo); // 输出undefined
    var foo = 2;
    
    // let 的情况
    console.log(bar); // 报错ReferenceError
    let bar = 2;
    
    
    
    //暂时性死区，只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响
    var tmp = 123;
    if (true) {
      tmp = 'abc'; // ReferenceError
      let tmp;
    }
    
    
    
    
    // 报错，不允许在相同作用域内，重复声明同一个变量
    function func() {
      let a = 10;
      var a = 1;
    }
    
    // 报错
    function func() {
      let a = 10;
      let a = 1;
    }
    
    
    // 报错，不能在函数内部重新声明参数
    function func(arg) {
      let arg; // 报错
    }
    
    function func(arg) {
      {
        let arg; // 不报错
      }
    }

为什么需要块级作用域

ES5 只有全局作用域和函数作用域

1、内层变量可能会覆盖外层变量，var声明的变量会提升

2、用来计数的循环变量泄露为全局变量，for

const声明一个只读的常量，一旦声明，常量的值就不能改变，并且在声明的时候就要初始化；在块级作用域内有效；const声明的变量不存在变量提升，变量必须先声明后使用；暂时性死区；在同一作用域不允许重复声明；const变量是引用类型，其内部属性值可以修改但是地址不能修改

**const的本质**：const实际上保证的，**并不是变量的值不得改动**，而是**变量指向的那个内存地址不得改动**

对于**简单类型的数据**（数值、字符串、布尔值），值就保存在**变量**指向的那个**内存地址**，因此**等同于常量，**所以该常量的值不能改变

对于**复合类型的数据**（主要是对象和数组），**变量指向的内存地址**，保存的只是一个**指针**，const只能**保证这个指针是固定**的，至于它指向的**数据结构**是可以改变的

const foo = {};
    
    // 为 foo 添加一个属性，可以成功
    foo.prop = 123;
    foo.prop // 123
    
    // 将 foo 指向另一个对象，就会报错
    foo = {}; // TypeError: "foo" is read-only

**ES6有6种声明变量的方法**：var   function  let    const     import   class

**var、function**命令声明的**全局变量**，依旧是**顶层对象的属性**；另一方面规定，**let、const、class**命令声明的**全局变量**，不属于**顶层对象的属性**

**global对象：**作为顶层对象，在所有环境下，`global`都是存在的，都可以从它拿到顶层对象

ES5中的顶层对象不统一

1）**浏览器**里面，顶层对象是**window**，但 Node 和 Web Worker 没有window。  
2）**浏览器**和 **Web Worker** 里面，**self**也指向**顶层对象**，但是 Node 没有self。  
3）Node 里面，顶层对象是**global**，但其他环境都不支持

**同一段代码**为了能够在**各种环境**，都能**取到顶层对象**，现在一般是使用**this**变量，但是有局限性

1）**全局环境**中，**this**会返回**顶层对象**。但是，**Node** 模块和 **ES6** 模块中，**this**返回的是**当前模块**

2）**函数**里面的this，**单纯**作为**函数运行**，this会指向**顶层对象**。但是，**严格模式**下，这时this会返回**undefined**

如果函数作为对象的方法运行，则指向该对象

3）不管是严格模式，还是普通模式，**new Function('return this')(**)，总是会返回**全局对象**

2）解构赋值：数组、对象、字符串、数值、布尔值、函数参数的解构赋值

解构的定义：ES6 允许按照一定模式，从**数组**和**对象**中**提取值**，**对变量进行赋值**

属于**“模式匹配**”，只要**等号两边的模式相同**，左边的**变量**就会被赋予**对应的值**

**数组的解构赋值**

**解构不成功**，变量的**值**就等于**undefined**

let [x, y, ...z] = ['a'];
    x // "a"
    y // undefined
    z // []

**不完全解构**，即等号**左边的模式**，**只匹配一部分**的等号**右边的数组，**解构依然可以成功

let [x, y] = [1, 2, 3];
    x // 1
    y // 2
    
    let [a, [b], d] = [1, [2, 3], 4];
    a // 1
    b // 2
    d // 4

如果等号的**右边不是数组**（或者严格地说，**不是可遍历的结构**，参见《Iterator》一章），那么将**会报错**

// 报错
    let [foo] = 1;
    let [foo] = false;
    let [foo] = NaN;
    let [foo] = undefined;
    let [foo] = null;
    let [foo] = {};

只要**某种数据结构**具有 **Iterator** 接口，都可以采用**数组形式的解构赋值**

let [x, y, z] = new Set(['a', 'b', 'c']);
    x // "a"

**解构赋值**允许指定默认值解构赋值允许**指定默认值，只有当一个数组成员严格等于undefined，默认值才会生效**

let [foo = true] = [];
    foo // true
    
    let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

**默认值**可以**引用解构赋值的其他变量**，但该**变量必须已经声明**

let [x = 1, y = x] = [];     // x=1; y=1
    let [x = 1, y = x] = [2];    // x=2; y=2
    let [x = 1, y = x] = [1, 2]; // x=1; y=2
    let [x = y, y = 1] = [];     // ReferenceError: y is not defined，因为x用y做默认值时，y还没有声明

**对象的解构赋值**

对象的解构与数组有一个重要的不同，**数组的元素**是**按次序排列**的，**变量的取值**由它的**位置**决定；而**对象的属性没有次序**，变**量必须与属性同名**，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
    foo // "aaa"
    bar // "bbb"
    
    let { baz } = { foo: "aaa", bar: "bbb" };
    baz // undefined

对象的解构赋值是下面形式的简写

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

**对象的解构赋值的内部机制**：先找到**同名属性**，然后再赋给**对应的变量**。真正被赋值的是后者，而不是前者

let { foo: baz } = { foo: "aaa", bar: "bbb" };  //foo是匹配的模式，baz才是变量
    baz // "aaa"
    foo // error: foo is not defined

**嵌套结构的对象：p是匹配模式，不是变量，不能赋值**

let obj = {
      p: [
        'Hello',
        { y: 'World' }
      ]
    };
    
    let { p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"

**如果p也要作为变量赋值**，可以写成下面这样：

let obj = {
      p: [
        'Hello',
        { y: 'World' }
      ]
    };
    
    let { p, p: [x, { y }] } = obj;
    x // "Hello"
    y // "World"
    p // ["Hello", {y: "World"}]

**对象的解构**也可以**指定默认值，**生效的条件是**，对象的属性值**严格等于**undefined**

var {x = 3} = {x: undefined};
    x // 3
    
    var {x = 3} = {x: null};
    x // null

ar {x = 3} = {};
    x // 3
    
    var {x, y = 5} = {x: 1};
    x // 1
    y // 5
    
    var {x: y = 3} = {};
    y // 3
    
    var {x: y = 3} = {x: 5};
    y // 5
    
    var { message: msg = 'Something went wrong' } = {};
    msg // "Something went wrong"

**解构失败**，变量的值等于**undefined**

let {foo} = {bar: 'baz'};
    foo // undefined

**解构模式**是**嵌套的对象**，而且**子对象所在的父属性**不存在，那么将会**报错**

// 报错，等号左边对象的foo属性，对应一个子对象，foo这时等于undefined，再取子属性就会报错
    let {foo: {bar}} = {baz: 'baz'};

如果要将一个**已经声明的变量用于解构赋值**，必须非常小心

// 错误的写法， JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误
    let x;
    {x} = {x: 1};
    // SyntaxError: syntax error
    
    // 正确的写法
    let x;
    ({x} = {x: 1});

**数组本质**是特殊的**对象**，因此可以**对数组进行对象属性的解构**

let arr = [1, 2, 3];
    let {0 : first, [arr.length - 1] : last} = arr;  //方括号这种写法，属于“属性名表达式”
    first // 1
    last // 3
    方括号这种写法，属于“属性名表达式”
    first // 1
    last // 3

**字符串的解构：字符串被转换成了一个类似数组的对象**

const [a, b, c, d, e] = 'hello';
    a // "h"
    b // "e"
    c // "l"
    d // "l"
    e // "o"

**类似数组的对象**都有一个**length**属性，因此还可以**对这个属性解构赋值**

let {length : len} = 'hello';
    len // 5

**数值和布尔值的解构赋值：等号右边是数值和布尔值，则会先转为对象**

let {toString: s} = 123;
    s === Number.prototype.toString // true
    
    let {toString: s} = true;
    s === Boolean.prototype.toString // true

**解构赋值的规则**：只要等号右边的值**不是对象或数组**，就**先**将其**转为对象**。由于**undefined**和**null无法转为对象**，所以对它们进行解构赋值，都会**报错**

let { prop: x } = undefined; // TypeError
    let { prop: y } = null; // TypeError

**函数参数的解构赋值**

function add([x, y]){
      return x + y;
    }
    
    add([1, 2]); // 3
    
    [[1, 2], [3, 4]].map(([a, b]) => a + b);
    // [ 3, 7 ]

函数参数的解构也可以使用默认值，变量的默认参数有效的条件是对象的属性值严格等于undefined

function move({x = 0, y = 0} = {}) {
      return [x, y];
    }
    
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, 0]
    move({}); // [0, 0]
    move(); // [0, 0]

为**函数**`move`**的参数**指定**默认值**，而不是为变量`x`和`y`指定默认值

[1, undefined, 3].map((x = 'yes') => x);
    // [ 1, 'yes', 3 ]

**圆括号的问题**：一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道

ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号

**不得使用圆括号的情况**

**（1）变量声明语句**

// 全部报错，都是变量声明语句，模式不能使用圆括号
    let [(a)] = [1];
    
    let {x: (c)} = {};
    let ({x: c}) = {};
    let {(x: c)} = {};
    let {(x): c} = {};
    
    let { o: ({ p: p }) } = { o: { p: 2 } };

**（2）函数参数：**也属于变量声明，因此不能带有圆括号

// 报错
    function f([(z)]) { return z; }
    // 报错
    function f([z,(x)]) { return x; }

**（3）赋值语句的模式**

// 全部报错，上面代码将整个模式放在圆括号之中，导致报错
    ({ p: a }) = { p: 42 };
    ([a]) = [5];
    // 报错，上面代码将一部分模式放在圆括号之中，导致报错
    [({ p: a }), { x: c }] = [{}, {}];

可以**使用圆括号**的情况**只有一种**：**赋值语句的非模式部分**，可以使用圆括号

//都是赋值语句，圆括号都不属于模式的一部分
    [(b)] = [3]; // 正确，模式是取数组的第一个成员，跟圆括号无关
    ({ p: (d) } = {}); // 正确，模式是p，而不是d
    
    [(parseInt.prop)] = [3]; // 正确，模式是取数组的第一个成员，跟圆括号无关

解构赋值的作用

**1）交换变量的值**

let x = 1;
    let y = 2;
    [x, y] = [y, x];
    console.log('x: '+ x); //x: 2
    console.log('y: '+ y); //y: 1

**2）****从函数返回多个值**

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便

// 返回一个数组
    function example() {
      return [1, 2, 3];
    }
    let [a, b, c] = example();   //取出数组元素的 值
    
    // 返回一个对象
    function example() {
      return {
        foo: 1,
        bar: 2
      };
    }
    let { foo, bar } = example(); //取出对象的值

**3）函数参数的定义**

解构赋值可以方便地**将一组参数与变量名对应起来**

// 参数是一组有次序的值
    function f([x, y, z]) { ... }
    f([1, 2, 3]);
    
    // 参数是一组无次序的值
    function f({x, y, z}) { ... }
    f({z: 3, y: 2, x: 1});

**4）快速提取 JSON 数据**

let jsonData = {
      id: 42,
      status: "OK",
      data: [867, 5309]
    };
    
    let { id, status, data: number } = jsonData;
    
    console.log(id, status, number);
    // 42, "OK", [867, 5309]

**5）遍历Map结构**

for...of配合变量的解构赋值，获取键名和键值就非常方便

const map = new Map();
    map.set('first', 'hello');
    map.set('second', 'world');
    
    for (let [key, value] of map) {
      console.log(key + " is " + value);
    }
    // first is hello
    // second is world

**6）输入模块的指定方法**

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰

const { SourceMapConsumer, SourceNode } = require("source-map");

3）增强的字面量对象：对象、数组、字符串、函数、数值、正则的扩展

**对象的扩展**

（1）属性的简洁表示法

ES6 允许直接写入变量和函数，作为对象的属性和方法，属性名为变量名, 属性值为变量的值

const foo = 'bar';
    const baz = {foo};
    baz // {foo: "bar"}
    
    // 等同于
    const baz = {foo: foo};

function f(x, y) {
      return {x, y};
    }
    
    // 等同于
    
    function f(x, y) {
      return {x: x, y: y};
    }
    
    f(1, 2) // Object {x: 1, y: 2}

函数的简洁表示法

const o = {
      method() {
        return "Hello!";
      }
    };
    
    // 等同于
    
    const o = {
      method: function() {
        return "Hello!";
      }
    };

（2）属性名表达式  
JavaScript 定义对象的属性，有两种方法

// 方法一：直接用标识符作为属性名
    obj.foo = true;
    
    // 方法二：用表达式作为属性名，这时要将表达式放在方括号之内
    obj['a' + 'bc'] = 123;

如果使**用字面量方式定义对象**（使用大括号），在 ES5 中只能使用方法一（标识符）定义属性，ES6 可以用方法二（表达式）作为对象的属性名，即把表达式放在方括号内

//ES5:
    var obj = {
      foo: true,
      abc: 123
    };
    //ES6
    let propKey = 'foo';
    let obj = {
      [propKey]: true,
      ['a' + 'bc']: 123
    };

let lastWord = 'last word';
    
    const a = {
      'first word': 'hello',
      [lastWord]: 'world'
    };
    
    a['first word'] // "hello"
    a[lastWord] // "world"
    a['last word'] // "world"

方法名表达式

let obj = {
      ['h' + 'ello']() {
        return 'hi';
      }
    };
    
    obj.hello() // hi

**属性名表达式与简洁表示法**，不能同时使用，会报错

// 报错
    const foo = 'bar';
    const bar = 'abc';
    const baz = { [foo] };
    
    // 正确
    const foo = 'bar';
    const baz = { [foo]: 'abc'};

**属性名表达式**如果是一个**对象**，默认情况下会**自动将对象转为字符串**`[object Object]`

（3）方法的name属性  
函数的name属性，返回函数名。对象方法也是函数，因此也有name属性

const person = {
      sayName() {
        console.log('hello!');
      },
    };
    
    person.sayName.name   // "sayName"

（4）Object.is()：同值相等算法，比较两个值严格相等，但是`+0`不等于`-0`，`NaN`等于自身  
ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===），前者会**自动转换数据类型**，后者的**NaN不等于自身，以及+0等于-0**

Object.is('foo', 'foo')
    // true
    Object.is({}, {})
    // false
    +0 === -0 //true
    NaN === NaN // false
    
    Object.is(+0, -0) // false
    Object.is(NaN, NaN) // true

（5 ）Object.assign(target,source,source,...)：用于**对象的合并**，将**源对象**（source）的**所有可枚举属性**，**复制**到**目标对象**（target）

const target = { a: 1 };
    
    const source1 = { b: 2 };
    const source2 = { c: 3 };
    
    Object.assign(target, source1, source2);
    target // {a:1, b:2, c:3}

**目标对象与源对象有同名属性**，或多个源对象有同名属性，则**后面**的属性会**覆盖前面**的属性

const target = { a: 1, b: 1 };
    
    const source1 = { b: 2, c: 2 };
    const source2 = { c: 3 };
    
    Object.assign(target, source1, source2);
    target // {a:1, b:2, c:3}

**只有一个参数**，`Object.assign`会**直接返回该参数**

const obj = {a: 1};
    Object.assign(obj) === obj // true

如果该**参数不是对象**，则会**先转成对象**，然后返回

typeof Object.assign(2) // "object"

由于`undefined`和`null`**无法转成对象**，所以如果它们作为参数，就会**报错**

Object.assign(undefined) // 报错
    Object.assign(null) // 报错

如果非对象参数出现在源对象的位置（即非首参数）,如果`undefined`和`null`不在首参数，就不会报错

let obj = {a: 1};
    Object.assign(obj, undefined) === obj // true
    Object.assign(obj, null) === obj // true

**注意点：浅拷贝，同名属性的替换，数组的处理，取值函数的处理**

const obj1 = {a: {b: 1}};
    const obj2 = Object.assign({}, obj1);
    
    obj1.a.b = 2;
    obj2.a.b // 2

const target = { a: { b: 'c', d: 'e' } }
    const source = { a: { b: 'hello' } }
    Object.assign(target, source)
    // { a: { b: 'hello' } }

Object.assign([1, 2, 3], [4, 5])
    // [4, 5, 3]

`Object.assign`把数组视为属性名为 0、1、2 的对象，因此源数组的 0 号属性`4`覆盖了目标数组的 0 号属性`1`

const source = {
      get foo() { return 1 }
    };
    const target = {};
    
    Object.assign(target, source)
    // { foo: 1 }

`Object.assign`方法用处：为对象添加属性；为对象添加方法；克隆对象；合并多个对象；为属性指定默认值

class Point {
      constructor(x, y) {
        Object.assign(this, {x, y});
      }
    }

Object.assign(SomeClass.prototype, {
      someMethod(arg1, arg2) {
        ···
      },
      anotherMethod() {
        ···
      }
    });
    
    // 等同于下面的写法
    SomeClass.prototype.someMethod = function (arg1, arg2) {
      ···
    };
    SomeClass.prototype.anotherMethod = function () {
      ···
    };

function clone(origin) {
      return Object.assign({}, origin);
    }

**将多个对象合并到某个对象**

const merge =
      (target, ...sources) => Object.assign(target, ...sources);

**合并后返回一个新对象**

const merge =
      (...sources) => Object.assign({}, ...sources);

（6 ）属性的可枚举性和遍历  
**属性的可枚举行**：对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为Object.getOwnPropertyDescriptor

let obj = { foo: 123 };
    Object.getOwnPropertyDescriptor(obj, 'foo')
    //  {
    //    value: 123,
    //    writable: true,
    //    enumerable: true,
    //    configurable: true
    //  }

**属性的遍历**：ES6一共有5种方法  
`for...in`循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）  
`Object.keys(obj)`返回一个**数组**，包括对象自身的（不含继承的）所有**可枚举属**性（不含 Symbol 属性）的**键名**  
`Object.getOwnPropertyNames(obj)`返回一个**数组**，包含**对象自身的所有属性**（不含 Symbol 属性，但是包括不可枚举属性）的**键名**  
`Object.getOwnPropertySymbols(obj)`返回一个**数组**，包含**对象自身的所有 Symbol 属性**的**键名**

`Reflect.ownKeys(obj)`返回一个**数组**，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举

（7）`Object.getOwnPropertyDescriptors`方法，返回指定对象所有自身属性（非继承属性）的描述对象

const obj = {
      foo: 123,
      get bar() { return 'abc' }
    };
    
    Object.getOwnPropertyDescriptors(obj)
    // { foo:
    //    { value: 123,
    //      writable: true,
    //      enumerable: true,
    //      configurable: true },
    //   bar:
    //    { get: [Function: get bar],
    //      set: undefined,
    //      enumerable: true,
    //      configurable: true } }

（8）super关键字：\_proto\_属性， Object.setPrototypeOf()，Object.getPrototypeOf()

JavaScript 语言的对象继承是通过原型链实现。

（9）super关键字：`this`关键字总是指向**函数所在的当前对象**，ES6 又新增了另一个类似的关键字`super`，指向**当前对象的原型对象**

`super`关键字表示原型对象时，只能用在对象的方法之中，用在其他地方都会报错

`super`都没有用在对象的方法之中

// 报错，super用在属性里面
    const obj = {
      foo: super.foo
    }
    
    // 报错，super用在一个函数里面，然后赋值给foo属性
    const obj = {
      foo: () => super.foo
    }
    
    // 报错，super用在一个函数里面，然后赋值给foo属性
    const obj = {
      foo: function () {
        return super.foo
      }
    }
    用在属性里面
    const obj = {
      foo: super.foo
    }
    
    // 报错，super用在一个函数里面，然后赋值给foo属性
    const obj = {
      foo: () => super.foo
    }
    
    // 报错，super用在一个函数里面，然后赋值给foo属性
    const obj = {
      foo: function () {
        return super.foo
      }
    }

（10）Object.keys()     Object.values()   Object.entries()

let {keys, values, entries} = Object;
    let obj = { a: 1, b: 2, c: 3 };
    
    for (let key of keys(obj)) {
      console.log(key); // 'a', 'b', 'c'
    }
    
    for (let value of values(obj)) {
      console.log(value); // 1, 2, 3
    }
    
    for (let [key, value] of entries(obj)) {
      console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
    }

Object.values() ：返回一个数组，成员是参数对象自身的（不含继承的）所有**可遍历（enumerable）属性的键值**

**数组的扩展**

（1）扩展运算符（...）：将一个**数组**转为**用逗号分隔**的**参数序列**

console.log(...[1, 2, 3])
    // 1 2 3
    
    console.log(1, ...[2, 3, 4], 5)
    // 1 2 3 4 5
    
    [...document.querySelectorAll('div')]
    // [<div>, <div>, <div>]

//将一个数组转为用逗号分隔的参数序列
    function add(x, y) {
      return x + y;
    }
    const numbers = [4, 38];
    add(...numbers) // 42
    
    
    //扩展运算符与正常的函数参数结合使用
    function f(v, w, x, y, z) { }
    const args = [0, 1];
    f(-1, ...args, 2, ...[3]);
    
    //扩展运算符后面可以放置表达式
    const arr = [
      ...(x > 0 ? ['a'] : []),
      'b',
    ];
    
    //扩展运算符后面是一个空数组，则不产生任何效果
    [...[], 1]
    // [1]

替代函数的apply

//1  扩展运算符可以展开数组，将数组转为函数的参数
    // ES5 的写法
    function f(x, y, z) {
      // ...
    }
    var args = [0, 1, 2];
    f.apply(null, args);
    
    // ES6的写法
    function f(x, y, z) {
      // ...
    }
    let args = [0, 1, 2];
    f(...args);
    
    
    //2   Math.max方法
    // ES5 的写法
    Math.max.apply(null, [14, 3, 77])
    
    // ES6 的写法
    Math.max(...[14, 3, 77])
    
    
    
    //push函数，将一个数组添加到另一个数组的尾部
    // ES5的 写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    Array.prototype.push.apply(arr1, arr2);
    
    // ES6 的写法
    let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5];
    arr1.push(...arr2);

**扩展运算符的应用**

1）对数组的复制是深拷贝

//ES5
    const a1 = [1, 2];
    const a2 = a1;      //浅拷贝
    a2[0] = 2;
    console.log( a1[0] ); //2
    
    
    //ES6
    const a1 = [1, 2];
    // 写法一
    const a2 = [...a1];  //深拷贝
    // 写法二
    const [...a2] = a1;
    a2[0] = 2;
    console.log( a1[0] ); //1

2）合并数组，对于成员类型是引用类型，则为浅拷贝

const a1 = [{ foo: 1 }];
    const a2 = [{ bar: 2 }];
    
    const a3 = a1.concat(a2);
    const a4 = [...a1, ...a2];
    
    a3[0] === a1[0] // true
    a4[0] === a1[0] // true

3）与解构赋值结合起来，用于生成数组

扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

const [first, ...rest] = [1, 2, 3, 4, 5];
    first // 1
    rest  // [2, 3, 4, 5]
    
    const [first, ...rest] = [];
    first // undefined
    rest  // []
    
    const [first, ...rest] = ["foo"];
    first  // "foo"
    rest   // []
    
    const [...butLast, last] = [1, 2, 3, 4, 5];
    // 报错
    
    const [first, ...middle, last] = [1, 2, 3, 4, 5];
    // 报错

（2）Array.from()：将两类对象转为真正的数组---**类似数组的对象**（array-like object）和**可遍历（iterable）的对象**

let arrayLike = {
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    
    // ES5的写法
    var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
    
    // ES6的写法
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

只要是部署了 Iterator 接口的数据结构，`Array.from`都能将其转为数组

Array.from('hello')
    // ['h', 'e', 'l', 'l', 'o']
    
    let namesSet = new Set(['a', 'b'])
    Array.from(namesSet) // ['a', 'b']

**扩展运算符**（`...`）也可以将某些数据结构转为数组：**伪数组**

// arguments对象
    function foo() {
      const args = [...arguments];
    }
    
    // NodeList对象
    [...document.querySelectorAll('div')]

（3）Array.of()：将一组值，转换为数组

Array.of(3, 11, 8) // [3,11,8]
    Array.of(3) // [3]
    Array.of(3).length // 1

Array.of()弥补Array()的缺陷：由于参数个数不同导致的结果差异

Array() // []
    Array(3) // [, , ,]  参数一个，指定数组的长度
    Array(3, 11, 8) // [3, 11, 8]  参数个数.=2的时候，才返回由参数组成的新数组

`Array.of`总是返回**参数值组成的数组**。如果**没有参数**，就返回一个**空数组**

Array.of() // []
    Array.of(undefined) // [undefined]
    Array.of(1) // [1]
    Array.of(1, 2) // [1, 2]

（4）数组实例的copyWithin()：在当前数组内部，将指定位置的成员复制到其他位置，**会修改当前数组**

Array.prototype.copyWithin(target, start = 0, end = this.length)
    target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
    start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
    end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数

[1, 2, 3, 4, 5].copyWithin(0, 3)
    // [4, 5, 3, 4, 5]

（5）数组实例的find()、findIndex()：都可以识别NaN成员  
**find()**：找出**第一个**符合条件的**数组成员，**找到**第一个**返回true的**成员**，否则返回**undefined**  
**findIndex()**：返回**第一个**符合条件的**数组成员的位置**，如果所有成员都**不符合条件**，则返回`-1`

（6）数组实例的fill()：使用给定值，填充一个数组

fill(填充元素，start，end)---不包括end

['a', 'b', 'c'].fill(7)
    // [7, 7, 7]
    
    new Array(3).fill(7)
    // [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2)
    // ['a', 7, 'c']

**注意：**如果**填充的类型**为**对象**，那么**被赋值**的是**同一个内存地址的对象**，而**不是深拷贝对象**

（7）数组实例的entries()   keys()   values()：返回数组  都返回一个遍历器对象，可以用**for...of**循环遍历

（8）数组实例的includes()：`Array.prototype.includes`方法返回一个**布尔值**，表示**某个数组是否包含给定的值**，与字符串的`includes`方法类似

includes(搜素的元素，搜素的起始位置)---位置默认为0，为负数则表示倒数的位置如果大于数组长度则重置为0

[1, 2, 3].includes(2)     // true
    [1, 2, 3].includes(4)     // false
    [1, 2, NaN].includes(NaN) // true

（9）数组的空位：数组的某一个位置没有任何值

Array(3) // [, , ,]

空位不是`undefined`，一个位置的值等于`undefined`，依然是有值的，空位是没有任何值  
  
**字符串的扩展**

（1）字符的Unicode表示法

`（2）codePointAt():``codePointAt`方法会正确返回 32 位的 UTF-16 字符的码点

（3）String.fromCodePoint()：从码点返回对应字符，但是这个方法不能识别 32 位的 UTF-16 字符

（4）字符串的遍历器接口：for...of

for (let codePoint of 'foo') {
      console.log(codePoint)
    }
    // "f"
    // "o"
    // "o"

（5）at():可以识别 Unicode 编号大于`0xFFFF`的字符，返回正确的字符

（6）normalize()

（7）includes()  startsWith()   endsWith()

includes()：返回布尔值，表示是否找到了参数字符串。
    startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
    endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部

let s = 'Hello world!';
    
    s.startsWith('world', 6) // true  第二个参数表示开始搜索的位置直到末尾
    s.endsWith('Hello', 5) // true     第二个参数表示对前面元素搜索
    s.includes('Hello', 6) // false   第二个参数表示开始搜索的位置直到末尾

（8）repeat()：返回一个新字符串，表示将原字符串重复`n次`

'na'.repeat(0) // ""
    
    'na'.repeat(2.9) // "nana"    小数向下取整
    'na'.repeat(Infinity) // 参数为Infinity报错，RangeError
    'na'.repeat(-1)      // 参数为负数，报错，RangeError
    'na'.repeat(-0.9)    // ""  参数是0到-1之间，则等同于0
    'na'.repeat(NaN) // ""      参数NaN等同0
    'na'.repeat('na') // ""     参数为字符串，先转换为数字
    'na'.repeat('3') // "nanana"

（9）padStart()，padEnd()

（10）matchAll()：返回一个正则表达式在当前字符串的所有匹配

（11）模板字符串：定义多行字符串，在字符串中嵌入变量----模板对象

**数值的扩展**

（1）二进制和八进制的表示法：用前缀`0b`（或`0B`）和`0o`（或`0O`）表示

ES5 开始，在**严格模式**之中，**八进制**就**不再允许使用前缀****`0`表示**

（2）Number.isFinite()    Number.isNaN()

Number.isFinite()：检查一个数值是否为有限值，如果参数类型不是数值，一律返回false，不会进行转换

Number.isFinite(15); // true
    Number.isFinite(0.8); // true
    Number.isFinite(NaN); // false
    Number.isFinite(Infinity); // false
    Number.isFinite(-Infinity); // false
    Number.isFinite('foo'); // false
    Number.isFinite('15'); // false
    Number.isFinite(true); // false

Number.isNaN()：用来检查一个值是否为NaN，参数类型不是NaN，一律返回false

Number.isNaN(NaN) // true
    Number.isNaN(15) // false
    Number.isNaN('15') // false
    Number.isNaN(true) // false
    Number.isNaN(9/NaN) // true
    Number.isNaN('true' / 0) // true
    Number.isNaN('true' / 'true') // true

（3）Number.parseInt()    Number.parseFloat()

逐步减少全局性方法，使得语言逐步模块化

（4）Number.isInteger()：判断一个数值是否为整数，25 和 25.0 被视为同一个值，参数不是数值返回false

Number.isInteger(25) // true
    Number.isInteger(25.1) // false
    Number.isInteger(25.0) // true

**函数的扩展**

（1）函数参数的默认值

function Point(x = 0, y = 0) {
      this.x = x;
      this.y = y;
    }
    
    const p = new Point();
    p // { x: 0, y: 0 }

**参数变量**是**默认声明**的，所以不能用`let`或`const`再次声明

function foo(x = 5) {
      let x = 1; // error
      const x = 2; // error
    }

**使用参数默认值**时，函数**不能有同名参数**

// 不报错
    function foo(x, x, y) {
      // ...
    }
    
    // 报错  SyntaxError: Duplicate parameter name not allowed in this context
    function foo(x, x, y = 1) {
      // ...
    }

**与解构赋值默认值结合使用**

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: Cannot read property 'x' of undefined

**函数的length属性**：返回没有指定默认值的参数个数

(function (a) {}).length // 1
    (function (a = 5) {}).length // 0
    (function (a, b, c = 5) {}).length // 2

**rest 参数**也不会计入`length`属性

(function(...args) {}).length // 0

**作用域**：一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失

//例1

var x = 1;
    function f(x, y = x) {
      console.log(y);
    }
    f(2) // 2

//例2，函数体内部的局部变量x影响不到默认值变量x
    let x = 1;
    function f(y = x) {
      let x = 2;
      console.log(y);
    }
    f() // 1
    函数体内部的局部变量x影响不到默认值变量x
    let x = 1;
    function f(y = x) {
      let x = 2;
      console.log(y);
    }
    f() // 1

//例3 ，全局变量不存在，则报错
    function f(y = x) {
      let x = 2;
      console.log(y);
    }
    f() // ReferenceError: x is not defined

//参数x = x形成一个单独作用域。实际执行的是let x = x，由于暂时性死区的原因，这行代码会报错”x 未定义“
    var x = 1;
    function foo(x = x) {
      // ...
    }
    foo() // ReferenceError: x is not defined
    参数x = x形成一个单独作用域。实际执行的是let x = x，由于暂时性死区的原因，这行代码会报错”x 未定义“
    var x = 1;
    function foo(x = x) {
      // ...
    }
    foo() // ReferenceError: x is not defined

参数的默认值是一个函数也遵守这个规则

//例1：正常
    
    let foo = 'outer';
    
    function bar(func = () => foo) {
      let foo = 'inner';
      console.log(func());
    }
    
    bar(); // outer

//例2：报错，匿名函数里面的foo指向函数外层，但是函数外层并没有声明变量foo，所以就报错了
    function bar(func = () => foo) {
      let foo = 'inner';
      console.log(func());
    }
    
    bar() // ReferenceError: foo is not defined

//例1
    var x = 1;
    function foo(x, y = function() { x = 2; }) { //匿名函数里面的x指向第一个参数x
      var x = 3;                                   //这个局部变量x与参数x是不同作用域
      y(); 
      console.log(x);
    }
    
    foo() // 3
    x // 1
    
    //例2
    var x = 1;
    function foo(x, y = function() { x = 2; }) {
      x = 3;             //这个x指向第一个参数x
      y();
      console.log(x);
    }
    
    foo() // 2
    x // 1

（2）rest参数（形式为...变量名）：rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中；rest参数只能是组后一个参数

function add(...values) {
      let sum = 0;
      for (var val of values) {
        sum += val;
      }
      return sum;
    }
    add(2, 5, 3) // 10

// 报错
    function f(a, ...b, c) {
      // ...
    }

（3）严格模式：只要**函数参数**使用了**默认值、解构赋值、或者扩展运算符**，那么**函数内部就不能显式**设定为**严格模式**，否则会报错  
（4）name属性：返回该函数的函数名

function foo() {}
    foo.name // "foo"

**注意**：将一个**匿名函数**赋值给一个**变量**，**ES5** 的`name`属性，会返回**空字符串**，而 **ES6** 的`name`属性会返回**实际的函数名**

var f = function () {};
    // ES5
    f.name // ""
    // ES6
    f.name // "f"

将一个**具名函数**赋值给一个**变量**，则 ES5 和 ES6 的`name`属性都返回这个**具名函数原本的名字**

const bar = function baz() {};
    // ES5
    bar.name // "baz"
    // ES6
    bar.name // "baz"

（5）箭头函数：使用（=>）定义函数，使表达更简洁；简化回调函数

**注意点**：

（a**）没有this    super   arguments     new.target绑定-----这些值由外围最近一层费箭头函数决定**

（b）**不可以使用`new`命令-------箭头函数没有\[\[construct\]\]方法，不可以**当作**构造函数，**否则会抛出一个错误

**（c）没有原型------不能使用new关键字调用箭头函数****，**所以没有prototype属性

（d）**不可以**使用`arguments`对象-------箭头函数没有arguments绑定，如果要用，可以**用 rest 参数和命名参数代替**

（e）**不可以改变this绑定-------在函数的生命周期内始终保持一致**

（f）**不可以**使用`yield`命令，因此箭头函数**不能用作 Generator 函数**

function Timer() {
      this.s1 = 0;
      this.s2 = 0;
      // 箭头函数
      setInterval(() => this.s1++, 1000);
      // 普通函数
      setInterval(function () {
        this.s2++;
      }, 1000);
    }
    
    var timer = new Timer();
    
    setTimeout(() => console.log('s1: ', timer.s1), 3100);  //s1使用剪头函数，更新了3次
    setTimeout(() => console.log('s2: ', timer.s2), 3100);  //s2是在普通函数中调用，由于this指向全局的s2，而全局没有，所有为0
    // s1: 3
    // s2: 0

var f = v => v;
    
    // 等同于
    var f = function (v) {
      return v;
    };

// 报错，大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错
    let getTempItem = id => { id: id, name: "Temp" };
    
    // 不报错
    let getTempItem = id => ({ id: id, name: "Temp" });
    大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错
    let getTempItem = id => { id: id, name: "Temp" };
    
    // 不报错
    let getTempItem = id => ({ id: id, name: "Temp" });

除了`this`，以下三个变量**在箭头函数**之中也是**不存在**的**，指向外层函数的**对应变量：`arguments`、`super`、`new.target`

function foo() {
      setTimeout(() => {
        console.log('args:', arguments);
      }, 100);
    }
    
    foo(2, 4, 6, 8)
    // args: [2, 4, 6, 8]

由于**箭头函数没有自己的**`this`，所以当然也就不能用`call()`、`apply()`、`bind()`这些方法**去改变**`this`**的指向**

(function() {
      return [
        (() => this.x).bind({ x: 'inner' })()
      ];
    }).call({ x: 'outer' });
    // ['outer']

（6）双冒号运算符：函数绑定运算符（：：），**对象::函数**，自动将左边的对象，作为上**下文环境**（即`this`对象）  
双冒号**左边为空**，**右边**是一个**对象的方法**，则等于将该方法绑定在该**对象**上面

var method = obj::obj.foo;
    // 等同于
    var method = ::obj.foo;
    
    let log = ::console.log;
    // 等同于
    var log = console.log.bind(console);

（7）尾调用：函数式编程的一个重要概念，指**某个函数的最后一步**是**调用另一个函数，**通俗的讲是将一个函数作为另一个函数的返回值

function f(x){
      return g(x);
    }

以下三种情况，都不属于尾调用：

// 情况一，调用函数g之后，还有赋值操作
    function f(x){
      let y = g(x);
      return y;
    }
    
    // 情况二，调用后还有操作
    function f(x){
      return g(x) + 1;
    }
    
    // 情况三
    function f(x){
      g(x);
    }
    //情况三等于下面形式
    function f(x){
      g(x);
      return undefined;
    }

**尾调用优化**：只保留内层函数的调用帧  
只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”

//不会进行尾调用优化，因为内层函数inner用到了外层函数addOne的内部变量one
    function addOne(a){
      var one = 1;
      function inner(b){
        return b + one;
      }
      return inner(a);
    }

**尾递归**：**函数调用自身**，称为**递归**；如果**尾调用自身**，就称为**尾递归**

**复杂度 O(n) **

function factorial(n) {
      if (n === 1) return 1;
      return n * factorial(n - 1);
    }
    
    factorial(5) // 120

**复杂度 O(1)**

function factorial(n, total) {
      if (n === 1) return total;
      return factorial(n - 1, n * total);
    }
    
    factorial(5, 1) // 120

Fibonacci 数列实现

function Fibonacci (n) {
      if ( n <= 1 ) {return 1};
    
      return Fibonacci(n - 1) + Fibonacci(n - 2);
    }
    
    Fibonacci(10) // 89
    Fibonacci(100) // 堆栈溢出
    Fibonacci(500) // 堆栈溢出

function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
      if( n <= 1 ) {return ac2};
    
      return Fibonacci2 (n - 1, ac2, ac1 + ac2);
    }
    
    Fibonacci2(100) // 573147844013817200000
    Fibonacci2(1000) // 7.0330367711422765e+208
    Fibonacci2(10000) // Infinity

**正则的扩展**

（1）RegExp构造函数

//方法一：参数是字符串，第二个参数表示正则表达式的修饰符
    var regex = new RegExp('xyz', 'i');
    // 等价于
    var regex = /xyz/i;
    //方法二：参数是一个正则表示式，这时会返回一个原有正则表达式的拷贝
    var regex = new RegExp(/xyz/i);
    // 等价于
    var regex = /xyz/i;

（2）字符串的正则方法：`match()`、`replace()`、`search()``、``split()`  
（3）u修饰符，会正确处理四个字节的 UTF-16 编码  
  
4）Promise对象

5）类---class----ES6之前实现继承是通过原型链实现的，先产生子实例对象（this），然后在将函数原型对象上的属性赋给子实例对象；而类是先通过在子类的constructor中调用super()，即先产生父元素（this），然后在将属性赋到this对象上，因为子类中没有this，用的是父类的this

JavaScript 语言中，**生成实例对象**的传统方法是通过**构造函数；**

**类的内部包括的类型：**构造函数（定义实例的属性）、普通方法、静态方法（静态方法不会被实例对象调用，只能被函数调用，可以被子类继承）

**ES6**中通过`class`关键字，可以定义类；通过**new**生成**类的实例对象**；**类的数据类型**就是**函数**，**类本身**就指向**构造函数；****类的所有方法都定义在类的**`prototype`**属性上面；**类的**内部所有定义的方法，都是不可枚举的**

//定义类，类里面只能包含构造函数、方法（不需要使用function声明），方法之间不需要逗号分隔
    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    }

**类的属性名**，可以**采用表达式**

let methodName = 'getArea';
    class Square {
      constructor(length) {
        // ...
      }
      [methodName]() {
        // ...
      }
    }

**类和模块的内部**，默认就是**严格模式**

**constructor()**：**类的默认方法**，通过`new`命令生成对象实例时，自动调用该方法；**默认返回实例对象**（即`this`），完全可以指定返回另外一个对象；**跟普通构造函数**的一个主要**区别**，必须**使用**`new`调用，**否则会报错**，而前者不会报错

与 ES5 一样，**实例的属性**除非**显式**定义在其**本身（即定义在**`this`**对象上）**，否则都是定义在**原型**上（即定义在`class`上）

//定义类
    class Point {
    
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      toString() {
        return '(' + this.x + ', ' + this.y + ')';
      }
    
    }
    
    var point = new Point(2, 3);
    
    point.toString() // (2, 3)
    
    point.hasOwnProperty('x') // true
    point.hasOwnProperty('y') // true
    point.hasOwnProperty('toString') // false
    point.__proto__.hasOwnProperty('toString') // true

**与 ES5 一样**，**类**的所有**实例共享一个原型对象**

**class表达式：**与函数一样，类也可以使用表达式的形式定义

//这个类的名字是MyClass而不是Me，Me只在 Class 的内部代码可用，指代当前类
    const MyClass = class Me {
      getClassName() {
        return Me.name;
      }
    };

let inst = new MyClass();
    inst.getClassName() // Me
    Me.name // ReferenceError: Me is not defined

**类不存在变量提升**（hoist），这一点与 **ES5** 完全不同  
**this指向**：**类的方法**内部如果含有`this`，它**默认指向类的实例，**但是一旦单独使用该方法，很可能报错

class Logger {
      printName(name = 'there') {
        this.print(`Hello ${name}`);
      }
    
      print(text) {
        console.log(text);
      }
    }
    
    const logger = new Logger();
    const { printName } = logger; //printName()中的this默认指向类的实例，但是将其单独提取出来，this指向方法运行时的环境，因为找不到print而报错
    printName(); // TypeError: Cannot read property 'print' of undefined

**name属性**：

//name属性总是返回紧跟在class关键字后面的类名
    class Point {}
    Point.name // "Point"

**Class的取值函数(getter)和存值函数(setter)**  
与 ES5 一样，在“类”的内部可以使用`get`和`set`关键字，对**某个属性**设置存值函数和取值函数，**拦截该属性的存取行为**

class MyClass {
      constructor() {
        // ...
      }
      get prop() {
        return 'getter';
      }
      set prop(value) {
        console.log('setter: '+value);
      }
    }
    
    let inst = new MyClass();
    
    inst.prop = 123;
    // setter: 123
    
    inst.prop
    // 'getter'

**Class的静态方法**：**类**相当于**实例的原型**，所有**在类中定义的方法**，都会**被实例继承**

但是在类的方法前面加上**static，**该方法**不会被实例调用（继承）**，而是**直接通过类来调用**

class Foo {
      static classMethod() {
        return 'hello';
      }
    }
    
    Foo.classMethod() // 'hello'
    
    var foo = new Foo();
    foo.classMethod()
    // TypeError: foo.classMethod is not a function

在**静态方法**中的**this**指向**类**，而**不是**类的**实例对象，**静态方法可以与非静态方法重名

class Foo {
      static bar () {
        this.baz();
      }
      static baz () {
        console.log('hello');
      }
      baz () {
        console.log('world');
      }
    }
    
    Foo.bar() // hello

**父类的静态**方法，可以**被子类继承**

class Foo {
      static classMethod() {
        return 'hello';
      }
    }
    
    class Bar extends Foo {
    }
    
    Bar.classMethod() // 'hello'

**Class的静态属性和实例属性**

静态属性：指的是 **Class 本身的属性**，即`Class.propName`，而**不是**定义在**实例对象**（`this`）上的属性

Class 内部**只有静态方法**，**没有静态属性**，只能通过下面的方法定义静态属性

class Foo {
    }
    Foo.prop = 1;
    Foo.prop // 1

// 以下两种写法都无效
    class Foo {
      // 写法一
      prop: 2
      // 写法二
      static prop: 2
    }
    Foo.prop // undefined

**Class的继承**：通过extend继承， ES5 通过**修改原型链**实现继承

class Point {
    }
    class ColorPoint extends Point {      //在子类的构造函数中，只有调用super()之后，才能调用this 
      constructor(x, y, color) {          //子类必须在constructor()中调用super(),否则新建实例会报错，子类的this对象必须先通过父类的构造函数
                                         //得到与父类同样的实例属性和方法，加上子类自己的实例属性和方法
        super(x, y); // 调用父类的constructor(x, y)，新建父类的this对象
        this.color = color;
      }
    
      toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
      }
    }

**ES5 的继承**，实质是**先创造子类的实例对象**`this`，然后**再将父类的方法**添加到`this`上面（`Parent.apply(this)`）

**ES6 的继承**机制完全不同，实质是**先创造父类的实例对**象`this`（所以必须**先调用**`super`方法），然后**再用子类的构造函数修改**`this`

**Object.getPrototypeOf()**：从子类上获取父类

//用于一个类是否继承了另外一个类
    Object.getPrototypeOf(ColorPoint) === Point
    // true

**super关键字**：当函数使用，当对象使用

当函数使用：代表**父类的构造函数**，**子类的构造函**数必须**执行一次**`super`函数；super()内部的 this指向子类；只能用在子类的构造函数之中

class A {
      constructor() {
        console.log(new.target.name);  //指向当前正在执行的函数
      }
    }
    class B extends A {
      constructor() {
        super();        //返回的是子类B的实例，即super内部的this指的是B
    
      } 
    }
    new A() // A
    new B() // B
    指向当前正在执行的函数
      }
    }
    class B extends A {
      constructor() {
        super();        //返回的是子类B的实例，即super内部的this指的是B
    
      } 
    }
    new A() // A
    new B() // B

当对象使用：在**普通方法**中，super指向**父类的原型对象，**；在**静态方法**中，指向**父类**

class A {
      p() {
        return 2;
      }
    }
    
    class B extends A {
      constructor() {
        super();                        
        console.log(super.p()); // 2    super.p()=A.prototype.p() 这里的super指向父类的原型对象，所以super无法调用父类实例上的方法、属性
      } 
    }
    
    let b = new B();

在**子类普通方法**中通过`super`调用**父类的方法**时，**方法内部**的`this`指向**当前的子类实例**

class A {
      constructor() {
        this.x = 1;
      }
      print() {
        console.log(this.x);
      }
    }
    
    class B extends A {
      constructor() {
        super();
        this.x = 2;
      }
      m() {
        super.print();
      }
    }
    
    let b = new B();
    b.m() // 2

6）模块--module：自动运行在严格模式下，并且没有办法退出运行的JS代码

特点：

a）在模块顶部创建的变量不会自动添加到全局共享作用域，仅在模块的顶级作用域中存在

b）模块必须导出一些外部代码可以访问的元素（变量  函数），也可以从其他模块导入绑定，导入的变量是只读变量

c）模块顶部的this值为undefined

d）模块不支持HTML风格的代码注释

脚本----不是模块的js代码没有上述特性

ES6 **模块的设计思想**：尽量的**静态化**，使得**编译时**就能确定**模块的依赖关系**，以及**输入和输出的变量**

ES6 模块**不是对象**，而是通过`export`命令**显式指定输出的代码**，再通过`import`命令**输入**

// ES6模块，编译时加载或静态加载
    import { stat, exists, readFile } from 'fs';

**模块功能**主要由**两个命令**构成：export(**规定**模块的**对外接口**)，import(**输入**其他模块提供的**功能**)

**使用export命令输出变量**：

**使用import引入的变量**：具有提升效果，会提升到整个模块的头部，首先执行

**import**是静态执行，所以**不能使用表达式和变量**

// 报错，使用了表达式
    import { 'f' + 'oo' } from 'my_module';
    
    // 报错，使用了变量
    let module = 'my_module';
    import { foo } from module;
    
    // 报错，使用了if语句
    if (x === 1) {
      import { foo } from 'module1';
    } else {
      import { foo } from 'module2';
    }

**模块的整体加载**：用**\***指定一个**对象**，所有**输出值**都加载在**这个对象上**面

// circle.js
    export function area(radius) {
      return Math.PI * radius * radius;
    }
    export function circumference(radius) {
      return 2 * Math.PI * radius;
    }
    
    
    import { area, circumference } from './circle';
    console.log('圆面积：' + area(4));
    console.log('圆周长：' + circumference(14));
    
    
    import * as circle from './circle';
    console.log('圆面积：' + circle.area(4));
    console.log('圆周长：' + circle.circumference(14));

**export default命令**：import可以指定任意名字，且不需要加大括号

// export-default.js
    export default function () {
      console.log('foo');
    }
    // import-default.js
    import customName from './export-default';
    customName(); // 'foo'

**export default命令**后面不能跟变量声明语句，本质是将后面变量的值赋给变量default

// 正确
    export var a = 1;
    // 正确
    var a = 1;
    export default a;
    // 错误
    export default var a = 1;
    // 正确
    export default 42;
    // 报错
    export 42;

**Module的加载实现**  
1）浏览器加载ES6模块：使用<script type='module'>；异步加载，等同defer；多个则顺序执行

**ES6模块CommonJS模块的差异**：

**两个重大差异**：

CommonJS 模块输出的是一个值的拷贝（一旦输出一个值，模块内部的变化就影响不到这个值），ES6 模块输出的是值的引用（模块内部的变化会影响到该值）。
    CommonJS 模块是运行时加载（加载的是一个对象，运行时才会生成），ES6 模块是编译时输出接口（ES6模块不是对象，对外接口是一种静态定义）

一旦输出一个值，模块内部的变化就影响不到这个值），ES6 模块输出的是值的引用（模块内部的变化会影响到该值）。CommonJS 模块是运行时加载（加载的是一个对象，运行时才会生成），ES6 模块是编译时输出接口（ES6模块不是对象，对外接口是一种静态定义）

7）Symbol：ES5 的**对象属性名**都是**字符串**，这容易造成**属性名的冲突**，**Symbol**保证**每个属性的名字**都是独一无二

Symbol值通过Symbol函数生成，对象的属性名有两种类型：字符串、Symbol类型

//Symbol()函数 前不能使用new，因为Symbol是一个原始类型的值，不是对象
    
    let s = Symbol();
    
    typeof s// "symbol"

let s1 = Symbol('foo');  //接收一个字符串作为参数，易区分Symbol实例
    let s2 = Symbol('bar');
    
    s1 // Symbol(foo)
    s2 // Symbol(bar)
    
    s1.toString() // "Symbol(foo)"
    s2.toString() // "Symbol(bar)"

const obj = {
      toString() {
        return 'abc';
      }
    };
    const sym = Symbol(obj);  //Symbol()的参数是一个对象，会调用该对象的toStrign,将其转为字符串，然后才生成一个Symbol值
    sym // Symbol(abc)

// 没有参数的情况
    let s1 = Symbol();  //Symbol函数的参数只是对当前Symbol值的描述，相同参数的Symbol函数的返回值是不一样的
    let s2 = Symbol();
    
    s1 === s2 // false
    
    // 有参数的情况
    let s1 = Symbol('foo');
    let s2 = Symbol('foo');
    
    s1 === s2 // false

let sym = Symbol('My symbol');  //Symbol值不能与其他类型的的值进行运算
    
    "your symbol is " + sym
    // TypeError: can't convert symbol to string
    `your symbol is ${sym}`
    // TypeError: can't convert symbol to string

**作为属性名的Symbol：**一个对象由多个模块构成的情况，保证不会出现同名的属性

//过方括号结构和Object.defineProperty，将对象的属性名指定为一个 Symbol 值
    let mySymbol = Symbol();
    // 第一种写法
    let a = {};
    a[mySymbol] = 'Hello!';
    // 第二种写法
    let a = {
      [mySymbol]: 'Hello!'
    };
    // 第三种写法
    let a = {};
    Object.defineProperty(a, mySymbol, { value: 'Hello!' });
    // 以上写法都得到同样结果
    a[mySymbol] // "Hello!"

const mySymbol = Symbol();
    const a = {};
    a.mySymbol = 'Hello!';   //Symbol值作为对象属性名时，不能用点运算符，点运算符后面总是字符串，所以a的属性名是字符串而不是Symbol值
    a[mySymbol] // undefined
    a['mySymbol'] // "Hello!"

//对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中
    let s = Symbol();
    let obj = {
      [s]: function (arg) { ... }
    };
    obj[s](123);
    //等同于下面的写法
    let obj = {
      [s](arg) { ... }
    };

8）set和map数据结构  
**set结构**：类似于数组，没有重复的元素，Set()是一个构造函数，用来生成 Set 数据结构

//无参数，成员去重类似===（NaN不相等），在Set数据结构里面是相等的
    const s = new Set();
    [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
    for (let i of s) {
      console.log(i);
    }
    // 2 3 5 4
    
    // 例一：有参数
    const set = new Set([1, 2, 3, 4, 4]);
    [...set]
    // [1, 2, 3, 4]
    
    // 例二
    const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
    items.size // 5
    
    // 例三
    const set = new Set(document.querySelectorAll('div'));
    set.size // 56
    
    // 去除数组的重复成员
    [...new Set(array)]
    
    //NaN相等
    let set = new Set();
    let a = NaN;
    let b = NaN;
    set.add(a);
    set.add(b);
    set // Set {NaN}
    
    //两个对象总是不相等
    let set = new Set();
    set.add({});
    set.size // 1
    set.add({});
    set.size // 2

**Set实例的属性**：

Set.prototype.constructor：构造函数，默认就是Set函数。
    Set.prototype.size：返回Set实例的成员总数

**Set实例的方法：**操作方法（用于操作数据）和遍历方法（用于遍历成员）

//操作方法
    add(value)：添加某个值，返回 Set 结构本身
    delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
    has(value)：返回一个布尔值，表示该值是否为Set的成员
    clear()：清除所有成员，没有返回值
    //遍历方法，遍历顺序就是插入顺序
    keys()：返回键名的遍历器  键名和键值是一样的
    values()：返回键值的遍历器
    entries()：返回键值对的遍历器
    forEach()：使用回调函数遍历每个成员

**数组成员去重**：**Array.from()**可以将 **Set** 结构转为**数组**；或者**扩展运算符（...）**和**Set结构**

//Array.from()结合Set数据结构
    function dedupe(array) {
      return Array.from(new Set(array));
    }
    dedupe([1, 1, 2, 3]) // [1, 2, 3]
    
    //扩展运算符结合Set数据结构
    let set = new Set(['red', 'green', 'blue']);
    let arr = [...set];
    // ['red', 'green', 'blue']

** 用Set实现并、交、差集**

**WeakSet**：不重复的值的集合  
与 Set 有两个区别：**WeakSet** 的**成员**只能是**对象**，而不能是其他类型的值；WeakSet 中的**对象**都是**弱引用，**即垃圾回收机制不考虑 WeakSet 对该对象的引用，WeakSet 不可遍历

//WeakSet()可以接受一个数组或类似数组的对象作为参数，并且数组的成员只能是对象
    const a = [[1, 2], [3, 4]];
    const ws = new WeakSet(a);
    // WeakSet {[1, 2], [3, 4]}   数组的成员成为WeakSet的成员
    
    const b = [3, 4];
    const ws = new WeakSet(b);
    // Uncaught TypeError: Invalid value used in weak set(…)

//WeakSet结构有3种方法
    WeakSet.prototype.add(value)：向 WeakSet 实例添加一个新成员。
    WeakSet.prototype.delete(value)：清除 WeakSet 实例的指定成员。
    WeakSet.prototype.has(value)：返回一个布尔值，表示某个值是否在 WeakSet 实例之中

**WeakSet 的一个用处**，是**储存 DOM 节点**，而不用担心这些节点从文档移除时，会**引发内存泄漏**

**Map结构**：**Map的键**实际上是跟**内存地址**绑定的，只要内存地址不一样，就视为两个键。这就解决了**同名属性碰撞**（clash）的问题。  
JavaScript 的对象（**Object**），本质上是**键值对的集合**（Hash 结构），但是传统上**只能用字符串当作键**  
**Map数据结构**就解决了这个问题；类似于对象，也是**键值对的集合**，**“键”**可以是**字符串**，**各种类型的值（包括对象**），也就是说，Object 结构提供了**“字符串—值”**的对应，Map 结构提供了“**值—值”**的对应，是一种更完善的 Hash 结构实现

//Map()无参，添加成员，获取成员，判断成员，删除长远
    const m = new Map();
    const o = {p: 'Hello World'};
    m.set(o, 'content')
    m.get(o) // "content"
    m.has(o) // true
    m.delete(o) // true
    m.has(o) // false
    //Map()有参，数组的成员是一个个表示键值对的数组
    const map = new Map([
      ['name', '张三'],
      ['title', 'Author']
    ]);
    
    map.size // 2
    map.has('name') // true
    map.get('name') // "张三"
    map.has('title') // true
    map.get('title') // "Author"

//只有对同一个对象的引用，Map 结构才将其视为同一个键只有对同一个对象的引用，Map 结构才将其视为同一个键

const map = new Map();
    map.set(['a'], 555);  //表面是同一个键，但是内存地址不一样
    map.get(['a']) // undefined

** Map的键**是一个**简单类型的值**（数字、字符串、布尔值），则只要两个值**严格相等**，Map 将其**视为一个键**，比如`0`和`-0`就是一个键，布尔值`true`和字符串`true`则是两个**不同的键**。另外，`undefined`和`null`也是两个**不同的键**。虽然`NaN`不严格相等于自身，但 Map 将其视为**同一个键**

let map = new Map();
    map.set(-0, 123);
    map.get(+0) // 123
    
    map.set(true, 1);
    map.set('true', 2);
    map.get(true) // 1
    
    map.set(undefined, 3);
    map.set(null, 4);
    map.get(undefined) // 3
    
    map.set(NaN, 123);
    map.get(NaN) // 123

**Map实例的属性和操作方法**

map.size属性
    set(key, value)  //返回当前的Map对象，可采用链式写法，如果key已经有值，则键值会被更新，否则就新生成该键
    get(key) //get方法读取key对应的键值，如果找不到key，返回undefined
    has(key)  //返回布尔值
    delete(key)  //删除某个键，返回true。如果删除失败，返回false
    clear()   //清除所有成员，没有返回值

**Map实例的遍历方法**

keys()：返回键名的遍历器
    values()：返回键值的遍历器
    entries()：返回所有成员的遍历器
    forEach()：遍历 Map 的所有成员

**WeakMap**：与Map结构类似，用于**生成键值对的集合**

**WeakMap与Map的区别**：只接受对象作为键名；键名所指向的对象，不计入垃圾回收机制

// WeakMap 可以使用 set 方法添加成员
    const wm1 = new WeakMap();
    const key = {foo: 1};
    wm1.set(key, 2);
    wm1.get(key) // 2
    
    // WeakMap 也可以接受一个数组，
    // 作为构造函数的参数
    const k1 = [1, 2, 3];
    const k2 = [4, 5, 6];
    const wm2 = new WeakMap([[k1, 'foo'], [k2, 'bar']]);
    wm2.get(k2) // "bar"
    const map = new WeakMap();
    map.set(1, 2)
    // TypeError: 1 is not an object!
    map.set(Symbol(), 2)
    // TypeError: Invalid value used as weak map key
    map.set(null, 2)
    // TypeError: Invalid value used as weak map key

只有get()  set()   has()   delete()

9）Proxy：用于**修改某些操作的默认行为**，可以对外界的访问进行**过滤和改写**

//构造函数Proxy()生成Proxy实例，target要拦截的目标对象，handller--对象，定制拦截行为
    var proxy = new Proxy(target, handler);
    //第一个参数是要代理的目标对象（空对象），第二个参数是配置对象
      //要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象）进行操作
    var proxy = new Proxy({}, {
      //target--目标对象，property--要访问的属性
      get: function(target, property) {
        return 35;
      }
    });
    
    proxy.time // 35
    proxy.name // 35
    proxy.title // 35

//如果handler没有设置任何拦截，那就等同于直接通向原对象,handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target
    var target = {};
    var handler = {};
    var proxy = new Proxy(target, handler);
    proxy.a = 'b';
    target.a // "b"

Proxy支持13种拦截操作

1）get(target, propKey, receiver)：拦截**对象属性的读取**，比如proxy.foo和proxy\['foo'\]

三个参数，依次为**目标对象----Object、属性名和 proxy 实例本身**（严格地说，是操作行为所针对的对象，可选）

//访问目标对象不存在的属性，会抛出一个错误。如果没有这个拦截函数，访问不存在的属性，只会返回undefined
    var person = {
         name: "张三"
    };
    var proxy = new Proxy(person, { 
          get: function(target, property) {
             if (property in target) { return target[property];
             } else {
                  throw new ReferenceError("Property \"" + property + "\" does not exist."); 
             } 
         }
    });
    proxy.name // "张三"proxy.age // 抛出一个错误
    //get方法可以通过Object.create()实现继承
    let proto = new Proxy({}, {
         get(target, propertyKey, receiver) { 
             console.log('GET ' + propertyKey);
             return target[propertyKey]; 
         }
    });
    let obj = Object.create(proto);//proto定义在obj上的原型对象上，实现继承obj.foo 
    // "GET foo"利用 Proxy，可以将读取属性的操作（get），转变为执行某个函数，从而实现属性的链式操作

2）set(target, propKey, value, receiver)：拦截**对象属性的设置**，比如proxy.foo = v或proxy\['foo'\] = v，**返回**一个**布尔值**

四个参数，依次为**目标对象----Object、属性名、属性值和 Proxy 实例本身**(**可选**)

**作用**：**数据验证**（只设置预设的数据）、**数据绑定**（对象变化时，自动更新DOM）

结合set和get可以实现内部属性被外部读写

3）has(target, propKey)：拦截HasProperty   **propKey in proxy**的操作，**返回**一个**布尔值**

判断对象是否具有某个属性，两个参数，**分别是目标对象-------Object、需查询的属性名**

4）deleteProperty(target, propKey)：拦截**delete proxy\[propKey\]**的操作，**返回**一个**布尔值**

拦截delete操作，如果这个方法**抛出错误或者返回false**，当前属性就无法被delete命令删除,**代理对象target---Object**

5）getOwnPropertyDescriptor(target, propKey)：拦截**Object**.**getOwnPropertyDescriptor**(target, propKey)，**返回属性的描述对象或undefined。**target----Object

拦截Object.getOwnPropertyDescriptor()

6）defineProperty(target, propKey, propDesc)：拦截**Object.defineProperty(proxy, propKey, propDesc）--------只有属性enumerable   configurable    writable   get   set   value。Object.defineProperties(proxy, propDescs)**，**返回**一个**布尔值，target----Object**

5）ownKeys(target)：拦截**Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in**循环，**返回**一个**数组**。该方法返回目标对象所有**自身的属性的属性名**，而Object.keys()的返回结果仅包括**目标对象自身的可遍历属性**

8）preventExtensions(target)：拦截Object.preventExtensions(target)，**返回**一个**布尔值，target-----Object**

10）isExtensible(target)：拦截Object.**isExtensible**(proxy)，**返回**一个**布尔值，target-----Object**

9）getPrototypeOf(target)：拦截Object.**getPrototypeOf**(proxy)，**返回**一个**对象或null**

11）setPrototypeOf(target, proto)：拦截Object.**setPrototypeOf**(proxy, proto)，**返回**一个**布尔值**。如果**目标对象是函数**，那么还有两种额外操作可以拦截

12）apply(target, object, args)：拦截 **Proxy 实例**作为**函数调用的操作**，比如**proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)，即拦截函数的调用、call/apply操作-----代理目标为function**

三个参数，分别是目标对象-----Function、目标对象的上下文对象（`this`）、目标对象的参数数组

//拦截目标对象上的方法，换成apply上定义的方法
    
    var target = function () { return 'I am the target'; };
    
    var handler = { apply: function () { return 'I am the proxy'; }};var p = new Proxy(target, handler);p() //变量p是 Proxy 的实例，当它作为函数调用时（p()），就会被apply方法拦截，返回一个字符串// "I am the proxy"

13）construct(target, args)：拦截new命令即** Proxy 实例**作为**构造函数调用**的操作，比如**new proxy(...args)**

返回值必须为一个对象，否则报错------**代理目标为函数Function**

**拦截对象的写法**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Rhbmd4aXVqaWFuZw_size_16_color_FFFFFF_t_70]: /images/20220301/9a1770930888497184d89128dec58df1.png