2021-03-25

js数组方法总结

1、concat
concat方法用连接两个多个或者多个数组 ，该方法不会改变原来的数组

语法：arr.concat(arr1,arr2,...)

实例：

var arr = [1, 2, 3, 4, 5]
var arr1 = ["hello", "javascript"]
// concat可以接受的参数不仅仅是数组，也可以是具体的值，
var array = arr.concat(arr1, [null, 1], ",mike")
// 打印输出原数组
console.log(arr);  // [ 1, 2, 3, 4, 5 ]
console.log("arrary----", array);// 

2、copyWith（ES6）
copyWith方法用来从数组的指定位置赋值元素到数组的另一个指定位置，该方法会改变原数组

语法：arr.copyWith(target,start,end)
/**
*@param target 必填，复制的元素要插入到数组的开始的索引
*@param start  可选 复制元素的起始索引
*@param end 可选 赋值元素的结束索引，如果不写默认是数组的长度
*/

实例：

var arr = [1, 2, 3, 4, 5, 6, 7, 8]

console.log(arr.copyWithin(3));         // [1,2,3,1,2,3,4,5]
console.log(arr.copyWithin(3, 0));      // [1,2,3,1,2,3,1,2]
console.log(arr.copyWithin(2, 3, 5));   // [1,2,1,2,2,3,1,2]
console.log(arr.copyWithin(1, 2, 4));   // [1,1,2,2,2,3,1,2]

3、every(ES6)
every方法用来检测数组的每一项是否符合指定条件，并且如果有任意一个不符合，就返回false，且剩余的不在进行检测，如果所有的都满足条件才返回true。every不会改变原数组

语法：arr.every((item, index, arr) => {
		return "指定条件"
	}
)

实例：

var ages = [32, 33, 16, 40];
// 判断数组中元素是否都大于18
let flag = ages.every((item, index, arr) => {
  return item > 18
})
// 判断数组中元素是否都大于15
console.log(flag); // false

let flag1 = ages.every((item, index, arr) => {
  return item > 15
})
console.log(flag1);  // true 

4、fill(ES6)
fill方法是使用一个固定的值去填充数组的指定位置，它会改变原数组

语法：arr.fill(value,start,end)
/**
*@param value 用来填充数组的值  必选
*@start  填充的起始索引
*@end    填充的结束索引，默认是数组的长度
*/

实例：

let arr2 = [1, 2, 3]

console.log(arr2.fill("healer"));       // ['healer','healer','healer']
console.log(arr2.fill("love", 1, 2));   // ['healer','love','healer']
console.log(arr2.fill("you", 0));       // ['you','you','you']

5、filter（ES6）
filter方法会返回一个新的数组，如果没有符合指定条件的值，会返回一个空数组，他不会改变原数组也不会对空数组进行检测

语法：arr.filter((item, index, arr) => {
		return "指定条件"
	}
)

实例：

var ages = [32, 33, 16, 40];

//返回数组中大于18的元素

let newAges = ages.filter((item, inedx, arr) => {
  return item > 18
})

console.log(newAges); // [32,33,40]

6.find（ES6）
find方法会返回符合指定条件的第一个数组的元素，并且不会对剩余的数组元素进行检测，如果没有符合指定条件的值，返回值为undefined，find方法并不会改变原数组，也不会对空数组进行检测

语法：：arr.find((item, index, arr) => {
		return "指定条件"
	}
)

实例：

var ages = [12, 34, 33, 16, 40];

let newAge = ages.find((item, value, arr) => {
  return item > 30
})

console.log(newAge); // 34

var ages = [12, 34, 33, 16, 40];

let newAge = ages.find((item, value, arr) => {
  return item > 88
})

console.log(newAge); // undefined

7、findIndex(ES6)
findIndex方法会返回符合指定条件的第一个数组元素的索引，如果没有则返回-1，findIndex不会对空数组进行检测，它也不会改变原数组

语法：arr.findIndex((item, index, arr) => {
		return "指定条件"
	}
)

实例：

var ages = [12, 34, 33, 16, 40];

let index = ages.findIndex((item, value, arr) => {
  return item > 30
})

console.log(index); // 1

var ages = [12, 34, 33, 16, 40];

let index = ages.findIndex((item, value, arr) => {
  return item > 88
})

console.log(index); // -1

8、forEach(ES6)
forEachf方法会迭代数组中每一个元素。forEach方法用法灵活多变。

语法：arr.findIndex((item, index, arr) => {
		 //TODO  可以在这对数组的元素进行一系列的操作
	}
)

forEach方法比较灵活多变，没有一个特定的用法，大家在以后的开发过程中要灵活应用。
9.from(ES6)
from方法对用于length属性或者可迭代的对象返回一个数组，如果对象是数组则返回true否则返回false

语法：Array.from(obj,mapfn,this)
/**
*@param obj 需要转换为数组的对象  必需
*@param mapfn 可选 数组中每一个元素需要调用的函数
*@param  this映射函数的this对象
*/

实例：

// 通过字符串生成数组

let str = 'healer'
let strArr = Array.from(str)
console.log(strArr); // ['h','e','a','l','e','r']
console.log(strArr[0] === 'h'); // true

//从arguments生成数组

function getArr() {
  return Array.from(arguments)
}
console.log(getArr(1, 2, 3));//[1,2,3]

//有length属性对象生成的数组
let objarr = Array.from({ length: 5 }, (v, i) => i)
console.log(objarr); //[0,1,2,3,4]

//使用映射函数改变数组的值

Array.from('456', (value, i) => {
  console.log(value * 10, i);// 40,0  50,1  60,2
})

10、includes（ES6）
includes方法用来判断数组中是含有指定的值，如果有返回true，否则返回false

语法：arr.includes(searchVal,formIndex)

/**
*@param searchVal 需要查找的值
*@param formIndex 查找的起始位置的索引，默认是0，如果是负数则等于数组的长度加上负数的值，如果计算出的索引还是负数，则整个数组都会被搜索
*/

实例

var arr = ['a', 'b', 'c'];
 
arr.includes('c', 2);   //true
//如果起始索引大于数组的长度则返回false
arr.includes('c', 100); // false

// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97 计算的索引值小于0 则整个数组都会被搜索
 
var arr = ['a', 'b', 'c'];
 
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true

11、indexOf
indexOf方法用于返回指定元素第一次出现在数组或者字符串中的索引。如果没有返回-1

语法：arr.indexOf(val,start)
/**
*@param val 需要查找的值 必需 
*@param start 开始查找的索引 有效值为 0 -arr.length-1 || str.length-1
*/

实例

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4); // 6

let strr = 'healer'
console.log(strr.indexOf('h'));	// 0

12、lastIndexOf
lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。如果要检索的元素没有出现，则该方法返回 -1。该方法将从尾到头地检索数组中指定元素 val。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 val，则返回 val从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

语法：arr.lastIndexOf(val,start)
/**
*@param val 需要查找的值 必需 
*@param start 开始查找的索引 有效值为 0 -arr.length-1 || str.length-1
*/

实例

//从数组中的第四个位置查找字符串 "Apple"出现的位置：
//如果在数组或者字符串中的起始索引 位置之前存在 指定元素，则返回的是出现的最后一个 指定元素的位置。

var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.lastIndexOf("Apple",4);//2

13、isArray
isArray用来判断一个元素是否数组类型。是返回true否则返回false

语法：Array.isArray(obj)
/**
*@param obj 必需 要判断的对象
*/

实例

console.log(Array.isArray('1234')); // false
console.log(Array.isArray([1, 2])); // true 

//判断arguments是否是数组

function f() {
  return Array.isArray(arguments)
}
console.log(f(1, 2, 3)); // true 

14、join
join方法是可以把数组的元素转换为指定分隔符的一个字符串，它不会改变原来的数组

语法：arr.join(separator)
/**
*@param sepatator 可选参数 作为指定的分隔符
*/

实例：

let arr = ["hello", "healer", 1];

console.log(arr.join());   // hell0,healer,1
console.log(arr);         //[ 'hello', 'healer', 1 ]

console.log(arr.join("and")); // helloandhealerand1

15、map(ES6)
map方法会迭代数组每一个元素，会返回一个新的数组，但是不会改变原来数组。它与forEach的区别在于 map会返回一个新的数组，而forEach不会返回值，在forEach中对数组元素的变化会影响到原数组的值

语法：arr.map((item,index,arr) =>{
		return   do Something
	}
)

实例：

let arr = ["hello", "healer", 1];
let mapArr = arr.map((item, index, arr) => {
  return item + 1
})

console.log(arr);    // //[ 'hello', 'healer', 1 ]
console.log(mapArr); // [ 'hello1', 'healer1', 2 ]

//与forEach的区别
let foeEachArrr = arr.forEach((item, index, arr) => {
  arr[index] = item + 11
})

console.log('forEach-----------');
console.log(arr); // [ 'hello11', 'healer11', 12 ]
console.log(foeEachArrr); // Undefined

16、reduce
reduce方法接受一个函数作为累加器，数组中的每一个值从左到右开始缩减，最终返回一个累加值

语法：arr.reduce((prev,currentVa,index,arr){
	}
})

实例：

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue
}, 10) // 10

17、reverse
reverse方法用于翻转数组的元素。他会改变原数组

语法:arr.reverse()

实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse(); //Mango,Apple,Orange,Banana

18、sort
sort方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序

语法：arr.sort(function)

实例：

//数字排序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});

19、slice
slice方法可从已有的数组中返回选定的元素。
slice方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
slice不会改变原数组

语法：arr.slice(start,end)
/**
*@param start 可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
*@param end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
*/

实例：

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

20、some
some方法会对数组的每一个元素进行检测，如果有任何一个一元素符合指定条件则返回true,并且不会对后面的元素进行检测，否则会返回false，它不会改变原数组

语法：arr.some((item,index,arr) = {
		return  
	}
)

实例：

//检测数组中是否大于18的元素

let numArr = [12, 34, 5, 2134, 5, 61, 234]

let flag = numArr.some((item, index) => {
  if (item > 18) {
    console.log(index); // 1
  }
  return item > 18
})

console.log(flag);  // true

21、push
push方法会给数组的末尾添加一个或多个元素，并且改变数组的长度。push方法会返回数组的新长度，他会改变原数组

语法：arr.push(item1,item2,...)

实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi","Lemon","Pineapple") // Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple

22、pop
pop方法会删除数组的最末的元素，并返回删除的元素，它会改变原数组

语法：arr.pop()

实例：

const sites = ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'];
 
console.log(sites.pop());
// 输出结果为: "Baidu"
 
console.log(sites);
// 输出结果为: ['Google', 'Runoob', 'Taobao', 'Zhihu']
 
sites.pop();
 
console.log(sites);
//  输出结果为: ["Google", "Runoob", "Taobao"]

23、unshift
unshift方法会在数组开头添加一个或者多个元素，并返回数组的新长度，它会改变原数组

语法：arr.unshift（item1,item2,...）

实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple"); // Lemon,Pineapple,Banana,Orange,Apple,Mango

24、shift
shift会删除数组的最开头的元素，并且返回被删除的元素。它会改变原数组

语法：arr.shift()

实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift() // Orange,Apple,Mango

25、splice
splice方法可以删除或添加数组元素，它的返回是包含删除元素的数组，它会改变原数组

语法:arr.splice(index,num,item1,item2,..)
/**
*@param index 要删除元素的索引
*@param num 删除元素的个数 ，必须是数组，可是0代表不删除元素，如果不写，则默认删除index到数组末尾的所有元素
*@param item，item2 ...  要添加到index索引位置元素
*/

实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");// Banana,Orange,Lemon,Kiwi,Mango