ES6史上最全数JS数组方法合集-02-数组操作
myzbx 2025-07-03 18:19 27 浏览
数组生成 array.of
let res = Array.of(1, 2, 3)
console.log(res) // [1, 2, 3]
下标定位 indexOf
用于查找数组中是否存在某个值,如果存在则返回某个值的下标,否则返回-1
let list = [1, 2, 3];
console.log(list.indexOf(2)) // 1
console.log(list.indexOf('饼干')) // -1
元素存在 includes
检测数组中是否存在该元素,返回布尔
let list = [1, 2, 3];
console.log(list.includes(2)) // true
数组添加 push
向数组后面添加元素,返回值为数组的length
let list = [1, 2, 3];
let res = list.push(1)
console.log(res) // 4
数组头添加 unshift
向数组的头部添加元素,返回值为数组的length
let list = [1, 2, 3];
let res = list.unshift(0)
console.log(res) // 0,1,2,3
数组反转 reverse
用于数组反转,返回新数组
let list = [1, 2, 3]
let res = list.reverse()
console.log(res) // [3, 2, 1]
数组拼接 join
用于数组以什么形式拼接,返回字符串
let list = [1, 2, 3]
let res = list.join('-')
console.log(res) // 1-2-3
数组排序 sort
用于数组排序,接收函数参数,排序规则根据参数函数返回值,返回新数组
- 返回值为正数,后面的挪到前面
- 返回值为负数,保持不动
- 返回值为0,保持不动
let list = [1, 2, 3]
let sortRes = list.sort((a, b)=> b-a)
console.log(sortRes) // [3, 2, 1]
数组合并 concat
用于合并数组,返回新数组
let list = [1, 2, 3]
let res = list.concat([4, 5, 6])
console.log(res) // [1, 2, 3, 4, 5, 6]
数组遍历(each)
for、for...of...、forEach
const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];
for (let i = 0, len = list.length; i < len; i++) {
if (list[i] === 5) {
break; // 1 2 3 4
// continue; // 1 2 3 4 6 7 8 undefined 10 11
}
console.log(list[i]);
}
for (const item of list) {
if (item === 5) {
break; // 1 2 3 4
// continue; // 1 2 3 4 6 7 8 undefined 10 11
}
console.log(item);
}
list.forEach((item, index, arr) => {
if (item === 5) return;
console.log(index); // 0 1 2 3 5 6 7 9 10
console.log(item); // 1 2 3 4 6 7 8 10 11
});
三者都是基本的由左到右遍历数组
- forEach 无法跳出循环;for 和 for ..of 可以使用 break 或者 continue 跳过或中断。
- for ...of 直接访问的是实际元素。for 遍历数组索引,forEach 回调函数参数更丰富,元素、索引、原数组都可以获取。
- for ...of 与 for 如果数组中存在空元素,同样会执行。
补充 forEach中执行异步任务
- forEach中执行异步任务,不会等待异步任务完成,这个时候可以用 for ..of替代。
数组转换(map)
将一个对象数组的某个属性以逗号拼接起来:重点map可以遍历数组,而且不改变原始数组数据,可以通过map返回一个经过修饰的新数组
比如输入[{"a":1},{"a":2},{"a":3},{"a":4},{"a":5}]返回1,2,3,4,5
function getFileCode(array){
let result = null;
if(array && array.length>0){
result = array.map((item,index)=>{
return item.fileCode;
}).join(",");
}
return result;
}
数组过滤(filter)
可以过滤数组中指定的元素
const list = [
{ name: '头部导航', type: 'nav', id: 1 },,
{ name: '轮播', type: 'content', id: 2 },
{ name: '页脚', type: 'nav', id: 3 },
];
const resultList = list.filter(item => {
console.log(item);
return item.type === 'nav';
});
// resultList: [
// { name: '头部导航', type: 'nav', id: 1 },
// { name: '页脚', type: 'nav', id: 3 },
// ]
const newList = list.map(item => {
console.log(item);
return item.id;
});
// newList: [1, empty, 2, 3]
// list: [
// { name: '头部导航', type: 'nav', id: 1 },
// empty,
// { name: '轮播', type: 'content', id: 2 },
// { name: '页脚', type: 'nav', id: 3 },
// ]
数组查询(find)
- find 方法返回数组中满足 callback 函数的第一个元素的值。如果不存在返回undefined。
- findIndex 它返回数组中找到的元素的索引,而不是其值,如果不存在返回 -1。
const list = [
{ name: '头部导航', id: 1 },
{ name: '轮播', id: 2 },
{ name: '页脚', id: 3 },
];
const result = list.find((item) => item.id === 3);
// result: { name: '页脚', id: 3 }
result.name = '底部导航';
// list: [
// { name: '头部导航', id: 1 },
// { name: '轮播', id: 2 },
// { name: '底部导航', id: 3 },
// ]
const index = list.findIndex((item) => item.id === 3);
// index: 2
list[index].name // '底部导航';
数组判断(some)
some函数如果有一个元素存在则返回true
const list = [
{ name: '头部导航', id: 1 },
{ name: '轮播', id: 2 },
{ name: '页脚', id: 3 },
];
const result = list.some((item) => item.id === 3);
//result = true/false
相关推荐
- Python入门学习教程:第 7 章 元组
-
7.1什么是元组?元组(Tuple)是Python中另一种重要的有序集合,与列表类似,它也可以存储多个不同类型的元素。但元组与列表最大的区别在于:元组是不可变的(Immutable),即一旦创建...
- AI大模型笔记之python基础-数据结构-列表&元组
-
列表中的元素不需要是同一种数据类型,可以创建包含数字,字符串,列表,元组等的列表;也可以将任何类实例化的对象加入列表中,其中的元素之间可以没有任何关系。列表非常适合用于存储在程序运行期间可能变化的数据...
- 两分钟了解 Lambda 函数及其用法_lambda函数的语法格式
-
Lambda函数(也称为匿名函数)是Python中的一项强大功能,它允许开发人员创建小型内联函数,而无需使用关键字def显式定义它们。这些函数是使用关键字lambda后跟参数列表和单个表达式定义...
- Python不允许你不知道的 9大高效迭代技巧
-
#每天一个编程技巧#掌握高效的迭代技巧可以显著提升Python代码的性能和可读性。以下是Python中各种高效迭代的方法和技巧:1.基本迭代优化1.1使用enumerate()获取索引和值#传...
- 谈谈你对ES6中Class类的理解_es6中的class常见使用场景
-
我们都知道ES6有了面向对象的概念,而class(类)就是ES6中新的基础性语法糖结构,虽然ES6class表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然是原型和构造函数的概念,让...
- 看完这篇,再也不害怕别人问我什么是原型了
-
本文转载自微信公众号「不知名宝藏程序媛」,作者小土豆。转载本文请联系不知名宝藏程序媛公众号。前言原型、原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括...
- JOJO替身大全(五)_jojo系列替身大全
-
东方仗助(疯狂钻石)替身名:疯狂钻石(CrazyDiamond),能力:将损坏物体或生物恢复到原来的状况(复读机奶妈)透过这份修复的能力,仗助能够修复被毁坏的物品和治疗他人身上的伤口,但是该替身无法...
- 30万表变百万豪奢,9个月恋爱现原形,姐弟恋翻车谁之过?
-
00后山东小伙牛牛和43岁富婆薇姐的恋爱最近在网上炸了锅。俩人从交往开始就争议不断,女方年纪大还带着两个娃,男方年轻帅气,网友骂他们“一个贪财一个好色”。可牛牛一直嘴硬说真心喜欢,还收了不少女方送的礼...
- 原型与原型链,一个步骤一个张图,通俗易懂
-
相信很多的前端对这个概念都不陌生吧。面试八股文,可以说是必问的一道题,也是很多前端包括之前的我,也是稀里糊涂的,不知所以然。经过我多日的研究,终于肝明白了,废话不多说,直接上图。现在看到这张图是不是头...
- JavaScript中原生的原型 Prototype
-
"prototype"属性在JavaScript自身的核心部分中被广泛地应用。所有的内置构造函数都用到了它。首先,我们将看看原生原型的详细信息,然后学习如何使用它为内建对象添加新...
- 五本先婚后爱文:《婚港》|势均力敌|暧昧拉扯|熟男熟女
-
第一本《婚港》作者:希昀江彬最初和唐知颂联姻时,整个沪城无人看好,身为千亿集团继承人,业界出了名的冷艳大美人,江彬只有事业心没有恋爱脑,游刃有余周旋在各路大客户中,素来不知风月是何物。唐知颂亦是如此,...
- axios中的那些天才代码!看完我实力大涨!
-
axios的两种调用方式经常调接口的同学一定非常熟悉aixos下面的两种使用方式:axios(config)//配置式请求axios({method:'post',u...
- 「假面骑士空我」中的超古代战士S.H.Figuarts化登场!
-
为了纪念《假面骑士空我(KUUGA)》25周年,以【EPISODE1复活】中登场的“临多族战士空我”为原型制作的“超古代战士空我”,与“超空我展”的门票组合在真骨彫製法中登场!超古代战士是作为战士...
- JS原型和原型链,JS对象,js递归经典案例,构造函数继承
-
原型和原型链面向对象编程:1,对象:面向对象编程(oop)是目前主流的编程范式,它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间分工与合作,完成对真实世界的模拟。每一个对象都是功能中心,...
- 娱乐圈5位的木头帅哥,演技毫无灵气,看得人脚趾抓地
-
娱乐圈的帅哥并不稀缺,而且各有各样,但在演技作品这块来说,有的帅哥简直就是一个木头。明明五官身材样样不输,但你就感觉不到他身上的灵气,一股子面瘫敷衍,看得让人抓脚。1.李易峰开年第一部古偶S+《镜双...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)