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('\narr =', arr);
// ["one", "two", "three"]
const reversed = arr.reverse();
log('\nreversed =', reversed);
// ["three", "two", "one"]
// ⚠️ Careful: reverse is destructive -- it changes the original array.
// ⚠️ 注意：reverse是破壞性的-它會更改原始數組
log('\nnew 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(`\n`)
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
log(`keys[${i}] =`, obj[keys[i]]);
}
log(`\n`)
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(`\n`)
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(`\n`)
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(`\n`)
for (const item of arr) {
// for...of & array ✅
log(`item =`, item);
}
log(`\n`)
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 發布文章使用：只允許注冊用戶才可以訪問！