牛客网刷题总结+数组面试题整理【JS数组】

数组面试题JavaScript、ES6 高频重点面试题 | arry老师的博客-艾编程

1、你知道 JS 数组有哪些方法 ？（同花顺，阿里、自如、网易）

pop（末尾删除）     push(末尾添加）          shift（首部删除）       unshift（首部添加）

sort（排序）            reverse（翻转）

join（连接）             tostring（转为字符串）

contact（连接）

splice（删除或替换）

slice（截取）

不改变原数组的方法：join，toString，contact，slice（截取）、forEach、map、filter

2、数组去重的方式有哪些？时间复杂度分别是多少？（同花顺、阿里、字节、百度）

数组去重 1.用set 2.用两层for循环+splice 3.利用indexof？？+push

3、将数组的length设置为 0，取第一个元素会返回什么？（同花顺）

undefined？

 arr1 = []
 console.log(arr1[0]);//undefined

4、 代码题 ：用尽可能多的方法实现数组扁平化（同花顺）

 法1.用ES6新语法 arr.flat

 <script>
        arr = [
            [1, 2, 2],
            [6, 7, 8],
            [11, 12, [12, 13, [14]]], 10
        ]
        console.log(arr.flat());
        console.log(arr.flat(1));//扁平化1级
        console.log(arr.flat(2));//扁平化2级
        console.log(arr.flat(3));//扁平化3级
        console.log(arr.flat(Infinity));//扁平化无限级
</script>

法2.转换为字符串

5、 什么是类数组 ？（百度）

JS中类数组主要分为这两类：

• 函数参数对象arguments，箭头函数没有arguments参数

function fn() {
    console.log(arguments);
}
fn()

• 
• 利用querySelectorAll、getElementsByName获取到的NodeList
• 利用getElementsByTagName、getElementsByClassName获取到的HTMLCollection

html内容：

<ul id="ul">
  <li name="li" class="li">11</li>
  <li name="li" class="li">22</li>
  <li name="li" class="li">33</li>
</ul>

四种类数组的获取方式：

document.querySelectorAll("li");
document.getElementsByTagName('li');
document.getElementsByClassName('li');
document.getElementsByName('li');

类数组&&数组

以arguments为类数组代表和Array进行对比

类数组：

function fn() {
  console.log(arguments); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ] 
  console.log(arguments.length); // 2
  console.log(typeof arguments); // object
  console.log(Object.prototype.toString.call(arguments)); // [object Arguments]
}

fn(1, 2);

数组：

const arr = [1, 2];
console.log(arr); // (2) [1, 2]
console.log(arr.length); // 2
console.log(typeof arr); // object
console.log(Object.prototype.toString.call(arr)); // [object Array]

通过上述打印可以看到类数组和数组的共同点和差异：

共同点：

都具备length属性，可以获取其元素个数

差异：

1. 类数组上明显多了一个callee属性，数组上并不存在
2. 类数组不能调用数组的方法

3. 

   链接：https://juejin.cn/post/7017997007352496136

6、类数组怎么转换为数组，说说你知道的所有方法 （阿里）

1. 使用call、apply改变this指向来调用数组的方法

function fn() {
	console.log(Array.prototype.slice.call(arguments)); // [1, 2]
}

fn(1, 2);
复制代码

首先借用数组的slice函数，返回的就是一个真正的数组

2.  Array.from，利用数组自带的from函数将类数组转换为数组

cosnt arr = Array.from(arguments);

其返回一个数组

3.  扩展运算符，可以如下使用：

const arr = [...arguments]

也可以直接在函数接受参数时使用：

function fn(...args) {}

此时在函数内部args就是一个数组了

JS 类数组转数组的几种方法（四种）_雪急飞绪的博客-CSDN博客_js类数组转数组

7、arguments 类数组，如何遍历类数组（滴滴）

8、 判断数组的方式（小米）

Array.isArray()

9、新创建一个数组空间（小米）

10、用过 ES6 哪些数组的方法，简述他们的特性（小米）

11、数组中的方法如何实现 break（滴滴）

12、比较常用的数组方法 map() reduce() find() findIndex() push() .... 哪些可以改变原数组，哪些不可以改变（滴滴）

13、JS 中 filter 方法如何使用 ？（小米）

一、创建数组的方式

1.使用Array构造函数

var color=new Array();    

注意：括号里面参数可以有参数，

若为一个数字，表示该数组的长度；

如果为多个数字或者一个（多个）非数字表示的是传递数组中应该包含的值。

2.使用数组字面量

var color=[];

关于数组长度的两个例题

例题1.有如下代码片段,请问 a.length 的值是多少?   6

var a=[];
a[0]=1;
a[1]=2;
a[2]=3;
a[5]=4;

 数组长度会自动延长到最后一个被赋值的位置，中间没有被赋值的都为 undefined

例题2

var arr = [];
arr[0] = 0;
arr[1] = 1;
arr.foo = 'c';
console.log(arr.length);  //2 

 二、数组方法

1.增删方法

方法	说明	返回值
push(参数1,...)	末尾添加一个或多个元素	返回新的长度
pop()	用于删除并返回数组的最后一个元素，无参数	返回删除的元素值
shift()	删除数组的第一个元素	返回删除的元素值，即第一个元素
unshift()	在数组开头添加一个或多个元素	返回新的长度

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());  // 输出结果为: "tomato"
console.log(plants.pop('2')); //kale


console.log(plants);
// 此时的数组: ["broccoli", "cauliflower", "cabbage", "kale"]


var a =[1,2,3];
var b = a.slice();
b.push(4);
console.log(a)
// [1,2,3]


arr = [1, 2, 3]
newArr = arr.push(5)
console.log(newArr);
// 4

注意：pop（）里面没有参数，及时有参数，也是删除最后一项

2.排序方法 

sort()	数组元素进行排序	改变原数组，返回新数组
reverse()	颠倒数组中元素的顺序	改变原数组，返回新数组

注意：

arr.sort((a,b)=>b-a);
console.log(arr);

是降序排序

arr = [1, 2, 3, 4, 5]
console.log(arr.reverse());//[5,4,3,2,1]
console.log(arr);//[5,4,3,2,1]

 3、数组索引方法 

indexOf(）	数组中查找给定元素的第一个索引	如果存在返回索引号，不存在返回-1
lastIndexOf()	在数组中的最后一个索引号	如果存在返回索引号，不存在返回-1

4.数组转换为字符串

join()	把数组用字符串拼接	不影响原数组
toString()	数组转换为字符串	不影响原数组

arr = ['green', 'blue', 'red']
console.log(arr.join('-'));//green-blue-red
console.log(arr);//(3) ['green', 'blue', 'red']

console.log(arr.toString());//green,blue,red,用逗号隔开

5.其他方法  

concat()	用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本	返回一个新数组，不影响原数组
slice()	截取数组的的一部分	返回一个新数组，不影响原数组
splice()	通过删除、替换现有元素、原地添加新的元素来修改数组,并以数组形式返回被修改的内容	返回新数组，会改变原数组

slice（参数1，参数2）

• 参数1： 切割的起始位置，包含该元素
• 参数2：切割的结束位置，不包含该元素
• 如果只传一个参数，从这个位置截取到最后

• <script>
          arr = ["A", "B", "C", "D", "E"]
          newArr = arr.slice(2, 4)
          console.log(newArr); //["C", "D"]
          console.log(arr);//["A", "B", "C", "D", "E"]
  </script>

splice（参数1，参数2，参数2）

• 参数1：第几个开始
• 参数2：要删除的个数
• 参数3：删除位置的替补元素

当只有两个参数的时候

<script>
        arr = [1, 2, 3, 4, 5]
        arr1 = arr.splice(2, 2)
            //删除第第二个元素后的3个数组元素
        console.log(arr); //[1,2,5]
        console.log(arr); //[3,4]
 </script>

  <script>
        arr = [1, 2, 3, 4, 5]
      

        arr2 = arr.splice(2, 0, 'A', 'B')
        console.log(arr); // [1, 2, 'A', 'B', 3, 4, 5]
        console.log(arr2); //[]
  </script>

6.遍历数组

6.1 forEach()  用法

arr.foreach(function(currentValue,index,arr){}, thisValue)

1.该方法有三个参数，第一个参数为回调函数，必传

2.currentValue：必需，当前元素

3. index：可选，当前元素的索引值

4.arr: 可选，当前元素所属的数组对象

注意：

1. 不改变原数组，也没有返回值

2. forEach无法使用break，continue跳出循环

3. 使用return时，效果和在for循环中使用continue一致

4. forEach方法无法遍历对象

      var arr = [1, 2, 3];
        var sum = 0;
        arr.forEach(function(value, index, array) {
            console.log('每一个数组元素' + value);
            console.log('每一个数组元素的索引号' + index);
            console.log('每一个数组本身' + array);
            sum += value;
        })
        console.log(sum);

例题

let i = 0;
new Array(10).forEach(() => {
  i++;
});

输出值为0

new Array(10) 只是放了10个占位符，里面其实是空的，所以，forEach方法在数组元素为空时会跳过执行回调函数，相当于此选项回调函数并未执行，所以还是输出0

6.2 filter()

对数组的每一项运行给定函数，返回该函数会返回true的项组成的数组（筛选出符合条件的）

不会对空数组进行检测

不改变原数组

      var arr = [12, 66, 3, 88];
        var newArr = arr.filter(function(value, index) {
            //return value >= 20;
            return value % 2 === 0
        })
        console.log(arr); //[12, 66, 3, 88]
        console.log(newArr);//[12, 66, 88]

6.3 map()

对数组的每一项运行给定函数，返回每次函数调用结果所组成的数组

arr.map()会对数组中每个元素进行单独判断，返回true或者false

1. 不会对空数组进行检测

2. 返回一个新数组，不会改变原始数组

3.map方法有返回值，可以return出来，map的回调函数中支持return返回值

4. map方法无法遍历对象，仅适用于数组的遍历

 以下代码执行后，array 的结果是？

let array = [,1,,2,,3];
array = array.map((i) => ++i)

[,2,,3,,4]

• ES5
• forEach(), filter(), reduce(), every() 和some()都会跳过空位。
• map()会跳过空位，但会保留这个值
• join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。
• ES6 中都会将空位当做undefined

 let arr = [1, 2, 3]
 let arr1 = ['a', 'b', 'c']
 newarr1 = arr.map(function(e) {
            return this[e]
  }, arr1)
  console.log(newarr1); //['a', 'b', 'c']

  newarr2 = arr.map(item => {
            return item + 1
  })
  console.log(newarr2); //[2,3,4]

//可以链式调用
  newarr2 = arr.map(item => item + 1).map(item => item + 1)
  console.log(newarr2);//[3,4,5]

 6.4 every()

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

6.5 some()

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

例题：

//已知数组arr = [2,20,3,12,9]，现在要对数组进行遍历，只要数组存在大于10的元素，则输出true，
//否则输出false，则下列选项中，符合要求的是（）
arr  =   [2, 20, 3, 12, 9]
var res = arr.filter((val1, val2) => {
       return val1 > 10
})
console.log(res);

var res1 = arr.map((val1, val2) => {
       return val1 > 10
 })
 console.log(res1);

 var res2 = arr.every((val1, val2) => {
      return val1 > 10
 })
 console.log(res2);

 var res3 = arr.some((val1, val2) => {
          return val1 > 10
  })
 console.log(res3);

 reduce的用法
数组中的reduce方法可以用于数组求和，其中第一个参数是每次累加后的值，第二个参数是每次遍历的元素

[1,2,-3].reduce((a, b) => a - b, 0) 的值为：

函数 Math.max(x);的参数是Number类型，可以是小数，整数，正数，负数或者是0.如果不是上面所述类型就会返回NaN.

因为Math.max 参数里面只支持Math.max(param1,param2,param3…),所以可以根据刚才apply的这一特点来解决 
1 var max = Math.max.apply(null,array) === Math.max(param1,param2,param3…); 
这样轻易的可以得到一个数组中最大的一项(apply会将一个数组装换为一个参数接一个参数的传递给方法)

例题

在前提：var arr=[1,3,2]下，下面哪个操作会返回一个数组，并且不是arr        C

A. arr.push(3)

B. arr.reverse()

C. [ ].concat.call(arr,[ ])

D. [ ].sort.call(arr)

        arr = [1, 3, 2]

        console.log(arr.push(3)); //4

        arr = [1, 3, 2]

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

        arr = [1, 3, 2]

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

        arr = [1, 3, 2]

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

 因为concat操作不会改变现有的数组，而仅仅会返回被连接数组的一个副本

for of 和for in的区别？什么叫做可迭代？

for..in语句能够枚举对象的自定义属性和原型链属性,for in 的特点
1) for ... in 循环返回的值都是数据结构的键值名。
2) 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
3) for ... in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。
4) 特别情况下, for ... in 循环会以任意的顺序遍历键名
总结一句: for in 循环特别适合遍历对象

for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合,for of 特点
1) for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名
2) 一个数据结构只要部署了 Symbol.iterator 属性, 就被视为具有 iterator接口, 就可以使用 for of循环。
例1这个对象,没有 Symbol.iterator这个属性,所以使用 for of会报 obj is not iterable
for of 不同与 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环。提供了遍历所有数据结构的统一接口

for in 和 for of的区别详解

hasOwnProperty只能获取自定义的属性

是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。