ES5 数组基础

ES5 数组常用方法

ES5 数组方法

arr.forEach()

arr.forEach(callback[, thisObj]) 简单地遍历数组

1. callback：回调函数，没有返回值
   接收 3 个参数：item：当前元素、index：当前下标、arr：当前数组
2. thisObj：回调函数的 this 指向，默认指向 window（注意：箭头函数不生效）

• 返回值：无

let arr = ["a", "b", "c"];
arr.forEach(function (item, index, arr) {console.log(item, index, arr);
});

• 通过参数 thisObj 设置回调函数的 this 指向

let arr = ["a", "b", "c"];
arr.forEach(function () {console.log(this); // 此时 this 指向 [ 'a', 'b', 'c' ]
}, arr);

forEach() 没有返回值

无论回调函数有没有设置返回值，forEach() 都不会返回

let arr = ["a", "b", "c"];
let result = arr.forEach(value => value);
console.log(result); // undefined

使用箭头函数作为回调函数

• 箭头函数是表达式，没有 this，使用的是父级的 this

let arr = ["a", "b", "c"];
arr.forEach(() => {console.log(this); // this 指向 window
});

上述代码中，回调函数的父级的 this 指向 window，所以回调函数的 this 也指向 window

• 此时即使设置 forEach() 的 thisObj 参数，也不会有效：

let arr = ["a", "b", "c", "d"];
arr.forEach(() => {console.log(this); // 即使设置了 thisObj 参数，this 还是指向 window
}, arr);

arr.map()

arr.map(callback[, thisObj]) 基于原数组，获取新数组

1. callback：回调函数，返回新数组的数据项
   接收 3 个参数：item-当前元素、index-当前下标、arr-当前数组
2. thisObj：回调函数的 this 指向，默认指向 window（注意：箭头函数不生效）

• 返回值：操作后的新数组

map() 的返回值

• 回调函数 callback 的返回值就是新数组的数据项

let arr = [1, 2, 3];
let newArr = arr.map(item => item * 2);
console.log(newArr); // [ 2, 4, 6 ]

• 如果回调函数 callback 没有返回值，则 map() 返回长度为 arr.length、且数据项全为 undefined 的新数组

let arr = [1, 2, 3];
let newArr = arr.map(() => {}); // 回调函数没有返回值
console.log(newArr); // [undefined, undefined, undefined]

作用 ①：拷贝数组

let arr = [1, 2, 3, , 4]; // map 会将空位记为 empty
let newArr = arr.map(item => item); // 复制数组
console.log(newArr); // [1, 2, 3, empty, 4]

• 注意：这种拷贝方法只是浅拷贝

let arr = [{ title: "aa", read: 100 },{ title: "bb", read: 10 },
];
let newArr = arr.map(item => item);
newArr[0].read = 300;
console.log(arr[0].read); // 300

作用 ②：调整数据结构

let arr = [{ title: "aa", read: 100 },{ title: "bb", read: 20 },
];
console.log(arr); // [ { title: 'aa', read: 100 }, { title: 'bb', read: 20 } ]let newArr = arr.map(item => {let obj = {}; // 创建空对象obj.shop = `名称：${item.title}`;obj.price = `￥${item.read}元`;return obj;
});console.log(newArr);
// [ { shop: '名称：aa', price: '￥100元' }, { shop: '名称：bb', price: '￥20元' } ]

arr.filter()

filter(callback[, thisObj]) 过滤数组

1. callback：回调函数，返回布尔值
   返回true-将当前数据项添加到新数组中；返回false-过滤掉当前数据项
   接收 3 个参数：item：当前元素、index：当前下标、arr：当前数组
2. thisObj：回调函数的 this 指向，默认指向 window（注意：箭头函数不生效）

• 返回值：过滤得到的新数组

作用 ①：复制数组

let arr = [1, 2, 3];
let newArr = arr.filter(() => true);
console.log("newArr", newArr); // newArr [1, 2, 3]

• 注意：这里也是浅拷贝

作用 ②：数组去重

let arr = [2, 1, 3, 5, 2, 3, 1];
let newArr = arr.filter((item, index) => arr.indexOf(item) == index);
console.log("newArr", newArr); // newArr [2, 1, 3, 5]

arr.some() & arr.every()

arr.some(callback[, thisObj]) & arr.every(callback[, thisObj]) 用于检查数组的数据项

1. callback：回调函数，返回布尔值
   接收 3 个参数：item：当前元素、index：当前下标、arr：当前数组
2. thisObj：回调函数的 this 指向，默认指向 window（注意：箭头函数不生效）

• 返回 [布尔值]
  • some()：有一个 callback 返回 true，则返回 true；否则返回 false
  • every()：所有 callback 都返回 true，才返回 true；否则返回 false

作用 ①：查看数组是否含有指定值

let arr = ["a", "b", "c", "d"];
let result = arr.some(item => item == "c"); // 只要有一个 item == "c" 则返回 true
console.log(result); // true

作用 ②：查看数组所有数据项是否都满足指定条件

// 判断数组里面是否都为奇数
let arr = [1, 3, 7, 9, 5];
let result = arr.every(item => item % 2 == 1);
console.log(result); // true

arr.reduce() & arr.reduceRight()

arr.reduce(callback[, firstPrev]) & arr.reduceRight(callback[, firstPrev])

• 一般用作统计处理

1. callback：回调函数
   接收 4 个参数：prev-上一个回调函数的返回值、cur-当前元素、index-当前索引、arr-当前数组
2. firstPrev：用于设置第 1 个 prev 的值

• reduce：从左往右遍历；reduceRight：从右往左遍历
• 返回值：最后一个 callback 的返回值

作用 ①：累加运算

• 如果不设置 firstPrev，则默认从第 2 个元素开始遍历，此时cur 为 2、prev 为 1

let arr = [1, 2, 3];
let result = arr.reduce((prev, cur, index, arr) => {console.log("prev:" + prev, "cur:" + cur, "index:" + index, "arr:" + arr);// prev:1 cur:2 index:1 arr:1,2,3// prev:3 cur:3 index:2 arr:1,2,3return prev + cur;
});
console.log("result", result);
// result 6

• 我们可以通过 reduce() / reduceRight() 的第 2 个参数 firstPrev，设置第 1 个 prev 的值

  此时，就会从第 1 个元素开始遍历

let result = arr.reduce((prev, cur, index, arr) => {console.log("prev:" + prev, "cur:" + cur, "index:" + index, "arr:" + arr);// prev:0 cur:1 index:0 arr:1,2,3// prev:1 cur:2 index:1 arr:1,2,3// prev:3 cur:3 index:2 arr:1,2,3return prev + cur;
}, 0); // 设置参数 firstPrev 为 0
console.log("result", result);
// result 6

作用 ②：数组去重

let arr = [1, 2, 2, 3, 3];
let res = arr.reduce((prev, cur) => {if (!prev.includes(cur)) {prev.push(cur); // 将值 push 到新数组中}return prev;
}, []);
console.log("res", res); // res [1, 2, 3]

ES6 数组方法

for … of

数据结构只要设置了 Symbol.iterator 属性，就被视为具有 iterator 接口，就可以用 for … of 遍历其成员。就是说，for … of 循环，内部调用的是数据结构的 Symbol.iterator 方法

• arr.keys()：获取数组的下标
• arr.values()：获取数组的元素
• arr.entries()：获取数组的键值对（下标，元素）

它们都返回一个迭代器对象，可以用 for … of 语句进行遍历

let arr = ["apple", "banana", "orange"];for (let index of arr.keys()) {// 通过 keys 获取下标console.log(index); // 0 1 2
}for (let val of arr) {// 直接获取值console.log(val); // apple banana orange
}for (let val of arr.values()) {// 通过 values 获取值console.log(val); // apple banana orange
}for (let item of arr.entries()) {// 通过 entries 获取键值对console.log(item); // [0, "apple"] [1, "banana"] [2, "orange"]
}for (let [key, val] of arr.entries()) {// 搭配解构赋值console.log(key, val); // 0 "apple" 1 "banana" 2 "orange"
}

例 ①：删除指定元素

let arr = ["apple", "banana", "orange"];
for (let [key, value] of arr.entries()) {if (value == "banana") {arr.splice(key, 1);}
}
console.log(arr); // ["apple", "orange"]

Array.from()

Array.from(arrObj[, callback[, thisObj]]) 基于 [类数组对象] / [可迭代对象] 创建一个新的、浅拷贝的数组

1. arrObj：类数组对象 / 可迭代对象
2. callback：回调函数，返回新数组的数据项，默认返回原数据项；
   • 接收 2 个参数：item：当前数据项；index：当前数据项的索引
3. thisObj：设置回调函数的 this 指向，this 默认指向 window

• 返回值：新创建的、浅拷贝的数组

let arr = [1, 1, 2];
let newArr = Array.from(new Set(arr)); // 转 Set 可去重
console.log("newArr", newArr); // newArr [ 1, 2 ]

let arr = [1, 1, 2];
let newArr = Array.from(new Set(arr), item => item * 2);
console.log("newArr", newArr); // newArr [ 2, 4 ]

• 可以作用于：字符串

let str = "man";
let arr1 = Array.from(str);
console.log(arr1); // ['m', 'a', 'n']// 这里等效于字符串的 split 方法
let arr2 = str.split("");
console.log(arr2); // ['m', 'a', 'n']

• 可以作用于：下标为属性名，带 length 属性的类数组对象

let obj = {0: "a",1: "b",2: "c",length: 3,
};
let arr = Array.from(obj);
console.log(arr); // ["a", "b", "c"]

可用于复制数组（浅拷贝）

let arr = [1, 2, 3];
let copyArr = Array.from(arr);console.log("arr", arr); // arr [1, 2, 3]
console.log("copyArr", copyArr); // copyArr [1, 2, 3]copyArr.push(4, 5);console.log("arr", arr); // arr [1, 2, 3]
console.log("copyArr", copyArr); // copyArr [1, 2, 3, 4, 5]

Array.of()

Array.of(data[, …]) 用于创建数组

1. data：数组的元素，可传递多个 data 参数

• 返回值：新创建的数组

let arr = Array.of("a", "b", "c", "d");
console.log(arr); // [ 'a', 'b', 'c', 'd' ]

该方法的主要目的，是弥补数组构造函数 Array() 的不足。因为不同的参数个数，会导致不同的 Array() 的行为

new Array(); // []
new Array(3); // [empty, empty, empty]
new Array(3, 11, 8); // [3, 11, 8]Array.of(); // []
Array.of(3); // [3]
Array.of(3, 11, 8); // [3, 11, 8]

arr.find()

arr.find(callback) 获取第 1 个符合要求的元素

1. callback：回调函数
   接收 3 个参数：val-当前值、index-当前索引、arr-当前数组

• 返回值：第 1 个符合要求的元素；如果没有符合的元素，则返回 undefined

let arr = [50, 10, 201, 103, 62, 81];
let res = arr.find(val => {return val > 100;
});
console.log(res); // 201

arr.findIndex()

arr.findIndex(callback) 获取第 1 个符合要求的下标

1. callback：回调函数
   接收 3 个参数：val-当前值、index-当前索引、arr-当前数组

• 返回值：第 1 个符合要求的下标；如果没有符合的元素，则返回 -1

let arr = [{ name: "aa" }, { name: "bb" }]; // 数组元素为对象
let res = arr.findIndex(val => {return val.name == "bb";
});
console.log(res); // 1

arr.fill()

arr.fill(value[, start[, end]]) 用于填充数组

1. value：用于填充数组的值
2. start：开始填充的下标（包含），默认为 0
3. end：结束填充的下标（不包含），默认为 arr.length

• 返回值：填充后的新数组
• 会改变原数组

let arr1 = new Array(3);
arr1.fill("pad");
console.log(arr1); // ['pad', 'pad', 'pad']let arr2 = new Array(5);
arr2.fill("pad", 1, 3);
console.log(arr2); // [empty, 'pad', 'pad', empty × 2]

fill 填充的操作可以认为是 “赋值”。所以填充引用类型数据时，其实都指向同一个地址

let arr = new Array(3);
arr.fill({ name: "cc" });
arr[0].name = "aa"; // 修改其中一项
console.log(arr); // [{name: "aa"}, {name: "aa"}, {name: "aa"}]

可以先为空数组填充 null，再通过 map() 将 null 修改为对象 {}。这样填充的数组元素就是不同的对象啦

必须先为空数组填充 null，因为 map 会跳过空项，不对其进行操作

let nullArr = new Array(3).fill(null);
let arr = nullArr.map(() => ({}));
arr[0].name = "aa";
console.log(arr); // [{name:'aa'}, {}, {}]

arr.includes()

arr.includes(value) 查看数组中是否包含指定数据

1. value：查找的数据

• 返回值：找到指定数据，则返回 true；否则返回 false

let arr = ["apple", "origan", "banana"];
let a = arr.includes("apple");
console.log(a); // truelet b = arr.includes("pear");
console.log(b); // false

indexOf 方法有 2 个缺点：
① 不够语义化，它是找到参数值的第 1 次出现位置，所以要去比较返回值是否等于 -1，表达起来不够直观
② 内部使用严格相等运算符 === 进行判断，因为 NaN !== NaN，所以不能检测 NaN 是否在数组中

let arr = [1, NaN];
console.log(arr.indexOf(NaN)); // -1
console.log(arr.includes(NaN)); // true

• 注意：任何字符串查找空字符串 ''，都返回 true

"asd".inciudes(""); // true

关于数组的空位

数组的空位：数组的某一个位置没有值

let arr = [1, , 3];

• 一个位置的值可以等于 undefined / null，这样的数据项依然是有值的
• 空位的数据项是没有任何值的。我们可以使用 in 鉴别：

0 in [undefined, undefined, undefined]; // true
0 in [null, null, null]; //  true
0 in [, , ,]; // false

ES5 对空位的处理很不一致，多数情况下会忽略空位

• forEach()、filter()、some()、reduce() 都会直接忽略空位

let arr = [1, , 3];
console.log(arr); // [1, empty, 3]
let newArr = arr.filter(item => true);
console.log(newArr); // [ 1, 3 ]

• map() 操作元素时，会保留空位 (及跳过空位，不对其进行操作)

let arr = [1, , 3];
let newArr = arr.map(item => item + 1);
console.log(newArr); // [2, empty, 4]

• join() 和 toString() 会将空位处理成空字符串 ''

let arr = [1, , 3];
console.log(arr); // [1, empty, 3]
let str = arr.join(",");
console.log(str); // 1,,3

ES6 则是明确将空位转为 undefined

• for … of 循环会遍历空位

for (let i of [, ,]) {console.log(i); // undefined undefined  最后一个 , 会被视为尾逗号，所以只输出两次
}

• entries()、keys()、values()

[...[, "a"].keys()]; // [0,1]
[...[, "a"].values()]; // [undefined,"a"]
[...[, "a"].entries()]; // [[0,undefined], [1,"a"]]

• Array.from()

Array.from(["a", , "b"]); // ["a", undefined, "b"]

• find() 和 findIndex()

[, "a"].find(item => true); // undefined
[, "a"].findIndex(item => true); // 0

• fill()

new Array(3).fill("a"); // ["a","a","a"]

• includes()

let arr = ["apple", , "banana"];
let result = arr.includes(undefined);
console.log(result); // true

• 扩展运算符 ...

[...["a", , "b"]]; // ["a", undefined, "b"]

【JavaScript】ES6 数组的扩展相关推荐

1. es6 --- 数组的扩展

   经常遇到对数组的操作-下面是<ES6标准入门>(第3版)中对数组扩展的(部分)描述: 扩展运算符(-): console.log(...[1,2,3]) // 1 2 3console.l ...

2. ES6数组的扩展~超详细、超好理解哦

   在ES5中,数组主要分为两大类:索引数组 和 关联数组(和对象很像). 在ES6中,对数组进行了一些扩展,跟小编一起来看看吧! 希望这篇博客可以帮助到有需要的小伙伴 文章目录 扩展运算符 替代appl ...

3. ES6 数组的扩展：扩展运算符

   文章目录 扩展运算符 应用 扩展运算符 扩展运算符(-)作用是将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]); // 1 2 3console.log(1, ...

4. 【笔记】ES6 数组的扩展

   ES6对数组也进行了一些扩展,不过很多东西我觉得平时不太常用,就粗略的了解一下. 扩展运算符... // 简单示例 console.log(...[1, 2, 3]) // 1 2 3 functio ...

5. ES6 -数组的扩展

   1.Array.from 把类数组(获取一组元素.arguments)对象转成数组 只要具备length,大多都可以转化 //3种方法 转成数组 let ali=document.querySelec ...

6. ES6查漏补缺【数组的扩展】

   我的ES6 数组的扩展 1.先简单复习一下ES5中的数组方法 2.静态方法 ES5:Array.isArray() ES6:array.from() ES6:array.of() 3.数组实例方法 i ...

7. ES6的新特性（8）——数组的扩展

   数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...

8. ES6 入门教程 9 数组的扩展 9.1 扩展运算符

   ES6 入门教程 ECMAScript 6 入门 作者:阮一峰 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 ES6 入门教程 9 数组的扩展 9.1 扩展运算符 9.1.1 含义 9.1 ...

9. ES6标准学习： 4、数组的扩展

   数组的扩展 一.类数组对象与可遍历对象转换为数组 Array.from()方法用于将类数组对象.可遍历对象转换为数组,其中可遍历对象包括es6新增的set和map结构 所谓的类数组对象,本质特征是必须 ...

最新文章

1. [YTU]_2865( 结构体--日期计算)
2. c++内存管理优化之ptmalloc，tcmalloc，jemalloc使用实例
3. POJ3695(矩形切割中等题)
4. recycleviewitem 列表加载动画_用vue实现一个虚拟列表
5. Tomcat实现Web Socket
6. 在MyEclipse中如何修啊改Tomcat 6.x的端口号
7. CSI笔记【12】：阵列信号处理及MATLAB实现（第2版）阅读随笔(四)
8. Spring Cloud Eureka 全解 （1） - 总览篇
9. 雨落江满泛涟漪 尘拂心海滤情音 相思入云寄清风
10. 台式低速常温离心机S400操作规程
11. New情报：APT28,TA505 黑产组织，VenusLocker Ransomware组织，ROKRAT远控
12. vue Component inside ＜Transition＞ renders non-element root node that cannot be animated.
13. BootStrap 模态框实现刷新网页并关闭
14. 为一个 iOS 应用编写一个简单的 Node.js/MongoDB Web 服务
15. 笔记本同时内外网双网网卡上网（网线不能连外网，wifi可以连外网）
16. CentOS使用yum命令安装软件失败，报错“Couldn‘t open file /data/ceph/ceph/repodata/repomd.xml“
17. ILSpy 无法反编译 Expression
18. 梦开始的地方----初识C语言（2）
19. n76e003引脚图_n76e003at20数据手册
20. 架构 | 新一代分布式数据库架构详解

热门文章

1. ftp上传老是失败 [L] TYPE A [L] 200 Type set to A. [L] MODE Z [L] 200 MODE Z ok. [L] PASV [L] 550 Pa
2. CodeTop 1-20
3. 腾讯云部署Hebe节点教程
4. 网络安全实验--网络嗅探器
5. sql server 2005 32位+64位、企业版+标准版下载地址
6. OTN电层的保护SNCP保护详解
7. 毕业设计——基于WEB的BBS论坛
8. RFID复习笔记（1）——物联网与RFID概述
9. 统一gis平台地图服务发布流程及使用
10. 多线程（之五：线程协作）