网站首页 > 技术文章 正文
数组生成 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
猜你喜欢
- 2025-05-05 28.ECMAScript 标准深度解析(何为ecmascript)
- 2025-05-05 Vite 性能篇:掌握这些优化策略,一起纵享丝滑!
- 2025-05-05 前端常见20道高频面试题深入解析(前端面试题目100及最佳答案)
- 2025-05-05 2025 年 Object 和 Map 如何选择?
- 2025-05-05 学习ES6- 入门Vue(大量源代码及笔记,带你起飞)
- 2025-05-05 JavaScript去除数组重复元素的几种方法
- 2025-05-05 AI 自我升级神操作,难道真要开启 “天网” 序章?
- 2025-05-05 JavaScript 数组去重方法总结(js 数组去重的四种方法)
- 2025-05-05 20 个让人惊叹的 JavaScript 单行代码技巧,效率瞬间提升
- 2025-05-05 ES6新特性面试题及答案(es6 面试)
- 06-13C++之类和对象(c++中类和对象的区别)
- 06-13C语言进阶教程:数据结构 - 哈希表的基本原理与实现
- 06-13C语言实现见缝插圆游戏!零基础代码思路+源码分享
- 06-13Windows 10下使用编译并使用openCV
- 06-13C语言进阶教程:栈和队列的实现与应用
- 06-13C语言这些常见标准文件该如何使用?很基础也很重要
- 06-13C语言 vs C++:谁才是编程界的“全能王者”?
- 06-13C语言无锁编程指南(c语言锁机代码)
- 最近发表
- 标签列表
-
- cmd/c (64)
- c++中::是什么意思 (83)
- 标签用于 (65)
- 主键只能有一个吗 (66)
- c#console.writeline不显示 (75)
- pythoncase语句 (81)
- es6includes (73)
- sqlset (64)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- chromepost (65)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- & (66)
- java (73)
- js数组插入 (83)
- linux删除一个文件夹 (65)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)