完整的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，不是类的实例。因此静态方法只能通过类名来调用，不能通过实例来调用。

 

浅拷贝

  • 直接赋值

1.直接赋值
    let arr = [1,2,3,4];
    let result = arr;
    result[0] = '1234';
    console.log(arr);
    console.log(result);

  • 数组

    • concat

          const result = [].concat(arr);
    ​
          result[3].name = 'ptu'
          console.log(arr);
          console.log(result);

    • slice

          const result = arr.slice(0)
          result[3].name = 'ptu';
          console.log(arr);
          console.log(result);

    • 扩展运算符

          const result = [...arr];
    ​
          result[3].name = 'ptu';
          console.log(arr);
          console.log(result);

  • 对象：使用Object.assign(空对象，旧对象) 

      const school = {
        name: 'ptu',
        add: ['福州', '莆田', '厦门'],
        founder: {
          name: '小宝',
          age: 18
        }
      };
​
      const result = Object.assign({},school);
      result.add[0] = '泉州';
      console.log(school);
      console.log(result);

 

深拷贝

  • JSON：先用 JSON.stringify 将对象转为字符串，再使用 JSON.parse 将字符串转为一个新对象

    缺点就是不能复制方法

    //源对象
        const school = {
            name: 'ptu',
            add: ['福州', '莆田', '厦门'],
            founder: {
              name: '小宝',
              age: 18
            }
          };
    ​
        //JSON
        //stringify 对象转字符串
        //parse  字符串转对象
        //将对象转为字符串
        const str = JSON.stringify(school);
        console.log(school);
        console.log(str);
        console.log(typeof str);
        //将 JSON 字符串转化为新的对象
        const obj = JSON.parse(str);
        //修改新对象属性
        obj.add[2] = '漳州'
        console.log(obj);

  • 封装一个函数，实现递归深拷贝

    //封装一个函数 实现递归深拷贝
    function deepClone(data) {
      //创建一个容器
      let container;
      //获取目标数据类型
      let type = getDataType(data) //Array ||  Object
      //判断
      if(type === 'Object') {
        container = {}
      }
      if(type === 'Array') {
        container = []
      }
​
      //属性的添加
      //先遍历data数据 for...in
      for(let i in data) {
        //获取属性类型
        let type = getDataType(data[i])
        if(type === 'Array' || type === 'Object') {
          container[i] = deepClone(data[i]); //继续递归
        }else {
          container[i] = data[i];
        }
      }
      return container;
    }
​
    //封装一个函数 获取获取数据类型
    function getDataType(data) {
      return Object.prototype.toString.call(data).slice(8,-1)
    }
 
posted @ 2022-06-10 23:07  小宝想学好前端  阅读(237)  评论(0)  编辑  收藏  举报