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

简介: 从报错信息来看,new Parent.num执行顺序是这样的:先执行Parent.num,此时返回结果为undefined;后执行new,因new后面必须跟构造函数,所以new undefined会报错。new Parent().num相当于(new Parent()).num,所以结果返回1。

文章目录

遍历数组的方式有哪些?

连续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。


目录
相关文章
|
18天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
37 5
|
18天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
19 7
|
22天前
|
JavaScript 前端开发
JS require 与 import 的区别
JS require 与 import 的区别
15 1
|
30天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
21 2
|
4天前
|
算法
Swiper库和Glide.js库的性能有何区别
Swiper和Glide.js是两个流行的响应式轮播图库。Swiper功能强大且灵活,支持多方向滑动,拥有丰富的配置和切换效果,适合复杂需求,其高性能得益于优化的算法和惰性加载。Glide.js则轻量级、快速,专注于基础功能,适合简洁需求。两者各有侧重,选择应基于项目具体需求和性能考虑。
|
7天前
|
JavaScript 前端开发 测试技术
「一劳永逸」送你21道高频JavaScript手写面试题(上)
「一劳永逸」送你21道高频JavaScript手写面试题
32 0
|
8天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
12 0
|
11天前
|
JavaScript 前端开发
JQuery和JS的区别有哪些?
JQuery和JS的区别有哪些?
11 0
|
11天前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
17 1
|
14天前
|
JavaScript 前端开发 算法
JavaScript 中前置自增与后置自增:区别、应用场景
【4月更文挑战第6天】JavaScript中的前置自增`++a`先增后用,返回新值,适合复合赋值和循环计数;后置自增`a++`先用后增,返回原值,适用于保留变量原值的操作。二者差异在于运算时机和返回值,选择时要考虑递增时机和表达式中使用的值。在复杂表达式中应避免混用,注重代码清晰度和一致性。理解这些差异能提高代码效率,避免逻辑错误。
17 1