JS 数组操作

那么深沉

JS数组操作如下：

1. // at(), 用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数
2. const arr = [{name: 'a', age: 15}, {name: 'b', age: 12}, {name: 'c', age: 13}, {name: 'd', age: 12}, {name: 'e', age: 12}];
3. console.log(arr.at(1)); // {name: 'b', age: 12}
4. console.log(arr.at(-3)); // {name: 'c', age: 13}
6. // concat(), 用于连接两个或多个数组，该方法不会改变现有的数组，而是返回一个新的数组
7. const arr1 = [1,2,3];
8. const arr2 = [6,5,4];
9. console.log(arr1.concat(arr2), arr1, arr2);
11. // copyWithin(), 用于从数组的指定位置拷贝元素到数组的另一个指定位置中，会改变原数组
12. // copyWithin(target, start, end)
13. // target: 必需。复制到指定目标索引位置
14. // start: 可选。元素复制的起始位置
15. // end: 可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
16. const fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
17. fruits.copyWithin(2, 0, 2);
19. // entries(), 返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key， 数组元素作为 value。
20. let fruits = ["Banana", "Orange", "Apple", "Mango"];
21. console.log(fruits.entries());
23. // every(function), 用于检测数组所有元素是否都符合指定条件（通过函数提供）,不会对空数组进行检测,不会改变原始数组
24. // 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
25. // 如果所有元素都满足条件，则返回 true
26. let arr = [{name: 'a', age: 15}, {name: 'b', age: 12}, {name: 'c', age: 13}, {name: 'd', age: 12}, {name: 'e', age: 12}];
27. let res1 = arr.every(el => el.age > 10);
28. let res2 = arr.every(el => el.age >= 15);
29. console.log(res1, res2); // true false
31. // fill(value, start, end), 用于将一个固定值替换数组的元素
32. // value: 必需。填充的值
33. // start: 可选。开始填充位置
34. // end: 可选。停止填充位置 (默认为 array.length)
35. let fruits = ["Banana", "Orange", "Apple", "Mango"];
36. fruits.fill("Runoob", 2, 4); // ['Banana', 'Orange', 'Runoob', 'Runoob']
38. // filter(function), 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，不会对空数组进行检测，不会改变原始数组
39. let arr = [1,2,3,5,7,8,9,2,4,5];
40. let res1 = arr.filter(el => el> 5);
41. console.log(res1, arr); //[7, 8, 9], [1, 2, 3, 5, 7, 8, 9, 2, 4, 5]
43. // find(function) 返回通过测试（函数内判断）的数组的第一个元素的值, 没有改变数组的原始值
44. // 为数组中的每个元素都调用一次函数执行：
45. //   当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数
46. //   如果没有符合条件的元素返回 undefined
47. //   对于空数组，函数是不会执行的
48. // array.find(function(currentValue, index, arr),thisValue)
49. /**
50. * array.find(function(currentValue, index, arr),thisValue)
51. * currentValue        必需。当前元素
52. * index: 可选。当前元素的索引值
53. * arr: 可选。当前元素所属的数组对象
54. * thisValue: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
55. */
56. let arr = [{a:2},{a:1},{a:5},{a:3},{a:1}];
57. let res = arr.find((item, index, items) => {
58.     console.log(item, index, items)
59.     return item.a === 3;
60. })
61. console.log(res);//{a:3}
63. // findIndex() 返回传入一个测试条件（函数）符合条件的数组第一个元素位置, 没有改变数组的原始值
64. // 为数组中的每个元素都调用一次函数执行：
65. //   当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数
66. //   如果没有符合条件的元素返回 -1
67. //   对于空数组，函数是不会执行的
68. /**
69. * array.findIndex(function(currentValue, index, arr), thisValue)
70. * currentValue: 必需。当前元素
71. * index: 可选。当前元素的索引
72. * arr: 可选。当前元素所属的数组对象
73. * thisValue: 可选。 传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
74. */
75. let arr = [{a:2},{a:1},{a:5},{a:3},{a:1}];
76. let res = arr.findIndex((item, index, items) => {
77.     console.log(item, index, items)
78.     return item.a === 3;
79. })
80. console.log(res);//3
82. // findLast() 返回通过测试（函数内判断）的数组从后向前查找的第一个元素的值, 没有改变数组的原始值
83. // 为数组中的每个元素都调用一次函数执行：
84. //   当数组中的元素在测试条件时返回 true 时, findLast() 返回符合条件的元素，之后的值不会再调用执行函数
85. //   如果没有符合条件的元素返回 undefined
86. //   对于空数组，函数是不会执行的
87. // array.findLast(function(currentValue, index, arr),thisValue)
88. /**
89. * array.findLast(function(currentValue, index, arr),thisValue)
90. * currentValue        必需。当前元素
91. * index: 可选。当前元素的索引值
92. * arr: 可选。当前元素所属的数组对象
93. * thisValue: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
94. */
95. let arr = [{a:2},{a:1},{a:5},{a:3},{a:1}];
96. let res = arr.findLast((item, index, items) => {
97.     console.log(item, index, items)
98.     return item.a === 3;
99. })
100. console.log(res);//{a:3}
102. // findLastIndex() 返回传入一个测试条件（函数）符合条件的数组从后向前查找的第一个元素位置, 没有改变数组的原始值
103. // 为数组中的每个元素都调用一次函数执行：
104. //   当数组中的元素在测试条件时返回 true 时, findLastIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数
105. //   如果没有符合条件的元素返回 -1
106. //   对于空数组，函数是不会执行的
107. /**
108. * array.findLastIndex(function(currentValue, index, arr), thisValue)
109. * currentValue: 必需。当前元素
110. * index: 可选。当前元素的索引
111. * arr: 可选。当前元素所属的数组对象
112. * thisValue: 可选。 传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
113. */
114. let arr = [{a:2},{a:1},{a:5},{a:3},{a:1}];
115. let res = arr.findLastIndex((item, index, items) => {
116.     console.log(item, index, items)
117.     return item.a === 3;
118. })
119. console.log(res);//3
121. // flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
122. // flat会移除数组中的空项
123. // flat返回一个包含将数组与子数组中所有元素的新数组
124. /**
125. * flat()
126. * flat(depth)
127. * depth: 指定要提取嵌套数组的结构深度，默认值为 1。
128. */
129. let arr1 = [1, 2, [3, 4]];
130. arr1.flat();// [1, 2, 3, 4]
132. let arr2 = [1, 2, [3, 4, [5, 6]]];
133. arr2.flat();// [1, 2, 3, 4, [5, 6]]
135. let arr3 = [1, 2, [3, 4, [5, 6]]];
136. arr3.flat(2);// [1, 2, 3, 4, 5, 6]
138. //使用 Infinity，可展开任意深度的嵌套数组
139. let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
140. arr4.flat(Infinity);// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
142. //扁平化与数组空项：flat() 方法会移除数组中的空项：
143. var arr5 = [1, 2, , 4, 5];
144. arr4.flat();// [1, 2, 4, 5]
146. // flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
147. // 返回新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为 1
148. /**
149. * flatMap(function(currentValue, index, array) {  }, thisArg)
150. * currentValue: 当前正在数组中处理的元素
151. * index: 可选的。数组中正在处理的当前元素的索引
152. * array: 可选的。被调用的 map 数组
153. * thisArg: 可选的。执行 callback 函数时 使用的this 值
154. */
155. var arr1 = [1, 2, 3, 4];
156. arr1.map(x => [x * 2]);// [[2], [4], [6], [8]]
157. arr1.flatMap(x => [x * 2]);// [2, 4, 6, 8]
158. // only one level is flattened
159. arr1.flatMap(x => [[x * 2]]);// [[2], [4], [6], [8]]
161. let arr2 = ["it's Sunny in", "", "California"];
162. arr2.map(x => x.split(" "));// [["it's","Sunny","in"],[""],["California"]]
163. arr2.flatMap(x => x.split(" "));// ["it's","Sunny","in", "", "California"]
165. let a = [5, 4, -3, 20, 17, -33, -4, 18];
166. let b = a.flatMap( (n) =>
167.     (n < 0) ? [] :
168.     (n % 2 == 0) ? [n] :
169.     [n-1, 1]
170. )
171. console.log(b);// [4, 1, 4, 20, 16, 1, 18]
173. // forEach() 用于调用数组的每个元素，并将元素传递给回调函数，对于空数组是不会执行回调函数
174. /**
175. * array.forEach(callbackFn(currentValue, index, arr), thisValue)
176. * currentValue: 必需。当前元素
177. * index: 可选, 当前元素的索引值
178. * arr: 可选。当前元素所属的数组对象
179. * thisValue: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
180. */
181. // forEach() 本身是不支持的 continue 与 break 语句的，我们可以通过 some 和 every 来实现。
182. // 使用 return 语句实现 continue 关键字的效果：
183. let arr = [1, 2, 3, 4, 5];
184. arr.forEach(function (item) {
185.     if (item === 3) return;
186.     console.log(item); // 1 2  4 5，跳过了3
187. });
189. // includes() 用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
190. /**
191. * arr.includes(searchElement, fromIndex)
192. * searchElement: 必须。需要查找的元素值
193. * fromIndex: 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
194. */
195. let arr = [1,2,3,4,5,6];
196. console.log(arr.includes(3));// true
197. console.log(arr.includes(2, 3));// false
198. console.log(arr.includes(4, -3));// true
200. // indexOf() 返回数组中某个指定的元素位置
201. // 该方法将从头到尾地检索数组，看它是否含有对应的元素
202. // 开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）
203. // 如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。
204. // 如果在数组中没找到指定元素则返回 -1
205. /**
206. * array.indexOf(item,start)
207. * item: 必须。查找的元素
208. * start: 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
209. */
210. let fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
211. conosle.log(fruits.indexOf("Apple",4)); // 6
213. // join() 用于把数组中的所有元素转换一个字符串,元素是通过指定的分隔符进行分隔的
214. /**
215. * array.join(separator)
216. * separator: 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
217. */
218. let fruits = ["Banana", "Orange", "Apple", "Mango"];
219. console.log(fruits.join(" and ")); //Banana and Orange and Apple and Mango
221. // keys() 此方法用于从数组创建一个包含数组键的可迭代对象
222. // 如果对象是数组返回 true，否则返回 false
223. let fruits = ["Banana", "Orange", "Apple", "Mango"];
224. fruits.keys();
226. // lastIndexOf() 此方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找
227. // 如果要检索的元素没有出现，则该方法返回 -1
228. /**
229. * array.lastIndexOf(item,start)
230. * item：必需。规定需检索的字符串值
231. * start：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1
232. * 如省略该参数，则将从字符串的最后一个字符处开始检索
233. */
234. let numbers = [2, 3, 4, 1, 2, 3, 4];
235. console.log(numbers.lastIndexOf(2)); // 4
237. // map() 此方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
238. // 不会对空数组进行检测，不会改变原始数组
239. /**
240. * array.map(function(currentValue,index,arr), thisValue)
241. * currentValue：必须。当前元素的值
242. * index：可选。当前元素的索引值
243. * arr：可选。当前元素属于的数组对象
244. * thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值
245. * 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象
246. */
247. let numbers = [1, 2, 3, 4];
248. let newNums = numbers.map(el => el * 2);
249. console.log(newNums); //[2,4,6,8]
251. // pop() 此方法用于删除数组的最后一个元素并返回删除的元素，此方法改变数组的长度
252. const sites = ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'];
253. console.log(sites.pop());// 输出结果为: "Baidu"
254. console.log(sites);// 输出结果为: ['Google', 'Runoob', 'Taobao', 'Zhihu']
256. // push() 此方法可向数组的末尾添加一个或多个元素，并返回新的长度
257. // 此方法改变数组的长度
258. let numbers = [1, 2, 3, 4];
259. numbers.push(5);// 5
260. console.log(numbers);// [1, 2, 3, 4, 5]
262. // reduce() 此方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
263. /**
264. * array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
265. * total: 必需。初始值, 或者计算结束后的返回值
266. * currentValue: 必需。当前元素
267. * currentIndex: 可选。当前元素的索引
268. * arr: 可选。当前元素所属的数组对象
269. * initialValue: 可选。传递给函数的初始值
270. */
271. let numbers = [1, 2, 3, 4];
272. function getSum(total, num) {
273.     return total + Math.round(num);
274. }
275. numbers.reduce(getSum, 0);//10
277. // reduceRight() 方法的功能和 reduce() 功能是一样的
278. // 不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加
279. // 对于空数组是不会执行回调函数的
280. /**
281. * array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
282. * total: 必需。初始值, 或者计算结束后的返回值。
283. * currentValue: 必需。当前元素
284. * currentIndex: 可选。当前元素的索引
285. * arr: 可选。当前元素所属的数组对象。
286. * initialValue: 可选。传递给函数的初始值
287. */
288. let nums = [3,4,5,6,7,8];
289. let all = nums.reduceRight((total, currentValue, currentIndex, arr) => {
290.     console.log(total, currentValue, currentIndex, arr);
291.     if(currentValue % 2 === 0){
292.         return total - currentValue;
293.     }
294.     return currentValue;
295. });
296. console.log(all);
298. // reverse() 用于颠倒数组中元素的顺序
299. let ips = [1,2,3,4,5];
300. console.log(ips.reverse());//[5, 4, 3, 2, 1]
302. // shift() 用于把数组的第一个元素从其中删除，并返回第一个元素的值, 此方法改变数组的长度
303. let stu = [3,2,4,1,5,6,8];
304. console.log(stu.shift(), stu);//3  [2, 4, 1, 5, 6, 8]
306. // slice() 可从已有的数组中返回选定的元素; 可提取字符串的某个部分，并以新的字符串返回被提取的部分; 不会改变原始数组
307. /**
308. * array.slice(start, end)
309. * start: 可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）
310. * end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）
311. * 返回一个新的数组，包含从 start（包括该元素） 到 end （不包括该元素）的 arrayObject 中的元素
312. */
313. let children = [1,2,3,4,5,6,7,8];
314. console.log(children.slice(2, 5));//[3, 4, 5]
315. console.log(children.slice(2, -2));//[3, 4, 5, 6]
316. console.log(children.slice(-5, -1));//[4, 5, 6, 7]
318. // some() 用于检测数组中的元素是否满足指定条件（函数提供）, 不会改变原始数组
319. // some() 方法会依次执行数组的每个元素：
320. // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
321. // 如果没有满足条件的元素，则返回false
322. // some() 不会对空数组进行检测
323. /**
324. * array.some(function(currentValue,index,arr),thisValue)
325. * function(currentValue,index,arr): 必须。函数，数组中的每个元素都会执行这个函数
326. * currentValue: 必须。当前元素的值
327. * index: 可选。当前元素的索引值
328. * arr: 可选。当前元素属于的数组对象
329. * thisValue: 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"
330. */
331. let people = [2,3,1,5,3,6,7,8,4];
332. let ressult = people.some((value, index, arr) => {
333.     console.log(value, index, arr);
334.     return value === 5;
335. });
336. console.log(ressult); // true
338. // sort() 用于对数组的元素进行排序; 排序顺序可以是字母或数字，并按升序或降序; 默认排序顺序为按字母升序;
339. /**
340. * array.sort(sortfunction)
341. * sortfunction: 可选。规定排序顺序。必须是函数
342. */
343. let points = [40,100,1,5,25,10];
344. //数字排序（数字和升序）
345. points.sort(function(a,b){return a-b});
346. console.log(points); //[1, 5, 10, 25, 40, 100]
347. //数字排序（数字和降序）
348. points.sort(function(a,b){return b-a;})
349. console.log(points); //[100, 40, 25, 10, 5, 1]
350. //数字排序 (字母和降序):
351. let fruits = ["Banana", "Orange", "Apple", "Mango"];
352. fruits.sort();
353. //升序
354. console.log(fruits); //['Apple', 'Banana', 'Mango', 'Orange']
355. fruits.reverse();
356. console.log(fruits); //['Orange', 'Mango', 'Banana', 'Apple']
358. // splice() 用于添加或删除数组中的元素,这种方法会改变原始数组
359. /**
360. * array.splice(index,howmany,item1,.....,itemX)
361. * index: 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字
362. * howmany: 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素
363. * item1,.....,itemX: 可选。要添加到数组的新元素
364. */
365. let arr = ['eric', 'lee', 'jhon'];
366. let res = arr.splice(1, 1);
367. console.log(arr, res); //['eric', 'jhon'] ['lee']
369. let arr1 = [1,2,3,4,5];
370. let res1 = arr1.splice(2, 2, 7,8,9);
371. console.log(arr1, res1); //[1, 2, 7, 8, 9, 5]  [3, 4]
373. // toLocaleString()
375. // toReversed()
377. // toSorted()
379. // toSpliced()
381. // toString() 可把数组转换为字符串，并返回结果，数组元素用逗号分隔
382. let arr = [1,2,3,4,5];
383. console.log(arr.toString());// 1,2,3,4,5
385. // unshift() 可向数组的开头添加一个或更多元素，并返回新的长度, 该方法将改变数组的数目
386. let arr = [2,3,4,5,6];
387. arr.unshift(1,2);// 7
388. console.log(arr);//[1, 2, 2, 3, 4, 5, 6]
390. // values() 此方法用于从数组创建一个包含数组键的可迭代对象
391. // 如果对象是数组返回 true，否则返回 false
392. let arr = [2,3,4,5,6];
393. arr.values();
395. // with() // 缺点较多，不建议使用

复制代码

来源:https://www.cnblogs.com/fishlittle/p/17389719.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！