JavaScript 数组方法使用总结包含ES6

Array.from 方法用于将两类对象转为真正的数组

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };
// ES5的写法 var arr1 = [].slice.call(arrayLike);
 // ['a', 'b', 'c'] 
 // ES6的写法 
 let arr2 = Array.from(arrayLike);// ['a', 'b', 'c']

实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组

let ps = document.querySelectorAll('p'); 
Array.from(ps).forEach((p)=> {

 console.log(p); 
 
 }); 
 
 // 展开语法
 [...ps].forEach((p)=> {
 
	 console.log(p); 
	 
	 }); 
// arguments对象
 function foo() {
 	return Array.from(arguments);
  }

Array.of() 方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
这个方法的主要目的,是弥补数组构造函数Array()的不足。因为参数个数的不同,会导致Array()的行为有差异。
Array() // [] 
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
上面代码中,Array方法没有参数、一个参数、三个参数时,返回结果都不一样。只有当参数个数不少于2个时,Array()才会返回由参数组成的新数 组。参数个数只有一个时,实际上是指定数组的长度。

Array.of() // [] 
Array.of(undefined) // [undefined] 
Array.of(1) // [1] 
Array.of(1, 2) // [1, 2]

copyWithin() 在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方 法,会修改当前数组。

  • target 必需。复制到指定目标索引位置。
  • start 可选。元素复制的起始位置。
  • end 可选。停止复制的索引位置 (默认为 array.length)。如果为负值,表示倒数。
    copyWithin: ƒ copyWithin(target, start, end) 赋值数组,
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
// 将3号位复制到0号位 
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] 
// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1) 
// [4, 2, 3, 4, 5] // 将3号位复制到0号位 
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
 // {0: 1, 3: 1, length: 5} 
 // 将2号位到数组结束,复制到0号位
  var i32a = new Int32Array([1, 2, 3, 4, 5]); 
  i32a.copyWithin(0, 2); // Int32Array [3, 4, 5, 4, 5] 
  // 对于没有部署TypedArray的copyWithin方法的平台 
  // 需要采用下面的写法 
  [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
   // Int32Array [4, 2, 3, 4, 5]

上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。

用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

find() 找出第一个符合条件的数组成员

所有数组成员依次执行该回调函数,直到找出第一个返回值 为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

[1, 4, -5, 10].find((n) => n < 0) // -5
[1, 5, 10, 15].find((value, index, arr) => value > 9; ) // 10
[1, 5, 10, 15].find((value, index, arr) => value > 100 ) // undefined

findIndex() 返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1

[1, 5, 10, 15].findIndex((value, index, arr) => value > 100 ) //-1
[1, 5, 10, 15].findIndex((value, index, arr) => value > 100 ) //3

fill() 把数组中的值替换成一个相同的固定值 把一个值可以复制此

数组中已有的元素,会被全部抹去

['a', 'b', 'c'].fill(7) // [7, 7, 7]

fill方法还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置

['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c']

entries() keys()和values() 可以 用for…of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历

for-of循环

includes() 查找数组中是否存在某一个值 匹配的字符串返回 true,否则返回 false。

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

indexOf 第一个出现位置 如果不到就返回-1

[1,2,2,3,9].indexOf(9) // 4 
[1,2,2,3,9].indexOf(8) // -1

Map和Set数据结构有一个has方法,需要注意与includes区分
Set与WeakSet 和 Map WeakMap

数组的空位 数组的空位指,数组的某一个位置没有任何值。比如,Array构造函数返回的数组都是空位。

  • forEach(), filter(), every() 和some()都会跳过空位。
  • map()会跳过空位,但会保留这个值
  • join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
  • for…of 不会 忽略空位
Array(3) // [, , ,]

Array.from方法会将数组的空位,转为undefined,也就是说,这个方法不会忽略空位

Array.from(['a',,'b']) // [ "a", undefined, "b" ]

扩展运算符(…)也会将空位转为undefined。

[...['a',,'b']] // [ "a", undefined, "b" ]

entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。

flat 扁平化数组 但是可以用 join() 或者来toString()

join()分割数组 有默认参数 为 (,号)

	formlist = [
		  [{
		    name: 'name1',
		    valus: '',
		    isfocus: false,
		  },
		  {
		    name: 'uuid1',
		    valus: '',
		    isfocus: false,
		  },
		  ],
		  [{
		    name: 'name2',
		    valus: '',
		    isfocus: false,
		  },
		  {
		    name: 'uuid2',
		    valus: '',
		    isfocus: false,
		  },
		  ],
		  [{
		    name: 'name3',
		    valus: '',
		    isfocus: false,
		  },
		  {
		    name: 'uuid3',
		    valus: '',
		    isfocus: false,
		  },
		  ]
		];
			
		list = [1, 2, 3, [4, 8, [9, 0],]]
		
		console.log(list.join()); //1,2,3,4,8,9,0
		
		console.log(list.toString()); //1,2,3,4,8,9,0
			
		console.log(formlist.flat(2));	 // object [{…}, {…}, {…}, {…}, {…}, {…}]
		//如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数
		console.log(formlist.flat(Infinity)) /*[
  { name: 'name1', valus: '', isfocus: false },
  { name: 'uuid1', valus: '', isfocus: false },
  { name: 'name2', valus: '', isfocus: false },
  { name: 'uuid2', valus: '', isfocus: false },
  { name: 'name3', valus: '', isfocus: false },
  { name: 'uuid3', valus: '', isfocus: false }
]*/

join() 或者来toString() 来扁平化数组,存字符串或者数字数组有效,对数组对象无效 用于数组对象返回的是字符串[object Object]

		console.log(formlist.toString());  // 字符串 [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
		console.log(formlist.join()); // 字符串 [object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

map 返回一个新数组,也可返回指定条件的

	let obj = [{name:'ls',age:'15',sex:'',jg:'四川.广安'},{name:'张三丰',age:'15',sex:'',jg:'重庆.渝北'},{name:'斑斑',age:'25',sex:'',jg:'湖北.武汉'},{name:'有多少',age:'22',sex:'',jg:'四川.成都'},{name:'ls',age:'15',sex:'',jg:'福建'}];

	let felt =  obj.map((e)=>{
	    if(e.jg.includes('四川')){
	        return e;
	    }
	})
	
for (const i in felt) {
	    for (const s in felt[i]) {
	        console.log( felt[i][s])
	    }
	}

在这里插入图片描述

在这里插入图片描述

some 数组中一个为真 就返回true 否则就返回false

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

let mm = arr.some((e) => {
	return e >= 7;
})
let mm1 = arr.some((e) => {
	return e >= 6;
})
console.log(mm,mm1)// false true

every() 数组中全部满足则返回ture 一个满足都返回false


var arr = [1, 2, 3, 4, 5, 6];
let mm = arr.every((e) => {
  return e >= 1;
})
let mm1 = arr.every((e) => {
  return e >= 7;
})
console.log(mm, mm1) //true false

参数为 单个值, 多个以逗号分开, 也可是一个数组使用展开运算
concat: ƒ concat() //合并数组


/**
 * 数组中一个满足条件的 就返回true 
 */
every: ƒ every()


/**
 * 过滤数组中的数据 返回过滤完后的数据
 */
filter: ƒ filter()



flatMap: ƒ flatMap()

/**
 * 返回一个指定的值在数组中出现的最后一次索引
 */
lastIndexOf: ƒ lastIndexOf()

/**
 * 删除数组最后一个
 */
pop: ƒ pop()

/**
 * 向数组最后位置追加数据
 */
push: ƒ push()

/**
 * reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
	参数		描述
	total	必需。初始值, 或者计算结束后的返回值。
	currentValue	必需。当前元素
	currentIndex	可选。当前元素的索引
	arr	可选。当前元素所属的数组对象。
	initialValue	可选。传递给函数的初始值
 * array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
 *  数组和
 * let nb = numbers = [15, 3, 2, 4.7,1.3]; 
	let conh =  nb.reduce((total, currentValue, currentIndex, ar)=>{
	   return total+ar[currentIndex]
	},0)
	console.log(conh)
 */
reduce: ƒ reduce()

/**
 * reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
 */
reduceRight: ƒ reduceRight()

/**
 * 颠倒数组颠倒数组中元素的顺序:
 */
reverse: ƒ reverse()

/**
 * shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
 */
shift: ƒ shift()

/**
 * start, 可选。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
 * end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
 * 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
 * array.slice(start, end)
 */
slice: ƒ slice()
/**
 * some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false。
 */
some: ƒ some()

/**
 * 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
 */
sort: ƒ sort()

/**
 * 方法用于添加或删除数组中的元素
 * 这种方法会改变原始数组
 * 
 * index	必需。规定从何处添加/删除元素。该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
 * howmany	可选。规定应该删除多少元素。必须是数字,但可以是 "0"。如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
 * item1, ..., itemX	可选。要添加到数组的新元素
 * 	如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
 * array.splice(index,howmany,item1,.....,itemX)
 * 
 */
splice: ƒ splice()

/**
 * 回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。
 */
toLocaleString: ƒ toLocaleString()

/**
 * 将数组转为字符串
 */
toString: ƒ toString()

/**
 * 向数组前面添加数据
 */
unshift: ƒ unshift()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值