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

变量声明 ⭐

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

解构 ⭐

① 数组解构[ ]

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

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


② 对象解构{}

     根据键值取值。

let obj&＃61;{name:&＃39;hua&＃39;,age:18
}
//不同名&＃xff0c;则把左边的属性的值赋给右边自定义的变量
let {name:n,age:a}&＃61;obj;
console.log(n,a) -> &＃39;hua&＃39; 18
console.log(name,age) ->打印报错 未声明
//同名的可以将name:name省略成name
let {age,name}&＃61;obj;
console.log(name,age) -> &＃39;hua&＃39; 18


③ 字符串解构

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

let str&＃61;&＃39;hello World&＃39;;
let [a,b,c]&＃61;str;
console.log(a,b,c,typeof(a)) -> h e l string


扩展 

① 函数的扩展 ⭐  

res参数&＃xff08;剩余参数&＃xff09;

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

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


注意&＃xff0c;res参数之后不能再有任何参数。函数的length属性&＃xff08;指明函数形参的个数&＃xff09;不包括res参数

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


严格模式

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

function fn(a,b&＃61;1){ //报错&＃39;use strict&＃39;;
}


 两种方式可以避免这种限制&＃xff1a;

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

name属性

具名函数返回函数原本的名字&＃xff0c;匿名函数返回实际的函数名

function fn(){}
let fun&＃61;function(){}
fn.name //fn
fun.name //fun &＃xff08;ES5中返回空字符串&＃xff09;


箭头函数 ( 参数 ) &＃61;> { 函数体 } 

注意要点&＃xff1a;

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

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

s &＃61; 21;
const obj &＃61; {s: 42,f: () &＃61;> console.log(this.s)//继承作用域的上一层的this&＃xff0c;指向全局
};
obj.f() // 21


② 数组的扩展 ⭐

Array.from()

可将类似数组的对象和可遍历的对象&＃xff08;包括新增的数据结构Set、Map&＃xff09;

伪数组&＃xff1a;有索引&＃xff0c;有长度&＃xff0c;但是没有方法

let arrayLike&＃61;{&＃39;0&＃39;:&＃39;a&＃39;,&＃39;1&＃39;:&＃39;b&＃39;,&＃39;2&＃39;:&＃39;c&＃39;,length:3
};
const arr&＃61;Array.from(arryLike);
console.log(arr); //[&＃39;a&＃39;,&＃39;b&＃39;,&＃39;c&＃39;]
//length:2->[&＃39;a&＃39;,&＃39;b&＃39;] length:4->[&＃39;a&＃39;,&＃39;b&＃39;,&＃39;c&＃39;,undefined]


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

let arrayLike&＃61;document.querySelectorAll(&＃39;button&＃39;);
let a&＃61;document.getElementsByTagName(&＃39;button&＃39;);
console.log(arrayLike,a);//NodeList(5) HtmlCollection(5)
const arr&＃61;Array.from(arrayLike);
console.log(arr);//(5)


⭐补充一下&＃xff0c;DOM操作中三种方式返回的伪数组类型有些不同&＃xff1a;

• querySelectorAll()&＃xff1a;NodeList类型&＃xff0c;获取子节点操作中的childNodes属于该类型。即返回的集合中包含元素节点和文本节点&＃xff08;文字、空格&＃xff09;等&＃xff1b;
• getElementsBytagName()和getElementsByClassName()返回的是HtmlCollection类型&＃xff0c;获取子节点操作中的children就属于该类型.即返回的集合中只有元素节点。

Array.of() 

将一组值转换为数组。

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


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

//没有参数时,一致
Array() //[]
Array.of() //[]
//一个参数时&＃xff0c;一个是长度&＃xff0c;一个是值
Array(2) //[empty × 2] length:2
Array.of(2) //[2]
//多个参数时&＃xff0c;一致
Array(1,2) //[1,2]
Array.of(1,2) //[1,2]


③ 对象的扩展 ⭐  

Object.defineProperty

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

let obj&＃61;{name:&＃39;hua&＃39;,age:18
}
console.log(obj); //{name: &＃39;hua&＃39;, age: 18}
/* 传统方式
obj.sex&＃61;&＃39;man&＃39;;
obj.age&＃61;19; */
Object.defineProperty(obj,&＃39;sex&＃39;,{value:&＃39;man&＃39;
});
Object.defineProperty(obj,&＃39;age&＃39;,{value:19
});
console.log(obj); //{name: &＃39;hua&＃39;, age: 19, sex: &＃39;man&＃39;}


 第三个参数&＃xff0c;以对象的形式书写

• value: 设置属性的值&＃xff0c;默认为undefined&＃xff1b;

• writable: 值是否可以重写&＃xff0c;当属性是由该方法新创建的时候&＃xff0c;默认值为false&＃xff1b;

  console.log(obj); //{name: &＃39;hua&＃39;, age: 18}
Object.defineProperty(obj,&＃39;sex&＃39;,{value:&＃39;man&＃39;,writable:true, //当属性是由该方法新创建的时候&＃xff0c;默认值才为false
});
Object.defineProperty(obj,&＃39;sex&＃39;,{value:1
});
Object.defineProperty(obj,&＃39;age&＃39;,{value:20,writable:false
});
console.log(obj); //{name: &＃39;hua&＃39;, age: 20, sex: 1}
obj.sex&＃61;0;
obj.age&＃61;30;
console.log(obj); //{name: &＃39;hua&＃39;, age: 20, sex: 0}


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

  console.log(Object.keys(obj)); //[&＃39;name&＃39;, &＃39;age&＃39;]
Object.defineProperty(obj,&＃39;sex&＃39;,{value:&＃39;man&＃39;,enumerable: true
});
console.log(Object.keys(obj)); //[&＃39;name&＃39;, &＃39;age&＃39;, &＃39;sex&＃39;]
Object.defineProperty(obj,&＃39;age&＃39;,{enumerable:false
});
console.log(Object.keys(obj)); //[&＃39;name&＃39;, &＃39;sex&＃39;]


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

  Object.defineProperty(obj,&＃39;sex&＃39;,{value:&＃39;man&＃39;, configurable:true
});
console.log(obj); //{name: &＃39;hua&＃39;, age: 18, sex: &＃39;man&＃39;}
delete obj.sex;
console.log(obj); //{name: &＃39;hua&＃39;, age: 18}
delete obj.name;
Object.defineProperty(obj,&＃39;age&＃39;,{configurable:false
});
delete obj.age;
console.log(obj); //{age: 18}


  Object.defineProperty(obj,&＃39;sex&＃39;,{value:&＃39;man&＃39;, configurable:false
});
Object.defineProperty(obj,&＃39;sex&＃39;,{value:1, writable:true
});
console.log(obj); //Error:Cannot redefine property: sex


Object.freeze

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

const a&＃61;1;
//a&＃61;2; //报错
const obj&＃61;{b:2};
obj.b&＃61;3;
console.log(obj.b); //3


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

 被冻结后的对象&＃xff1a;

• 不能添加新属性&＃xff1b;
• 不能修改、删除原有的属性&＃xff1b;
• 不能修改原型&＃xff1b;
• 不能修改已有属性的可写性writable、可枚举性enumerable和可配置性configurable。

let obj&＃61;{name:&＃39;hua&＃39;,age:18
}
console.log(obj); //{name: &＃39;hua&＃39;, age: 18}
Object.freeze(obj);
obj.sex&＃61;&＃39;man&＃39;;
obj.age&＃61;19;
console.log(obj); //{name: &＃39;hua&＃39;, age: 18}
console.log(Object.freeze(obj))//{name: &＃39;hua&＃39;, age: 18}


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

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

let obj&＃61;{name:&＃39;hua&＃39;,deep:{age:18}
};
Object.freeze(obj);
obj.name&＃61;123;
obj.deep.age&＃61;19;
console.log(obj.name,obj.deep); //hua {age:19}


 解决办法&＃xff1a;封装一个深冻结函数&＃xff0c;随时调用。

function deepFreeze(obj){//获取所有属性let proName&＃61;Object.getOwnPropertyNames(obj);//遍历proName.forEach(item&＃61;>{let pro&＃61;obj[item];//如果某个属性的属性值是对象&＃xff0c;则递归调用if(pro instanceof Object && pro!&＃61;&＃61;null){deepFreeze(pro);} })return Object.freeze(obj);
}deepFreeze(obj);
console.log(obj.name,obj.deep); //hua 18


Object.setPrototypeOf()&＃xff0c;Object.getPrototypeOf()

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

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

let obj&＃61;{ x:1 };
let proto&＃61;{ y:function(){return 2} };
Object.setPrototypeOf(obj,proto);
proto.z&＃61;3;
console.log(obj.x, obj.y(), obj.z); //1 2 3
console.log(Object.setPrototypeOf(obj,proto)); // {x:1}


//将proto对象设为obj对象的原型&＃xff0c;所以obj对象能够获取proto对象的属性

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

console.log(Object.getPrototypeOf(obj)); // {y:f,z:3}


• 如果方法的第一个参数不是对象&＃xff0c;就会自动转为对象。但是返回的它本身&＃xff0c;所以不会产生任何效果。
• 如果第一个参数是undefined或null&＃xff0c;就会报错&＃xff0c;因为它们无法转换为对象。

④ 运算符的扩展⭐​  

扩展运算符 ... 

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

let arr&＃61;[1,2,3];
...arr //1,2,3
console.log(...arr); //1 2 3


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

用途1&＃xff1a;合并数组
let arr1 &＃61; [1, 2, 3];
let arr2 &＃61; [4, 5, 6];
// 方法1
let arr3 &＃61; [...arr1, ...arr2];
console.log(arr3); // [1,2,3,4,5,6]
// 方法2
arr1.push(...arr2);
console.log(arr1); // [1,2,3,4,5,6]


用途2&＃xff1a;将伪数组或可遍历的对象转为数组
let pa &＃61; document.getElementsByClassName(&＃39;li&＃39;);
let arr &＃61; [...pa]; // 利用扩展运算符&＃xff0c;将伪数组转为真正的数组
//pa.push(&＃39;a&＃39;); 报错 伪数组不支持
arr.push(&＃39;a&＃39;);
console.log(arr); //[li,li,a]
//方法2
let a&＃61;Array.from(pa);
a.push(&＃39;a&＃39;);


用途3&＃xff1a;避免指向同一个地址
//对象是引用数据类型&＃xff0c;赋给的变量存的是该对象的地址&＃xff0c;所以
let str1&＃61;[1,2];
let str2&＃61;str1;
//这两个变量存的是同一个对象的地址&＃xff0c;通过任何一个变量对该数组进行改变&＃xff0c;该数组都会发生相应的改变&＃xff0c;
//这时就可以通过扩展运算符
let str2&＃61;[...str1]; //为str2开辟一个新的内存地址&＃xff0c;就不会影响str1了


链判断运算符?.

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

//引入前
let name &＃61; (message && message.user && message.user.name)||&＃39;default&＃39;;
//引入后
let name &＃61; message?.user?.name || &＃39;default&＃39;;


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

常见形式&＃xff1a;

a?.b <&＃61;> a&＃61;&＃61; null ? undefined : a.b //三元运算符&＃xff1a;条件&＃xff1f;满足的&＃xff1a;不满足的a?.[x] <&＃61;> a&＃61;&＃61;null ? undefined : a[x]a?.b() <&＃61;> a&＃61;&＃61;null ? undefined : a.b() //如果是不满足的情况下且a.b不是函数不可调用就报错a?.() <&＃61;> a&＃61;&＃61;null ? undefined : a() //如果是不满足的情况下且a不是函数就报错


⑤ 字符串扩展&＃xff1a;

模板字符串⭐

字符串${变量}字符串

其他扩展 

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

⑥ Number扩展&＃xff1a;

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

 

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

 1、前端后端面试题库 &＃xff08;面试必备&＃xff09;            推荐&＃xff1a;★★★★★

地址&＃xff1a;前端面试题库

2、前端技术导航大全      推荐&＃xff1a;★★★★★

地址&＃xff1a;前端技术导航大全

3、开发者颜色值转换工具   推荐&＃xff1a;★★★★★

地址 &＃xff1a;开发者颜色值转换工具