数组常用方法

for循环

使用计数器变量来迭代数组元素

js 复制代码
var arr = [1,2,3,4,5]

for(var i=0;i<arr.length;i++){
    console.log(array[i])
}

上面的i就是计数器变量,初始值为0,每次循环后加1,直到i等于数组长度为止。在循环体内,可以通过数组索引arr[i]来访问每个元素。

forEach

forEach循环会自动迭代数组,对每个元素执行回调函数,并跳过数组中未定义的元素。

执行后不返回新数组

js 复制代码
arr.forEach(function(currentValue, index, array) { 
    // 执行内容 
}, thisValue);

第一个参数是回调函数,它可以接受三个参数:当前处理的元素值currentValue、当前处理的元素索引index、当前正在操作的数组对象arr。第二个参数thisValue可选,表示在执行回调函数时,将其作为函数体内this关键字的值。

js 复制代码
var arr = [1,2,3,4,5]

array.forEach(element=>{
    console.log(element)   //每个元素
})

for...of

for...of循环是ES6新增的一种循环语法,可以用于遍历数组、字符串、Map、Set等可迭代对象。与传统的for循环不同,for...of循环语句本身不包含初始化变量、循环条件和迭代器,而是直接遍历迭代对象中的每个元素。

element表示在每次迭代中,将要被赋值为迭代对象中下一个元素的变量,arr参数是一个可迭代对象,例如数组或字符串。在循环体内,可以使用elemente变量来访问当前遍历到的元素。

js 复制代码
var arr = [1, 2, 3, 4, 5]; 
for (var element of arr) { 
    console.log(element); 
}

element变量会被依次赋值为数组中的每个元素,然后在循环体内输出到控制台上。

for...of循环只能用于遍历可迭代对象,不能用于普通对象。如果需要遍历对象的属性,可以使用for...in循环。

map

对数组中的每个元素执行一个指定的函数,并返回一个新数组。它不会修改原始数组,而是返回一个新的数组,新数组的元素是回调函数的返回值。

js 复制代码
arr.map(function(currentValue, index, array) { 
    // 执行内容 
}, thisValue);

第一个参数是回调函数,它可以接受三个参数:当前处理的元素值currentValue、当前处理的元素索引index、当前正在操作的数组对象array。第二个参数thisValue可选,表示在执行回调函数时,将其作为函数体内this关键字的值。

js 复制代码
var numbers = [1, 2, 3, 4, 5]
var doubledNumbers = numbers.map(function(num) { 
    return num * 2; 
}); 
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

使用场景

  1. 转换数组中的元素:map 方法最常见的用法是根据数组中的每个元素进行转换,生成一个新的数组。
  2. 提取对象数组中的特定属性:如果数组中的元素是对象,可以使用 map 方法提取对象的特定属性,生成一个包含这些属性值的新数组。例如,从一个包含学生对象的数组中提取学生姓名。
  3. 处理异步操作:map 方法也可以用于处理异步操作,例如对数组中的每个元素进行异步处理并返回一个包含处理结果的 Promise 数组。

for...in

用于遍历对象属性的一种循环语句。for...in循环需要指定一个迭代变量和一个可枚举对象。在每次迭代中,迭代变量会被赋值为可枚举对象的下一个属性名,然后我们就可以使用该属性名来访问对应的属性值。

其中,ele表示在每次迭代中,将要被赋值为对象中下一个可枚举属性的名称,obj参数是一个普通对象。在循环体内,我们可以使用ele变量来访问当前遍历到的属性值。

js 复制代码
var obj = { name: 'Tom', age: 18, gender: 'Male' }; 
for (var ele in obj) { 
    // ele--属性名   obj[ele]--属性值
    console.log(ele + ': ' + obj[ele]); 
}

这里的ele变量会被依次赋值为对象obj中的每个属性名,然后在循环体内使用obj[prop]来访问对应的属性值。循环结束后,所有属性名和属性值都会输出到控制台上。

需要注意的是,for...in循环不仅会遍历对象自身的属性,还会遍历对象原型链上的属性。因此,在使用for...in循环时,需要使用hasOwnProperty()方法来判断对象是否拥有该属性,以避免不必要的属性访问。

filter

用于筛选数组中满足指定条件的元素,并返回一个新的数组。它不会修改原始数组,而是返回一个新的数组,新数组中包含满足筛选条件的元素。如果没有满足条件的元素,返回的新数组将为空数组。

js 复制代码
arr.filter(function(currentValue, index, arr) { 
    // 指定条件判断 
}, thisValue);

第一个参数是回调函数,它可以接受三个参数:当前处理的元素值currentValue、当前处理的元素索引index、当前正在操作的数组对象arr。第二个参数thisValue可选,表示在执行回调函数时,将其作为函数体内this关键字的值。

js 复制代码
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
var filteredNumbers = numbers.filter(function(num) { 
    return num >= 5; 
}); 
console.log(filteredNumbers); // [5, 6, 7, 8, 9, 10]

使用场景

  1. 根据条件筛选列表数据,这是最常用的场景,根据自己的需要对原数组数据进行过滤
  2. 去除数组中的空值或无效值
  3. 去重,通过 filter 方法结合 indexOfincludes 方法,可以过滤掉数组中的重复元素

reduce

用于对数组中的元素进行累积操作,将数组缩减为一个值。它通过提供的回调函数来实现累积操作,并返回最终结果。

js 复制代码
array.reduce(function(accumulator, currentValue, index, array) { 
    // 累积操作 
}, initialValue);

第一个参数是回调函数,它可以接受四个参数:累积器(accumulator)、当前处理的元素值(currentValue)、当前处理元素的索引(index)和当前正在操作的数组对象(array)。第二个参数initialValue可选,表示初始的累积值。

如果没有提供初始值(initialValue),那么数组的第一个元素将作为初始的累积值,并从数组的第二个元素开始进行迭代。如果数组为空且没有提供初始值,那么将抛出 TypeError 异常。

js 复制代码
// 对数组中元素求和
var numbers = [1, 2, 3, 4, 5]; 
var sum = numbers.reduce(function(total, num) { 
    return total + num; 
}, 0); 
console.log(sum); // 15

回调函数接受两个参数total和num,total表示累积值,初始值为0,而num表示当前处理的元素值。在每一次迭代中,回调函数会将total与当前元素值num相加,然后返回新的累积值。最终,reduce() 方法返回的是最后一次迭代后的累积值。 使用场景

  1. 计算
  2. 去重
  3. 数组转化为对象:将数组转化为对象,通常用于处理键值对数据。
  4. 映射和筛选:可以结合条件判断,对数组进行映射和筛选操作。

some

返回这个数组部分符合条件的bool值,只要有一个存在,则返回为真,some 方法在找到满足条件的元素后会立即停止遍历,不会继续执行剩余元素的检查。

js 复制代码
const array = [1, 2, 3, 4, 5];
const hasEvenNumber = array.some((element) => element % 2 === 0);
console.log(hasEvenNumber);  // 输出: true

使用场景

  1. 检查数组中是否存在特定元素,可以使用 some 方法来检查数组中是否存在某个特定值或满足特定条件的元素。
  2. 权限控制:在权限控制逻辑中, 用some 方法检查用户是否具有特定权限。
  3. 表单验证:在表单验证过程中,检查是否有任何字段未通过验证。

every

返回这个数组全部都符合条件的bool值,全部匹配则返回真

js 复制代码
const numbers = [1, 2, 3, 4, 5];
const allEven = numbers.every((element) => element % 2 === 0);    // allEven 为 false

使用场景

  1. 检查所有元素是否满足条件,当数组中的每个元素都满足条件时,every 方法返回 true;否则返回 false
  2. 判断空数组:当前为空数组时方法会返回true,但一般不用every判断,判断空数组一般用array.length就可以了,严谨一点的话,可以结合Array.isArray()方法来确定变量是否为数组类型。

sort

对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序。
直接改变原数组

js 复制代码
[3,4,2,1,5].sort()      // => [1,2,3,4,5]

find

find筛选符合条件的第一个数据对象 返回的是符合条件的第一项的值 ,如果没有找到满足条件的元素,则返回 undefinedfind不会改变原数组,这个方法本身运行后的结果就是得到的那一个数据项

js 复制代码
const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find((element) => element > 3);   // foundNumber 为 4 
  1. 查找对象属性,find 方法常用于从对象数组中查找具有特定属性值的对象,比如找到数组中id为2的数据。
  2. 处理数据不存在或不满足所需条件的情况,当 find 方法找不到满足条件的元素时,它返回 undefined。可以利用这一点来处理找不到元素的情况。

findIndex

返回符合测试条件的第一个数组元素索引,如果没有符合条件的则返回 -1。不改变数组的原始值

js 复制代码
let list = [1, 2, 3];
list.findIndex((item => item > 1));
相关推荐
RaidenLiu10 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost10 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost12 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost19 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪20 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在27 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方29 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
小猫由里香34 分钟前
小程序打开文件(文件流、地址链接)封装
前端
Tzarevich37 分钟前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端
掘金一周1 小时前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统 | 掘金一周 10.23
前端·人工智能·后端