前言
在 JavaScript 中, 数组是一种非常重要的数据类型, 我们时常会和它打交道, 最近在开发项目中频繁的使用到数组, 但是自己对数组的众多方法已经是非常模糊了, 为了方便自己以后能够更好的使用数组中的属性和方法, 在此记录一下.
数组常用的属性和方法
常用属性
Array.length: 返回数组的大小
常用方法
Array.pop(): 删除并返回数组的最后一个元素
Array.push(): 向数组的结尾添加元素
Array.shift(): 将元素移除数组
Array.unshift(): 向数组头部添加元素
Array.join(): 将数组元素连接起来以构成一个字符串
Array.concat(): 连接数组
Array.reverse(): 将数组进行反转
Array.sort(): 将数组进行排序
Array.slice(): 返回数组的一部分
Array.splice(): 插入, 删除或替换数组中的元素
Array.toString(): 将数组转换为一个字符串
Array.map(): 对数组中的每一项运行给定函数, 返回每次函数调用的结果组成的数组
Array.forEach(): 对数组中的每一项运行给定函数, 这个方法没有返回值
Array.filter(): 对数组中的每一项运行给定函数, 返回该函数会返回 true 的项组成的数组
Array.some(): 对数组中的每一项运行给定函数, 如果该函数对任一项返回 true, 则返回 true
Array.every(): 对数组中的每一项运行给定函数, 如果该函数对每一项都返回 ture, 则返回 true
Array.isArray(): 判断是否是数组
Array.reduce(): 迭代数组的所有项, 然后构建一个最终返回的值, 从数组的第一项开始, 遍历数组的每一项到最后
Array.reduceRight(): 迭代数组的所有项, 然后构建一个最终返回的值, 从数组的最后一项开始, 向前遍历到第一项
实例讲解
为了方便大家的理解和使用, 我会将这些方法进行分类讲解和分析
(1):Array.length 属性
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <script type="text/javascript">
- //1: 数组的定义
- var colors0 = new Array(); // 创建数组
- var colors1 = new Array(20); // 创建数组并指定长度
- var colors2 = new Array('red', 'blue', 'green'); // 定义数组并赋值
- var colors3 = []; // 字面量定义空数组
- console.log(colors0.length); //0
- console.log(colors1.length); //20
- console.log(colors2.length); //3
- //2: 数组的访问和修改
- console.log(colors2[0]); // 访问数组 red
- colors2[1] = '小明'; // 修改数组下标中的值
- console.log(colors2[1]);
- //3. 遍历数组
- for (var i = 0; i < colors2.length; i++) {
- console.log(colors2[i]); //red, 小明, green
- }
- </script>
- </body>
- </HTML>
(2): 栈方法 push() 和 pop()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 数组中的栈方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var colors = new Array(); // 创建数组
- var count = colors.push('red', 'green') // 向数组的结尾添加元素
- console.log(colors); //red,green
- count = colors.push('black');
- console.log(colors); //red,green,black
- var item = colors.pop(); // 移除数组的最后一项
- console.log(item); //black
- </script>
- </body>
- </HTML>
(3): 队列方法 shift() 和 unshift()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 数组中的队列方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var colors = new Array(); // 创建数组
- var count = colors.push('red', 'green'); // 推入两项
- console.log(count); //2
- count = colors.push('black'); // 推入另一项
- console.log(count); //3
- var item = colors.shift(); // 取得第一项
- console.log(item); //red
- console.log(colors.length); //2
- var color = new Array(); // 创建数组
- var c = color.unshift('red', 'green'); // 推入两项
- console.log(c); //2
- c = color.unshift('black');
- console.log(c); //3
- var i = color.pop();
- console.log(i); //green
- console.log(color.length); //2
- </script>
- </body>
- </HTML>
(4): 重排序方法 sort() 和 reverse()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 数组中的重排序方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- //reverse() 方法和 sort() 方法
- //1: 测试 reverse() 方法
- var values1 = [1, 2, 3, 4, 5];
- values1.reverse(); // 将数组进行反转
- console.log(values1); //5,4,3,2,1
- //2: 测试 sort() 方法
- var values2 = [0, 1, 5, 10, 15];
- values2.sort(); // 将数组进行排序, 比较 ASCII 编码
- console.log(values2); //0,1,10,15,5
- //3:sort() 方法接受函数实现升序
- function descArray(a, b) {
- if (a < b) {
- return - 1;
- } else if (a > b) {
- return 1;
- } else {
- return 0
- }
- }
- var item = [0, 1, 3, 2, 4];
- item.sort(descArray);
- console.log(item); //0,1,2,3,4
- //4:sort() 方法接受函数实现降序
- function ascArray(a, b) {
- if (a < b) {
- return 1;
- } else if (a > b) {
- return - 1;
- } else {
- return 0;
- }
- }
- var items = [10, 1, 2, 4, 6, 5, 7];
- items.sort(ascArray);
- console.log(items); //10,7,6,5,4,2,1
- </script>
- </body>
- </HTML>
(5): 操作方法 slice(),splice(),concat()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 数组中的操作方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- //1: 测试操作方法 concat()
- var colors1 = ['red', 'blue', 'green'];
- var colors2 = colors1.concat('yellow', ['black', 'brown']);
- console.log(colors1); //red,blue,green
- console.log(colors2); //red,blue,green,yellow,black,brown
- //2: 测试操作方法 splice(startIndex,[endIndex]);
- var colors3 = ['red', 'green', 'blue', 'yellow', 'purple'];
- var colors4 = colors3.splice(1);
- var colors5 = colors3.splice(1, 4);
- console.log(colors4); //green,blue,yellow,purple
- console.log(colors5); //green,blue,yellow
- //3: 测试 splice() 方法
- //(1): 测试 splice() 删除方法
- // 参数: 要删除第一项的位置, 删除的项数
- var item = ['red', 'blue', 'green'];
- var removed = item.splice(0, 1);
- console.log(removed); //red
- console.log(item); //blue,green
- //(2): 测试 splice() 添加方法
- // 参数: 起始位置, 0(要删除的项数), 要插入的项
- removed = item.splice(1, 0, 'yellow', 'orange');
- console.log(removed); // 返回一个空的数组, 因为移除的项为 0
- console.log(item); //blue,yellow,orange,green
- //(3): 测试 splice() 修改方法
- // 参数: 起始位置, 删除的项数, 插入的任一项
- removed = item.splice(1, 1, 'red', 'purple');
- console.log(removed); //yellow
- console.log(item); //blue,red,purple,orange,green
- </script>
- </body>
- </HTML>
使用 slice() 方法, 如果传入一个参数, 则从开始下标到截取到数组的结尾, 如果传入两个参数, 则从开始下标到结束下标.
使用 splice() 方法, 插入的项是从移除的下标那项开始添加.
(6): 转换方法 toString() 和 join()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 数组中转换方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- var colors = ['red', 'green', 'blue']; // 创建一个包含三个字符串的数组
- //1: 测试 toString() 方法
- console.log(colors.toString()); //red,green,blue
- //2: 测试 join() 方法
- var item = ['red', 'blue', 'green'];
- console.log(item.join('|')); //red|blue|green
- console.log(item.join('||')); //red||blue||,green
- </script>
- </body>
- </HTML>
(7): 迭代方法 some(),filter(),map(),forEach(),every()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 数组中的迭代方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- // 迭代方法: every(),filter(),forEach(),map(),some()
- // 传递参数, 数组项的值, 数组中的位置, 数组对象本身
- var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
- //1: 测试 erery() 函数
- var everyResult = numbers.every(function(item, index, array) {
- return item > 2;
- });
- console.log(everyResult); //false
- //2: 测试 some() 函数
- var someResult = numbers.some(function(item, index, array) {
- return item > 2;
- });
- console.log(someResult); //true
- //3: 测试 filter() 函数
- var filterResult = numbers.filter(function(item, index, array) {
- return item > 2;
- });
- console.log(filterResult); //3,4,5,4,3
- //4: 测试 map() 函数
- var mapResult = numbers.map(function(item, index, array) {
- return item * 2;
- });
- console.log(mapResult); //2,4,6,8,10,8,6,4,2
- //5: 测试 forEach() 函数
- numbers.forEach(function(item, index, array) {
- // 执行某些操作
- console.log(item); //1,2,3,4,4,3,2,1
- })
- </script>
- </body>
- </HTML>
在这些方法中, 最相似的是 every() 和 some(), 它们都有用于查询数组中的项是否满足某个条件, 对于 every() 来说, 传入的函数必须对每一项都返回 true, 这个方法才会返回 true, 否则, 它就会返回 false, 而 some() 方法只要传入的函数对数组中的某一项返回 true, 它就会返回 true.
(8): 归并方法 reduce() 和 reduceRight()
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 数组中的归并方法
- </title>
- </head>
- <body>
- <script type="text/javascript">
- // 归并方法: reduce() 和 reduceRight()
- // 传递参数: 前一个值, 当前值, 项的索引, 数组对象
- var array = [1, 2, 3, 4, 5]
- //1: 测试 reduce() 方法
- var sum1 = array.reduce(function(prev, cur, index, array) {
- return prev + cur;
- });
- console.log(sum1); //15
- //2: 测试 reduceRight() 方法
- var sum2 = array.reduceRight(function(prev, cur, index, array) {
- return prev + cur;
- });
- console.log(sum2); //15
- </script>
- </body>
- </HTML>
使用 reduce() 还是 reduceRight(), 主要取决于要从哪头开始遍历数组. 除此之外, 它们完全相同.
总结
数组中如此之多的方法, 我们并不是每一个都需要记忆, 只需找到规律然后对数组中的方法进行分组便可以实现很好的记忆方式. 如: Array.pop() 和 Array.push(),Array.shift() 和 Array.unshift(),Array.slice() 和 Array.splice(),Array.some() 和 Array.every(),Array.reduce() 和 Array.reduceRight().
来源: https://www.cnblogs.com/jjgw/p/11608609.html