Js中常用的数组方法

Array.push()

向数组尾部加入一个或多个元素,并返回数组的长度

	let arr = [1,2,3,4];
	let a = arr.push(5);
	console.log(a,arr);
	//运行结果如下
	//5, [1, 2, 3, 4, 5]

Array.pop()

删除数组的最后一个元素,并返回被删除的元素

	let arr = [1,2,3,4];
	let a = arr.pop();
	console.log(a,arr);
	//运行结果如下
	//4, [1, 2, 3]

Array.unshift()

向数组的首部添加一个元素,并返回数组的长度

	let arr = [1,2,3,4];
	let a = arr.unshift(0);
	console.log(a,arr);
	//运行结果如下
	//5, [0, 1, 2, 3, 4]

Array.shift()

删除数组第一个元素,并返回被删除的元素

	let arr = [1,2,3,4];
	let a = arr.shift();
	console.log(a,arr);
	//运行结果如下
	//5, [2, 3, 4]

Array.splice(index,num[,arr])

从该数组下标为index的位置开始,删除(截取)长度为num个元素,并把arr添加到数组末尾(arr可为数组,或单个元素)
该方法的返回值为被删元素的集合

	let arr = [1,2,3,4];
	let a = arr.splice(2,2,5);
	console.log(a,arr);
	//运行结果如下
	// [3, 4], [1, 2, 5]

Array.slice(start,end)

从下标为start的位置开始截取,到end-1的位置结束(不包括end位置),并返回截取的数组

  • 此方法不改变原数组
  • 当end大于数组长度或为空时,截取到数组末尾
	let arr = [1,2,3,4];
	let a = arr.slice(1);
	console.log(a,arr);
	//运行结果如下
	//[2, 3, 4], [1, 2, 3, 4]

Array.concat(arr1,arr2,…)

把数组与arr数组合并,返回一个新的数组

  • 此方法不会改变原数组
  • 可以传多个参数,参数之间用逗号隔开
	let arr = [1,2,3,4];
	let arr1 = [5,6,7,8]
	let arr2 = [9,10]
	let a = arr.concat(arr1,arr2);
	console.log(a);
	//运行结果如下
	//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.join(字符串)

把数组每个元素分割,元素之间用特定字符串隔开,拼接成字符串并返回

  • 参数可为任意字符串
  • 如参数为空则默认用逗号分割
	let arr = [1,2,3,4];
	let a = arr.join(".");
	let b = arr.join();
	console.log(a);
	//运行结果如下
	//1.2.3.4
	console.log(b);
	//运行结果如下
	//1,2,3,4

Array.toString()

把数组作为字符串返回,每个元素之间用逗号隔开,和.join()方法类似

	let arr = [1,2,3,4];
	let a = arr.toString();
	console.log(a);
	//运行结果如下
	//1,2,3,4

Array.forEach(fn,thisValue)

此方法用来遍历数组,fn是一个函数,thisValue代表fn里this的指向(不常用,可不传)
fn里有三个形参
第一个为数组的对象
第二个为当前数组对象的下标
第三个为当前数组

	let arr = [1,2,3,4];
	let a = arr.forEach(function(item,index,arr){
		console.log(item,index,arr)
	});
	//运行结果如下
	/* 
		1, 0, [1, 2, 3, 4]
		2, 1, [1, 2, 3, 4]
		3, 2, [1, 2, 3, 4]
		4, 3, [1, 2, 3, 4]
	*/

Array.map(fn,thisValue)

.map方法和.forEach相同,传入的参数也是一样的,唯一的区别就是.map方法有返回值,并把返回值组成新的数组返回

	let arr = [1,2,3,4];
	let a = arr.map(function(item,index,arr){
		console.log(item,index,arr)
		return 6
	});
	console.log(a);
	//运行结果如下
	/* 
		1, 0, [1, 2, 3, 4]
		2, 1, [1, 2, 3, 4]
		3, 2, [1, 2, 3, 4]
		4, 3, [1, 2, 3, 4]
		
		[6, 6, 6, 6]
	*/

Array.filter(fn,thisValue)

此方法的用法和参数和.forEach相同,当fn返回值为true的时候,返回当前元素,并把为true的元素组成新的数组返回

	let arr = [1,2,3,4];
	let a = arr.filter(function(item,index,arr){
		return item == 4
	});
	console.log(a);
	//运行结果
	//[4]

Array.every(fn,thisValue)

此方法的用法和参数和.forEach相同,当fn所有元素的返回值都为true的时候,返回true,否则返回false

	let arr = [1,2,3,4];
	let a = arr.every(function(item,index,arr){
		return item == 4
	});
	console.log(a);
	//运行结果
	//false
	let b = arr.every(function(item,index,arr){
		return item > 0
	});
	console.log(b);
	//运行结果
	//true

Array.some(fn,thisValue)

此方法的用法和参数和.forEach相同,当fn的返回值都为false的时候,返回false,否则返回true

	let arr = [1,2,3,4];
	let a = arr.every(function(item,index,arr){
		return item == 4
	});
	console.log(a);
	//运行结果
	//true
	let b = arr.every(function(item,index,arr){
		return item > 10
	});
	console.log(b);
	//运行结果
	//false

Array.reduce(fn(prev,next){})

把数组元素计算为一个值(从左到右),通常用于计算数组的和
prev :初始值为第一个元素,后面会赋值为fn的返回值
next :初始值为第二个元素,后面为第三个,第四个…最后一个

  • 此方法只循环Array.length-1 次
	let arr = [1,2,3,4];
	let a = arr.reduce(function(prev,next){
		return prev + next
	});
	console.log(a);
	//运行结果
	//10

Array.reduceRight(fn(prev,next){})

此方法与上个方法一样,只不过运算顺序为从右到左

Array.sort()

把数组元素按照Unicode码进行排序

  • 此方法会改变原数组
	let arr = ["as","iy","编程","ro"];
	let a = arr.sort();
	console.log(a);
	//运行结果
	//["as", "iy", "ro", "编程"]

.sort方法也可用来进行元素大小排序,下面演示的两种传参方式皆可使用,

  • 返回形参a - 形参b,数组会从大到小排序
	let arr = ["5","8","84","66"];
	let a = arr.sort(function(a,b){
		return a-b;
	});
	console.log(a);
	//运行结果
	//["5", "8", "66", "84"]
  • 返回形参b - 形参a,数组会从大到小排序
	let arr = ["5","8","84","66"];
	let a = arr.sort((a,b)=>b-a);
	console.log(a);
	//运行结果
	//["84", "66", "8", "5"]

对于复杂的数据数组,我们可以封装属于自己排序方法

	let students = [
		{name: "tom", age: 18},
		{name: "jack", age: 26},
		{name: "rose", age: 20}
	]
	let sortByAge = (a, b) => a.age - b.age
	students.sort(sortByAge)
	/* 最后输出
	[{name: "tom", age: 18},
	 {name: "rose", age: 20},
	 {name: "jsack", age: 26}]
	*/

其实我们还可以写的再灵活一点,更低耦合点

	// 先想一下如果还有学生身高数据,要我们按身高来进行排序,
	// 如果按上面那种写法我们得封装两个方法,
	// 如果以后还有更多的属性,这样是不是很麻烦
	// 看下面↓
	let students = [
		{name: "tom", age: 18, height: 177},
		{name: "jack", age: 26, height: 170},
		{name: "rose", age: 20, height: 166}
	]
	let sortBy = (attr) => {return (a, b)=> a[attr] - b[attr]}
	students.sort(sortBy("height"))
	/*输出
	[{name: "rose", age: 20, height: 166}
	 {name: "jack", age: 26, height: 170}
	 {name: "tom", age: 18, height: 177}]
	*/
	students.sort(sortBy("age"))
	/*输出
	[{name: "tom", age: 18, height: 177}
	 {name: "rose", age: 20, height: 166}
	 {name: "jack", age: 26, height: 170}]
	*/

Array.reverse()

把数组的元素反转,会改变原数组

	let arr = ["5","8","84","66"];
	let a = arr.reverse();
	console.log(a);
	console.log(arr);
	//运行结果
	//["66", "84", "8", "5"]
	//["66", "84", "8", "5"]

Array.find()

返回符合条件的元素,在第一次条件为true后,停止该循环并返回该元素,如果没有符合条件的元素,则返回undefined

	let arr = ["5","8","84","66"];
	let a = arr.find((item,index)=>item>5);
	console.log(a);
	console.log(arr);
	//运行结果
	//8   类型为字符串类型

Array.findIndex()

用法和上一个相同,返回符合条件的元素的下标,在第一次条件为true后,停止该循环并返回该元素下标,如果没有符合条件的元素,则返回undefined

	let arr = ["5","8","84","66"];
	let a = arr.findIndex((item,index)=>item>5);
	console.log(a);
	console.log(arr);
	//运行结果
	//1

Array.includes(string[,fromIndex])

查找一个数组是否包含一个指定的值。如果是返回 true,否则false

  • string:查找的字符
  • 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

Array.indexOf(string[,fromIndex])

用法和参数与上一个方法相同。查找string,如果查找到则返回该元素的下标,如果没有找到,则返回-1

	let arr = ["aa", "bb", "cc", "dd"]
	console.log(arr.indexOf("bb"))       // 1
	console.log(arr.indexOf("bb", 2))    // -1

Array.lastIndex(string[,beforIndex])

在数组中查找string最后一次出现的位置,并返回当前位置的索引值,如果查找不到则返回-1。
如果有第二个参数,则表示在索引beforIndex(包括该元素)之前string最后一次出现的位置

	let arr = ["aa", "bb", "cc", "dd", "bb"]
	console.log(arr.lastIndexOf("bb"))      // 4
	console.log(arr.lastIndexOf("bb", 2))   // 1

Array.isArray()

判断是否为数组,如果是则返回true,不是则返回false

	let obj = {}
	let arr = []
	Array.isArray(obj)  // false
	Array.isArray(arr)  // true

Array.valueOf()

返回该数组的原始值

	let arr = [1,2,3]
	console.log(arr.valueOf())
	//  [1, 2, 3]

Array.entries() Array.keys() Array.values()

ES6 提供三个新的方法: entries() , keys() 和 values() 用于遍历数组。它们都返回一个遍历器对象,
可以用 for…of 循环进行遍历,唯一的区别是 keys() 是对键名的遍历、 values() 是对键值的遍历, entries() 是对键值对的遍历。

	let arr = ["a", "b", "c"]
	let item = arr.entries()
	console.log(item.next().value)  // [0, "a"]
	console.log(item.next().value)  // [1, "b"]
	console.log(item.next().value)  // [2, "c"]
	console.log(item.next().value)  // undefined
	 
	let ikey = arr.keys()
	console.log(ikey.next().value)  // 0
	console.log(ikey.next().value)  // 1
	console.log(ikey.next().value)  // 2
	console.log(ikey.next().value)  // undefined
	 
	let ivalue = arr.values()
	console.log(ivalue.next().value)  // a
	console.log(ivalue.next().value)  // b
	console.log(ivalue.next().value)  // c
	console.log(ivalue.next().value)  // undefined

Array.flat(num)

用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数组没有影响。
num:表示拉几层的嵌套数组,如果不确定可以写Infinity,这样不管多少层都可以

	[1, 2, [3, 4]].flat()      // [1, 2, 3, 4]
	[1, 2, [3, [4, 5]]].flat() // [1, 2, 3, [4, 5]]
	[1, 2, [3, [4, 5]]].flat(2)// [1, 2, 3, 4, 5]
	[1, [2, [3]]].flat(Infinity) // [1, 2, 3]
	// 如果原数组有空位,flat()方法会跳过空位。
	[1, 2, , 4, 5].flat()       // [1, 2, 4, 5]

Array.flatMap()

对原数组的每个成员执行一个函数,相当于执行map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

	[2, 3, 4].flatMap((x) => [x, x * 2])
	// [2, 4, 3, 6, 4, 8]

Array.fill(string[,start,end])

把数组的元素替换为string,从下标为start的位置开始,到end(不包括end)的中间所有元素都被替换,如果不加start和end代表全部替换,此方法会改变原数组

	let arr = ["a", "b", "c", "d", "e"]
	arr.fill("dd")
	console.log(arr)
	// ["dd", "dd", "dd", "dd", "dd"]
	arr.fill("a", 1, 3)
	console.log(arr)
	// ["dd", "a", "a", "dd", "dd"]

Array.copyWithin(toIndex[,start,end])

从数组的指定位置拷贝元素到数组的另一个指定位置中

  • toIndex:拷贝到的索引值为toIndex的位置
  • start:从start的位置开始拷贝
  • end:拷贝到end的位置结束(不包括end)
	let arr = ["a", "b", "c", "d", "e", "f"];
	arr.copyWithin(2, 0, 2);
	console.log(arr)
	// ["a", "b", "a", "b", "e", "f"]

Array.toLocaleString()

这方法数组基本不用了,主要操作日期对象返回一个日期,该日期使用当前区域设置并已被转换为字符串。

	let arr = ["a", "b", "c"]
	arr.toLocaleString()
	//  返回空
	["a", "b", "c"].toLocaleString()
	// "a,b,c"
	new Date().toLocaleString()
	// "2020/3/7 上午12:26:31"

猜你喜欢

转载自blog.csdn.net/weixin_48179599/article/details/106413428