JavaScript 之数组的方法使用
Posted 猎人在吃肉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 之数组的方法使用相关的知识，希望对你有一定的参考价值。
文章目录
- 1、初识数组：新建一个数组
- 2、数组的添加和删除
- 3、数组的进阶方法
- 4、数据的基本方法
- isArray() 检查对象是否为数组
- indexOf()：从头部开始搜索元素，并返回其索引位置
- lastIndexOf ： 从末尾开始搜索元素，并返回其索引位置
- find() 查找数组中符合条件的元素，返回该元素
- findIndex()：查找数组中符合条件的元素，返回该元素的索引
- `every()` ：检查数组中的所有元素是否都 `全部通过` 符合条件
- `some()` ：检查数组中的`有一个元素`是否通过测试
- `includes()` ：数组是否包含指定的元素
- `fill()` ：用静态值 `覆盖或更新` 数组中的指定元素
- join()：将数组的所有元素连接成一个字符串
- toString() ：将数组以逗号分隔转换为字符串，并返回结果
- `reduce()` ：统计，合并
1、初识数组：新建一个数组
创建，赋值
我们从新建第一个数组开始：
var arr = [];
这句话是定义数组的一种方法，之后，我们可以给这个数组赋值：
var arr = []
arr[0] = 0;
arr[1] = 21;
arr[2] = 30;
//....
console.log(arr[0]);
console.log(arr[1])
赋值的方法也很简单，直接给数组对应的索引值的位置赋值即可。
javascript中的数组，长度是动态可变的，不需要再定义数组的大小。
除了上面的这种创建数组的方法外，还有以下几种方法：
// 1. 最简单的创建方法
var arr = ["Saab", "Volvo", "BMW"];
// 2. 新建数组对象的方式创建数组
var arr2 = new Array("Saab", "Volvo", "BMW");
// 3. 新建数组对象的方式创建数组，并指定长度，但由于长度可变，因此实际作用不大
var arr3 = new Array(5);
// 4. 创建数组，并给数组前三位初始值为1 2 3
var arr4 = [1,2,3];
说明：
第1个和第2个的创建数据方法，效果完全一样。无需使用 new Array()。 出于简洁、可读性和执行速度的考虑，更推荐使用第一种方法。
第3种，就像注释说的那样，没有什么意义，因为数组长度可变，不会受限制的。
第4种，在创建数组的同时，就完成了赋值，但由于长度可变，在后面依旧可以继续插入值。
访问
访问数组元素时，只需要用对应的索引值即可，索引值也是从0开始。数组元素的语法格式：
var arr = [1,2,3];
// 访问
var num = arr[0];
var num2 = arr[1];
var num3 = arr[2];
这样三个num变量就获取了数组arr的前三个元素，完成了访问。
2、数组的添加和删除
学会了新建数组和访问数组元素，我们开始了解一些数组的基本方法
2.1、push() ：插入元素到末尾，并返回新的长度
语法格式：
push(参数1，参数2，参数3...，参数n)
把 指定的元素 添加到 数组的末尾，并返回添加元素后的 数组长度 。其中，可以一次性传入多个元素，实现多元素同时插入。
示例：
var arr = [1, 2, 3];
var length = arr.push(4,5,6);
console.log("新数组 ：" + arr);
console.log("数组的长度: " + length);
2.2、unshift() ：插入元素到头部，并返回新的长度
语法格式：
unshift(参数1，参数2，参数3...，参数n)
把 指定的元素 添加到 数组的前面，并返回添加元素后的 数组长度。其中，可以一次性传入多个元素，实现多元素同时插入。
示例：
var arr = [1, 2, 3];
var length = arr.unshift(4);
console.log("新数组 ：" + arr);
console.log("数组的长度: " + length);
2.3、pop()方法：删除最后1个元素，并返回新的长度
语法格式：
pop()
弹出 / 删除 数组 最后1个元素，并返回弹出的元素。
示例：
var arr = [1, 2, 3];
var element = arr.pop();
var length = arr.length;
console.log("弹出/删除的元素为：" + element);
console.log("数组的长度: " + length);
2.4、shift()： 删除第1个元素，并返回新的长度
语法格式：
shift()
删除数组的 第1个元素，并返回删除的元素。
示例：
var arr = [1, 2, 3];
var element = arr.shift();
var length = arr.length;
console.log("删除的元素为：" + element);
console.log("数组的长度: " + length);
添加和删除总结
| 元素操作 | 第1个元素 | 最后1个元素 |
|---|---|---|
| 添加 | unshift | push |
| 删除 | shift | pop |
2.5、sort()：排序
语法格式：
sort(compare_function)
按某种规则排序数组：
当方法的参数为空时，按字典序（即元素的 Unicode 编码从小到大排序顺序）排序数组元素；
当参数为一个匿名函数时，将按匿名函数指定的规则排序数组元素。
示例：
var arr = [3, 1, 2, 4, 5];
console.log("排序前：")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
arr.sort();
console.log("排序后：")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
2.6、reverse() ：倒序排序
reverse()
返回当前数组倒序排序形式。
示例：
var arr = [1, 2, 3, 4, 5];
console.log("倒序前：")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
arr.reverse();
console.log("倒序后：")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
2.7、slice() ： 数组截取
slice(start_index ,end_index )
返回包含 数组对象中的 第 start_index个 到 end_index- 1 之间的元素组成的新子数组。
示例：
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.slice(1, 4);
console.log("子数组的长度：" + arr2.length);
console.log("子数组的元素：" + arr2[0] + " " + arr2[1] + " " + arr2[2]);
3、数组的进阶方法
接下来，我们来看看数组有哪些比较高端的进阶方法：
3.1、 splice()：删除、替换、添加
splice方法就比较复杂了，它有三个形态，我们来看看：
splice(index(索引位置)，length(长度)，element(新元素))
splice函数总共有三个参数，根据三个参数的不同，splice可以有三种形态和功能。
(1) 删除
第三个参数不用管了，因为都是删除了，当然不需要第三个element参数，于是：
arr.splice(index ， length)
表示从索引 index 开始，把 index 到 index + length - 1 的数组元素全部删除。
(2) 替换、修改
第三个参数是新元素，要替换旧的元素的新元素，于是：
arr.splice(index ， length，element)
表示从索引 index 开始，把 index 到 index + length - 1 的数组元素全部替换成 element 。
注意：
并不是说这些位置每个位置都换成 element ，而是这些位置先合并成一个位置，然后换成 element 。
在替换形态下，第二个参数 length 不能取值 0，必须大于0，否则就会出错！
(3) 添加
第二个参数 length 必须取值为 0 ：
arr.splice(index ，0，element)
表示把 element 放在数组索引 index 的位置上，同时原来的元素以此后移一位 。
注意：
这是 后移/插入，并不是直接把该位置的元素给替换了。
示例：
var arr = [1, 2, 3, 4, 5];
arr.splice(0, 2);
console.log("执行删除后数组的长度：" + arr.length);
console.log("执行删除后数组的元素：" + arr[0] + " " + arr[1] + " " + arr[2]);
arr.splice(0, 2, 1);
console.log("执行替换后数组的长度：" + arr.length);
console.log("执行替换后数组的元素：" + arr[0] + " " + arr[1]);
arr.splice(0, 0, 5);
console.log("执行插入后数组的长度：" + arr.length);
console.log("执行插入后数组的元素：" + arr[0] + " " + arr[1]);
3.2、forEach() ： 循环遍历
对数组的每个元素执行一次函数，传参是回调函数。
一旦遍历开始，中间无法中断。
| 参数 | 描述 |
|---|---|
| currentValue | 必需。当前元素的值。 |
| index | 可选。当前元素的数组索引。 |
| arr | 可选。当前元素所属的数组对象 |
例如我们想要循环遍历一个数组，我们可以把回调函数写成这样：
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (e)
console.log(e)
)
其中，匿名函数的参数e，就是每一个数组的元素，我们可以在里面对这些元素进行批处理，我这里的处理就是控制台打印，于是可以看到：
3.3、filter()方： 过滤将（返回）符合条件的元素组装成的新数组
创建一个新的数组，其中的元素是指定数组中所有符合指定函数要求的元素，传参是我们规定返回的要求对应的函数。
语法
array.filter(function(currentValue, index, arr), thisValue)
参数
| 参数 | 描述 |
|---|---|
| currentValue | 必需。当前元素的值。 |
| index | 可选。当前元素的数组索引。 |
| arr | 可选。当前元素所属的数组对象 |
注意，filter()方法返回的是一个数组，它满足我们指定的要求，这个要求通过传参函数进行解释：
var arr = [1, 2, 3, 4, 5];
var new_arr = arr.filter(function (e)
if (e > 3)
return true;
else
return false;
)
new_arr.forEach(function (e)
console.log(e)
)
观察一下传参的函数，这个函数判断元素是否大于3，大于3，返回true，于是相当于告知filter()方法，这个元素符合要求，于是大于3的值被赋给了新数组，运行效果为：
3.4、map()方法
为每个数组元素调用函数的结果后，返回一个创建的新数组。
例如，我们想让数组的每个元素都扩大二倍，利用map()方法可以这么写：
var arr = [1, 2, 3, 4, 5];
var new_arr = arr.map(function (e)
return e * 2;
)
new_arr.forEach(function (e)
console.log(e)
)
4、数据的基本方法
isArray() 检查对象是否为数组
indexOf()：从头部开始搜索元素，并返回其索引位置
lastIndexOf ： 从末尾开始搜索元素，并返回其索引位置
find() 查找数组中符合条件的元素，返回该元素
- 如果数组中有符合条件为 true，则返回该元素。（数据中剩余元素不检查）
- 否则返回 undefined
findIndex()：查找数组中符合条件的元素，返回该元素的索引
- 如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）。
- 否则返回
-1。
语法
array.findIndex(function(currentValue, index, arr), thisValue)
参数
| 数 | 描述 |
|---|---|
| currentValue | 必需。当前元素的值。 |
| index | 可选。当前元素的数组索引。 |
| arr | 可选。当前元素所属的数组对象 |
查找数据中，大于18的元素的索引下标。
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
const ages = [4, 12, 16, 20];
function checkAge(age)
return age > 18;
function myFunction()
document.getElementById("demo").innerhtml = ages.findIndex(checkAge);
</script>
every() ：检查数组中的所有元素是否都 全部通过 符合条件
对数组的每个元素执行一次函数。
- 如果 只要有一元素不满足条件，返回 false ，则 every() 返回 false（并且不检查剩余值）
- 如果没有出现 false，every() 返回 true
语法
array.every(function(currentValue, index, arr), thisValue)
参数
| 数 | 描述 |
|---|---|
| currentValue | 必需。当前元素的值。 |
| index | 可选。当前元素的数组索引。 |
| arr | 可选。当前元素所属的数组对象 |
示例：
检查数组中的所有 answer 值是否 相同
var survey = [
name: "Steve", answer: "Yes" ,
name: "Jessica", answer: "Yes" ,
name: "Peter", answer: "Yes" ,
name: "Elaine", answer: "No"
];
function isSameAnswer(el, index, arr)
if (index === 0) // 数据为空时，返回true
return true;
else
return (el.answer === arr[index - 1].answer);
function myFunction()
document.getElementById("demo").innerHTML = survey.every(isSameAnswer);
some() ：检查数组中的有一个元素是否通过测试
对数组中存在的每个元素执行一次函数：
- 如果 存在有一个满足条件的，返回为 true，则 some() 则返回 true （并且不检查剩余值）
- 否则返回 false
语法
array.some(function(currentValue, index, arr), thisValue)
参数
| 数 | 描述 |
|---|---|
| currentValue | 必需。当前元素的值。 |
| index | 可选。当前元素的数组索引。 |
| arr | 可选。当前元素所属的数组对象 |
示例：
const ages = [4, 12, 16, 20];
function checkAdult(age)
return age >= document.getElementById("ageToCheck").value;
var flag = ages.some(checkAdult);
console.log(flag); //结果为true
includes() ：数组是否包含指定的元素
如果数组包含元素，则此方法返回 true，否则返回 false。
array.includes(element, start)
参数
| 参数 | 描述 |
|---|---|
| element | 必需。要搜索的元素。 |
| start | 可选。默认 0。在数组中的哪个位置开始搜索。 |
示例：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.includes("Mango");
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.includes("Banana", 3);
fill() ：用静态值 覆盖或更新 数组中的指定元素
语法
array.fill(value, start, end)
可以指定开始和结束填充的位置。如果未指定，则将填充所有元素。
参数
| 参数 | 描述 |
|---|---|
| value | 必需。用于填充数组的值。 |
| start | 可选。开始填充数组的索引（默认为 0）。 |
| end | 可选。停止填充数组的索引（默认为 array.length）。 |
示例
用 “XXX” 填充最后两个数组元素。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
var rest JavaScript 之数组的方法使用
JavaScript 之 普通数组对象数组的去重（涉及多个场景）