ES6前端面试题整理

javaScript 专栏收录该内容
22 篇文章 0 订阅

1、说说你了解的ES6新增特性

let声明变量和const声明常量,两个都有块级作用域

ES5中是没有块级作用域的,并且var有变量提升,在let中,使用的变量一定要进行声明

箭头函数

ES6中的函数定义不再使用关键字function(),而是利用了()=>来进行定义

特点:箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数,如果没有最近的函数就指向window。

模板字符串

模板字符串是增强版的字符串,用反引号(`)标识,可以当作普通字符串使用,也可以用来定义多行字符串

var name = '丁香医生';
var desc = '丁香医生是面向大众的科普性健康类网站';
var html = function(name, desc){
  var tpl = '公司名:' + name + '\n'+
      '简介:'+ desc;
  return tpl;
}
而现在:

var html = `公司名:${name}
  简介:${desc}`;

解构赋值

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值

for of循环

for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象,以及字符串

应用场景

//arguments是个类数组对象,通常先要将其转换为数组才能遍历,但for...of可以直接遍历
function sum() {
    let sum = 0
    for(let num of arguments){
        sum += num
    }
    console.log(sum);        //15
}

sum(1,2,3,4,5)
//遍历字符串
let name = 'Asher';
for (let char of name){
    console.log(char);         //A s h e r
}
//遍历nodelists,效果如下图
<style type="text/css">
    .completed {
        text-decoration: line-through;
    }
</style>
<body>
    <ul>
        <li>yoga</li>
        <li>boxing</li>
        <li>press</li>
    </ul>

    <script type="text/javascript">
        const lis = document.querySelectorAll('li');
        for(let li of lis){
            li.addEventListener('click',function(){
                this.classList.toggle('completed');
            })
        }
    </script>
</body>

import、export导入导出

ES6标准中,Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化,将不同功能的代码分别写在不同文件中,各模块只需导出公共接口部分,然后通过模块的导入的方式可以在其他地方使用

set数据结构

Set数据结构,类似数组。所有的数据都是唯一的,没有重复的值。它本身是一个构造函数

应用

1、数组去重

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

2、并集(Union)、交集(Intersect)和差集(Difference)

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

… 展开运算符

可以将数组或对象里面的值展开;还可以将多个值收集为一个变量

应用

1. 合并数组

arr1.push(...arr2) // 将arr2 追加到数组的末尾
arr1.unshift(...arr2) // 将arr2 追加到数组的开头

2. 拷贝数组

var arr = [1,2,3];
var arr2 = [...arr]; // 和arr.slice()差不多
arr2.push(4)
//记住:数组中的对象依然是引用值,所以不是任何东西都“拷贝”过去了。

3.将arguments或者NodeList转换为Array


var myFn = function(...args) {
// ...
}

4. 使用Math函数

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
//相当于Math.min.apply(numbers);

修饰器 @

decorator是一个函数,用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数

class 类的继承

ES6中不再像ES5一样使用原型链实现继承,而是引入Class这个概念

class Person
  {  
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
 
        sayName(){
            console.log("the name is:"+this.name);
        }
  }
 
  class Worker extends Person{
    constructor(name, age,job) {
         super(name, age);
          this.job = job;
    }
    sayJob(){
      console.log("the job is:"+this.job)
    }
  }
 
  var worker = new Worker('tcy',20,'teacher');
  worker.sayJob();//the job is:teacher
  worker.sayName();//the name is:tcy

async、await

使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程,提高代码的简洁性和可读性

async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    })
}

async function testResult () {
    let first = await doubleAfter2seconds(10);
    let second = await doubleAfter2seconds(20);    
    console.log(first + second);
}

promise

Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、强大

new Promise((resolve,reject)=>{
if('成功') resolve(1);
if('失败') reject(0);
}).then(()=>{
    console.log("成功");
}).catch(()=>{
    console.log("失败");
})

它有三种状态,分别是pending-进行中、resolved-已完成、rejected-已失败。

Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的回调。在回调中执行一些操作(例如异步),如果一切都正常,则调用 resolve,否则调用 reject。对于已经实例化过的 promise 对象可以调用 promise.then() 方法,传递 resolve 和 reject 方法作为回调。then()方法接收两个参数:onResolve和onReject,分别代表当前 promise 对象在成功或失败时。

var promise = new Promise((resolve, reject) => {
    var success = true;
    if (success) {
        resolve('成功');
    } else {
        reject('失败');
    }
}).then(
    (data) => { console.log(data)},
    (err) => { console.log(err)}
)

promise的执行过程

setTimeout(function() {
    console.log(0);
}, 0);
var promise = new Promise((resolve, reject) => {
    console.log(1);
    setTimeout(function () {
        var success = true;
        if (success) {
            resolve('成功');
        } else {
            reject('失败');
        }
    },2000);
}).then(
    (data) => { console.log(data)},
    (data) => { console.log(data)}
);
console.log(promise);	//<pending> 进行中
setTimeout(function () {
    console.log(promise);	//<resolved> 已完成
},2500);
console.log(2);
 
//1
//Promise {<pending>}
//2
//0
//成功
//Promise {<resolved>: undefined}

Symbol

Symbol是一种基本类型。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的

let s1 = Symbol()
let s2 = Symbol('another symbol')
let s3 = Symbol('another symbol')

s1 === s2 // false
s2 === s3 // false
//symbol是唯一的

应用场景1:使用Symbol来作为对象属性名(key)

在这之前,我们通常定义或访问对象的属性时都是使用字符串,比如下面的代码:

let obj = {
  abc: 123,
  "hello": "world"
}

obj["abc"] // 123
obj["hello"] // 'world'
而现在,Symbol可同样用于对象属性的定义和访问:

const PROP_NAME = Symbol()
const PROP_AGE = Symbol()

let obj = {
  [PROP_NAME]: "一斤代码"
}
obj[PROP_AGE] = 18

obj[PROP_NAME] // '一斤代码'
obj[PROP_AGE] // 18


随之而来的是另一个非常值得注意的问题:就是当使用了Symbol作为对象的属性key后,在对该对象进行key的枚举时,会有什么不同?在实际应用中,我们经常会需要使用Object.keys()或者for...in来枚举对象的属性名,那在这方面,Symbol类型的key表现的会有什么不同之处呢?来看以下示例代码:

let obj = {
   [Symbol('name')]: '一斤代码',
   age: 18,
   title: 'Engineer'
}

Object.keys(obj)   // ['age', 'title']

for (let p in obj) {
   console.log(p)   // 分别会输出:'age' 和 'title'
}

Object.getOwnPropertyNames(obj)   // ['age', 'title']
由上代码可知,Symbol类型的key是不能通过Object.keys()或者for...in来枚举的,它未被包含在对象自身的属性名集合(property names)之中。所以,利用该特性,我们可以把一些不需要对外操作和访问的属性使用Symbol来定义。

也正因为这样一个特性,当使用JSON.stringify()将对象转换成JSON字符串的时候,Symbol属性也会被排除在输出内容之外:

JSON.stringify(obj)  // {"age":18,"title":"Engineer"}
我们可以利用这一特点来更好的设计我们的数据对象,让“对内操作”和“对外选择性输出”变得更加优雅。

然而,这样的话,我们就没办法获取以Symbol方式定义的对象属性了么?非也。还是会有一些专门针对Symbol的API,比如:

// 使用Object的API
Object.getOwnPropertySymbols(obj) // [Symbol(name)]

// 使用新增的反射API
Reflect.ownKeys(obj) // [Symbol(name), 'age', 'title']

应用场景2:使用Symbol来替代常量

先来看一下下面的代码,是不是在你的代码里经常会出现?

const TYPE_AUDIO = 'AUDIO'
const TYPE_VIDEO = 'VIDEO'
const TYPE_IMAGE = 'IMAGE'

function handleFileResource(resource) {
  switch(resource.type) {
    case TYPE_AUDIO:
      playAudio(resource)
      break
    case TYPE_VIDEO:
      playVideo(resource)
      break
    case TYPE_IMAGE:
      previewImage(resource)
      break
    default:
      throw new Error('Unknown type of resource')
  }
}
如上面的代码中那样,我们经常定义一组常量来代表一种业务逻辑下的几个不同类型,我们通常希望这几个常量之间是唯一的关系,为了保证这一点,我们需要为常量赋一个唯一的值(比如这里的'AUDIO'、'VIDEO'、 'IMAGE'),常量少的时候还算好,但是常量一多,你可能还得花点脑子好好为他们取个好点的名字。

现在有了Symbol,我们大可不必这么麻烦了:

const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()
这样定义,直接就保证了三个常量的值是唯一的了!是不是挺方便的呢。

应用场景3:使用Symbol定义类的私有属性/方法

我们知道在JavaScript中,是没有如Java等面向对象语言的访问控制关键字private的,类上所有定义的属性或方法都是可公开访问的。因此这对我们进行API的设计时造成了一些困扰。

而有了Symbol以及模块化机制,类的私有属性和方法才变成可能。例如:

在文件 a.js中
const PASSWORD = Symbol()

class Login {
  constructor(username, password) {
    this.username = username
    this[PASSWORD] = password
  }

  checkPassword(pwd) {
      return this[PASSWORD] === pwd
  }
}

export default Login
在文件 b.js 中
import Login from './a'

const login = new Login('admin', '123456')

login.checkPassword('123456')  // true

login.PASSWORD  // oh!no!
login[PASSWORD] // oh!no!
login["PASSWORD"] // oh!no!
由于Symbol常量PASSWORD被定义在a.js所在的模块中,外面的模块获取不到这个Symbol,也不可能再创建一个一模一样的Symbol出来(因为Symbol是唯一的),因此这个PASSWORD的Symbol只能被限制在a.js内部使用,所以使用它来定义的类属性是没有办法被模块外访问到的,达到了一个私有化的效果。

Proxy代理

使用代理(Proxy)监听对象的操作,然后可以做一些相应事情

ES6原生提供了Proxy构造函数,用来生成Proxy实例。

var proxy = new Proxy(target, handler);
Proxy对象的所有用法,都是上面的这种形式。不同的只是handle参数的写法。其中new Proxy用来生成Proxy实例,target是表示所要拦截的对象,handle是用来定制拦截行为的对象。

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35
上面是一个拦截读取属性的行为的例子。要使Proxy起作用,必须针对Proxy实例进行操作,而不是针对目标对象(target)进行操作。

2、var、let、const之间的区别

  • var声明变量可以重复声明,而let不可以重复声明
  • var是不受限于块级的,而let是受限于块级
  • var会与window相映射(会挂一个属性),而let不与window相映射
  • var可以在声明的上面访问变量,而let有暂存死区,在声明的上面访问变量会报错
  • const声明之后必须赋值,否则会报错
  • const定义不可变的量,改变了就会报错
  • const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错

3、使用箭头函数应注意什么?

  • 用了箭头函数,this就不是指向window,而是父级(指向是可变的),在使用=>定义函数的时候,this的指向是定义时所在的对象,而不是使用时所在的对象
  • 不能够使用arguments对象
  • 不能用作构造函数,这就是说不能够使用new命令,否则会抛出一个错误
  • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数

this的指向总是让人困扰,但是有了=>以后妈妈再也不用担心你使用this了

class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say) {
        setTimeout(function () {
            console.log(this.type + 'says' + say)
        },1000)
    }
}
var animal = new Animal()
animal.says('hi') // undefined says hi
我们再来看看=>的情况

class Animal() {
    constructor() {
        this.type = 'animal'
    }
    says(say) {
        setTimeout(() => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
var animal = new Animal()
animal.says('hi') // animal says hi

4、ES6的模板字符串有哪些新特性?并实现一个类模板字符串的功能

基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)就能解决

  let name = 'web';
        let age = 10;
        let str = '你好,${name} 已经 ${age}岁了'
        str = str.replace(/\$\{([^}]*)\}/g,function(){
            return eval(arguments[1]);
        })
        console.log(str);//你好,web 已经 10岁了    

5、介绍下 Set、Map的区别?

应用场景
Set用于数据重组,Map用于数据储存

Set

  • 成员不能重复
  • 只有键值没有键名,类似数组
  • 可以遍历,方法有add, delete,has

Map

  • 本质上是健值对的集合,类似集合
  • 可以遍历,可以跟各种数据格式转换

6、ECMAScript 6 怎么写 class ,为何会出现 class

ES6的class可以看作是一个语法糖,它的绝大部分功能ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法

//定义类
class Point{
    constructor(x,y){
        //构造方法
        this.x = x; //this关键字代表实例对象
        this.y = y;
    }
    toString(){
        return `(${this.x},${this.y})`; //在windows键盘上,``是英文输入法下tab按键上面那个键。
        //'('+this.x+','+this.y+')';
    }
}
let p  =new Point(1,2);
p.toString(); //"(1,2)"

7、Promise构造函数是同步执行还是异步执行,那么 then 方法呢?

promise构造函数是同步执行的,then方法是异步执行的

8、setTimeout、Promise、Async/Await 的区别

事件循环中分为宏任务队列和微任务队列

其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行

promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行

async函数表示函数里面可能会有异步方法,await后面跟一个表达式

async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行

9、promise有几种状态,什么时候会进入catch?

三个状态:pending、fulfilled、reject

两个过程:pending -> fulfilled、pending -> rejected

当pending为rejected时,会进入catch

10、下面的输出结果是多少

const promise = new Promise((resolve, reject) => {
    console.log(1);
    resolve();
    console.log(2);
})

promise.then(() => {
    console.log(3);
})

console.log(4);

// 1 2 4 3

Promise 新建后立即执行,所以会先输出 1,2,而 Promise.then() 内部的代码在 当次事件循环的结尾立刻执行,所以会继续输出4,最后输出3.

11、设计一个对象,键名的类型至少包含一个symbol类型,并且实现遍历所有key

let name = Symbol('name');
 let product = {
    [name]:"洗衣机",    
    "price":799
  };
  Reflect.ownKeys(product); 
  //Reflect.ownKeys() :相当于Object.getOwnPropertyNames(target) concat(Object.getOwnPropertySymbols(target)

12、下面Set结构,打印出的size值是多少

let s = new Set();
s.add([1]);
s.add([1]);
console.log(s.size);
//2

两个数组[1]并不是同一个值,它们分别定义的数组,在内存中分别对应着不同的存储地址,因此并不是相同的值

都能存储到Set结构中,所以size为2

13、Promise 中reject 和 catch 处理上有什么区别

  • reject 是用来抛出异常,catch 是用来处理异常
  • reject 是 Promise 的方法,而 catch 是 Promise 实例的方法
  • reject后的东西,一定会进入then中的第二个回调,如果then中没有写第二个回调,则进入catch
  • 网络异常(比如断网),会直接进入catch而不会进入then的第二个回调

14、使用class 手写一个promise

//创建一个Promise的类
  class Promise{
    constructor(executer){//构造函数constructor里面是个执行器
      this.status = 'pending';//默认的状态 pending
      this.value = undefined//成功的值默认undefined
      this.reason = undefined//失败的值默认undefined
      //状态只有在pending时候才能改变
      let resolveFn = value =>{
        //判断只有等待时才能resolve成功
        if(this.status == pending){
          this.status = 'resolve';
          this.value = value;
        }
      }
      //判断只有等待时才能reject失败
      let rejectFn = reason =>{
        if(this.status == pending){
          this.status = 'reject';
          this.reason = reason;
        }
      }    
      try{
        //把resolve和reject两个函数传给执行器executer
        executer(resolve,reject);
      }catch(e){
        reject(e);//失败的话进catch
      }
    }
    then(onFufilled,onReject){
      //如果状态成功调用onFufilled
      if(this.status = 'resolve'){
        onFufilled(this.value);
      }
      //如果状态失败调用onReject
      if(this.status = 'reject'){
        onReject(this.reason);
      }
    }
  } 

15、如何使用Set去重

let arr = [12,43,23,43,68,12];
let item = [...new Set(arr)];
console.log(item);//[12, 43, 23, 68]
let item1 = Array.from(new Set(arr));
console.log(item1);//[12, 43, 23, 68]

16、将下面for循环改成for of形式

let arr = [11,22,33,44,55];
let sum = 0;
for(let i=0;i<arr.length;i++){
    sum += arr[i];
}

答案:

let arr = [11,22,33,44,55];
let sum = 0;
for(value of arr){
    sum += value;
}

遍历数组:for in 和 for of

for(let i in arr ){
    console.log(arr[i])
}
for(let i of arr){
    console.log(i);
}

17、理解 async/await以及对Generator的优势

  • async await 是用来解决异步的,async函数是Generator函数的语法糖
  • 使用关键字async来表示,在函数内部使用 await 来表示异步
  • async函数返回一个Promise对象,可以使用then方法添加回调函数
  • 当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句

async较Generator的优势:

  • 内置执行器。Generator 函数的执行必须依靠执行器,而 Aysnc 函数自带执行器,调用方式跟普通函数的调用一样
  • 更好的语义。async 和 await 相较于 * 和 yield 更加语义化
  • 更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象,async函数的await后面可以是Promise也可以是原始类型的值
  • 返回值是 Promise。async 函数返回的是 Promise 对象,比Generator函数返回的Iterator对象方便,可以直接使用 then() 方法进行调用

18、forEach、for in、for of三者区别

  • forEach更多的用来遍历数组

  • for in 一般常用来遍历对象或json

  • for of数组对象都可以遍历,遍历对象需要通过和Object.keys()

  • for in循环出的是key,for of循环出的是value

    var user = {name:‘张三’,age:10,sex:‘男’}
    for(let index in user){
    console.log(index+’:’+user[index])
    //“name:张三”"age:10"“sex:男”
    }
    for(let index of Object.keys(user)){
    console.log(index+’:’+user[index])
    //“name:张三”"age:10"“sex:男”
    }

19、说一下es6的导入导出模块

导入通过import关键字

// 只导入一个
import {sum} from "./example.js"

// 导入多个
import {sum,multiply,time} from "./exportExample.js"

// 导入一整个模块
import * as example from "./exportExample.js"

导出通过export关键字

//可以将export放在任何变量,函数或类声明的前面
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

//也可以使用大括号指定所要输出的一组变量
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

//使用export default时,对应的import语句不需要使用大括号
let bosh = function crs(){}
export default bosh;
import crc from 'crc';

//不使用export default时,对应的import语句需要使用大括号
let bosh = function crs(){}
export bosh;
import {crc} from 'crc';

本文链接:https://blog.csdn.net/qq_39903567/article/details/114990474

评论 2 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值