快到金九银十了，送上 20 道大厂面试题

今年来，各大公司都缩减了 HC，甚至是采取了“裁员”措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。

本文挑选了 20 道大厂面试题，大家在阅读时，建议不要先看我的答案，而是自己先思考一番。尽管，本文所有的答案，都是我在翻阅各种资料，思考并验证之后，才给出的。但因水平有限，本人的答案未必是最优的，如果您有更好的答案，欢迎给我留言。

1. new 的实现原理是什么？

new 的实现原理:

1. 创建一个空对象，构造函数中的 this 指向这个空对象。

2. 这个新对象被执行 [[原型]] 连接。

3. 执行构造函数方法，属性和方法被添加到 this 引用的对象中。

4. 如果构造函数中没有返回其它对象，那么返回 this，即创建的这个的新对象，否则，返回构造函数中返回的对象。

 复制代码

function_new(){
lettarget = {};// 创建的新对象
// 第一个参数是构造函数
let[constructor, ...args] = [...arguments];
// 执行 [[原型]] 连接 ;target 是constructor的实例
target.__proto__ =constructor.prototype;
// 执行构造函数，将属性或方法添加到创建的空对象上
let result =constructor.apply(target, args);
if (result && (typeof(result) =="object"||typeof(result) =="function")) {
// 如果构造函数执行的结构返回的是一个对象，那么返回这个对象
return result;
}
// 如果构造函数返回的不是一个对象，返回创建的新对象
return target;
}

2. 如何正确判断 this 的指向？

如果用一句话说明 this 的指向，那么即是: 谁调用它，this 就指向谁。但是仅通过这句话，我们很多时候并不能准确判断 this 的指向。因此我们需要借助一些规则去帮助自己：

this 的指向可以按照以下顺序判断:

• 全局环境中的 this

• 浏览器环境：无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象 window ;

• node 环境：无论是否在严格模式下，在全局执行环境中（在任何函数体外部），this 都是空对象 {} ;

• 是否是 new 绑定

如果是 new 绑定，并且构造函数中没有返回 function 或者是 object，那么 this 指向这个新对象。如下:

构造函数返回值不是 function 或 object。 new Super() 返回的是 this 对象。

 复制代码

function Super(age) {
this.age = age;
}

letinstance=newSuper('26');
console.log(instance.age); //26

构造函数返回值是 function 或 object， new Super() 是返回的是 Super 种返回的对象。

 复制代码

functionSuper(age){
this.age = age;
letobj = {a:'2'};
returnobj;
}

letinstance =newSuper('hello');
console.log(instance);//{ a: '2' }
console.log(instance.age);//undefined

• 函数是否通过 call,apply 调用，或者使用了 bind 绑定，如果是，那么 this 绑定的就是指定的对象【归结为显式绑定】。

 复制代码

functioninfo(){
console.log(this.age);
}
varperson = {
age:20,
info
}
varage =28;
varinfo = person.info;
info.call(person);//20
info.apply(person);//20
info.bind(person)();//20

这里同样需要注意一种 特殊 情况，如果 call,apply 或者 bind 传入的第一个参数值是 undefined 或者 null ，严格模式下 this 的值为传入的值 null /undefined。非严格模式下，实际应用的默认绑定规则，this 指向全局对象 (node 环境为 global，浏览器环境为 window)

 复制代码

functioninfo(){
//node 环境中: 非严格模式 global，严格模式为 null
// 浏览器环境中: 非严格模式 window，严格模式为 null
console.log(this);
console.log(this.age);
}
varperson = {
age:20,
info
}
varage =28;
varinfo = person.info;
// 严格模式抛出错误；
// 非严格模式，node 下输出 undefined（因为全局的 age 不会挂在 global 上）
// 非严格模式。浏览器环境下输出 28（因为全局的 age 会挂在 window 上）
info.call(null);

• 隐式绑定，函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。典型的隐式调用为: xxx.fn()

 复制代码

functioninfo(){
console.log(this.age);
}
varperson = {
age:20,
info
}
varage =28;
person.info();//20; 执行的是隐式绑定

• 默认绑定，在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用。

• 非严格模式： node 环境，执行全局对象 global，浏览器环境，执行全局对象 window。

• 严格模式：执行 undefined

 复制代码

functioninfo(){
console.log(this.age);
}
varage =28;
// 严格模式；抛错
// 非严格模式，node 下输出 undefined（因为全局的 age 不会挂在 global 上）
// 非严格模式。浏览器环境下输出 28（因为全局的 age 会挂在 window 上）
// 严格模式抛出，因为 this 此时是 undefined
info();

• 箭头函数的情况：

箭头函数没有自己的 this，继承外层上下文绑定的 this。

 复制代码

letobj = {
age:20,
info:function(){
return()=>{
console.log(this.age);//this 继承的是外层上下文绑定的 this
}
}
}

letperson = {age:28};
letinfo = obj.info();
info();//20

letinfo2 = obj.info.call(person);
info2();//28

3. 深拷贝和浅拷贝的区别是什么？实现一个深拷贝

深拷贝和浅拷贝是针对复杂数据类型来说的，浅拷贝只拷贝一层，而深拷贝是层层拷贝。

深拷贝

深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象。

浅拷贝

浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。

可以使用 for in 、 Object.assign 、 扩展运算符 ... 、 Array.prototype.slice() 、 Array.prototype.concat() 等，例如:

 复制代码

letobj = {
name:'Yvette',
age:18,
hobbies: ['reading','photography']
}
letobj2 = Object.assign({}, obj);
letobj3 = {...obj};

obj.name ='Jack';
obj.hobbies.push('coding');
console.log(obj);//{ name:'Jack', age:18,hobbies: ['reading','photography','coding'] }
console.log(obj2);//{ name:'Yvette', age:18,hobbies: ['reading','photography','coding'] }
console.log(obj3);//{ name:'Yvette', age:18,hobbies: ['reading','photography','coding'] }

可以看出浅拷贝只最第一层属性进行了拷贝，当第一层的属性值是基本数据类型时，新的对象和原对象互不影响，但是如果第一层的属性值是复杂数据类型，那么新对象和原对象的属性值其指向的是同一块内存地址。

深拷贝实现

1. 深拷贝最简单的实现是: JSON.parse(JSON.stringify(obj))，这是最简单的实现方式，但是有一些缺陷：

• 对象的属性值是函数时，无法拷贝。

• 原型链上的属性无法拷贝。

• 不能正确的处理 Date 类型的数据。

• 不能处理 RegExp。

• 会忽略 symbol。

• 会忽略 undefined。

2. 实现一个 deepClone 函数

• 如果是基本数据类型，直接返回。

• 如果是 RegExp 或者 Date 类型，返回对应类型。

• 如果是复杂数据类型，递归。

• 考虑循环引用的问题。

 复制代码

functiondeepClone(obj, hash =newWeakMap()){// 递归拷贝
if(objinstanceofRegExp)returnnewRegExp(obj);
if(objinstanceofDate)returnnewDate(obj);
if(obj ===null||typeofobj !=='object') {
// 如果不是复杂数据类型，直接返回
returnobj;
}
if(hash.has(obj)) {
returnhash.get(obj);
}
/**
* 如果 obj 是数组，那么 obj.constructor 是 [Function: Array]
* 如果 obj 是对象，那么 obj.constructor 是 [Function: Object]
*/
lett =newobj.constructor();
hash.set(obj, t);
for(letkeyinobj) {
// 递归
if(obj.hasOwnProperty(key)) {// 是否是自身的属性
t[key] = deepClone(obj[key], hash);
}
}
returnt;
}

4. call/apply 的实现原理是什么？

call 和 apply 的功能相同，都是改变 this 的执行，并立即执行函数。区别在于传参方式不同。

• func.call(thisArg, arg1, arg2, …)：第一个参数是 this 指向的对象，其它参数依次传入。

• func.apply(thisArg, [argsArray])：第一个参数是 this 指向的对象，第二个参数是数组或类数组。

一起思考一下，如何模拟实现 call ？

首先，我们知道，函数都可以调用 call，说明 call 是函数原型上的方法，所有的实例都可以调用。即: Function.prototype.call。

• 在 call 方法中获取调用 call() 函数。

• 如果第一个参数没有传入，那么默认指向 window / global(非严格模式)。

• 传入 call 的第一个参数是 this 指向的对象，根据隐式绑定的规则，我们知道 obj.foo(), foo() 中的 this 指向 obj; 因此我们可以这样调用函数 thisArgs.func(…args)。

• 返回执行结果。

 复制代码

Function.prototype.call =function(){
let[thisArg, ...args] = [...arguments];
if(!thisArg) {
//context 为 null 或者是 undefined
thisArg =typeofwindow==='undefined'? global :window;
}
//this 的指向的是当前函数 func (func.call)
thisArg.func =this;
// 执行函数
letresult = thisArg.func(...args);
deletethisArg.func;//thisArg 上并没有 func 属性，因此需要移除
returnresult;
}

bind 的实现思路和 call 一致，仅参数处理略有差别。如下：

 复制代码

Function.prototype.apply =function(thisArg, rest){
letresult;// 函数返回结果
if(!thisArg) {
//context 为 null 或者是 undefined
thisArg =typeofwindow==='undefined'? global :window;
}
//this 的指向的是当前函数 func (func.call)
thisArg.func =this;
if(!rest) {
// 第二个参数为 null / undefined
result = thisArg.func();
}else{
result = thisArg.func(...rest);
}
deletethisArg.func;//thisArg 上并没有 func 属性，因此需要移除
returnresult;
}

5. 柯里化函数实现

在开始之前，我们首先需要搞清楚函数柯里化的概念。

函数柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

 复制代码

constcurry =(fn, ...args) =>
args.length curry(fn, ...args, ...arguments)
// 参数长度满足时，执行函数
: fn(...args);

 复制代码

functionsumFn(a, b, c){
returna + b + c;
}
varsum= curry(sumFn);
console.log(sum(2)(3)(5));//10
console.log(sum(2,3,5));//10
console.log(sum(2)(3,5));//10
console.log(sum(2,3)(5));//10

函数柯里化的主要作用：

• 参数复用。

• 提前返回 – 返回接受余下的参数且返回结果的新函数。

• 延迟执行 – 返回新函数，等待执行。

6. 如何让 (a == 1 && a == 2 && a == 3) 的值为 true？

利用隐式类型转换

== 操作符在左右数据类型不一致时，会先进行隐式转换。

a == 1 && a == 2 && a == 3 的值意味着其不可能是基本数据类型。因为如果 a 是 null 或者是 undefined bool 类型，都不可能返回 true。

因此可以推测 a 是复杂数据类型，JS 中复杂数据类型只有 object ，回忆一下，Object 转换为原始类型会调用什么方法？

• 如果部署了 [Symbol.toPrimitive] 接口，那么调用此接口，若返回的不是基本数据类型，抛出错误。

• 如果没有部署 [Symbol.toPrimitive] 接口，那么根据要转换的类型，先调用 valueOf / toString 。

1. 非 Date 类型对象， hint 是 default 时，调用顺序为： valueOf >>> toString ，即 valueOf 返回的不是基本数据类型，才会继续调用 valueOf ，如果 toString 返回的还不是基本数据类型，那么抛出错误。

2. 如果 hint 是 string (Date 对象的 hint 默认是 string) ，调用顺序为： toString >>> valueOf ，即 toString 返回的不是基本数据类型，才会继续调用 valueOf ，如果 valueOf 返回的还不是基本数据类型，那么抛出错误。

3. 如果 hint 是 number ，调用顺序为： valueOf >>> toString

 复制代码

// 部署 [Symbol.toPrimitive] / valueOf/ toString 皆可
// 一次返回 1，2，3 即可。
leta = {
[Symbol.toPrimitive]: (function(hint){
leti =1;
// 闭包的特性之一：i 不会被回收
returnfunction(){
returni++;
}
})()
}

2. 利用数据劫持 (Proxy/Object.definedProperty)

 复制代码

leti =1;
leta =newProxy({}, {
i:1,
get:function(){
return()=>this.i++;
}
});

3. 数组的 toString 接口默认调用数组的 join 方法，重新 join 方法

 复制代码

let a = [1,2,3];
a.join = a.shift;

7. 什么是 BFC？BFC 的布局规则是什么？如何创建 BFC？

Box 是 CSS 布局的对象和基本单位，页面是由若干个 Box 组成的。

元素的类型 和 display 属性，决定了这个 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context。

Formatting Context

Formatting Context 是页面的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其它元素的关系和相互作用。

Formatting Context 有 BFC (Block formatting context)，IFC (Inline formatting context)，FFC (Flex formatting context) 和 GFC (Grid formatting context)。FFC 和 GFC 为 CC3 中新增。

BFC 布局规则 **

• BFC 内，盒子依次垂直排列。

• BFC 内，两个盒子的垂直距离由 margin 属性决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠【符合合并原则的 margin 合并后是使用大的 margin】。

• BFC 内，每个盒子的左外边缘接触内部盒子的左边缘（对于从右到左的格式，右边缘接触）。即使在存在浮动的情况下也是如此。除非创建新的 BFC。

• BFC 的区域不会与 float box 重叠。

• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

• 计算 BFC 的高度时，浮动元素也参与计算。

如何创建 BFC

• 根元素

• 浮动元素（float 属性不为 none）

• position 为 absolute 或 fixed

• overflow 不为 visible 的块元素

• display 为 inline-block, table-cell, table-caption

BFC 的应用

1. 防止 margin 重叠 (同一个 BFC 内的两个两个相邻 Box 的 margin 会发生重叠，触发生成两个 BFC，即不会重叠).

2. 清除内部浮动 (创建一个新的 BFC，因为根据 BFC 的规则，计算 BFC 的高度时，浮动元素也参与计算).

3. 自适应多栏布局 (BFC 的区域不会与 float box 重叠。因此，可以触发生成一个新的 BFC).

8. 异步加载 JS 脚本的方式有哪些？

标签中增加 async (html5) 或者 defer (html4) 属性, 脚本就会异步加载。

 复制代码

defer 和 async 的区别在于：

• defer 要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），在 window.onload 之前执行；

• async 一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。

• 如果有多个 defer 脚本，会按照它们在页面出现的顺序加载。

• 多个 async 脚本不能保证加载顺序。

动态创建 script 标签

动态创建的 script ，设置 src 并不会开始下载，而是要添加到文档中，JS 文件才会开始下载。

 复制代码

letscript =document.createElement('script');
script.src ='XXX.js';
// 添加到 html 文件中才会开始下载
document.body.append(script);

XHR 异步加载 JS

 复制代码

letxhr =newXMLHttpRequest();
xhr.open("get","js/xxx.js",true);
xhr.send();
xhr.onreadystatechange =function(){
if(xhr.readyState ==4&& xhr.status ==200) {
eval(xhr.responseText);
}
}

9. ES5 有几种方式可以实现继承？分别有哪些优缺点？

ES5 有 6 种方式可以实现继承，分别为：

1. 原型链继承

原型链继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

 复制代码

functionSuperType(){
this.name ='Yvette';
this.colors = ['pink','blue','green'];
}
SuperType.prototype.getName =function(){
returnthis.name;
}
functionSubType(){
this.age =22;
}
SubType.prototype =newSuperType();
SubType.prototype.getAge =function(){
returnthis.age;
}
SubType.prototype.constructor = SubType;
letinstance1 =newSubType();
instance1.colors.push('yellow');
console.log(instance1.getName());//'Yvette'
console.log(instance1.colors);//[ 'pink', 'blue', 'green', 'yellow' ]

letinstance2 =newSubType();
console.log(instance2.colors);//[ 'pink', 'blue', 'green', 'yellow' ]

缺点：

• 通过原型来实现继承时，原型会变成另一个类型的实例，原先的实例属性变成了现在的原型属性，该原型的引用类型属性会被所有的实例共享。

• 在创建子类型的实例时，没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数。

2. 借用构造函数

借用构造函数的技术，其基本思想为:

在子类型的构造函数中调用超类型构造函数。

 复制代码

functionSuperType(name) {
this.name =name;
this.colors = ['pink','blue','green'];
}
functionSubType(name) {
SuperType.call(this,name);
}
let instance1 =newSubType('Yvette');
instance1.colors.push('yellow');
console.log(instance1.colors);//['pink','blue','green', yellow]

let instance2 =newSubType('Jack');
console.log(instance2.colors); //['pink','blue','green']

优点:

• 可以向超类传递参数。

• 解决了原型中包含引用类型值被所有实例共享的问题。

缺点:

• 方法都在构造函数中定义，函数复用无从谈起，另外超类型原型中定义的方法对于子类型而言都是不可见的。

3. 组合继承 (原型链 + 借用构造函数)

组合继承指的是将原型链和借用构造函数技术组合到一块，从而发挥二者之长的一种继承模式。基本思路：

使用原型链实现对原型属性和方法的继承，通过借用构造函数来实现对实例属性的继承，既通过在原型上定义方法来实现了函数复用，又保证了每个实例都有自己的属性。

 复制代码

functionSuperType(name){
this.name = name;
this.colors = ['pink','blue','green'];
}
SuperType.prototype.sayName =function(){
console.log(this.name);
}
functionSuberType(name, age){
SuperType.call(this, name);
this.age = age;
}
SuberType.prototype =newSuperType();
SuberType.prototype.constructor = SuberType;
SuberType.prototype.sayAge =function(){
console.log(this.age);
}
letinstance1 =newSuberType('Yvette',20);
instance1.colors.push('yellow');
console.log(instance1.colors);//[ 'pink', 'blue', 'green', 'yellow' ]
instance1.sayName();//Yvette

letinstance2 =newSuberType('Jack',22);
console.log(instance2.colors);//[ 'pink', 'blue', 'green' ]
instance2.sayName();//Jack

缺点:

• 无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。

优点:

• 可以向超类传递参数。

• 每个实例都有自己的属性。

• 实现了函数复用。

4. 原型式继承

原型继承的基本思想：

借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。

 复制代码

functionobject(o){
functionF(){ }
F.prototype = o;
returnnewF();
}

在 object() 函数内部，先穿甲一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回了这个临时类型的一个新实例，从本质上讲， object() 对传入的对象执行了一次浅拷贝。

ECMAScript5 通过新增 Object.create() 方法规范了原型式继承。这个方法接收两个参数：一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象 (可以覆盖原型对象上的同名属性)，在传入一个参数的情况下， Object.create() 和 object() 方法的行为相同。

 复制代码

var person = {
name:'Yvette',
hobbies: ['reading','photography']
}
var person1 =Object.create(person);
person1.name ='Jack';
person1.hobbies.push('coding');
var person2 =Object.create(person);
person2.name ='Echo';
person2.hobbies.push('running');
console.log(person.hobbies);//['reading','photography','coding','running']
console.log(person1.hobbies);//['reading','photography','coding','running']

在没有必要创建构造函数，仅让一个对象与另一个对象保持相似的情况下，原型式继承是可以胜任的。

缺点:

• 同原型链实现继承一样，包含引用类型值的属性会被所有实例共享。

5. 寄生式继承

寄生式继承是与原型式继承紧密相关的一种思路。寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数，该函数在内部已某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象。

 复制代码

functioncreateAnother(original){
varclone= object(original);// 通过调用函数创建一个新对象
clone.sayHi =function(){// 以某种方式增强这个对象
console.log('hi');
};
returnclone;// 返回这个对象
}
varperson = {
name:'Yvette',
hobbies: ['reading','photography']
};

varperson2 = createAnother(person);
person2.sayHi();//hi

基于 person 返回了一个新对象 -—— person2 ，新对象不仅具有 person 的所有属性和方法，而且还有自己的 sayHi() 方法。在考虑对象而不是自定义类型和构造函数的情况下，寄生式继承也是一种有用的模式。

缺点：

• 使用寄生式继承来为对象添加函数，会由于不能做到函数复用而效率低下。

• 同原型链实现继承一样，包含引用类型值的属性会被所有实例共享。

6. 寄生组合式继承

所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法，基本思路：

不必为了指定子类型的原型而调用超类型的构造函数，我们需要的仅是超类型原型的一个副本，本质上就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下所示：

 复制代码

functioninheritPrototype(subType,superType){
var prototype = object(superType.prototype);// 创建对象
prototype.constructor = subType;// 增强对象
subType.prototype = prototype;// 指定对象
}

• 第一步：创建超类型原型的一个副本。

• 第二步：为创建的副本添加 constructor 属性。

• 第三步：将新创建的对象赋值给子类型的原型。

至此，我们就可以通过调用 inheritPrototype 来替换为子类型原型赋值的语句：

 复制代码

functionSuperType(name){
this.name = name;
this.colors =['pink', 'blue', 'green'];
}
//...code
functionSuberType(name,age){
SuperType.call(this, name);
this.age = age;
}
SuberType.prototype =newSuperType();
inheritPrototype(SuberType, SuperType);
//...code

优点:

只调用了一次超类构造函数，效率更高。避免在 SuberType.prototype 上面创建不必要的、多余的属性，与其同时，原型链还能保持不变。

因此寄生组合继承是引用类型最理性的继承范式。

10. 隐藏页面中的某个元素的方法有哪些？

隐藏类型

屏幕并不是唯一的输出机制，比如说屏幕上看不见的元素（隐藏的元素），其中一些依然能够被读屏软件阅读出来（因为读屏软件依赖于可访问性树来阐述）。为了消除它们之间的歧义，我们将其归为三大类：

• 完全隐藏：元素从渲染树中消失，不占据空间。

• 视觉上的隐藏：屏幕中不可见，占据空间。

• 语义上的隐藏：读屏软件不可读，但正常占据空。

完全隐藏

1. display 属性

 复制代码

display:none;

2.hidden 属性

HTML5 新增属性，相当于 display: none

 复制代码

视觉上的隐藏

1. 利用 position 和 盒模型 将元素移出可视区范围

• 设置 posoition 为 absolute 或 fixed ，通过设置 top 、 left 等值，将其移出可视区域。

 复制代码

position:absolute;
left: -99999px;

• 设置 position 为 relative ，通过设置 top 、 left 等值，将其移出可视区域。

 复制代码

position: relative;
left: -99999px;
height:0

• 设置 margin 值，将其移出可视区域范围（可视区域占位）。

 复制代码

margin-left: -99999px;
height:0;

2. 利用 transfrom

• 缩放

 复制代码

transform: scale(0);
height:0;

• 移动 translateX , translateY

 复制代码

transform: translateX(-99999px);
height:0

• 旋转 rotate

 复制代码

transform: rotateY(90deg);

3. 设置其大小为 0

• 宽高为 0，字体大小为 0：

 复制代码

height:0;
width:0;
font-size:0;

• 宽高为 0，超出隐藏:

 复制代码

height:0;
width:0;
overflow: hidden;

4. 设置透明度为 0

 复制代码

opacity:0;

5. visibility 属性

 复制代码

visibility: hidden;

6. 层级覆盖， z-index 属性

 复制代码

position:relative;
z-index:-999;

再设置一个层级较高的元素覆盖在此元素上。

7.clip-path 裁剪

 复制代码

clip-path: polygon(00,00,00,00);

语义上的隐藏

• aria-hidden 属性

读屏软件不可读，占据空间，可见。

 复制代码

consta =20;
constb = {
age:18,
star:500
}

functionfun3(){
console.log('fun3')
}

functionfun2(){
fun3();
}

functionfun1(){
fun2();
}

fun1();

// 全局执行上下文首先入栈
ECStack.push(globalContext);

// 执行 fun1();
ECStack.push( functionContext);

//fun1 中又调用了 fun2;
ECStack.push( functionContext);

//fun2 中又调用了 fun3;
ECStack.push( functionContext);

//fun3 执行完毕
ECStack.pop();

//fun2 执行完毕
ECStack.pop();

//fun1 执行完毕
ECStack.pop();

//javascript 继续顺序执行下面的代码，但 ECStack 底部始终有一个 全局上下文（globalContext）;

vara =10;
functionfn1(){
varb =20;
console.log(fn2)
functionfn2(){
a =20
}
returnfn2;
}
fn1()();

functiondebounce(func, wait, immediate = true){
let timeout, result;
// 延迟执行函数
constlater = (context, args) => setTimeout(() => {
timeout =null;// 倒计时结束
if(!immediate) {
// 执行回调
result = func.apply(context, args);
context = args =null;
}
}, wait);
let debounced =function(...params){
if(!timeout) {
timeout = later(this, params);
if(immediate) {
// 立即执行
result = func.apply(this, params);
}
}else{
clearTimeout(timeout);
// 函数在每个等待时延的结束被调用
timeout = later(this, params);
}
returnresult;
}
// 提供在外部清空定时器的方法
debounced.cancel =function(){
clearTimeout(timeout);
timeout =null;
};
returndebounced;
};

functionthrottle(func, wait, options = {}){
vartimeout, context, args, result;
varprevious =0;
varlater =function(){
previous = options.leading ===false?0: (Date.now() ||newDate().getTime());
timeout =null;
result = func.apply(context, args);
if(!timeout) context = args =null;
};

varthrottled =function(){
varnow =Date.now() ||newDate().getTime();
if(!previous && options.leading ===false) previous = now;
//remaining 为距离下次执行 func 的时间
//remaining > wait，表示客户端系统时间被调整过
varremaining = wait - (now - previous);
context =this;
args =arguments;
//remaining 小于等于 0，表示事件触发的间隔时间大于设置的 wait
if(remaining  wait) {
if(timeout) {
// 清空定时器
clearTimeout(timeout);
timeout =null;
}
// 重置 previous
previous = now;
// 执行函数
result = func.apply(context, args);
if(!timeout) context = args =null;
}elseif(!timeout && options.trailing !==false) {
timeout = setTimeout(later, remaining);
}
returnresult;
};

throttled.cancel =function(){
clearTimeout(timeout);
previous =0;
timeout = context = args =null;
};

returnthrottled;
}

functionfoo(){
vara =2;
returnfunctionfn(){
console.log(a);
}
}
letfunc = foo();
func();// 输出 2

functionbase(){
letx =10;// 私有变量
return{
getX:function(){
returnx;
}
}
}
letobj = base();
console.log(obj.getX());//10

vara = [];
for(vari =0; i <10; i++) {
a[i] = (function(j){
returnfunction(){
console.log(j);
}
})(i);
}
a6;// 6

functioncoolModule(){
letname ='Yvette';
letage =20;
functionsayName(){
console.log(name);
}
functionsayAge(){
console.log(age);
}
return{
sayName,
sayAge
}
}
letinfo = coolModule();
info.sayName();//'Yvette'

letp = Promise.all([p1,p2,p3]);

Promise.all =function(promises){
//promises 是可迭代对象，省略参数合法性检查
returnnewPromise((resolve, reject) =>{
//Array.from 将可迭代对象转换成数组
promises =Array.from(promises);
if(promises.length ===0) {
resolve([]);
}else{
letresult = [];
letindex =0;
for(leti =0; i {
result[i] = data;
if(++index === promises.length) {
// 所有的 promises 状态都是 fulfilled，promise.all 返回的实例才变成 fulfilled 态
resolve(result);
}
},err=>{
reject(err);
return;
});
}
}
});
}

flattenDeep([1, [2, [3, [4]],5]]);//[1, 2, 3, 4, 5]

function flattenDeep(arr, deepLength) {
return arr.flat(deepLength);
}
console.log(flattenDeep([1, [2, [3, [4]],5]],3));

function flattenDeep(arr) {
// 当然，大多时候我们并不会有这么多层级的嵌套
return arr.flat(Math.pow(2,53) -1);
}
console.log(flattenDeep([1, [2, [3, [4]],5]]));

functionflattenDeep(arr){
return arr.reduce((acc,val) =>Array.isArray(val)? acc.concat(flattenDeep(val)) : acc.concat(val),[]);
}
console.log(flattenDeep([1, [2, [3, [4]], 5]]));

function flattenDeep(input) {
conststack= [...input];
constres = [];
while(stack.length) {
// 使用 pop 从 stack 中取出并移除值
constnext =stack.pop();
if(Array.isArray(next)) {
// 使用 push 送回内层数组中的元素，不会改动原始输入 original input
stack.push(...next);
}else{
res.push(next);
}
}
// 使用 reverse 恢复原数组的顺序
returnres.reverse();
}
console.log(flattenDeep([1, [2, [3, [4]], 5]]));

uniq([1,2,3,5,3,2]);//[1, 2, 3, 5]

function uniq(arry){
return[...new Set(arry)];
}

function uniq(arry) {
varresult= [];
for(vari =0; i < arry.length; i++) {
if(result.indexOf(arry[i]) === -1) {
// 如result中没有 arry[i], 则添加到数组中
result.push(arry[i])
}
}
returnresult;
}

function uniq(arry) {
varresult= [];
for(vari =0; i < arry.length; i++) {
if(!result.includes(arry[i])) {
// 如result中没有 arry[i], 则添加到数组中
result.push(arry[i])
}
}
returnresult;
}

functionuniq(arry) {
returnarry.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}

function uniq(arry) {
letmap=newMap();
letresult =newArray();
for(leti =0; i < arry.length; i++) {
if(map.has(arry[i])) {
map.set(arry[i],true);
}else{
map.set(arry[i],false);
result.push(arry[i]);
}
}
returnresult;
}

letarry=[1,2,3,4];
letiter=arrySymbol.iterator;
console.log(iter.next());//{value:1,done:false}
console.log(iter.next());//{value:2,done:false}
console.log(iter.next());//{value:3,done:false}

functionjsonp({url, params, callback}){
returnnewPromise((resolve, reject) =>{
// 创建 script 标签
letscript =document.createElement('script');
// 将回调函数挂在 window 上
window[callback] =function(data){
resolve(data);
// 代码执行后，删除插入的 script 标签
document.body.removeChild(script);
}
// 回调函数加在请求地址上
params = {...params, callback}//wb=b&callback=show
letarrs = [];
for(letkeyinparams) {
arrs.push(`${key}=${params[key]}`);
}
script.src =`${url}?${arrs.join('&')}`;
document.body.appendChild(script);
});
}

functionshow(data){
console.log(data);
}
jsonp({
url:'http://localhost:3000/show',
params: {
//code
},
callback:'show'
}).then(data=>{
console.log(data);
});

//express 启动一个后台服务
letexpress =require('express');
letapp = express();

app.get('/show',(req, res) =>{
let{callback} = req.query;// 获取传来的 callback 函数名，callback 是 key
res.send(`${callback}('Hello!')`);
});
app.listen(3000);