前端面试必备技能全方面总结

2020-06-13 本文已影响0人 WEB前端含光

一种Symbol类型可以通过使用Symbol()函数生成；
Symbol()函数可以接收一个字符串作为参数

实例代码：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let s1 = Symbol('web')
let s2 = Symbol('web')
console.log(s1==s2)
console.log(typeof s2)
console.log(typeof s1)
复制代码</pre>

mmbiz.qpic.cn/mmbiz/giajG…

image

由图可知：Symbol()函数接收的参数相同，其变量的值也不同，s1和s2是Symbol类型的变量，因为变量的值不同，所以打印的结果为false。使用typeof来获取相应的类型，所以打印的结果都为symbol。

2.Symbol可以通过三种方式作为对象属性名。

第一种：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 示例代码：
let symbol = Symbol();
let a = {};
a[symbol] = 'web';
复制代码</pre>

由代码可知：首先声明了一个Symbol类型的变量symbol，一个空的对象为a，通过a[symbol]给a对象赋值一个web的字符串。表示symbol作为对象属性名，web作为它的属性值。

第二种：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 示例代码
let symbol = Symbol();
let a = {
[symbol]:'web'
};
复制代码</pre>

由代码可知：首先声明了一个Symbol类型的变量symbol，接着在声明对象a的同时通过[symbol]给a对象性赋值为web的字符串。

第三种：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 示例代码：
let symbol = Symbol();
let a = {};
Object.defineProperty(a, symbol, {value: 'web'});
复制代码</pre>

由代码可知：首先声明了一个Symbol类型的变量symbol，一个空对象为a，通过Object.defineProperty()方法给a对象赋值为web的字符串。

Symbol的值作为对象属性名，是不能用点运算符的。

3.Symbol使用场景

有两种使用场景：

因为Symbol的值是均不相等的，所以Symbol类型的值作为对象属性名，不会出现重复。
代码形成强耦合的某一个具体的字符串。

Symbol获取

通过Object.getOwnPropertySymbols()方法，可以获取指定对象的所有Symbols属性名。

let和const

let是ES6规范中定义用于声明变量的关键字。
使用let声明的变量有一个块级作用域范围。

为什么需要块级作用域？

为什么会添加这个块级作用域，就得了解ES5没有块级作用域时出现的问题。

场景一是内层变量可能会覆盖外层变量。
场景二是在if或者是for循环中声明的变量会泄漏成为全局变量。

场景一： mmbiz.qpic.cn/mmbiz/giajG…

image

场景二：

代码示例：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">if(true) {
var web = 'web';
}
console.log(web); // web 没在iF块中也可以访问
复制代码</pre>

块级作用域的前提是进行let变量声明

独立的一对大括号，两个大括号之间就是变量的块级作用域的范围。
条件语句，函数声明语句，循环语句等的一对大括号中就是变量的块级作用域范围。

const声明一个只读的常量。const一旦声明常量，其值不能被改变。

const和let只在声明的块级作用域内有效。否则会报错。

const命令声明的常量只能在声明的位置后面使用。 mmbiz.qpic.cn/mmbiz/giajG…

image

const声明的常量，与let一样不可重复声明。

变量的解构赋值

在ES6中可以从数组和对象中提取值，对变量进行赋值，称为解构赋值。

解构赋值就是只要等号两边的模式相同，左边的变量就会被对应赋值。

示例代码：

let [x,y='b'] = ['a', undefined];
console.log(y); // b

let [x,y='b'] = ['a', null];
console.log(y); // null
复制代码</pre>

解构赋值分类：

数组的解构赋值
对象的解构赋值
字符串的解构赋值
数字以及布尔值的解构赋值
函数参数的解构赋值

解构赋值的情况

两种情况：

完全解构
不完全解构

不完全解构

代码如下：

<pre class="prettyprint hljs fsharp" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let [a = 1, b] = [];
// a = 1, b = undefined
复制代码</pre>

数组的解构赋值

代码如下：

解构赋值允许指定默认值。

代码如下：

在使用默认值的时候，应该注意undefined，因为undefined是不能赋值的。

代码如下：

let [x = 1] = [null];
x // null
复制代码</pre>

对象解构

代码如下：

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
复制代码</pre>

通过解构，我们可以很容易的把对象的方法复制给变量。

代码如下：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const { log } = console;
log('hello') // hello
或者是：

const { log:minelog } = console;
minelog ('hello') // hello
复制代码</pre>

当我们使用解构赋值的时候，需要注意声明变量的作用域问题：

// 错误的写法

// 正确的写法
let x;

({x} = {x: 1});
复制代码</pre>

数组中是一个特殊的对象

<pre class="prettyprint hljs fsharp" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
复制代码</pre>

不完全解构

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'
复制代码</pre>

剩余运算符

解构默认值

字符串解构

字符串本身也是一个对象，有时候，可以当成一个数组解构

代码如下：

<pre class="prettyprint hljs awk" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
复制代码</pre>

当做一个对象解构

剩余运算符

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]
函数参数的解构赋值
function add([x, y]){
return x + y;
}

add([1, 2]); // 3
复制代码</pre>

计算函数任意个参数之和：代码：

<pre class="prettyprint hljs matlab" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function sum(...num){
var sumNum = 0;
for(let i=0;i<num.length;i++){
sumNum += parseInt(num[i])
}
console.log(sumNum)
}
复制代码</pre>

Set和Map

Set类似于数组，但是成员的值都是唯一的，没有重复的值。

Set使用add()方法添加元素，不会添加重复的值，所以Set可以对数组进行去重操作。

Map类似于对象，键名的值可以是各种类型的值。

声明

使用new Set()构造函数来声明Set；
使用new Set()构造函数来声明Map。

使用for...of来遍历数组中的值

mmbiz.qpic.cn/mmbiz/giajG…

image

操作方法

共有的方法：delete删除，has有无，clear清空。对于Set的添加操作是add()，而Map是set设置和get获取。 mmbiz.qpic.cn/mmbiz/giajG…

image

mmbiz.qpic.cn/mmbiz/giajG…

image

has是用来判断Set或者是Map中是否包含元素。 mmbiz.qpic.cn/mmbiz/giajG…

image

mmbiz.qpic.cn/mmbiz/giajG…

image

set可以用来新增或者是修改Map中的元，只有Map有。

遍历方法

有keys，values，entries，forEach。

keys获取所有键，values获取所有值，entries获取所有键和值，forEach遍历所有键和值。

箭头函数

ES6中使用箭头函数(=>)来定义函数。

带参数的箭头函数

代码：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">var single = a => a
single('web')
复制代码</pre>

没有参数的箭头函数

代码：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">var log = () => {
alert('web')
}
复制代码</pre>

多个参数的箭头函数

代码：

es6相对于es5的扩展

它主要分三种：

函数的扩展
对象的扩展
数组的扩展

函数的扩展

es6中函数的扩展包含：默认值，剩余运算符，扩展运算符。

默认值

在es5中，函数的默认值设定是，通过“||”进行设定的，当函数参数为undefine时，取默认值。

在es6中，函数的默认值是写在参数定义的后面。

代码示例如下：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// es5
function log(x,y) {
y = y || 'web';
console.log(x,y);
}

function log(x,y="web"){
console.log(x,y);
}
复制代码</pre>

剩余运算符

剩余运算符表示语句：...arrr表示参数，指定的是可以有多个参数。

代码示例如下：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function web(...arr) {
for(let item of arr) {
console.log(item);
}
}
web(1,3,4,5,6);
复制代码</pre>

扩展运算符

示例代码如下：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function add(a,b,c) {
console.log(a);
console.log(b);
console.log(c);
}
var arr = [1,2,3];
add(...arr);
复制代码</pre>

对象的扩展 es6中允许向对象直接写入变量和函数，作为对象的属性和方法。

es6中允许使用表达式作为对象的属性，并且函数名称定义也可以采用相同的方式。

setter和getter。JavaScript对象的属性是由名字，值和一组特性构成的。

es6中对象的操作方法：

Object.is()：比较两个值是否相等。Object.assign()：用于将对象进行合并。Object.getOwnPropertyDescriptor：返回对象属性的描述。Object.keys()返回一个数组，包含对象自身所有的可枚举属性。

数组的扩展

copyWithin(target,start,end)：在当前数组内部，将指定位置的成员复制到其他位置，然后返回当前数组。

target表示从该位置开始替换数据。如果是负值，表示倒数。

start表示从该位置开始读取数据，默认为0。如果为负值，表示倒数。

end表示到该位置前停止读取数据，默认等于数组长度。如果负值，表示倒数。

find()表示用于找出第一个符号条件的数组成员。

findIndex()表示返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

fill()表示填充一个数组，fill()方法用于空数组的初始化。

includes()表示该方法返回一个布尔值，表示某个数组是否包含给定的值。

es6高级操作 Promise对象用于表示一个异步操作的最终状态，完成或是失败。

Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表现出来，避免了多层回调函数嵌套问题。

一个Promise有几种状态：

pending初始状态，既不是成功状态，也不是失败状态。
fulfilled表示操作成功完成。
rejected表示操作失败。

当其中任何一种情况出现时，Promise对象的then()方法绑定的处理方法就会被调用。

then()方法包含两个参数，onfulfilled和onrejected，他们都是function类型。

当Promise为fulfilled状态时，调用then()方法的onfulfilled，当Promise为rejected状态时，调用then()方法的onrejected。

Promise.prototype.then和Promise.prototype.catch方法返回Promise对象，所以它们可以被链式调用。

Iterator

Iterator遍历器是一种接口，为各种不同的数据结构提供统一的访问机制。

任何数据结构只要部署了Iterator接口，就可以完成遍历操作。

Iterator的作用：

为各种数据结构，提供一个统一的，简便的访问接口。
使得数据结构的成员能够按某种次序排列。
ES6创造了一种新的遍历命令for...of循环。

原生具备Iterator接口的数据结构，数组，某些类似数组的对象，Set结构和Map结构。 mmbiz.qpic.cn/mmbiz/giajG…

image

Generator

Generator是es6提供的一种异步编程解决方案，在语法上，可以把它理解为一个状态机，内部封装了多种状态。

执行Generator，会生成并返回一个遍历器对象。返回的遍历器对象，可以依次遍历Generator函数的每一个状态。

Generator函数是一个普通的函数。

function关键字与函数名之间有一个*号。
函数体内使用yield表达式来遍历状态。

代码如下：

<pre class="prettyprint hljs php" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function* newGenerator() {
yield 'web';
yield 'it';
return 'ending';
}
复制代码</pre>

代码理解，执行Generator函数之后，并不会被立即执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。

使用遍历器对象的Next()方法，使指针移向下一个状态。每一次调用next()方法，内部指针就会从函数头部或上一次停下的地方开始执行，直到遇到下一个yield表达式位置。

Generator是分段执行的，yield表达式是暂停执行的标志，而next()方法可以恢复执行。

next()函数带参数，该参数作为上一次yield表达式的返回值，因为yield本身是没有返回值的。

Class

ES6引入Class类这个概念，使用Class关键字可以定义类。

示例代码：

<pre class="prettyprint hljs kotlin" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Person {
constructor(name,age){
this.name = name;
this.age = age;
}
say() {
return '名字：'+this.name+'年龄'+this.age+"岁";
}
}
var obj = new Person('web',12);
console.log(obj.say());
复制代码</pre>

简单数据类型

ES5中有5中简单数据类型，Undefined, Null, Boolean, Number, String.

Set

成员不能重复
只有健值，没有健名，有点类似数组。
可以遍历，方法有add, delete,has

Set 实例属性

constructor：构造函数
size：元素数量

代码如下：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let set = new Set([1, 2, 3, 2, 1])

console.log(set.length) // undefined
console.log(set.size) // 3
复制代码</pre>

Set 实例方法

操作方法

add(value)：新增，相当于 array里的push
delete(value)：存在即删除集合中value
has(value)：判断集合中是否存在 value
clear()：清空集合

遍历方法

keys()：返回一个包含集合中所有键的迭代器

values()：返回一个包含集合中所有值得迭代器

entries()：返回一个包含Set对象中所有元素得键值对迭代器

forEach(callbackFn, thisArg)：用于对集合成员执行callbackFn操作

Map

本质上是键值对的集合，类似集合
可以遍历，方法很多可以跟各种数据格式转换

Set 和 Map 主要的应用场景在于数据重组和数据储存

Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构

有想了解更多的朋友可以

一、搜索QQ群，前端学习交流群：1093606290

二、https://jq.qq.com/?_wv=1027&k=MlDBtuEG

前端面试必备技能全方面总结

2.Symbol可以通过三种方式作为对象属性名。

3.Symbol使用场景

Symbol获取

let和const

变量的解构赋值

不完全解构

数组的解构赋值

解构赋值允许指定默认值。

在使用默认值的时候，应该注意undefined，因为undefined是不能赋值的。

对象解构

通过解构，我们可以很容易的把对象的方法复制给变量。

当我们使用解构赋值的时候，需要注意声明变量的作用域问题：

Set和Map

遍历方法

箭头函数

es6相对于es5的扩展

函数的扩展

一个Promise有几种状态：

Iterator的作用：

Generator

Generator函数是一个普通的函数。

Class

ES6引入Class类这个概念，使用Class关键字可以定义类。

简单数据类型

ES5中有5中简单数据类型，Undefined, Null, Boolean, Number, String.

Set

Set 实例属性

Set 实例方法

操作方法

Map

猜你喜欢

热点阅读

前端面试必备技能 全方面总结

2.Symbol可以通过三种方式作为对象属性名。

3.Symbol使用场景

Symbol获取

let和const

变量的解构赋值

不完全解构

数组的解构赋值

解构赋值允许指定默认值。

在使用默认值的时候，应该注意undefined，因为undefined是不能赋值的。

对象解构

通过解构，我们可以很容易的把对象的方法复制给变量。

当我们使用解构赋值的时候，需要注意声明变量的作用域问题：

Set和Map

遍历方法

箭头函数

es6相对于es5的扩展

函数的扩展

一个Promise有几种状态：

Iterator的作用：

Generator

Generator函数是一个普通的函数。

Class

ES6引入Class类这个概念，使用Class关键字可以定义类。

简单数据类型

ES5中有5中简单数据类型，Undefined, Null, Boolean, Number, String.

Set

Set 实例属性

Set 实例方法

操作方法

Map

猜你喜欢

热点阅读

前端面试必备技能全方面总结