完整的ES6面试题

收集的较为完整的ES6的一些面试题，里面有较为详细的讲解和代码展示，能够更好的帮助你理解。后续会在持续的补充。 let、const、var的区别

• 变量提升

  • var 声明的变量存在变量提升，即变量可以在声明前调用，值为 undefined。

  • let 和 const 不存在变量提升，变量一定要声明之后才能使用，否则会报错。

• 暂时性死区

  • var 不存在暂时性死区

  • let 和 const 存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

• 块级作用域

  • var 不存在块级作用域

  • let 和 const 存在块级作用域

• 初始值设置

  • var 和 let 可以不设置初始值

  • const 声明变量必须设置初始值

• 重复声明

  • var 允许重复声明变量

  • let 和 const 不允许重复声明变量，会抛出 SyntaxError 的错误

• 数据修改

  • var 和 let 可以修改数据

  • const 定义的常量是基本数据类型，不能修改。定义的常量要是引用数据类型，就可以修改。因为保存在栈内存的数据是不可以被修改的。而基本数据类型是直接存储在栈内存中的，所以不能被修改。引用数据类型在栈内存中存储的是一个指针，真正的数据存储在指针指向的堆地址，不可被修改的是指针，真正的数据是可变的。

• 重新赋值

  • var 和 let 声明的变量都可以重新赋值

  • const 声明的变量不能重新赋值

 

解构赋值

• 数组的解构赋值

    // 数组的解构赋值
    const arr = ['小1','小2','小3','小泽']
    let [b,q,h,ze] = arr // 或者等于 ['小1','小2','小3','小泽']
    console.log(b);
    console.log(q);
    console.log(h);

• 对象的解构赋值

//对象的解构赋值
let redian = {
      name: '1',
      chaozuo: function () {
        console.log('1');
      },
      dance: function () {
        console.log('2');
      }
    }
​
    let {chaozuo,dance} = redian;
    chaozuo();
    dance();

 

模板字符串

``(反引号)

• 使用回车换行：标签与标签之 间能直接换行使用

• 变量、表达式拼接：直接使用${} 进行拼接

// 1·能回车换行
    let name = 
               `<ul>
                  <li>1</li>  
                  <li>2</li>  
                  <li>3</li>  
                </ul>`;
    console.log(name);
    console.log(typeof name);
​
    // 2.字符串拼接
    let age = 18
    let str = `我今年${age}岁了！`
    console.log(str);

 

箭头函数

• 箭头函数中的this指向的是外层作用域下this的值

• 没有自己的arguments对象，但是可以访问外围函数的arguments对象

• 不能通过 new 关键字调用

• 适合使用箭头函数的场景： 与this无关的回调设置。定时器、数组方法回调。

• 不适合使用箭头函数的场景： 与this有关的回调设置。事件回调、对象中的方法。

书写格式例子：

//定时器
setTimeout(() => {
          //箭头函数中的this指向的是外层作用域下this的值
          console.log(this.data)
         },1000)

 

函数形参默认值

为形参赋默认值，有传实参用实参，没有用默认值

// es6允许给形参赋初始值
    // 参数直接设置默认值，位置一般靠后
    function add(a,b,c=2) {
      console.log(a + b + c);
    }
    add(1,2)

// 与解构赋值结合使用 结构赋值的先后不影响
    function connect({name, age=18, sex}) {
      console.log(name);
      console.log(age);
      console.log(sex);
    }
    connect({
      name:'小宝',
      sex: 'man'
    })

 

rest参数

用来代替arguments，直接获取一个真数组，方便操作 (arguments返回的是伪数组)

// rest 参数用来代替 arguments 的
    function main(...args) {
      console.log(arguments);
      console.log(args);
    }
    main(1,2,3,4,5,6,7,8);

 

简化对象写法

let name = '1'
    let change = function () {
      console.log('你好');
    }
    // 
    let obj = {
      // 变量的简化
      name,
      change,
      // 方法的简化
      improve() {
        console.log('提升');
      }
    }
    console.log(obj);
    obj.change();
    obj.improve();

 

扩展运算符

...能将「数组」转为逗号分隔的「参数序列] ,是 rest 的逆运算

• 数组的展开

// 数组的展开
      const arr = [1, 2, 3]
      function fn () {
        console.log(arguments);
      }
      fn(...arr); //fn(1, 2, 3)

• 对象的展开

// 对象的展开
      const one = {
        1: 'one'
      }
      const two = {
        2: 'two'
      }
      const three = {
        3: 'three'
      }
      const four = {
        4: 'four'
      }
      // 进行对象的合并
      const hero = {...one,...two,...three,...four}
      console.log(hero); // {1: 'one', 2: 'two', 3: 'three', 4: 'four'}

 

Symbol

Symbol 是 ES6 新引入的一种原始数据类型，表示独一无二的值。它是 js 第七种数据类型 是一种类似于字符串的数据类型。

• 特点

  • Symbol 的值是唯一的，常用来解决命名冲突问题。

  • Symbol 的值不能和其他数据进行运算。

• 创建方法

//创建 Symbol
let h = Symbol()
console.log(h) //Symbol()
console.log(typeof h) //"symbol"

//正常的 Symbol
let h1 = Symbol('小宝')
let h2 = Symbol('小宝')
console.log(h1 === h2) // false

//相等的Symbol   ----使用 Symbol.for()
let h3 = Symbol.for('小宝')
let h4 = Symbol.for('小宝')
console.log(h1 === h2) // true

• 使用场景（唯一且合理使用方式：为对象添加唯一属性）

let school = {
      name: '南山幼儿园'
    }
    let goto = Symbol()
    // 为 school 对象创建一个独一无二的方法名 避免覆盖掉对象中相同方法名的方法
    school[goto] = function () {
      console.log('去上学');
    }
    // 调用这个方法
    school[goto]()

 

集合（set）

Set是es6新增的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值，我们一般称为集合

• 方法：add()、delete()、has()、clear()

// 声明集合 自动去重
    const s = new Set([1,2,3,41,12,21,1,1,1,2,3,4])
    console.log(s); //[1,2,3,41,12,21,4]
    // 1.元素个数
    console.log(s.size); //7
    // 2.添加
    s.add(8)
    // 3.删除
    s.delete(1)
    console.log(s);//[2,3,41,12,21,4,8]
    // 4.检测是否包含某个元素
    console.log(s.has(2)); //true
    // 5.清空
    // s.clear()
    console.log(s); //[]

• 应用场景： 数组去重、求交、并、差集。

 

字典（Map）

Map类型是键值对的有序列表，而键和值都可以是任意类型

• 属性和方法：size()、set()、get()、has()、delete()、clear()

// 声明Map
        let m = new Map()

        // 1.添加元素(键值对)
        m.set('name','小宝')
        m.set('age',18)

        // 2.获取元素
        console.log(m.get(name)) //小宝

		// 3.删除元素
        m.delete('name')

        // 4.获取元素个数
        let size = m.size
        console.log(size) //1

		// 5.检测是否包含某个元素
    	console.log(m.has('age')); //true
        
        // 6.清空Map
        m.clear()
        console.log(m) //0

 

Promise

Promise 是ES6引入的异步编程的新解决方案。比传统的解决方案（回调函数）更加合理和更加强大

• 状态：pending（进行时）、fulfilled（已成功）、rejected（已失败）

• 用法： Promise 对象是一个构造函数，会接受一个函数作为参数，这个函数的两个参数分别是 resolve和reject

  • resolve 函数的作用是将 Promise 对象的状态从 “未完成” 变为 “成功”

  • reject 函数的作用是将 Promise 对象的状态从 “未完成” 变为 “失败”

const promise = new Promise(function(resolve, reject) {});

• 实例方法：

  • then() ---- 实例状态发生变化时，触发的回调函数，第一个参数是 resolved状态的回调函数，第二个参数是 rejected 的回调函数（一般使用 catch 方法来替代第二个参数）

  • catch() ---- 用于指定发生错误的回调函数

  • finally() --- 用于指定 不管 Promise 对象最后状态如何，都会执行的操作

  promise
  .then(result => {···})
  .catch(error => {···})
  .finally(() => {···});

• 常用的构造函数方法：

  • Promise.all() ----将多个 Promise 实例包装成一个新的 Promise 实例

    const p = Promise.all([p1, p2, p3]);

    • 只有 p1,p2,p3 状态全为 fulfilled ，p 的状态才会变成fulfilled。此时，p1,p2,p3 的返回值组成一个数组，传递给 p 的回调函数。

    • 只要 p1,p2,p3 有一个状态为 rejected ，那么 p 的状态就变成 rejected。此时第一个被reject的实例的返回值，会传递给p的回调函数。

  • Promise.race() ----将多个 Promise 实例包装成一个新的 Promise 实例

    const p = Promise.race([p1, p2, p3]);

    • 三者谁先改变状态， p 也就会跟着改变状态。率先改变的会将返回值传递给 p 的回调函数。

 

类（class）

ES6 引入了class类这个概念，通过class关键字可以定义类，这就是更符合我们平时所理解的面向对象的语言

• 简单的类

//类的声明
    class Phone {
      //构造方法 不是必须的，但是constructor名字不能修改
      constructor(brand, price) {
        this.brand = brand;
        this.price = price;
      }

      //声明成员方法
      call(someone) {
        console.log(`我可以给${someone}打电话`);
      }
      sendMessage(someone) {
        console.log(`我可以给${someone}打电话`);
      }

      //声明静态成员
      static name = '手机';
      static change() {
        console.log('吃了吗');
      }
    }

• 类的继承

//子类继承父类
    class SmartPhone extends Phone {
      //子类的构造方法
      constructor(brand,price,screen,pixel) {
        //调用父类的构造方法进行初始化  super
        super(brand,price);
        this.screen = screen;
        this.pixel = pixel;
      }
      //方法声明
      playGame() {
        console.log('我可以玩游戏');
      }

      sw() {
        console.log('我可以上网');
      }
    }

	// 子类实例化
    const onePlus = new SmartPhone('1+', 3999, 6.5, '4800w');
    console.log(onePlus);

    console.dir(Phone)
    console.log(Phone.name);

• 取值函数getter和存值函数setter

let data=[1,2,3,4];  //放在类外面，属于私有变量，可以只读取
class Phone{
    // 构造函数
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    get x(){
        console.log('获得name');
        return this._name;    //get读取属性
    }
    set x(x){
        console.log("设置name");  
        this._name=x;   //set给属性赋值
    }
    get data(){
        return data;   //只读属性，属性返回的值只能是私有变量
    }
}

• 静态属性

  static name = '小宝';  // 静态属性

  • 静态属性不能被子类继承，子类不能调用

  • 静态属性只能通过类名来调用，不能通过类的实例来调。

• 静态方法

  static sleep(){
  		console.log('睡觉')
  	}

  • 静态方法不会被子类继承，子类不能调用

  • 静态方法中的this，指向的是类class，不是类的实例。因此静态方法只能通过类名来调用，不能通过实例来调用。