JavaScript面试题6:1.遍历数组的方式；2.连续bind()多次,输出的值；3.new fn与new fn()的区别

文章目录

遍历数组的方式有哪些?

连续bind()多次,输出的值是什么?

new fn与new fn()有什么区别吗?

遍历数组的方式有哪些?

for

var arr = [1,2,3,4,5]

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

 console.log(arr[i])

}

1

2

3

4

forEach

对数组中的每一元素运行给定的函数,没有返回值，常用来遍历元素

var arr5 = [10,20,30]

var result5 = arr5.forEach((item,index,arr)=>{

   console.log(item)

})

console.log(result5)

/*

10

20

30

undefined   该方法没有返回值

*/

1

2

3

4

5

6

7

8

9

10

11

数组自带的foreach循环，使用频率较高，实际上性能比普通for循环弱

由于foreach是Array型自带的，对于一些非这种类型的，无法直接使用(如NodeList)，所以才有了这个变种，使用这个变种可以让类似的数组拥有foreach功能。

const nodes = document.querySelectorAll('div')

Array.prototype.forEach.call(nodes,(item,index,arr)=>{

 console.log(item)

})

1

2

3

4

for…in

任意顺序遍历一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。

一般常用来遍历对象，包括非整数类型的名称和继承的那些原型链上面的属性也能被遍历。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性就不能遍历了.

var arr = [1,2,3,4,5]

for(var i in arr){

 console.log(i,arr[i])

}  //这里的i是对象属性，也就是数组的下标

/**

0 1

1 2

2 3

3 4

4 5 **/

1

2

3

4

5

6

7

8

9

10

for…of（不能遍历对象）

在可迭代对象（具有 iterator 接口）（Array，Map，Set，String，arguments）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句，不能遍历对象

let arr=["11","22","33"];

for (let item of arr){

   console.log(item)

}

//遍历对象

let person={name:"aa",age:18,city:"上海"}

for(let item of Object.keys(person)){

   console.log(person[item])

}

// aa 18 上海

1

2

3

4

5

6

7

8

9

10

11

map

map: 只能遍历数组，不能中断，返回值是修改后的数组

let arr=[1,2,3];

const res = arr.map(item=>{

 return item+1

})

console.log(res) //[2,3,4]

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

1

2

3

4

5

6

7

every

对数组中的每一运行给定的函数，如果该函数对每一项都返回true,则该函数返回true

var arr = [10,30,25,64,18,3,9]

var result = arr.every((item,index,arr)=>{

     return item>3

})

console.log(result)  //false

1

2

3

4

5

some

对数组中的每一运行给定的函数，如果该函数有一项返回true,就返回true，所有项返回false才返回false

var arr2 = [10,20,32,45,36,94,75]

var result2 = arr2.some((item,index,arr)=>{

   return item<10

})

console.log(result2)  //false

1

2

3

4

5

reduce

reduce()方法对数组中的每个元素执行一个由你提供的reducer函数（升序执行），将其结果汇总为单个返回值

const array = [1,2,3,4]

const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4

console.log(array1.reduce(reducer));

1

2

3

4

5

filter

对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组

// filter  返回满足要求的数组项组成的新数组

var arr3 = [3,6,7,12,20,64,35]

var result3 = arr3.filter((item,index,arr)=>{

   return item > 3

})

console.log(result3)  //[6,7,12,20,64,35]

1

2

3

4

5

6

连续bind()多次,输出的值是什么?

var bar = function(){

   console.log(this.x);

}

var foo = {

   x:3

}

var sed = {

   x:4

}

var func = bar.bind(foo).bind(sed);

func(); //?

var fiv = {

   x:5

}

var func = bar.bind(foo).bind(sed).bind(fiv);

func(); //?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

两次都输出 3。

在Javascript中，多次 bind() 是无效的。

更深层次的原因， bind() 的实现，相当于使用函数在内部包了一个 call / apply ，第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的

new fn与new fn()有什么区别吗?

用 new 创建构造函数的实例时，通常情况下 new 的构造函数后面需要带括号（譬如：new Parent()）。

有些情况下new的构造函数后带括号和不带括号的情况一致，譬如：

function Parent(){

 this.num = 1;

}

console.log(new Parent());//输出Parent对象：{num:1}

console.log(new Parent);//输出Parent对象：{num:1}

1

2

3

4

5

但有些情况下new的构造函数后带括号和不带括号的情况并不一致，譬如：

function Parent(){

 this.num = 1;

}

console.log(new Parent().num);//1

console.log(new Parent.num);//报错

1

2

3

4

5

从报错信息来看，new Parent.num执行顺序是这样的：先执行Parent.num，此时返回结果为undefined；后执行new，因new后面必须跟构造函数，所以new undefined会报错。

new Parent().num相当于(new Parent()).num，所以结果返回1。