JavaScript 之数组的方法使用

Posted 2022-09-15 猎人在吃肉

文章目录

• • 1、初识数组：新建一个数组
  • • • 创建，赋值
      • 访问
  • 2、数组的添加和删除
  • • 2.1、push() ：插入元素到末尾，并返回新的长度
    • 2.2、unshift() ：插入元素到头部，并返回新的长度
    • 2.3、pop()方法：删除最后1个元素，并返回新的长度
    • 2.4、shift()： 删除第1个元素，并返回新的长度
    • • 添加和删除总结
    • 2.5、sort()：排序
    • 2.6、reverse() ：倒序排序
    • 2.7、slice() ： 数组截取
  • 3、数组的进阶方法
  • • 3.1、 splice()：删除、替换、添加
    • • (1) 删除
      • (2) 替换、修改
      • (3) 添加
    • 3.2、forEach() ： 循环遍历
    • 3.3、filter()方： 过滤将（返回）符合条件的元素组装成的新数组
    • 3.4、map()方法
  • 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.every(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 = fruits.fill("XXX", 2, 10);
console.log(rest)

结果：

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

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

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

示例：

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

结果：

Banana,Orange,Apple,Mango

reduce() ：统计，合并

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

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

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

语法

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

参数

参数	描述
total	必需。initialValue，或函数先前返回的值。
currentValue	必需。当前元素的值。
index	可选。当前元素的数组索引。
arr	可选。当前元素所属的数组对象

示例：

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)

结果：

total =175 ,e =50
total =125 ,e =25
==========================
total =0 ,e =175
total =-175 ,e =50
total =-225 ,e =25
==========================
100
-250

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