ES6 基础篇三之面试题

ES6

模块化

模块化是指将一个大的文件，拆分成几个小文件。然后将小的文件组合起来。

优点：

• 防止命名冲突。两个文件声明的变量名相同，但是不会产生影响。
• 代码复用。把功能代码封装成一个文件，对外暴露接口，在许多项目中就都可以使用。
• 高维护性。对某一个文件升级，或者开发人员在修改文件过程中不会产生过多的冲突。

export命名用来规范模块的对外接口
import命名用来输入其他模块提供的内容

//export.js
export let name = 'lyz'

//import.js
import {name} from './export.js';
console.log(name);

//index.html
<script src="export.js" type="module"></script>
<script src="import.js" type="module"></script>

includes()

includes方法用来检测数组是否包含某个元素。与indexOf方法类似，但是indexOf返回的是数字，不方便使用。

    const arr = ['lyz', 'my', 'lyj'];
    console.log(arr.includes('my')); //true
    console.log(arr.includes('ly')); //false

async与await

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

async函数

• async函数的返回值是Promise对象
• Promise对象的结果为async函数执行的返回值决定

    async function f() {
      // return 'lyz';
      return new Promise((resolve, reject) => {
        resolve('成功数据');
      })
    }
    console.log(f());

await表达式

• await必须写在async函数中中
• await右侧一般为promise对象
• await返回的是promise中的状态对应的值（promise对象中有两个属性，一个表示状态，另一个表示状态对应的值）
• await的promise失败了，就会抛出异常，需要通过try-catch进行捕获处理

    function p() {
      return new Promise((resolve, reject) => {
        // resolve('成功数据.')
        reject('fail');
      })
    }
    async function f() {
      try {
        let data = await p();
        console.log(data);
      }catch (e) {
        console.log(e);
      }
    }

    f();

使用async和await发送请求

    function f(url) {
      return new Promise((resolve, reject) => {
        let ajax = new XMLHttpRequest();
        ajax.open('get', url);
        ajax.send();
        ajax.onreadystatechange = function () {
          if (ajax.readyState == 4 ) {
            if (ajax.status == 200) {
              resolve(ajax.response);
            } else {
              reject(ajax.status);
            }
          }
        }
      })
    }
    async function main() {
      let joke = await f('https://api.apiopen.top/getJoke');
      let weather = await f('http://wthrcdn.etouch.cn/weather_mini?city=太原')
      console.log(joke);
      console.log(weather);
    }
    main();

面试题

ES6是什么，为什么要学习。

ea6是新一代的js语言标准，对js语言核心的内容进行了优化，规范了js使用的标准，新增了js原声的方法，是的更加规范、更加优雅、更加适合大型应用的规范。

babel是什么，有什么作用

bable是es6的转换器，可以讲es6转换为es5代码，以便兼容还没有支持es6的平台。

ES6对String字符串类型做了哪些升级优化

升级

• 新增了字符串模版，能保留空格和换行。

优化

• 新增了includes方法。取代了传统的indexOf方法，返回为布尔值，更加明确 ，语义更清晰。
• 此外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法，可方便的用于查找，补全字符串。

ES6对Array数组类型做了哪些升级优化

升级

• 数组解析赋值。可以直接进行变量赋值，在声明较多变量时，不用写很多var/let/const

let [a,b,c] = [1,2,3]

• 扩展运算符。可以轻松的实现数组和松散序列对相互转换。

//合并
var arr2 = [‘lyf’, ‘glnz’];
var newArr = […arr, …arr2];

优化

• 新增了find方法。取代了传统的indexOf方法，修复了indexOf找不到NaN的bug。

console.log([NaN].indexOf(NaN)); //false

• 此外还新增了copyWithin(), includes(), fill(),flat()**等方法，可方便的用于字符串的查找，补全,转换等。

ES6对Number数字类型做了哪些升级优化

升级

• ES6在Number原型上新增了isFinite(), isNaN()方法，用来取代传统的全局isFinite(), isNaN()方法检测数值是否有限、是否是NaN。

Number.EPSILON 是js表示最小精度
Number.isFinite() 检查一个数值是否为有限数
Number.isNaN() 检测一个数值是为NaN

优化

• ES6在Math对象上新增了Math.cbrt()，trunc()，hypot()等等较多的科学计数法运算方法，可以更加全面的进行立方根、求和立方根等等科学计算。

ES6对Object类型的升级优化

升级

• ES6在Object原型上新增了is()方法，做两个目标对象的相等比较。
• ES6在Object原型上新增了assign()方法，用于对象新增属性或者多个对象合并。
• ES6在Object原型上新增了getOwnPropertyDescriptors()方法，此方法增强了ES5中getOwnPropertyDescriptor()方法，可以获取指定对象所有自身属性的描述对象。结合defineProperties()方法，可以完美复制对象，包括复制get和set属性。
• ES6在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法，用来获取或设置当前对象的prototype对象　　　。
• ES6在Object原型上还新增了Object.keys()，Object.values()，Object.entries()方法，用来获取对象的所有键、所有值和所有键值对数组。

优化

• 对象属性变量式声明。ES6可以直接以变量形式声明对象属性或者方法。

let [apple, orange] = [‘red appe’, ‘yellow orange’];　 let myFruits =
{apple, orange}; // let myFruits = {apple: ‘red appe’, orange: ‘yellow
orange’};

• 对象解构赋值。

let {apple, orange} = {apple: ‘red appe’, orange: ‘yellow orange’};

• 对象的扩展运算符。可以轻松的取出一个目标对象内部全部或者部分的可遍历属性，从而进行对象的合并和分解

• super关键字。ES6在Class类里新增了类似this的关键字super。同this总是指向当前函数所在的对象不同，super关键字总是指向当前函数所在对象的原型对象。

ES6对function函数类型常用升级优化

升级

• ES6新增了双冒号运算符，用来取代以往的bind，call,和apply。

foo::bar;　　　　// 等同于bar.bind(foo); 　　foo::bar(…arguments);　　　　//等同于bar.apply(foo, arguments);

优化

• 箭头函数
• 1）箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象
• 2）箭头函数不能用作构造函数，因为它没有自己的this，无法实例化
• 3）也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象。
• 函数默认赋值

function es6Fuc (x, y = ‘default’) { console.log(x, y);}
　　es6Fuc(4) // 4, default

日常前端代码开发中，有哪些值得用ES6去改进的编程优化或者规范？

• 常用let取代var命令。
• 常用箭头函数来取代var _this = this;的做法。
• 常用数组/对象的解析赋值来命名变量，结构更清晰，语义更明确，可读性更好。
• 在长字符串多变量组合场合，用模板字符串来取代字符串累加，能取得更好地效果和阅读体验。
• 用Class类取代传统的构造函数，来生成实例化对象。
• 在大型应用开发中，要保持module模块化开发思维，分清模块之间的关系，常用import、export方法。