经典面试题数组常用的方法

简介: ### 1.数组常用方法之 push()(==改变原数组,产生新数组==)- `push` 是用来在数组的末尾追加一个元素,返回添加以后的长度 ```javascript var arr = [1, 2, 3] // 使用 push 方法追加一个元素在末尾 arr.push(4) console.log(arr) // [1, 2, 3, 4] var res = arr.push(1,2,3,34); res//8 ```### 2.数组常用方法之 pop()(==改变原数组,产生新数组==)- `po

1.数组常用方法之 push()(==改变原数组,产生新数组==)

  • push 是用来在数组的末尾追加一个元素,返回添加以后的长度

var arr = [1, 2, 3]

// 使用 push 方法追加一个元素在末尾

arr.push(4)

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

var res = arr.push(1,2,3,34);

res//8  

2.数组常用方法之 pop()(==改变原数组,产生新数组==)

  • pop 是用来删除数组末尾的一个元素,返回删除的元素

var arr = [1, 2, 3]

// 使用 pop 方法删除末尾的一个元素

var res = arr.pop()

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

3.数组常用方法之 unshift()(==改变原数组,产生新数组==)

  • unshift 是在数组的最前面添加一个元素

var arr = [1, 2, 3]

// 使用 unshift 方法想数组的最前面添加一个元素

arr.unshift(4)

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

4.数组常用方法之  shift()(==改变原数组,产生新数组==)

  • shift 是删除数组最前面的一个元素

var arr = [1, 2, 3]

// 使用 shift 方法删除数组最前面的一个元素

arr.shift()

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

5.数组常用方法之 splice(==改变原数组==)

  • splice 是截取数组中的某些内容,按照数组的索引来截取
  • 语法: splice(从哪一个索引位置开始,截取多少个,替换的新元素) (第三个参数可以不写)

var arr = [1, 2, 3, 4, 5]

// 使用 splice 方法截取数组

var res = arr.splice(1, 2)

console.log(arr) // [1, 4, 5]

console.log(res)//[2,3]

 - `arr.splice(1, 2)` 表示从索引 1 开始截取 2 个内容

- 第三个参数没有写,就是没有新内容替换掉截取位置

 

 ```javascript

 var arr = [1, 2, 3, 4, 5]

 

 // 使用 splice 方法截取数组

 arr.splice(1, 2, '我是新内容')

 

 console.log(arr) // [1, '我是新内容', 4, 5]

 

 1)、删除元素,并返回删除的元素

可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。例如, splice(0,2)会删除数组中的前两项。

var arr = [1,3,5,7,9,11];

var arrRemoved = arr.splice(0,2);

console.log(arr); //[5, 7, 9, 11]

console.log(arrRemoved); //[1, 3]

2)、向指定索引处添加元素

可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入 4 和 6。

var array1 = [22, 3, 31, 12];

array1.splice(1, 0, 12, 35); //[]

console.log(array1); // [22, 12, 35, 3, 31, 12]

3)、替换指定索引位置的元素

可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入 4 和 6。

const array1 = [22, 3, 31, 12];

array1.splice(1, 1, 8); //[3]

console.log(array1); // [22, 8, 31, 12] 作者:物理达人Physics侯老师 https://www.bilibili.com/read/cv9715493/ 出处:bilibili

  • arr.splice(1, 2, '我是新内容') 表示从索引 1 开始截取 2 个内容
  • 然后用第三个参数把截取完空出来的位置填充

6.数组常用方法之 reverse(==改变原数组,产生新数组==)

  • reverse 是用来反转数组使用的

var arr = [1, 2, 3]

// 使用 reverse 方法来反转数组

arr.reverse()

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

7.数组常用方法之 sort(==改变原数组,产生新数组==)  

  • sort 是用来给数组排序的(默认按照字典排序  先按==照第一位排序-==如果第一位相等就按照第二位)

var arr = [2, 3, 1]

// 使用 sort 方法给数组排序

arr.sort()

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

  • 这个只是一个基本的简单用法

// 升序

       arr4.sort(function (a, b) {

           return a - b

       })

       // 降序

       arr4.sort(function (a, b) {

           return b - a

       })

       let arr5 = [{

               username: 'zhangsan',

               age: 19

           },

           {

               username: 'lisi',

               age: 10

           },

       ]

       // 按照对象的年龄 降序  

       // a ,b  数组的元素

       arr5.sort(function (a, b) {

           return b.age - a.age

       })

8.数组常用方法之 concat(==不====改变原数组==)

  • concat 是把多个数组进行拼接
  • 和之前的方法有一些不一样的地方,就是 concat ==不会改变原始数组,而是返回一个新的数组==

var arr = [1, 2, 3]

// 使用 concat 方法拼接数组

var newArr = arr.concat([4, 5, 6])

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

console.log(newArr) // [1, 2, 3, 4, 5, 6]

  • 注意: ==concat 方法不会改变原始数组==

9.数组常用方法之 join==(不会改变原始数组,而是把链接好的字符串返回)==

  • join 是把数组里面的每一项内容链接起来,变成一个字符串
  • 可以自己定义每一项之间链接的内容 join(要以什么内容链接)默认使用逗号作为分隔符
  • 不会改变原始数组,而是把链接好的字符串返回

var arr = [1, 2, 3]

// 使用 join 链接数组

var str = arr.join('-')

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

console.log(str) // 1-2-3

  • 注意: join 方法不会改变原始数组,而是返回链接好的字符串

10.slice  复制数组的一部分 ==(不改变原始数组,返回一个新的数组)==

     

           var arr9 = [9,8,7,6,5,4,3,2];

           // 参数 两个  开始位置  结束位置,不包含结束位置,不改变原数组

           var res9 = arr9.slice(1,3)

           console.log(res9)//[8, 7]

           

           // 第二个参数不传入,复制到最后

           console.log(arr9.slice(1))//[8, 7, 6, 5, 4, 3, 2]

           

           // 如果传入负数,倒着数位置,最后一个是 -1

           console.log(arr9.slice(1,-2))// [8, 7, 6, 5, 4]

   

注:

如果之只传入一个大于数组长度的参数,则返回一个空数组

无论是如何提取数组元素,原数组始终保持不变

ES5 中常见的数组常用方法

11.indexOf

接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。

indexOf():从数组的开头(位置 0)开始向后查找。

lastIndexOf:从数组的末尾开始向前查找。

这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时,会使用全等操作符。

  • indexOf 用来找到数组中某一项的索引
  • 语法: indexOf(你要找的数组中的项)

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项

var index = arr.indexOf(3)

console.log(index) // 2

  • 我们要找的是数组中值为 3 的那一项
  • 返回的就是值为 3 的那一项在该数组中的索引
  • 如果你要找的内容在数组中没有,那么就会返回 -1

var arr = [1, 2, 3, 4, 5]

// 使用 indexOf 超找数组中的某一项

var index = arr.indexOf(10)

console.log(index) // -1

  • 你要找的值在数组中不存在,那么就会返回 -1

12.forEach

  • for 循环一个作用,就是用来遍历数组的
  • 这个方法没有返回值。参数都是 function 类型,默认有传
  • 语法:arr.forEach(function (item, index, arr) {})

var arr = [1, 2, 3]

// 使用 forEach 遍历数组

arr.forEach(function (item, index, arr) {

 // item 就是数组中的每一项

 // index 就是数组的索引

 // arr 就是原始数组

 console.log('数组的第 ' + index + ' 项的值是 ' + item + ',原始数组是', arr)

})

  • forEach() 的时候传递的那个函数,会根据数组的长度执行
  • 数组的长度是多少,这个函数就会执行多少回

13.map ==(不改变原数组,返回新数组)==

  • forEach 类似,只不过可以对数组中的每一项进行操作,==返回一个新的数组==

var arr = [1, 2, 3]

// 使用 map 遍历数组

var newArr = arr.map(function (item, index, arr) {

 // item 就是数组中的每一项

 // index 就是数组的索引

 // arr 就是原始数组

 return item + 10

})

console.log(newArr) // [11, 12, 13]

14.filter==(不改变原数组,返回新增数组)==

  • map 的使用方式类似,按照我们的条件来筛选数组
  • 把原始数组中满足条件的筛选出来,组成一个新的数组返回

var arr = [1, 2, 3]

// 使用 filter 过滤数组

var newArr = arr.filter(function (item, nindex, arr) {

 // item 就是数组中的每一项

 // index 就是数组的索引

 // arr 就是原始数组

 return item > 1

})

console.log(newArr) // [2, 3]

  • 我们设置的条件就是 > 1
  • 返回的新数组就会是原始数组中所有 > 1 的项
  • 15.every 返回布尔值
    判断 是否数组所有的元素都满足条件

let flag =  arr.every(function(item,index,arr){

       return 条件

})

let res4 = arr4.every(function (v) {

           return v >= 18

 })

console.log(res4);

16.some  返回布尔值

判断是否数组有一些元素满足条件

let flag =  arr.some(function(item,index,arr){

       return 条件

})

 

let res5 = arr4.some(function (v) {

           return v >= 18

       })

       console.log(res5);//true

17.find

查找数组中第一个满足条件的元素

       var arr6 = [10, 19, 17, 20];

       let res6 = arr6.find(function (v, i) {

           return v === 19

       })

       console.log(res6);

       var arr7 = [{ id: 1, name: 'zs' }, { id: 2, name: 'lisi' }];

       var obj = arr7.find(function (v) {

           return v.id == 2

       })

       console.log(obj);

       console.log(obj.name);

18.findIndex

查找数组中第一个满足条件的元素的下标

var res7 = arr7.findIndex(function (v) {

           return v.id == 2

})

console.log(res7);

19.reduce  

let res8 = arr8.reduce(function (a, b) {

           console.log(a, b);

           //a 第一次是 数组中第一个元素

           //10+19 =29

           // 然后几次 就是前面 数字的和

           //a = 29  

           // b 17  

           return a + b;

       })

       console.log(res8);

       let res9 = arr8.reduce(function (a, b) {

           console.log(a, b);

           //a 是累积变量  ,1000就是累积变量的初始值

           // b 是数组的元素

           return a + b;

       }, 1000)

       console.log(res9);

20.fill() es6 新增 ==(会改变原数组)==

fill()方法能使用特定值填充数组中的一个或多个元素。当只是用一个参数时,该方法会用该参数的值填充整个数组。

let arr = [1, 2, 3,  cc , 5];

arr.fill(1);

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

如果不想改变数组中的所有元素,而只是想改变其中一部分,那么可以使用可选的起始位置参数与结束位置参数(不包括结束位置的那个元素)

3 个参数: 填充数值,起始位置参数,结束位置参数(不包括结束位置的那个元素)

let arr = [1, 2, 3,  arr , 5];

arr.fill(1, 2);

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

arr.fill(0, 1, 3);

console.log(arr);//[1,0,0,1,1];

21.includes()   es7 新增,返回布尔值

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则 false。

参数有两个,其中第一个是(必填)需要查找的元素值,第二个是(可选)开始查找元素的位置

const array1 = [22, 3, 31, 12,  arr ];

const includes = array1.includes(31);

console.log(includes); // true

const includes1 = array1.includes(31, 3); // 从索引3开始查找31是否存在

console.log(includes1); // false

需要注意的是:includes使用===运算符来进行值比较,仅有一个例外:NaN 被认为与自身相等。

let values = [1, NaN, 2];

console.log(values.indexOf(NaN));//-1

console.log(values.includes(NaN));//true

22.toLocaleString() 和 toString()

将数组转换为字符串

const array1 = [22, 3, 31, 12];

const str = array1.toLocaleString();

const str1 = array1.toString();

console.log(str); // 22,3,31,12

console.log(str1); // 22,3,31,12

23.copyWithin() [es6 新增]==(该方法会改变现有数组)==

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

//将数组的前两个元素复制到数组的最后两个位置

let arr = [1, 2, 3,  arr , 5];

arr.copyWithin(3, 0);

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

默认情况下,copyWithin()方法总是会一直复制到数组末尾,不过你还可以提供一个可选参数来限制到底有多少元素会被覆盖。这第三个参数指定了复制停止的位置(不包含该位置本身)。

let arr = [1, 2, 3,  arr , 5, 9, 17];

//从索引3的位置开始粘贴

//从索引0的位置开始复制

//遇到索引3时停止复制

arr.copyWithin(3, 0, 3);

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

24.flat() 和 flatMap() es6 新增(==该方法返回一个新数组,不改变原数组。)==

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

该方法返回一个新数组,对原数据没有影响。

参数: 指定要提取嵌套数组的结构深度,默认值为 1。

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());

// expected output: [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];

console.log(arr2.flat(2));

// expected output: [0, 1, 2, [3, 4]]

//使用 Infinity,可展开任意深度的嵌套数组

var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];

arr4.flat(Infinity);

// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 扁平化数组空项,如果原数组有空位,flat()方法会跳过空位

var arr4 = [1, 2, , 4, 5];

arr4.flat();

// [1, 2, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。

该方法返回一个新数组,不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()

[2, 3, 4].flatMap((x) => [x, x * 2])

// [2, 4, 3, 6, 4, 8]

25、 entries(),keys() 和 values() 【ES6】

entries(),keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历
区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

for (let index of [ a ,  b ].keys()) {

console.log(index);  

}  

// 0  

// 1  

for (let elem of [ a ,  b ].values()) {  

console.log(elem);

}  

//  a  

//  b  

for (let [index, elem] of [ a ,  b ].entries()) {  

console.log(index, elem);

}

// 0 "a"

// 1 "b"

如果不使用for...of循环,可以手动调用遍历器对象的next方法,进行遍历。

let letter = [ a ,  b ,  c ];  

let entries = letter.entries();

console.log(entries.next().value); // [0,  a ]  

console.log(entries.next().value); // [1,  b ]  

console.log(entries.next().value); // [2,  c ]

JS 如何终止 forEach 循环 break 报错,return 跳不出循环

  • 终止 forEach 可以使用 try catch 内部抛出错误,catch 捕获错误。

let arr = [1, 2, 3]

try {

 arr.forEach(item => {

   if (item === 2) {

     throw('循环终止')

   }

   console.log(item)

 })

} catch(e) {

 console.log('e: ', e)

}

复制代码

当然我们大可以用其他方法代替

  • Array.prototype.some
    当 return true 的时候,会终止遍历
  • Array.prototype.every
    当 return false 的时候,会终止遍历


相关文章
|
12天前
|
算法
【数组相关面试题】LeetCode试题
【数组相关面试题】LeetCode试题
|
12天前
|
存储
力扣面试经典题之数组/字符串
力扣面试经典题之数组/字符串
27 0
|
12天前
|
算法 前端开发
经典面试题:扁平化嵌套数组
经典面试题:扁平化嵌套数组
24 0
|
12天前
|
存储 JavaScript 前端开发
【面试题】JS的14种去重方法,看看你知道多少(包含数组对象去重)
【面试题】JS的14种去重方法,看看你知道多少(包含数组对象去重)
|
12天前
|
前端开发 JavaScript Java
【面试题】说说 JavaScript数组常见的操作 (20个)
【面试题】说说 JavaScript数组常见的操作 (20个)
|
5天前
|
C++
【一刷《剑指Offer》】面试题 14:调整数组顺序使奇数位于偶数前面
【一刷《剑指Offer》】面试题 14:调整数组顺序使奇数位于偶数前面
|
5天前
|
算法 C++
【一刷《剑指Offer》】面试题 8:旋转数组的最小数字
【一刷《剑指Offer》】面试题 8:旋转数组的最小数字
|
12天前
|
算法 C++ 索引
【力扣经典面试题】238. 除自身以外数组的乘积
【力扣经典面试题】238. 除自身以外数组的乘积
|
12天前
|
机器学习/深度学习 算法
【力扣经典面试题】189. 轮转数组
【力扣经典面试题】189. 轮转数组
|
12天前
|
算法 测试技术 索引
力扣面试经典题之数组/字符串(二)
力扣面试经典题之数组/字符串(二)
15 0