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天前
|
Web App开发 JavaScript 前端开发
Ecmascript 和javascript的区别
Ecmascript 和javascript的区别
7 0
|
3天前
|
JavaScript 前端开发
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
JS中浅拷贝和深拷贝的区别,浅拷贝的危害
11 0
|
5天前
|
自然语言处理 JavaScript 前端开发
三个JavaScript面试题
摘要: - 闭包是JavaScript函数能记住词法作用域,即使在外部执行。示例:计数器函数`createCounter()`返回访问`count`的匿名函数,每次调用计数递增。 - 事件循环处理异步操作,通过检查任务队列执行回调。示例:`setTimeout`异步任务在3秒后添加到队列,待执行,输出顺序为同步任务1、2,然后异步任务1。 - 箭头函数是ES6简洁的函数定义方式,如`greet = name =&gt; `Hello, ${name}!`。它没有自己的`this`,不适用作构造函数。
25 6
|
12天前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?
|
12天前
|
存储 前端开发 JavaScript
【Web 前端】JS数据类型有哪些?区别?
【4月更文挑战第22天】【Web 前端】JS数据类型有哪些?区别?
|
12天前
|
JavaScript 前端开发 数据安全/隐私保护
【专栏】JavaScript中的`==`和`===`运算符有重要区别,本文将从三个部分详细探讨
【4月更文挑战第29天】JavaScript中的`==`和`===`运算符有重要区别。`==`进行类型转换后比较,而`===`不转换类型,要求完全相等。在比较对象时,`==`只比较引用,`===`比较内容。推荐使用`===`以确保准确性,但在需要类型转换时可谨慎使用`==`。注意特殊值如`null`和`undefined`的比较。在数据验证、类型判断和条件判断等场景中,应根据需求选择合适的运算符。理解两者差异能提升代码质量和稳定性。
|
12天前
|
JavaScript 前端开发
【专栏】Javascript 对象的深浅拷贝的区别以及如何实现它们
【4月更文挑战第29天】JavaScript中的对象拷贝分为浅拷贝和深拷贝。浅拷贝仅复制对象引用,修改拷贝会影响原始对象,如使用直接赋值、`Object.assign()`、扩展运算符和`Array.prototype.concat()`。深拷贝则创建独立副本,修改不影响原始对象,可通过递归、`JSON.stringify()`和`JSON.parse()`、Lodash的`cloneDeep()`或jQuery的`jQuery.extend()`实现。
|
13天前
|
存储 JavaScript 前端开发
每日一道javascript面试题(九)函数的参数可以和函数体中的变量重名吗
每日一道javascript面试题(九)函数的参数可以和函数体中的变量重名吗
|
13天前
|
存储 JavaScript 前端开发
每日一道javascript面试题(八)你真的知道了解const吗
每日一道javascript面试题(八)你真的知道了解const吗
|
13天前
|
JavaScript 前端开发
每日一道javascript面试题(七)你真的知道箭头函数吗
每日一道javascript面试题(七)你真的知道箭头函数吗