完整的ES6面试题

发布时间：2023-04-24 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

let、const、var的区别

解构赋值

    // 数组的解构赋值
    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);

箭头函数

书写格式例子：

//定时器
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
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新增的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值，我们一般称为集合

// 声明集合 自动去重
    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类型是键值对的有序列表，而键和值都可以是任意类型

// 声明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引入的异步编程的新解决方案。比传统的解决方案（回调函数）更加合理和更加强大

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

类（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);
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;   //只读属性，属性返回的值只能是私有变量
    }
}

浅拷贝

1.直接赋值
    let arr = [1,2,3,4];
    let result = arr;
    result[0] = '1234';
    console.log(arr);
    console.log(result);
      const school = {
        name: 'ptu',
        add: ['福州', '莆田', '厦门'],
        founder: {
          name: '小宝',
          age: 18
        }
      };
​
      const result = Object.assign({},school);
      result.add[0] = '泉州';
      console.log(school);
      console.log(result);

深拷贝

    //封装一个函数 实现递归深拷贝
    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)
    }
标签 , ,