JavaScript 之数组的方法使用

1、初识数组：新建一个数组

创建，赋值

我们从新建第一个数组开始：

var arr = [];
1

这句话是定义数组的一种方法，之后，我们可以给这个数组赋值：

var arr = []
arr[0] = 0;
arr[1] = 21;
arr[2] = 30;
//....
console.log(arr[0]);
console.log(arr[1])
1
2
3
4
5
6
7

赋值的方法也很简单，直接给数组对应的索引值的位置赋值即可。

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
3
4
5
6
7
8
9
10
11

说明：

第1个和第2个的创建数据方法，效果完全一样。无需使用 new Array()。 出于简洁、可读性和执行速度的考虑，更推荐使用第一种方法。

第3种，就像注释说的那样，没有什么意义，因为数组长度可变，不会受限制的。

第4种，在创建数组的同时，就完成了赋值，但由于长度可变，在后面依旧可以继续插入值。

访问

访问数组元素时，只需要用对应的索引值即可，索引值也是从0开始。数组元素的语法格式：

var arr = [1,2,3];

// 访问
var num = arr[0];
var num2 = arr[1];
var num3 = arr[2];
1
2
3
4
5
6

这样三个num变量就获取了数组arr的前三个元素，完成了访问。

2、数组的添加和删除

学会了新建数组和访问数组元素，我们开始了解一些数组的基本方法

2.1、push() ：插入元素到末尾，并返回新的长度

语法格式：

push(参数1，参数2，参数3...，参数n) 
1

把 指定的元素 添加到 数组的末尾，并返回添加元素后的 数组长度 。其中，可以一次性传入多个元素，实现多元素同时插入。

示例：

var arr = [1, 2, 3];
var length = arr.push(4,5,6);
console.log("新数组 ：" + arr);
console.log("数组的长度: " + length);
1
2
3
4

2.2、unshift() ：插入元素到头部，并返回新的长度

语法格式：

unshift(参数1，参数2，参数3...，参数n) 
1

把 指定的元素 添加到 数组的前面，并返回添加元素后的 数组长度。其中，可以一次性传入多个元素，实现多元素同时插入。

示例：

var arr = [1, 2, 3];
var length = arr.unshift(4);
console.log("新数组 ：" + arr);
console.log("数组的长度: " + length);
1
2
3
4

2.3、pop()方法：删除最后1个元素，并返回新的长度

语法格式：

pop() 
1

弹出 / 删除 数组 最后1个元素，并返回弹出的元素。

示例：

var arr = [1, 2, 3];
var element = arr.pop();
var length = arr.length;
console.log("弹出/删除的元素为：" + element);
console.log("数组的长度: " + length);
1
2
3
4
5

2.4、shift()： 删除第1个元素，并返回新的长度

语法格式：

shift() 
1

删除数组的 第1个元素，并返回删除的元素。

示例：

var arr = [1, 2, 3];
var element = arr.shift();
var length = arr.length;
console.log("删除的元素为：" + element);
console.log("数组的长度: " + length);
1
2
3
4
5

添加和删除总结

2.5、sort()：排序

语法格式：

sort(compare_function)
1

按某种规则排序数组：

当方法的参数为空时，按字典序（即元素的 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]);
1
2
3
4
5
6

2.6、reverse() ：倒序排序

reverse()
1

返回当前数组倒序排序形式。

示例：

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]);
1
2
3
4
5
6
7
8
9

2.7、slice() ： 数组截取

slice(start_index ,end_index )
1

返回包含 数组对象中的 第 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]);
1
2
3
4

3、数组的进阶方法

接下来，我们来看看数组有哪些比较高端的进阶方法：

3.1、 splice()：删除、替换、添加

splice方法就比较复杂了，它有三个形态，我们来看看：

splice(index(索引位置)，length(长度)，element(新元素))
1

splice函数总共有三个参数，根据三个参数的不同，splice可以有三种形态和功能。

(1) 删除

第三个参数不用管了，因为都是删除了，当然不需要第三个element参数，于是：

arr.splice(index ， length)
1

表示从索引 index 开始，把 index 到 index + length - 1 的数组元素全部删除。

(2) 替换、修改

第三个参数是新元素，要替换旧的元素的新元素，于是：

arr.splice(index ， length，element)
1

表示从索引 index 开始，把 index 到 index + length - 1 的数组元素全部替换成 element 。

注意：

并不是说这些位置每个位置都换成 element ，而是这些位置先合并成一个位置，然后换成 element 。

在替换形态下，第二个参数 length 不能取值 0，必须大于0，否则就会出错！

(3) 添加

第二个参数 length 必须取值为 0 ：

arr.splice(index ，0，element)
1

表示把 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]);
1
2
3
4
5
6
7
8
9
10
11
12

3.2、forEach() ： 循环遍历

对数组的每个元素执行一次函数，传参是回调函数。

一旦遍历开始，中间无法中断。

例如我们想要循环遍历一个数组，我们可以把回调函数写成这样：

var arr = [1, 2, 3, 4, 5];
arr.forEach(function (e) {
    console.log(e)
})
1
2
3
4

其中，匿名函数的参数e，就是每一个数组的元素，我们可以在里面对这些元素进行批处理，我这里的处理就是控制台打印，于是可以看到：

3.3、filter()方： 过滤将（返回）符合条件的元素组装成的新数组

创建一个新的数组，其中的元素是指定数组中所有符合指定函数要求的元素，传参是我们规定返回的要求对应的函数。

语法

array.filter(function(currentValue, index, arr), thisValue)
1

参数

注意，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)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

观察一下传参的函数，这个函数判断元素是否大于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)
})
1
2
3
4
5
6
7

4、数据的基本方法

isArray() 检查对象是否为数组

indexOf()：从头部开始搜索元素，并返回其索引位置

lastIndexOf ： 从末尾开始搜索元素，并返回其索引位置

find() 查找数组中符合条件的元素，返回该元素

• 如果数组中有符合条件为 true，则返回该元素。（数据中剩余元素不检查）
• 否则返回 undefined

findIndex()：查找数组中符合条件的元素，返回该元素的索引

• 如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）。
• 否则返回 -1 。

语法

array.findIndex(function(currentValue, index, arr), thisValue)
1

参数

查找数据中，大于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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

every() ：检查数组中的所有元素是否都 全部通过 符合条件

对数组的每个元素执行一次函数。

• 如果 只要有一元素不满足条件，返回 false ，则 every() 返回 false（并且不检查剩余值）
• 如果没有出现 false，every() 返回 true

语法

array.every(function(currentValue, index, arr), thisValue)
1

参数

示例：

检查数组中的所有 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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

some() ：检查数组中的有一个元素是否通过测试

对数组中存在的每个元素执行一次函数：

• 如果 存在有一个满足条件的，返回为 true，则 some() 则返回 true （并且不检查剩余值）
• 否则返回 false

语法

array.some(function(currentValue, index, arr), thisValue)
1

参数

示例：

const ages = [4, 12, 16, 20];

function checkAdult(age) {
	return age >= document.getElementById("ageToCheck").value;
}

var flag = ages.some(checkAdult);
console.log(flag); //结果为true
1
2
3
4
5
6
7
8

includes() ：数组是否包含指定的元素

如果数组包含元素，则此方法返回 true，否则返回 false。

array.includes(element, start)
1

参数

示例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.includes("Mango");

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var n = fruits.includes("Banana", 3);
1
2
3
4
5

fill() ：用静态值 覆盖或更新 数组中的指定元素

语法

array.fill(value, start, end)
1

可以指定开始和结束填充的位置。如果未指定，则将填充所有元素。

参数

示例

用 “XXX” 填充最后两个数组元素。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
var rest = fruits.fill("XXX", 2, 10);
console.log(rest)
1
2
3

结果：

['Banana', 'Orange', 'XXX', 'XXX']
1

join()：将数组的所有元素连接成一个字符串

toString() ：将数组以逗号分隔转换为字符串，并返回结果

示例：

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = fruits.toString();
console.log(text)
1
2
3

结果：

Banana,Orange,Apple,Mango
1

reduce() ：统计，合并

将数组元素，进行 统计、合并等方式，缩减为单个值。

为数组的每个值（从左到右）执行提供的函数。

函数的返回值存储在累加器中（结果/总计）

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
1

参数

示例：

const numbers = [175, 50, 25];

function myFunc(total, num) {
    console.log("total =" + total + " ,num =" + num)
    return total = total - num;
}
//var rest = numbers.reduce(myFunc);

var rest2 = numbers.reduce((total, e) => {

    console.log("total =" + total + " ,e =" + e)
    return total -= e;
});

console.log("==========================")

var rest3 = numbers.reduce((total, e) => {

    console.log("total =" + total + " ,e =" + e)
    return total -= e;
}, 0);

console.log("==========================")

//console.log(rest)
console.log(rest2)
console.log(rest3)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

结果：

total =175 ,e =50
total =125 ,e =25
==========================
total =0 ,e =175
total =-175 ,e =50
total =-225 ,e =25
==========================
100
-250
1
2
3
4
5
6
7
8
9

说明： 没有初始值的，只循环2次，没有初始值的，循环3次。