JavaScript 之数组的方法使用

Posted 猎人在吃肉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 之数组的方法使用相关的知识,希望对你有一定的参考价值。

文章目录

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个元素
添加unshiftpush
删除shiftpop

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 开始,把 indexindex + length - 1 的数组元素全部删除。

(2) 替换、修改

第三个参数是新元素,要替换旧的元素的新元素,于是:

arr.splice(index , length,element)

表示从索引 index 开始,把 indexindex + 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 之数组的方法使用

JavaScript第五天之数组

JavaScript 之 普通数组对象数组的去重(涉及多个场景)

JavaScript 之 普通数组对象数组的去重(涉及多个场景)

javascript 将第一个元素移动到数组末尾的最快方法