数组的常用方法_将数组 int a[5]={2,4,6,8,10}; 中的元素变为原来的2倍

数组的方法大致分为两类:

1.改变原数组的方法 : 如 shift()、unshift()、pop()等
2.不改变原数组的方法: 如 reduce()、filter()、every()等

现在依据个人的理解和经验,将一些常用的数组方法用法及参数总结如下,希望对阅读的人有点帮助:

一、会改变原数组的方法(数字前加*的)

(一) 增删改查(增删改会改变原数组，查不改变原数组)

增：

*1.Array.unshift(ele.....) : 在数组的前面添加一个或者多个数组元素

(1)参数：Array.unshift(数组元素1,.....数组元素n)        //一个或多个

(2)返回值：新数组的长度

 let arr = [1, 2, 3];
 let newArr=arr.unshift('red', 'purple');
 console.log(newArr); // 打印返回值显示是 5 为新数组的长度   
 console.log(arr); //   打印原数组 ['red','purple',1,2,3]

---------------------------------------------------------------------------------------------------------------------------------

*2.Array.push(ele.....) 在数组的末尾添加一个或者多个数组元素

(1)参数：Array.push(数组元素1,.....数组元素n)        //一个或多个

(2)返回值：新数组的长度

 let arr = ['green', 'yellow', 'skyblue'];
 let newArr=arr.push('red', 'purple');
 console.log(newArr); // 打印返回值显示是 5 为新数组的长度   
 console.log(arr); //  打印原数组 ['green', 'yellow', 'skyblue','red','purple']

---------------------------------------------------------------------------------------------------------------------------------

删：

*3.Array.shift() : 删除数组的第一个元素

(1)参数：无        Array.shift()

(2)返回值：被删除的元素，(数组为空则返回undefined)

(3)注意：一次只能删除一个元素

 let arr = [1, 2, 3];
 let newArr=arr.shift()
 console.log(newArr); // 打印返回值显示是  [1]   
 console.log(arr); //   打印原数组 [2, 3] 

---------------------------------------------------------------------------------------------------------------------------------

*4.Array.pop() 删除数组的最后一个元素

(1)参数：无        Array.pop()

(2)返回值：被删除的元素，(数组为空则返回undefined)

(3)注意：一次只能删除一个元素

 let arr = ['green', 'yellow', 'skyblue'];
 let newArr=arr.push('red', 'purple');
 console.log(newArr); // 打印返回值显示是 5 为新数组的长度   
 console.log(arr); //   打印原数组 ['green', 'yellow', 'skyblue','red','purple']

---------------------------------------------------------------------------------------------------------------------------------

改：

 *5.Array.splice(start,length,item)删，增，替换数组元素

(1)参数：Array.splice(start,length,item) // 起始索引号,删除个数, 添加元素(0~n个)

(2)返回值：被删除数组，无删除则不返回

splice()方法在不进行删除时,可以在某个索引后面添加元素

let arr = ['Jan', 'March', 'April', 'June'];
arr.splice(1, 0, 'Feb');
console.log(arr); //["Jan", "Feb", "March", "April", "June"]

也可以用来替换掉数组中的某一个元素,代替arr[索引号]的方法替换数组元素来触发vue的响应

arr.splice(4, 1, 'May');
console.log(arr); // ["Jan", "Feb", "March", "April", "May"]

---------------------------------------------------------------------------------------------------------------------------------

查：

6.arr.slice(begin,end)查询数组中区域元素包装进新数组

(1)参数：arr.slice(begin,end)

(2)返回值：一个浅复制了原数组中部分元素的一个新数组

const animals = ['a', 'b', 'c', 'd', 'e'];
console.log(animals.slice(2));// ["c","d","e"]
console.log(animals.slice(2, 4));// ["c","d"]
console.log(animals.slice(1, 5));// ["b","c","d","e"]
console.log(animals.slice(-2));// ["d","e"]
console.log(animals.slice(2, -1));// ["c","d"]
console.log(animals.slice());// ["a","b","c","d","e"]

---------------------------------------------------------------------------------------------------------------------------------

二 数组连接

7.arr.concat(arr2)        合并两个或多个数组

(1)参数：

(2)返回值：

---------------------------------------------------------------------------------------------------------------------------------

8.arr.join()

三 数组翻转

四 数组排序

*5.Array.reverse()：颠倒数组顺序,返回值是颠倒后的数组,原数组也会被颠倒

(1)参数：

(2)返回值：

let arr = ["a","b","c","d"]
let newArr = arr.reverse() 
console.log(newArr) // ["d", "c", "b", "a"] 
console.log(arr) // ["d", "c", "b", "a"]

reveres()方法没有参数

*6、Array.sort()：对数组进行排序,返回值是排序后的数组

当数组内部是英文字符串时,默认按字母顺序来排序

当数组内部是中文字符串时,按UTF-16代码排序

一般情况来说,基本不会对字符串类型数组进行排序

let arr = ['March', 'Jan', 'Feb', 'Dec'];
arr.sort();
console.log(arr); //["Dec", "Feb", "Jan", "March"]

要比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数将会将数组升序排列

let arr = [5, 9, 3, 7];
arr.sort((a,b)=>{
    return a-b
});
console.log(arr); //[3,5,7,9]

如果是  b 减 a，如下的函数将会将数组降序排列

let arr = [5, 9, 3, 7];
arr.sort((a,b)=>{
    return b-a
});
console.log(arr); //[9,7,5,3]

二、不会改变原数组的方法

1.Array.reduce()主要于对数组的求和,也可以对字符串,数组进行拼接

reduce()接受四个参数：

   Array.reduce((accumulator,current,index,Array) =>{
          ....... 
          return  accumulator
    } ,int)

第一个参数是：accumulator是当前聚合值，

第二个参数是: current是数组循环时的当前元素

第三个参数是: index 是数组元素的索引值

第四个参数是: Array 是数组本身

int : 是accumulator的初始值 可以自行进行设置

一般常用的是前面的两个参数,后面两个参数不常用,常用的使用场景便是数组的求和

let arr = [1, 2, 3, 4];
 
let a = arr.reduce((accumulator,current)=> accumulator += current , 0)
 
//这里使用的es6语法,省略了return
 
console.log(a); //10

2.Array.filter()要于对数组的筛选,返回值是一个满足条件的新数组

filter()接受四个参数：

 var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保 留。它接受以下三个参数：

element 数组中当前正在处理的元素。

index(可选) 正在处理的元素在数组中的索引。

array(可选) 调用了 filter 的数组本身。

thisArg(可选) 执行 callback 时，用于 this 的值。

let arr = [12, 5, 8, 130, 44]
 
let newArr = arr.filter( item => item>10 );  //筛选数组中大于10的值
 
console.log(newArr) // [12, 130, 44]

3.Array.every()测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

arr.every(callback(element[, index[, array]])[, thisArg])

里面是回调函数callback用来测试每个元素的函数，它可以接收三个参数：

element 用于测试的当前值。

index(可选)用于测试的当前值的索引。

array(可选)调用 every 的当前数组。

thisArg 执行 callback 时使用的 this 值

const arr = [1, 30, 39, 29, 10, 13];
 
let a = arr.every((currentValue) => currentValue < 40)); //判断里面的每一个值是否小于40
console.log(a)  // true

只有当数组里面的每一个元素都满足条件才会返回true,否则返回的是false

注意：若收到一个空数组，此方法在一切情况下都会返回 true。

4.Array.findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有则返回-1。

arr.findIndex(callback[, thisArg])

callback针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:

element 当前元素。

index 当前元素的索引。

array调用findIndex的数组。

thisArg(可选)执行callback时作为this对象的值.

let arr = [5, 12, 8, 130, 44];
let a = array1.findIndex((element) => element > 13)
console.log(a);  // 3

5.Array.forEach()方法对数组的每个元素执行一次给定的函数,历数组最常用的方法

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

callback 为数组中每个元素执行的函数，该函数接收一至三个参数：

可依次向 callback 函数传入三个参数：

1. 数组当前项的值
2. 数组当前项的索引
3. 数组对象本身

currentValue 数组中正在处理的当前元素。

index (可选) 数组中正在处理的当前元素的索引。

array (可选) forEach() 方法正在操作的数组。

thisArg (可选) 可选参数。当执行回调函数 callback 时，用作 this 的值。

const array1 = ['a', 'b', 'c'];
 
array1.forEach((item,index)=>{
    console.log(item)  // 分别输出 a  b   c  
    console.log(index)  //分别输出 0  1   2
}

forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。

6.Array.join()方法将一个数组的所有元素连接成一个字符串并返回这个字符串

arr.join([separator])

separator(可选)指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。

let arr = ['Fire', 'Air', 'Water'];
 
console.log(arr.join()); //  "Fire,Air,Water"
console.log(arr.join('')); //"FireAirWater"
console.log(arr.join('-')); // "Fire-Air-Water"

注意 :如果一个元素为 undefined 或 null，它会被转换为空字符串。

7.Array.includes()用来判断一个数组是否包含一个指定的值

 includes(valueToFind[, fromIndex]) 

根据情况，如果包含则返回 true，否则返回 false。

valueToFind 需要查找的元素值。 fromIndex 可选 从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length  fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

例子:判断数组中是否包含某个元素

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

8 Array.map()创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

arr.map(callback()) 返回值是一个新数组,数组的构成看return回来是什么值

map方法第一个参数传入一个callback回调函数,该函数使用三个参数

1.callback 数组中正在处理的当前元素。

1. callback 数组中正在处理的当前元素的索引。

2. map 方法调用的数组。

例子:求数组中每个元素的平方根

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]