2024年最新Vue进阶（八十）：ES 数组操作常用方法_es array vue，2024年最新2024最新前端中级面试题目汇总解答

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

delete删除掉数组元素后，会把该下标处的值置为undefined,数组的长度不会变如：delete arr[1] //[‘a‘, ,‘c‘,‘d‘] 中间出现两个逗号，数组长度不变，有一项为undefined。

七、arr.concat()

注：不改变原数组

连接两个数组，返回值为连接后的新数组。

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

八、str.split()

注：不改变原数组

将字符串转化为数组。

let str = '123456'
console.log(str.split('')) // ["1", "2", "3", "4", "5", "6"]

九、arr.sort()

注：改变原数组

将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的，见例子。

let arr = [2,10,6,1,4,22,3]
console.log(arr.sort())   // [1, 10, 2, 22, 3, 4, 6]
let arr1 = arr.sort((a, b) =>a - b)  
console.log(arr1)   // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b-a)  
console.log(arr2)  // [22, 10, 6, 4, 3, 2, 1]

十、arr.reverse()

注：改变原数组

将数组反转,返回值是反转后的数组。

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

十一、arr.slice(start,end)

注：不改变原数组

切去索引值start到索引值end的数组，不包含end索引处的值，返回值是切出来的新数组。

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

十二、arr.forEach(callback)

遍历数组,无return。
参数：

• value --当前索引值
• index --索引
• array --原数组

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
        console.log(`value:${value}    index:${index}     array:${array}`)
    })   
    // value:1 index:0 array:1,2,3,4,5
    // value:2 index:1 array:1,2,3,4,5
    // value:3 index:2 array:1,2,3,4,5
    // value:4 index:3 array:1,2,3,4,5
    // value:5 index:4 array:1,2,3,4,5

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
        value = value \* 2
        console.log(`value:${value}    index:${index}     array:${array}`)
    })   
    console.log(arr)
    // value:2 index:0 array:1,2,3,4,5
    // value:4 index:1 array:1,2,3,4,5
    // value:6 index:2 array:1,2,3,4,5
    // value:8 index:3 array:1,2,3,4,5
    // value:10 index:4 array:1,2,3,4,5
    // [1, 2, 3, 4, 5]

十三、arr.map(callback)

映射数组(遍历数组),有return， 返回一个新数组。
参数：

• value --当前索引值
• index --索引
• array --原数组

let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{
        value = value \* 2
        console.log(`value:${value}    index:${index}     array:${array}`)
})   
console.log(arr)

arr.forEach() 和 arr.map() 的区别

• arr.forEach()和for循环一样，是代替for。arr.map()是修改数组中的数据，并返回新的数据。
• arr.forEach() 没有return； arr.map() 有return。

十四、 arr.filter(callback)

注：改变原数组

过滤数组，返回一个满足要求的数组。

let arr = [1,2,3,4,5]
let arr1 = arr.filter( (i, v) => i < 3)
console.log(arr1)    // [1, 2]

十五、arr.every(callback)

依据判断条件，数组的元素是否全满足，若满足则返回ture。

let arr = [1,2,3,4,5]
let arr1 = arr.every( (i, v) => i < 3)
console.log(arr1)    // false
let arr2 = arr.every( (i, v) => i < 10)
console.log(arr2)    // true

十六、arr.some()

依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture。

let arr = [1,2,3,4,5]
let arr1 = arr.some( (i, v) => i < 3)
console.log(arr1)    // true
let arr2 = arr.some( (i, v) => i > 10)
console.log(arr2)    // false

十七、arr.reduce(callback, initialValue)

迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值
参数：
　callback: previousValue 必选 --上一次调用回调返回的值，或者是提供的初始值（initialValue）
　currentValue 必选 --数组中当前被处理的数组项
　index 可选 --当前数组项在数组中的索引值
　array 可选 --原数组
　initialValue: 可选 --初始值
　实行方法：回调函数第一次执行时，preValue 和 curValue 可以是一个值，如果 initialValue 在调用 reduce() 时被提供，那么第一个 preValue 等于 initialValue ，并且curValue 等于数组中的第一个值；如果initialValue 未被提供，那么preValue 等于数组中的第一个值.

let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) => 
    preValue + curValue
)
console.log(arr1)    // 10

十八、ES6 创建新数组

1. Array(数量)

let array = Array(5);
console.log(array)

2. Array.of(value)

var array = Array.of(1,2,3,5,5);
console.log(array)

3. Array(数量).fill(value)

var array = Array(5).fill(7);
console.log(array)

let array1 = [1,2,3,4,5];
console.log(array1.fill(8,2,4))

语法array.fill(value,start ,end) //不包括end

十九、数组去重

19.1 第一种方式

ES6判断数组是否存在重复元素

var array = [1,2,3,3,4,5];

if(new Set(array).size !== array.length){
    console.log("存在相同的元素");
}else {
    console.log("不存在相同的元素")
}

19.2 第二种方式

var array = [1,2,3,3,4,5];
console.log(Array.from(new Set(array)))
//输出
[1, 2, 3, 4, 5]

注意，以上2种方法不适合数组元素为对象或子数组的情况。

二十、数组元素交换

var array = [1,2,3,4,5,6];
//对下标为2和3的元素进行交换
[array[3],array[2]]=[array[2],array[3]]
console.log(array)
//输出
//[1, 2, 4, 3, 5, 6]

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】