js Array All In One

js Array All In One

array 方法，改变原数组(长度)，不改变原数组(长度)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

1. static 方法: Array.isArray / Array.of / Array.from

2. property: length

3. 改变原来 array （原数组长度）: unshift / push / shift / pop / splice / copyWithin / fill

4. 改变原来 array （原数组）: sort / reverse

5. 不改变原来 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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

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 发布文章使用：只允许注册用户才可以访问！

---