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。


目录
相关文章
|
6月前
|
存储 算法 架构师
阿里面试:PS+PO、CMS、G1、ZGC区别在哪?什么是卡表、记忆集、联合表?问懵了,尼恩来一个 图解+秒懂+史上最全的答案
阿里面试:PS+PO、CMS、G1、ZGC区别在哪?什么是卡表、记忆集、联合表?问懵了,尼恩来一个 图解+秒懂+史上最全的答案
|
9月前
|
JavaScript 前端开发 容器
this、self、window、top 在 JavaScript 中的区别深入研究
在 JavaScript 开发中,`this`、`self`、`window` 和 `top` 是四个常用的概念。`this` 指向当前执行上下文的对象,其值取决于函数调用方式;`self` 在全局作用域中等同于 `window`,常用于 Web Workers;`window` 代表浏览器窗口,是全局变量的容器;`top` 指向最顶层窗口,用于判断是否在框架中。理解这些概念有助于编写健壮的代码。
244 1
this、self、window、top 在 JavaScript 中的区别深入研究
|
7月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
Java 程序员 调度
Java 高级面试技巧:yield() 与 sleep() 方法的使用场景和区别
本文详细解析了 Java 中 `Thread` 类的 `yield()` 和 `sleep()` 方法,解释了它们的作用、区别及为什么是静态方法。`yield()` 让当前线程释放 CPU 时间片,给其他同等优先级线程运行机会,但不保证暂停;`sleep()` 则让线程进入休眠状态,指定时间后继续执行。两者都是静态方法,因为它们影响线程调度机制而非单一线程行为。这些知识点在面试中常被提及,掌握它们有助于更好地应对多线程编程问题。
347 9
|
9月前
|
安全 Java 程序员
Java面试必问!run() 和 start() 方法到底有啥区别?
在多线程编程中,run和 start方法常常让开发者感到困惑。为什么调用 start 才能启动线程,而直接调用 run只是普通方法调用?这篇文章将通过一个简单的例子,详细解析这两者的区别,帮助你在面试中脱颖而出,理解多线程背后的机制和原理。
355 12
|
9月前
|
编译器 Android开发 开发者
Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
Lambda表达式和匿名函数都是Kotlin中强大的特性,帮助开发者编写简洁而高效的代码。理解它们的区别和适用场景,有助于选择最合适的方式来解决问题。希望本文的详细讲解和示例能够帮助你在Kotlin开发中更好地运用这些特性。
154 9
|
10月前
|
Java
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
今日分享的主题是如何区分&和&&的区别,提高自身面试的能力。主要分为以下四部分。 1、自我面试经历 2、&amp和&amp&amp的不同之处 3、&对&&的不同用回答逻辑解释 4、彩蛋
|
11月前
|
Java 程序员
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
小米,29岁程序员,分享了一次面试经历,详细解析了Java中&和&&的区别及应用场景,展示了扎实的基础知识和良好的应变能力,最终成功获得Offer。
223 14