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。


目录
相关文章
|
1月前
|
JSON JavaScript 前端开发
Javascript基础 86个面试题汇总 (附答案)
该文章汇总了JavaScript的基础面试题及其答案,涵盖了JavaScript的核心概念、特性以及常见的面试问题。
40 3
|
1月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
1月前
|
Android开发 Kotlin
Android经典面试题之Kotlin的==和===有什么区别?
本文介绍了 Kotlin 中 `==` 和 `===` 操作符的区别:`==` 用于比较值是否相等,而 `===` 用于检查对象身份。对于基本类型,两者行为相似;对于对象引用,`==` 比较值相等性,`===` 检查引用是否指向同一实例。此外,还列举了其他常用比较操作符及其应用场景。
181 93
|
4天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
11 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
10天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
11 2
|
19天前
|
编译器
经典面试题:变量的声明和定义有什么区别
在编程领域,变量的“声明”与“定义”是经典面试题之一。声明告诉编译器一个变量的存在,但不分配内存,通常包含变量类型和名称;而定义则为变量分配内存空间,一个变量必须至少被定义一次。简而言之,声明是告知变量形式,定义则是实际创建变量并准备使用。
|
18天前
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
54 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
21天前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
19 3
|
1月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
5天前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题