ES6用法，面试大全

<template>
  <div class="wrapper">
    <h3>ES6是什么</h3>
    <div>
      1 ES6是什么
      ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增
      了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发 
      
      2
      ES5、ES6和ES2015有什么区别
      ES5泛指上一代语言标准。ES2015可以理解为ES5和ES6的时间分界线。
      ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES2017、ES2018等。现阶段在绝大部分场景下，

      3 babel是什么？babel是一个 ES6 转码器，可以将 ES6 代码转为 ES5
      代码，以便兼容那些还没支持ES6的平台 Babel 是一个广泛使用的 ES6
      转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。
      这意味着，可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。 //
      转码前，使用了箭头函数 array.map(item => item + 1); // 转码后，Babel
      将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了
      array.map(function (item) { return item + 1; }); 安装命令 npm install
      --save-dev @babel/core 所有 Babel 工具和模块的使用，都必须先写好.babelrc。

      4 let有什么用，有了var为什么还要用let？
      答：在ES6之前，声明变量只能用var，var方式声明变量其实是很不合理的，准确的说，是
      因为ES5里面没有块级作用域是很不合理的，甚至可以说是一个语言层面的bug(这也是很多
      c++、java开发人员看不懂，也瞧不起JS语言的劣势之一)。没有块级作用域会带来很多难
      以理解的问题，比如for循环var变量泄露，变量覆盖等问题。let
      声明的变量拥有自己的块级作用域，且修复了var声明变量带来的变量提升问题。

      5ES6对String字符串类型做的常用升级优化
      5.1在拼接大段字符串时，用反斜杠(`)取代以往的字符串相加的形式，能保留所有空格和换行，
      使得字符串拼接看起来更加直观，更加优雅；vue也采用${}拼接
      5.2ES6在String原型上新增了includes()方法，
      console.log(array.includes("varfor")); //返回是boolean
      用于取代传统的只能用indexOf查找包含字符
      的方法(indexOf返回-1表示没查到不如includes方法返回false更明确，语义更清晰),
      5.2还新增了startsWith(), endsWith(),
      padStart(),padEnd()（在头部或尾部补全字符串）,repeat()等方法，
      可方便的用于查找，补全字符串。 
      
      6. ES6对Array数组类型做的常用升级优化
      优化部分 6.1 数组解构赋值 ES6可以直接以let [a,b,c] =
      [1,2,3]形式进行变量赋值，在声明较多变量时，不用再写很多let(var),
      且映射关系清晰，且支持赋默认值 6.2
      扩展运算符。ES6新增的扩展运算符(...)(重要),可以轻松的实现数组和松散序列的相互转化，
      可以取代arguments对象和apply方法，轻松获取未知参数个数情况下的参数集合。
      （尤其是在ES5中，arguments并不是一个真正的数组，而是一个类数组的对象，
      但是扩展运算符的逆运算却可以返回一个真正的数组）。扩展运算符还可以
      轻松方便的实现数组的复制和解构赋值（let a = [2,3,4]; let b = [...a]）。
      2、升级部分:
      ES6在Array原型上新增了find()方法，用于取代传统的只能用indexOf查找包含数组项目的方法,
      且修复了indexOf查找不到NaN的bug([NaN].indexOf(NaN) ===
      -1).此外还新增了copyWithin(), includes(),
      fill(),flat()等方法，可方便的用于字符串的查找，补全,转换等。 
      
      7 ES6对Function函数类型做的常用升级优化 1、优化部分： a.
      箭头函数**(核心)**。箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this,
      这改变了以往JS函数中最让人难以理解的this运行机制。主要优化点:
      Ⅰ.
      箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象。ES5函数里的
      this总是指向函数执行时所在的对象，这使得在很多情况下this的指向变得很难理解，尤其
      是非严格模式情况下，this有时候会指向全局对象，这甚至也可以归结为语言层面的bug之一。
      ES6的箭头函数优化了这一点，它的内部没有自己的this,这也就导致了this总是指向上一层的this，
      如果上一层还是箭头函数，则继续向上指，直到指向到有自己this的函数为止，并作为自己的this。
      Ⅱ. 箭头函数不能用作构造函数，因为它没有自己的this，无法实例化。 Ⅲ.
      也是因为箭头函数没有自己的this,所以箭头函数
      内也不存在arguments对象。（可以用扩展运算符代替） b.
      函数默认赋值。ES6之前，函数的形参是无法给默认值得，只能在函数内部通过变通方法实现。
      ES6以更简洁更明确的方式进行函数默认赋值。
      function es6Fuc (x, y = 'default') { console.log(x, y); } es6Fuc(4) // 4,
      default 
      
      8、问：Set是什么，有什么作用？
      答：Set是ES6引入的一种类似Array的新的数据结构，Set实例的成员类似于数组item成员，
      区别是Set实例的成员都是唯一，不重复的。这个特性可以轻松地实现数组去重。

      9、问：Map是什么，有什么作用？
      答：Map是ES6引入的一种类似Object的新的数据结构，Map可以理解为是Object的超集，打破了以
      传统键值对形式定义对象，对象的key不再局限于字符串，也可以是Object。可以更加全面的描述对象的属性。

      10、问：Promise是什么，有什么作用？
      答：Promise是ES6引入的一个新的对象，他的主要作用是用来解决JS异步机制里，回调机制产生的
      “回调地狱”。它并不是什么突破性的API，只是封装了异步回调形式，使得异步回调可以写的更
      加优雅，可读性更高，而且可以链式调用。

      11 for...in 和for...of有什么区别 for..in仅仅可以遍历对象；
      for...of遍历对象 .数组也可以用 12 async函数是什么，有什么作用

      async函数可以理解为内置自动执行器的Generator函数语法糖，它配合ES6的Promise
      近乎完美的实现了异步编程解决方案。

      12、module、export、import是什么，有什么作用？
      答：module、export、import是ES6用来统一前端模块化方案的设计思路和实现方案
      export、import的出现统一了前端模块化的实现方案，整合规范了浏览器/服务端的
      模块化方法，用来取代传统的AMD/CMD、requireJS、seaJS、commondJS等等一列前
      端模块不同的实现方案，使前端模块化更加统一规范，JS也能更加能实现大型的应用程序开发。
      import引入的模块是静态加载（编译阶段加载）而不是动态加载（运行时加载）。
      import引入export导出的接口值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

      13日常前端代码开发中，有哪些值得用ES6去改进的编程优化或者规范
      常用箭头函数来取代var self = this;的做法。 常用let取代var命令。
      常用数组/对象的结构赋值来命名变量，结构更清晰，语义更明确，可读性更好。
      在长字符串多变量组合场合，用模板字符串来取代字符串累加，能取得更好地效果和阅读体验。
      用Class类取代传统的构造函数，来生成实例化对象。
      在大型应用开发中，要保持module模块化开发思维，分清模块之间的关系，常用import、export方法。
    </div>
  </div>
</template>
<script>
export default {
  name: "Table",

  data() {
    return {};
  },
  methods: {
    forFun41() {
      const array = [
        { name: "产品特性1", text: "varfor1" },
        { name: "产品特性2", text: "varfor2" },
        { name: "产品特性3", text: "varfor3" },
      ];
      for (var index = 0; index < array.length; index++) {
        const element = array[index];
        console.log(index, element);
      }
      console.log(index); //var变量泄露
    },
    letFun42() {
      const array = [
        { name: "产品特性1", text: "varfor1" },
        { name: "产品特性2", text: "varfor2" },
        { name: "产品特性3", text: "varfor3" },
      ];
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        console.log(index, element);
      }
      //console.log(index); //报错undefined
    },
    includesFun52() {
      const array = `产品特性1产品特性2产品特性3varfor3varfor2varfor1`;
      console.log(array.includes("varfor")); //true
    },
    abfunction6() {
      let a = [2, 3, 4];
      let b = [...a];
      console.log(a, b);
      a[2] = 5;
      //b不会改变
      console.log(a, b);

      let array1 = [
        { name: "产品特性1", text: "varfor1" },
        { name: "产品特性2", text: "varfor2" },
        { name: "产品特性3", text: "varfor3" },
      ];
      let array2 = [...array1];
      console.log(array1, array2);
      array1[2].text = "varfor5";
      //array2会改变
      console.log(array1, array2);

      let obj1 = { name: "产品特性1", text: "varfor1" };

      let obj2 = { ...obj1 };
      console.log(obj1, obj2);
      obj1.text = "varfor5";
      //obj2不会改变
      console.log(obj1, obj2);

      //Object.assign() 浅拷贝 浅复制，也可以实现数组的克隆
      let arr = ["sdsd", 123, 123, 123];
      let arr1 = [];
      Object.assign(arr1, arr);
      arr[1] = "aaaa";
      console.log(arr, arr1); // [ 'sdsd', 'aaaa', 123, 123 ] [ 'sdsd', 123, 123, 123 ]
    },
  },
  computed: {},
  mounted() {
    // this.forFun41();
    // this.letFun42();
    // this.includesFun52();
    this.abfunction6();
  },
};
</script>