一、数组的定义

字面量定义:var arr=[1,2,3];

对象定义:var arrObj=new Array(1,2,3);

var array= new Array(10)

二、常用的方法:

1、concat()

拷贝原数组,连接两个或更多的数组,并返回结果,返回一个新数组,原数组不会改变。

<script\>

 var arr1 = \[1,2,3\];

 var arr2 = \[4,5,6\];

 var arr3 = arr1.concat(arr2);

 console.log(arr3);

 </script\>

2、filter()

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

currentValue是必须的。

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,filter() 不会改变原始数组。

<script\>

 var ages = \[12,23,43,23,14\];

 function check(age){

 return age > 18;

 }

 console.log(ages.filter(check));

 </script\>

3、find()

array.find(function(currentValue, index, arr),thisValue)

currentValue是必须的。

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值,不会改变原始数组。

4、findIndex()

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

currentValue是必须的。

findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数,不会改变原始函数的位置。

5、forEach()

array.forEach(function(currentValue, index, arr), thisValue)

currentValue是必须的。

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数,会改变原始数组。

<p>点击按钮将数组中的所有值乘以特定数字。</p>


 <p\>乘以: <input type\="number" id\="multiplyWith" value\="10"\></p\>

 <button onclick\="numbers.forEach(myFunction)"\>点我</button\>

 <p\>计算后的值: <span id\="demo"\></span\></p\>

 <script\>

 var numbers = \[65, 44, 12, 4\];

 function myFunction(item,index,arr) {

 arr\[index\] = item \* document.getElementById("multiplyWith").value;

 demo.innerHTML = numbers;

 }

 </script\>

[注意:]

forEach除了传递一个匿名函数作为参数之外,还可以传第二个参数,该参数用于指定匿名函数内的this指向,例如:

// 只传一个匿名函数

arr.forEach(function(item,index,array){

 console.log(this); // window

});

// 传两个参数

arr.forEach(function(item,index,array){

 console.log(this); // \[1, -2, 3, 4, -5\]

},arr);

6、includes()

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

7、indexOf()

indexOf() 方法可返回数组中某个指定的元素位置。该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。

8、push()

格式:数组.push(参数1,参数2,………)

功能:在数组的末尾添加元素

返回值:插完元素以后的数组的值
image.png

9、pop()

格式:数组.pop()

参数:没有参数

返回值:取下一个元素

功能:从数组末尾去下一个元素
image.png

10、 shift()

格式:数组.shift()

参数:没有元素

返回值:从数组头部取下的元素

功能:从数组头部取下一个元素
image.png

11、 unshift()

格式:数组.unshift(参数1,数组2,………)

参数:没有元素

返回值:从数组头部取下元素后的长度

功能:从数组头部取下一个元素
image.png
12、 slice()

格式:数组.slice(start , end)

功能:可以基于当前数组获取指定区域的元素[start, end),提取出元素生成新的数组

返回值:生成新的数组,原数组不会发生改变

<script\>

 _var_ arr \= \[1, 2, 3, 4, 5\];

 _var_ res \= arr.slice(2, 4);

 console.log(res); //\[3,4\]

 console.log(arr) //\[1,2,3,4,5\]

 </script\>

13、 splice()

格式:数组.splice(start, length, 数据1,数据2,………)

参数:

start:开始截取的位置

length:截取的元素的长度

第三个参数开始:在start位置插入的元素

返回值:截取下来的元素组成的数组

功能:数组的增加、删除、修改操作

<script\>

 /\*\*增加\*\*/

 _var_ arr1 \= \[1, 2, 3, 4, 5\];

 _var_ res1 \= arr1.splice(2, 0, "huangbowen");

 console.log(res1); //\[\]

 console.log(arr1) //\[1, 2, "huangbowen", 3, 4, 5\]

 /\*\*删除\*\*/

 _var_ arr2 \= \[1, 2, 3, 4, 5\];

 _var_ res2 \= arr2.splice(2, 1);

 console.log(res2); //\[3\]

 console.log(arr2) //\[1, 2, 4, 5\]

 /\*\*修改\*\*/

 _var_ arr3 \= \[1, 2, 3, 4, 5\];

 _var_ res3 \= arr3.splice(2, 1, "hbwnba");

 console.log(res3); //\[3\]

 console.log(arr3) // \[1, 2, "hbwnba", 4, 5\]

 </script\>

14、 join()

格式:数组.join()

功能:将数组中的元素,用传入的拼接符,拼接成一个字符串

返回值:拼接好的字符串

<script\>

 _var_ arr \= \[1, 2, 3\]

 _var_ res \= arr.join('==')

 console.log(arr); // \[1, 2, 3\]

 console.log(res); // 1==2==3

 console.log(typeof res) //string

 </script\>

15、 reverse()

格式:数组.reverse()

功能:逆序

返回值:返回逆序后的数组,会改变原始数组的顺序

<script\>

 _var_ arr \= \[1, 2, 3\]

 _var_ res \= arr.reverse()

 console.log(arr); // \[3, 2, 1\]

 console.log(res); // \[3, 2, 1\]

 console.log(typeof res) //Object

 </script\>

16、 sort()

格式:数组.sort()

功能:对数组进行排序,默认从小到大排序,按照字符串进行排序

返回值:排完序的数组

<script\>

 _var_ arr \= \[1, 2, 3, 54, 23\]

 arr.sort(_function_(_a_, _b_){

 return _a_\-_b_;

 })

 console.log(arr) // \[1, 2, 3, 23, 54\]

 </script\>

17、 map()

格式:数组.map(function(currentValue,index,arr){},thisValue)

参数:

function(currentValue, index, arr):必须。为一个函数,数组中的每个元素都会执行这个函数。其中函数参数:

currentValue:必须。当前元素的的值。

index:可选。当前元素的索引。

arr:可选。当前元素属于的数组对象。

thisValue:可选。对象作为该执行回调时使用,传递给函数,用作"this"的值。

返回值:返回操作后的新数组,不改变原数组

<script\>

 _var_ arr \= \[1, 2, 3, 54, 23\]

 _var_ newArray \= arr.map(_function_(_item_){

 return _item_\*_item_;

 })

 console.log(arr) //  \[1, 2, 3, 54, 23\]

 console.log(newArray) // \[1, 4, 9, 2916, 529\]

 </script\>

18、 reduce()

格式:arr.reduce(function(prev,cur,index,arr){... }, init);

参数:

prev:表示上一次调用回调时的返回值,或者初始值 init;

cur: 表示当前正在处理的数组元素;

index: 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;

arr:表示原数组

init:表示初始值

返回值:返回reduce()之后的新数组,不改变原始数组的值

(1)求数组之和:

<script\>

 _var_ arr \= \[1, 2, 3\];

 _var_ sum \= arr.reduce(_function_ (_prev_, _cur_) {

 return _prev_ + _cur_;

 },0);

 console.log(sum); //6

 </script\>

由于传入了初始值0,所以开始时prev的值为0,cur的值为数组第一项3,相加之后返回值为3作为下一轮回调的prev值,然后再继续与下一个数组项相加,以此类推,直至完成所有数组项的和并返回。

(2)求数组项的最大值:

<script\>

 _var_ arr \= \[1, 2, 3\];

 _var_ max \= arr.reduce(_function_ (_prev_, _cur_) {

 return Math.max(_prev_,_cur_);

 });

 console.log(max); //3

 </script\>

由于未传入初始值,所以开始时prev的值为数组第一项3,cur的值为数组第二项9,取两值最大值后继续进入下一轮回调。

(3)数组的去重:

<script\>

 _var_ arr \= \[1, 2, 2, 1, 3\];

 _var_ newArr \= arr.reduce(_function_ (_prev_, _cur_) {

 _prev_.indexOf(_cur_) \=== \-1 && _prev_.push(_cur_);

 return _prev_;

 },\[\]);

 console.log(newArr); //\[1, 2, 3\]

 console.log(arr); //\[1, 2, 2, 1, 3\]

 </script\>

① 初始化一个空数组② 将需要去重处理的数组中的第1项在初始化数组中查找,如果找不到(空数组中肯定找不到),就将该项添加到初始化数组中③ 将需要去重处理的数组中的第2项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中④ ……
⑤ 将需要去重处理的数组中的第n项在初始化数组中查找,如果找不到,就将该项继续添加到初始化数组中⑥ 将这个初始化数组返回

19、 every()

格式:arr.every(function(item, index, array){})

功能: 用于判断数组中的每一项元素是否都满足条件,返回一个布尔值

<script\>

 _var_ arr \= \[1, 2, 2, 1, 3, \-1\];

 _var_ isEvery \= arr.every(_function_(_item_,_index_,_array_){

 return _item_ \> 0;

 });

 console.log(isEvery); // false

 </script\>

20、 some()

格式:arr.some(function(item, index, array){})

功能: 用于判断数组中的是否存在满足条件的元素,返回一个布尔值

 <script\>

 _var_ arr \= \[1, 2, 2, 1, 3, \-1\];

 _var_ isEvery \= arr.some(_function_(_item_,_index_,_array_){

 return _item_ \> 0;

 });

 console.log(isEvery); // true

 </script\>

TCR030
3 声望0 粉丝