js Array All In One
array 方法，改变原数组(长度)，不改变原数组(长度)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
-
static 方法:
Array.isArray / Array.of / Array.from -
property:
length -
改变原来 array （原数组长度）:
unshift / push / shift / pop / splice / copyWithin / fill -
改变原来 array （原数组）:
sort / reverse -
不改变原来 array长度:
访问器方法: slice / filter / join / concat / includes / indexOf / lastIndexOf / toString / toSource / toLocaleString & flat / flatMap
迭代器方法: entries / keys / values / every /some / find / findIndex / map / reduce / reduceRight
demos
reverse
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
const log = console.log;
const arr = ['one', 'two', 'three'];
log('
arr =', arr);
// ["one", "two", "three"]
const reversed = arr.reverse();
log('
reversed =', reversed);
// ["three", "two", "one"]
// ⚠️ Careful: reverse is destructive -- it changes the original array.
// ⚠️ 注意：reverse是破坏性的-它会更改原始数组
log('
new arr =', arr);
// ["three", "two", "one"]
splice
splice 改变原数组的长度
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
const log = console.log;
const arr = [1, 2, 3, 4, 5, 6, 7];
let mid = arr.splice(Math.floor(arr.length / 2), 1);
let value = mid[0];
log(`mid arr =`, mid)
log(`mid value =`, value)
log(`new arr =`, arr)
/*
mid arr = [4]
mid value = 4
new arr = (6) [1, 2, 3, 5, 6, 7]
*/
slice
slice 不改变原数组的长度
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
const log = console.log;
const arr = [1, 2, 3, 4, 5, 6, 7];
let mid = arr.slice(Math.floor(arr.length / 2), Math.floor(arr.length / 2) + 1);
let value = mid[0];
log(`mid arr =`, mid)
log(`mid value =`, value)
log(`new arr =`, arr)
/*
mid arr = [4]
mid value = 4
new arr = (7) [1, 2, 3, 4, 5, 6, 7]
*/
of
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of
from
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from
reduce
累加器 acc
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
const log = console.log;
const arr = [1, 2, 3, 4, 5, 6, 7];
const sum = arr.reduce((acc, item) => acc+= item, 0);
log(`sum =`, sum);
// sum = 28
flat & flatMap
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// (4) [1, 2, 3, 4]
arr1;
// (3) [1, 2, Array(2)]
const arr = [1, 2, 3, 4];
arr.flatMap(x => [x, x * 2]);
// (8) [1, 2, 2, 4, 3, 6, 4, 8]
arr;
// (4) [1, 2, 3, 4]
const arr = [1, 2, 3, 4];
arr.flatMap(x => [x, x * 2]);
// is equivalent to
arr.reduce((acc, x) => acc.concat([x, x * 2]), []);
// [1, 2, 2, 4, 3, 6, 4, 8]
for loop
for / forEach / for in / for of
for in === Object
for of === array / NodeList / Set / Map ...
for in
Object.hasOwnProperty 过滤从 proto / prototype 上面
继承的可枚举属性
The for...in statement iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols), including inherited enumerable properties.
for ... in语句迭代对象的所有可枚举属性（包括继承的可枚举属性），这些可枚举属性由字符串键入（忽略由Symbol键入的属性）。
for...in 支持 Array ✅
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-10-01
* @modified
*
* @description for...in & Object.hasOwnProperty
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
* @solutions
*
* @best_solutions
*
*/
const log = console.log;
const obj = {
a: 1,
b: 2,
};
// obj.prototype.c = 3;
log(`obj.prototype =`, obj.prototype)
// obj.prototype = undefined
obj.__proto__.c = 3;
log(`obj.__proto__ =`, obj.__proto__)
// obj.__proto__ = {}
log(`
`)
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
log(`keys[${i}] =`, obj[keys[i]]);
}
log(`
`)
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
log(`key =`, obj[key]);
} else {
log(`__proto__ key =`, obj[key]);
}
}
/*
obj.prototype = undefined
obj.__proto__ = { c: 3 }
keys[0] = 1
keys[1] = 2
key = 1
key = 2
*/
const arr = [1, 2, 3, 4, 5, 6, 7];
log(`
`)
for (const key in arr) {
// for...in & array ✅
log(`index =`, key, arr[key] );
// 包含Object 上，包括原型链上继承的所有可枚举的 string 属性 ✅
log(`typeof(item) =`, typeof(item));
// typeof(item) = string
}
/*
index = 0 1
index = 1 2
index = 2 3
index = 3 4
index = 4 5
index = 5 6
index = 6 7
index = c 3
*/
log(`
`)
for (const item in arr) {
// log(`typeof(item) =`, typeof(item));
// typeof(item) = string
if(item === "3") {
// for...in & break ✅
log(`for...in break =`, item);
break;
} else {
log(`item =`, item);
}
}
/*
item = 0
item = 1
item = 2
for...in break = 3
*/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in
for of
The for...of statement creates a loop iterating over iterable objects, including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.
for...of 不支持 Object ❌
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
* @created 2020-10-01
* @modified
*
* @description
* @difficulty Easy Medium Hard
* @complexity O(n)
* @augments
* @example
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
* @solutions
*
* @best_solutions
*
*/
const log = console.log;
const obj = {
a: 1,
b: 2,
};
// TypeError: obj is not iterable
// for (const key of obj) {
// // for...of & object ❌
// log(`key =`, obj[key]);
// }
const arr = [1, 2, 3, 4, 5, 6, 7];
log(`
`)
for (const item of arr) {
// for...of & array ✅
log(`item =`, item);
}
log(`
`)
for (const item of arr) {
if(item === 3) {
// for...of & break ✅
log(`for...of break =`, item);
break;
} else {
log(`item =`, item);
}
}
/*
item = 1
item = 2
item = 3
item = 4
item = 5
item = 6
item = 7
item = 1
item = 2
for...of break = 3
*/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
forEach
refs
MDN Array
https://img2020.cnblogs.com/blog/740516/202004/740516-20200428000822349-2064140300.png
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！