• 【面试必备】 【ES6】学Vue前必须掌握的内容（上）

    变量声明 ⭐

    • 采用 let 和 const 分别声明变量和常量。
    • 不用var所以不存在变量提升。

    解构 ⭐

    ① 数组解构[ ]

         等号左边允许存在默认值。变量的取值按照顺序。  

    1. //之前的写法
    2. var arr=[1,2];
    3. var a=arr[0];
    4. var b=arr[1];
    5. //ES6
    6. let [a,b]=[1,2];
    7. console.log(a,b) -> 1 2
    8. let [c,d]=[3]
    9. console.log(c,d) -> 3 undefined
    10. let [f=4,g=5,h=6]=[,undefined,null];
    11. console.log(f,g,h) -> 4 5 null

    ② 对象解构{}

         根据键值取值。

    1. let obj={
    2.     name:'hua',
    3.     age:18
    4. }
    5. //不同名，则把左边的属性的值赋给右边自定义的变量
    6. let {name:n,age:a}=obj;
    7. console.log(n,a) -> 'hua' 18
    8. console.log(name,age) ->打印报错 未声明
    9. //同名的可以将name:name省略成name
    10. let {age,name}=obj;
    11. console.log(name,age) -> 'hua' 18

    ③ 字符串解构

         此时字符串被转换成一个类似于数组的对象。

    1. let str='hello World';
    2. let [a,b,c]=str;
    3. console.log(a,b,c,typeof(a)) -> h e l string

    扩展 

    ① 函数的扩展 ⭐  

    res参数（剩余参数）

     用于获取函数的多余参数，会将多余的实参放进一个数组里。

    1. function fn(a,...arr){
    2.     console.log(a);             -> 1
    3.     console.log(arr);           -> ['a', 'b'] 
    4.     console.log(arr[0]);        -> a
    5.     console.log(arr[2]);        -> undefined     
    6. }
    7. fn(1,'a','b');//方法中的定义了4个参数，但调用函数时只使用了3个参数，ES6 中并不会报错。

    注意，res参数之后不能再有任何参数。函数的length属性（指明函数形参的个数）不包括res参数

    1. (function(a){}).length //1
    2. (function(...a){}).length //0

    严格模式

    规定只要函数参数使用了默认值、解构赋值或者扩展运算符，那么函数内部就不能显示设定为严格模式，会报错。

    1. function fn(a,b=1){ //报错
    2.     'use strict';
    3. }

     两种方式可以避免这种限制：

    • 设定全局性的严格模式；
    • 把函数包在一个无参数的立即执行函数里。

    name属性

    具名函数返回函数原本的名字，匿名函数返回实际的函数名

    1. function fn(){}
    2. let fun=function(){}
    3. fn.name  //fn
    4. fun.name //fun （ES5中返回空字符串）

    箭头函数 ( 参数 ) => { 函数体 } 

    注意要点：

    • 不会创建自己的this，只会从自己的作用域链的上一层继承this；⭐
    • 不能作为构造的实例化对象，即不能用new；
    • 不能使用argument函数内置对象；
    • 当只有一个参数时，小括号可以省略；
    • 当函数体只有一条语句且为return，可以省略return和大括号；
    • 不能使用yield命令，因此不能作为Generator函数。

    由于箭头函数this指向的特殊性，箭头函数不适用于定义对象的方法，且该方法内部包括this。

    1. s = 21;
    2. const obj = {
    3.   s: 42,
    4.   f: () => console.log(this.s)//继承作用域的上一层的this，指向全局
    5. };
    6. obj.f() // 21

    ② 数组的扩展 ⭐

    Array.from()

    可将类似数组的对象和可遍历的对象（包括新增的数据结构Set、Map）

    伪数组：有索引，有长度，但是没有方法

    1. let arrayLike={
    2.     '0':'a',
    3.     '1':'b',
    4.     '2':'c',
    5.     length:3
    6. };
    7. const arr=Array.from(arryLike);
    8. console.log(arr); //['a','b','c']
    9. //length:2->['a','b']  length:4->['a','b','c',undefined]

    实际应用开中，我们常见的伪数组就是DOM操作中返回的元素对象集合，以及函数的内置arguments对象。都能用Array.from()方法将伪数组转为真正的数组。

    1. let arrayLike=document.querySelectorAll('button');
    2. let a=document.getElementsByTagName('button');
    3. console.log(arrayLike,a);//NodeList(5) HtmlCollection(5)
    4. const arr=Array.from(arrayLike);
    5. console.log(arr);//(5)

    ⭐补充一下，DOM操作中三种方式返回的伪数组类型有些不同：

    • querySelectorAll()：NodeList类型，获取子节点操作中的childNodes属于该类型。即返回的集合中包含元素节点和文本节点（文字、空格）等；
    • getElementsBytagName()和getElementsByClassName()返回的是HtmlCollection类型，获取子节点操作中的children就属于该类型.即返回的集合中只有元素节点。

    Array.of() 

    将一组值转换为数组。

    1. console.log(Array.of(1,2,3)); //[1,2,3]
    2. console.log(Array.of(1,2,3).length); //3

     Array.of() 返回由参数组成的数组，如果没有参数就返回一个空数组。这就弥补了数组构造函数中参数个数不同导致行为有差异的问题。

    1. //没有参数时,一致
    2. Array()        //[]
    3. Array.of()     //[]
    4. //一个参数时，一个是长度，一个是值
    5. Array(2)       //[empty × 2] length:2
    6. Array.of(2)    //[2]
    7. //多个参数时，一致
    8. Array(1,2)     //[1,2]
    9. Array.of(1,2)  //[1,2]

    ③ 对象的扩展 ⭐  

    Object.defineProperty

     Object.defineProperty(obj, prop, descriptor) 定义新属性或修改原有的属性

    1. let obj={
    2.     name:'hua',
    3.     age:18
    4. }
    5. console.log(obj);   //{name: 'hua', age: 18}
    6. /* 传统方式
    7. obj.sex='man';
    8. obj.age=19; */
    9. Object.defineProperty(obj,'sex',{
    10.     value:'man'
    11. });
    12. Object.defineProperty(obj,'age',{
    13.     value:19
    14. });
    15. console.log(obj);   //{name: 'hua', age: 19, sex: 'man'}

     第三个参数，以对象的形式书写

    • value: 设置属性的值，默认为undefined；

    • writable: 值是否可以重写，当属性是由该方法新创建的时候，默认值为false；

      1. console.log(obj); //{name: 'hua', age: 18}
      2. Object.defineProperty(obj,'sex',{
      3.     value:'man',
      4.     writable:true,      //当属性是由该方法新创建的时候，默认值才为false
      5. });
      6. Object.defineProperty(obj,'sex',{
      7.     value:1
      8. });
      9. Object.defineProperty(obj,'age',{
      10.     value:20,
      11.     writable:false
      12. });
      13. console.log(obj); //{name: 'hua', age: 20, sex: 1}
      14. obj.sex=0;
      15. obj.age=30;
      16. console.log(obj); //{name: 'hua', age: 20, sex: 0}

    • enumerable: 目标属性是否可以被枚举，当属性是由该方法新创建的时候，默认值为false；

      1. console.log(Object.keys(obj)); //['name', 'age']
      2. Object.defineProperty(obj,'sex',{
      3.     value:'man',
      4.     enumerable: true    
      5. });
      6. console.log(Object.keys(obj)); //['name', 'age', 'sex']
      7. Object.defineProperty(obj,'age',{
      8.     enumerable:false
      9. });
      10. console.log(Object.keys(obj)); //['name', 'sex']

    • configurable: 目标属性是否可以被删除或再次修改特性，当属性是由该方法新创建的时候，默认值为false。

      1. Object.defineProperty(obj,'sex',{
      2.     value:'man',  
      3.     configurable:true
      4. });
      5. console.log(obj); //{name: 'hua', age: 18, sex: 'man'}
      6. delete obj.sex;
      7. console.log(obj); //{name: 'hua', age: 18}
      8. delete obj.name;
      9. Object.defineProperty(obj,'age',{
      10.     configurable:false
      11. });
      12. delete obj.age;
      13. console.log(obj); //{age: 18}
      1. Object.defineProperty(obj,'sex',{
      2.     value:'man',  
      3.     configurable:false
      4. });
      5. Object.defineProperty(obj,'sex',{
      6.     value:1,  
      7.     writable:true
      8. });
      9. console.log(obj); //Error:Cannot redefine property: sex

    Object.freeze

      Object.freeze()方法作用就是冻结一个对象，即让该对象无法修改。可以提升性能

    1. const a=1;
    2. //a=2;               //报错
    3. const obj={b:2};
    4. obj.b=3;
    5. console.log(obj.b);  //3

    我们都知道，用const声明基本数据类型是无法进行修改的，但声明的对象的属性是可以修改的，因为赋给的变量里存的是该对象的地址。这时就可以使用Object.freeze()方法来冻结。

     被冻结后的对象：

    • 不能添加新属性；
    • 不能修改、删除原有的属性；
    • 不能修改原型；
    • 不能修改已有属性的可写性writable、可枚举性enumerable和可配置性configurable。
    1. let obj={
    2.     name:'hua',
    3.     age:18
    4. }
    5. console.log(obj);   //{name: 'hua', age: 18}
    6. Object.freeze(obj);
    7. obj.sex='man';
    8. obj.age=19;
    9. console.log(obj);   //{name: 'hua', age: 18}
    10. console.log(Object.freeze(obj))//{name: 'hua', age: 18}

    //该方法返回的就是传入的对象本身，所以一般不用接收返回值。也可以冻结数组，毕竟数组的本质也是对象。

    注意，该方式属于浅冻结。当冻结的对象里还有对象时，内层的对象仍可以被修改

    1. let obj={
    2.     name:'hua',
    3.     deep:{
    4.         age:18
    5.     }
    6. };
    7. Object.freeze(obj);
    8. obj.name=123;
    9. obj.deep.age=19;
    10. console.log(obj.name,obj.deep); //hua {age:19}

     解决办法：封装一个深冻结函数，随时调用。

    1. function deepFreeze(obj){
    2.     //获取所有属性
    3.     let proName=Object.getOwnPropertyNames(obj);
    4.     //遍历
    5.     proName.forEach(item=>{
    6.         let pro=obj[item];
    7.         //如果某个属性的属性值是对象，则递归调用
    8.         if(pro instanceof Object && pro!==null){
    9.             deepFreeze(pro);
    10.         } 
    11.     })
    12.     return Object.freeze(obj);
    13. }
    14.  
    15. deepFreeze(obj);
    16. console.log(obj.name,obj.deep);   //hua 18

    Object.setPrototypeOf()，Object.getPrototypeOf()

    之前，实现对象的继承是通过原型链实现的。ES6提供了更多原型对象的操作。

    Object.setPrototypeOf()方法的作用与__proto__相同，用来设置一个对象的原型对象，并返回参数对象本身。

    1. let obj={ x:1 };
    2. let proto={ y:function(){return 2} };
    3. Object.setPrototypeOf(obj,proto);
    4. proto.z=3;
    5. console.log(obj.x, obj.y(), obj.z); //1 2 3
    6. console.log(Object.setPrototypeOf(obj,proto)); // {x:1}

    //将proto对象设为obj对象的原型，所以obj对象能够获取proto对象的属性

    Object.getPrototypeOf方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象。

    console.log(Object.getPrototypeOf(obj)); //  {y:f,z:3}
    • 如果方法的第一个参数不是对象，就会自动转为对象。但是返回的它本身，所以不会产生任何效果。
    • 如果第一个参数是undefined或null，就会报错，因为它们无法转换为对象。

    ④ 运算符的扩展⭐​  

    扩展运算符 ... 

    扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。  可以看作是res参数的逆运算。 

    1. let arr=[1,2,3];
    2. ...arr //1,2,3
    3. console.log(...arr); //1 2 3

     输出没有逗号是因为逗号被console.log方法当作参数分隔符了，所以不会输出逗号。

    1. 用途1：合并数组
    2. let arr1 = [1, 2, 3]; 
    3. let arr2 = [4, 5, 6]; 
    4. // 方法1
    5. let arr3 = [...arr1, ...arr2];
    6. console.log(arr3); // [1,2,3,4,5,6]
    7. // 方法2
    8. arr1.push(...arr2);
    9. console.log(arr1); // [1,2,3,4,5,6]
    1. 用途2：将伪数组或可遍历的对象转为数组
    2. let pa = document.getElementsByClassName('li');
    3. let arr = [...pa]; // 利用扩展运算符，将伪数组转为真正的数组
    4. //pa.push('a'); 报错 伪数组不支持
    5. arr.push('a');
    6. console.log(arr); //[li,li,a]
    7. //方法2
    8. let a=Array.from(pa);
    9. a.push('a');
    1. 用途3：避免指向同一个地址
    2. //对象是引用数据类型，赋给的变量存的是该对象的地址，所以
    3. let str1=[1,2];
    4. let str2=str1;        
    5. //这两个变量存的是同一个对象的地址，通过任何一个变量对该数组进行改变，该数组都会发生相应的改变，
    6. //这时就可以通过扩展运算符 
    7. let str2=[...str1]; //为str2开辟一个新的内存地址，就不会影响str1了

    链判断运算符?.

    引入的原因：在读取对象内部的某个属性时，安全的做法是需要一层层的判断属性的上层对象是否存在。而这样层层判断十分麻烦，因此引入了链判断运算符" ?. "。

    1. //引入前
    2. let name = (message && message.user && message.user.name)||'default';
    3. //引入后
    4. let name = message?.user?.name || 'default';

    当左侧的对象为null或undefined时，就不再往下运算，而是直接返回undefined。 

    常见形式：

    1. a?.b  <=> a== null ? undefined : a.b //三元运算符：条件？满足的：不满足的
    2.  
    3. a?.[x] <=> a==null ? undefined : a[x]
    4.  
    5. a?.b() <=> a==null ? undefined : a.b() //如果是不满足的情况下且a.b不是函数不可调用就报错
    6.  
    7. a?.()  <=> a==null ? undefined : a()   //如果是不满足的情况下且a不是函数就报错

    ⑤ 字符串扩展：

    模板字符串⭐

    字符串${变量}字符串

    其他扩展 

    • includes(str)：判断是否包含指定的字符串
    • startsWith(str)：判断是否以指定字符串开头
    • endsWith(str)：判断是否以指定字符串结尾
    • repeat(count)：重复指定的次数

    ⑥ Number扩展：

    • 八进制0o表示，二进制0b；
    • Number.isFinite(n)：判断是否为有限大的数。比如Infinity这种无穷大的数，返回的就是 false。
    • Number.isNaN(n)：判断是否为 NaN。
    • Number.isInteger(n)：判断是否为整数。
    • Number.parseInt(str)：将字符串转换为对应的数值。
    • Math.trunc(n)：去除小数部分。

     

     

    总结给大家推荐一个实用面试题库

     1、前端后端面试题库 （面试必备）            推荐：★★★★★

    地址：前端面试题库

    2、前端技术导航大全      推荐：★★★★★

    地址：前端技术导航大全

    3、开发者颜色值转换工具   推荐：★★★★★

    地址 ：开发者颜色值转换工具

  • 相关阅读:
    什么是web3.0？
    react
    混合策略改进的蝴蝶优化算法-附代码
    输运方程的推导
    用cmd命令进行磁盘清理（主要是系统盘）
    TCP是什么、UDP是什么，它们有什么区别
    ubuntu下使用docker命令行
    设计模式学习（十九）：访问者模式
    003-Java程序流程控制
    【微信小程序】粤语教学平台-粤言粤语
  • 原文地址：https://blog.csdn.net/weixin_42981560/article/details/126644514