前端知识点汇总—面试看这一篇就够了 (2)

.call和.apply是立即执行的, .bind 返回函数的副本,但带有绑定上下文!它不是立即执行的。

const person = { name: 'Lydia' } function sayHi(age) { console.log(`${this.name} is ${age}`) } sayHi.call(person, 21) sayHi.bind(person, 21) 结果: Lydia is 21 function 请说明Function.prototype.bind的用法

摘自MDN:

bind()方法创建一个新的函数, 当被调用时,将其 this 关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。

根据我的经验,将this的值绑定到想要传递给其他函数的类的方法中是非常有用的。在 React 组件中经常这样做。

如何判断是否为空数组 var arr = []; if (Array.isArray(arr) && arr.length === 0) { console.log('是空数组'); } // Array.isArray是ES5提供的,如果不支持。用下面的方案。 if (!Array.isArray) { Array.isArray = function(arg) { return Object.prototype.toString.call(arg) === '[object Array]'; }; } 数组方法

map: 遍历数组,返回回调返回值组成的新数组

forEach: 无法break,可以用try/catch中throw new Error来停止

filter: 过滤

some: 有一项返回true,则整体为true

every: 有一项返回false,则整体为false

join: 通过指定连接符生成字符串

sort(fn) / reverse: 排序与反转,改变原数组

concat: 连接数组,不影响原数组, 浅拷贝

slice(start, end): 返回截断后的新数组,不改变原数组

splice(start, number, value...): 返回删除元素组成的数组,value 为插入项,改变原数组

indexOf / lastIndexOf(value, fromIndex): 查找数组项,返回对应的下标

reduce / reduceRight(fn(prev, cur), defaultPrev): 两两执行,prev 为上次化简函数的return值,cur 为当前值(从第二项开始)

数组乱序:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; arr.sort(function () { return Math.random() - 0.5; });

数组拆解:

// flat: [1,[2,3]] --> [1, 2, 3] Array.prototype.flat = function() { return this.toString().split(',').map(item => +item ) } push、pop、shift、unshift功能及返回值

push:添加新元素到数组末尾,返回数组长度

pop:移除数组最后一个元素,返回元素本身

unshift:添加新元素到数组开头,返回数组长度

shift:移除数组首个元素,返回元素本身

以上4种操作均会改变数组本身

.forEach和.map()循环的主要区别,使用场景举例

map用法:

let array = [1, 2, 3, 4, 5]; let newArray = array.map((item, i, arr) => { return item * 2; }); console.log("array:", array); // [1, 2, 3, 4, 5] console.log("newArray:", newArray); // [2, 4, 6, 8, 10] // 此处的array接受map方法运算之后的返回值 // 但是map方法并不能改变原来的数组

forEach用法:

let array = [1, 2, 3, 4, 5]; let newArray = array.forEach((item, i, arr) => { console.log('item:' + item + ', index:' + i); // array[i] = item * 2; // 可以用这种方式改变原始数组的值 }); console.log("array:", array); // [1, 2, 3, 4, 5] console.log("newArray:", newArray); // undefined // forEach方法没有返回值

能用forEach()做到的,map()同样可以。反过来也是如此。

map()会分配内存空间存储新数组并返回,forEach()不会返回数据。

forEach()允许callback更改原始数组的元素。map()返回新的数组。

JS执行对象查找时,永远不会去查找原型的函数是哪个? Object​.prototype​.has​OwnProperty()

如何将arguments转为数组

Array.prototype.slice.call(arguments)

[].slice.call(arguments)

对象的遍历方法

for循环

for (let property in obj) { console.log(property); }

但是,这还会遍历到它的继承属性,在使用之前,你需要加入obj.hasOwnProperty(property)检查。

Object.keys()

Object.keys(obj).forEach((property) => { ... })

Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组。

Object.getOwnPropertyNames()

Object.getOwnPropertyNames(obj).forEach((property) => { ... })

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括 Symbol 值作为名称的属性)组成的数组。

数组的遍历方法

for loops

for (let i = 0; i < arr.length; i++) { ... }

forEach

arr.forEach((item, index, arr) { ... })

map

arr.map((item, index, arr) => { ... })

匿名函数的典型应用场景

匿名函数可以在 IIFE 中使用,来封装局部作用域内的代码,以便其声明的变量不会暴露到全局作用域。

(function() { // 一些代码。 })();

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpxszg.html