Array

Baseline *

20157

Array

JavaScript Array

JavaScript
JavaScript
JavaScript 0 2 1 length 1
JavaScript JavaScript

Array

toString toString()

arr.0; //

JavaScript years[2] years['2']

years[2] 2 JavaScript toString '2' '02' years true

console.log(years["2"] !== years["02"]);

years['2'] years['02']

length

JavaScript length

join(), slice(), indexOf(), length

push(), splice(), length

const fruits = [];
fruits.push("", "", "");
console.log(fruits.length); // 3

JavaScript length

fruits[5] = "";
console.log(fruits[5]); // ""
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 6

length undefined

fruits.length = 10;
console.log(fruits); // ['', '', '',  x 2, '',  x 4]
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10
console.log(fruits[8]); // undefined

length

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

Array/length

forEach undefined

concat(), copyWithin(), every(), filter(), flat(), flatMap(), forEach(), indexOf(), lastIndexOf(), map(), reduce(), reduceRight(), reverse(), slice(), some(), sort(), splice() forEach concat copyWithin

const colors = ["red", "yellow", "blue"];
colors[5] = "purple";
colors.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});
// :
// 0: red
// 1: yellow
// 2: blue
// 5: purple

colors.reverse(); // ['purple',   2, 'blue', 'yellow', 'red']

keys undefined undefined entries(), fill(), find(), findIndex(), findLast(), findLastIndex(), includes(), join(), keys(), toLocaleString(), toReversed(), toSorted(), toSpliced(), values(), with()

const colors = ["red", "yellow", "blue"];
colors[5] = "purple";
const iterator = colors.keys();
for (const key of iterator) {
  console.log(`${key}: ${colors[key]}`);
}
// 
// 0: red
// 1: yellow
// 2: blue
// 3: undefined
// 4: undefined
// 5: purple

const newColors = colors.toReversed(); // ['purple', undefined, undefined, 'blue', 'yellow', 'red']

String, Number, Boolean

this.constructor[Symbol.species] concat(), filter(), flat(), flatMap(), map(), slice(), splice()

Array toReversed(), toSorted(), toSpliced(), with()


`copyWithin()`
`fill()`
`pop()`	`slice(0, -1)`
`push(v1, v2)`	`concat([v1, v2])`
`reverse()`	`toReversed()`
`shift()`	`slice(1)`
`sort()`	`toSorted()`
`splice()`	`toSpliced()`
`unshift(v1, v2)`	`toSpliced(0, 0, v1, v2)`

slice()

arr.copyWithin(0, 1, 2); // arr 
const arr2 = arr.slice().copyWithin(0, 1, 2); // arr 
const arr3 = [...arr].copyWithin(0, 1, 2); // arr

method(callbackFn, thisArg)

callbackFn 3

element
index
array

callbackFn

thisArg undefinedcallbackFn this callbackFn this callbackFn this undefined/null globalThis callbackFn thisArg this

callbackFn array map()filter()flatMap()

every(), filter(), find(), findIndex(), findLast(), findLastIndex(), flatMap(), forEach(), map(), some()

every(), find(), findIndex(), findLast(), findLastIndex(), some() callbackFn

reduce() reduceRight() 1 thisArg

sort() thisArg 1

function method(callbackFn, thisArg) {
  const length = this.length;
  for (let i = 0; i < length; i++) {
    if (i in this) {
      const result = callbackFn.call(thisArg, this[i], i, this);
      // 
    }
  }
}

i in this findfindIndexfindLastfindLastIndex
length
for (let i = length - 1; i >= 0; i--) reduceRight()findLast()findLastIndex()
reduce reduceRight

length

const arrayLike = {
  0: "a",
  1: "b",
  length: 2,
};
console.log(Array.prototype.join.call(arrayLike, "+")); // 'a+b'

length

length 0 253 - 1 NaN 0 length undefined 0

length length 253 - 1 TypeError length 232 - 1

Array.prototype.flat.call({}); // []

length length

const a = { length: 0.7 };
Array.prototype.push.call(a);
console.log(a.length); // 0

length length 0 length - 1 0 length - 1

DOM NodeList HTMLCollection arguments

function f() {
  console.log(Array.prototype.join.call(arguments, "+"));
}

f("a", "b"); // 'a+b'

Array(): Array

Array[Symbol.species]: Array

Array.from(): Array (iterable) (array-like)
Array.fromAsync(): Array
Array.isArray(): true false
Array.of(): Array

Array.prototype Array

Array.prototype.constructor: Array Array
Array.prototype[Symbol.unscopables]: ES2015 ECMAScript with

Array

length

Array.prototype.at()
Array.prototype.concat()
Array.prototype.copyWithin()
Array.prototype.entries(): /
Array.prototype.every(): false true
Array.prototype.fill()
Array.prototype.filter(): true
Array.prototype.find(): undefined
Array.prototype.findIndex(): -1
Array.prototype.findLast(): undefined
Array.prototype.findLastIndex(): -1
Array.prototype.flat()
Array.prototype.flatMap()
Array.prototype.forEach()
Array.prototype.includes(): true false
Array.prototype.indexOf(): -1
Array.prototype.join()
Array.prototype.keys()
Array.prototype.lastIndexOf(): () -1
Array.prototype.map()
Array.prototype.pop()
Array.prototype.push(): 1 length
Array.prototype.reduce(): ()
Array.prototype.reduceRight(): ()
Array.prototype.reverse(): ()
Array.prototype.shift()
Array.prototype.slice()
Array.prototype.some(): true false
Array.prototype.sort()
Array.prototype.splice()
Array.prototype.toLocaleString(): Object.prototype.toLocaleString()
Array.prototype.toReversed()
Array.prototype.toSorted()
Array.prototype.toSpliced()
Array.prototype.toString(): Object.prototype.toString()
Array.prototype.unshift(): 1 length
Array.prototype.values()
Array.prototype.with()
Array.prototype[Symbol.iterator](): values()

JavaScript

: JavaScript :

3 Array() String.prototype.split()

// 'fruits' 
const fruits = ["", ""];
console.log(fruits.length);
// 2

// 'fruits2'  Array() 
const fruits2 = new Array("", "");
console.log(fruits2.length);
// 2

// 'fruits3'  String.prototype.split() 
const fruits3 = ", ".split(", ");
console.log(fruits3.length);
// 2

join() fruits

const fruits = ["", ""];
const fruitsString = fruits.join(", ");
console.log(fruitsString);
// ", "

fruits

const fruits = ["", ""];

//  0 
fruits[0]; // 

//  2  1 
fruits[1]; // 

// 
// 1 
fruits[fruits.length - 1]; // 

// 
// 'undefined' 
fruits[99]; // undefined

indexOf() "" fruits

const fruits = ["", ""];
console.log(fruits.indexOf(""));
// 1

fruits "" "" 2 includes() indexOf() -1

const fruits = ["", ""];

fruits.includes(""); // true
fruits.includes(""); // false

// indexOf()  -1 
fruits.indexOf("") !== -1; // true
fruits.indexOf("") !== -1; // false

push() fruits

const fruits = ["", ""];
const newLength = fruits.push("");
console.log(fruits);
// ["", "", ""]
console.log(newLength);
// 3

pop() fruits

const fruits = ["", "", ""];
const removedItem = fruits.pop();
console.log(fruits);
// ["", ""]
console.log(removedItem);
//

: pop()

splice() fruits 3

const fruits = ["", "", "", "", ""];
const start = -3;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["", ""]
console.log(removedItems);
// ["", "", ""]

N

splice() fruits 2

const fruits = ["", "", "", "", ""];
const start = 2;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["", ""]
console.log(removedItems);
// ["", "", ""]

shift() fruits

const fruits = ["", ""];
const removedItem = fruits.shift();
console.log(fruits);
// [""]
console.log(removedItem);
//

: shift()

splice() fruits 3

const fruits = ["", "", "", "", ""];
const start = 0;
const deleteCount = 3;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["", ""]
console.log(removedItems);
// ["", "", ""]

unshift() fruits 0

const fruits = ["", ""];
const newLength = fruits.unshift("");
console.log(fruits);
// ["", "", ""]
console.log(newLength);
// 3

splice() "" fruits ""

const fruits = ["", "", ""];
const start = fruits.indexOf("");
const deleteCount = 1;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["", ""]
console.log(removedItems);
// [""]

splice() "" "" fruits ""

const fruits = ["", "", "", ""];
const start = 1;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["", ""]
console.log(removedItems);
// ["", ""]

splice() fruits 2

const fruits = ["", "", ""];
const start = -2;
const deleteCount = 2;
const removedItems = fruits.splice(
  start,
  deleteCount,
  "",
  "",
);
console.log(fruits);
// ["", "", ""]
console.log(removedItems);
// ["", ""]

for...of fruits

const fruits = ["", "", ""];
for (const fruit of fruits) {
  console.log(fruit);
}
// 
// 
//

for...of every(), filter(), flatMap(), map(), reduce(), reduceRight() forEach()

forEach() fruits

const fruits = ["", "", ""];
fruits.forEach((item, index, array) => {
  console.log(item, index);
});
//  0
//  1
//  2

concat() fruits moreFruits combinedFruits fruits moreFruits

const fruits = ["", "", ""];
const moreFruits = ["", ""];
const combinedFruits = fruits.concat(moreFruits);
console.log(combinedFruits);
// ["", "", "", "", ""]

//  'fruits' 
console.log(fruits);
// ["", "", ""]

//  'moreFruits' 
console.log(moreFruits);
// ["", ""]

fruits 3 from() slice()

const fruits = ["", ""];

// 
const fruitsCopy = [...fruits];
// ["", ""]

// from() 
const fruitsCopy2 = Array.from(fruits);
// ["", ""]

// slice() 
const fruitsCopy3 = fruits.slice();
// ["", ""]

, Array.from(), Array.prototype.slice(), Array.prototype.concat() JSON.stringify() JSON JSON.parse()

const fruitsDeepCopy = JSON.parse(JSON.stringify(fruits));

structuredClone()

const fruits = ["", ""];
const fruitsAlias = fruits;
// 'fruits'  'fruitsAlias' 
fruits === fruitsAlias; // true
//  'fruits'  'fruitsAlias' 
fruits.unshift("", "");
console.log(fruits);
// ['', '', '', '']
console.log(fruitsAlias);
// ['', '', '', '']

'p' board[6][4] board[4][4] [6][4]

const board = [
  ["R", "N", "B", "Q", "K", "B", "N", "R"],
  ["P", "P", "P", "P", "P", "P", "P", "P"],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  ["p", "p", "p", "p", "p", "p", "p", "p"],
  ["r", "n", "b", "q", "k", "b", "n", "r"],
];

console.log(`${board.join("\n")}\n\n`);

//  2 
board[4][4] = board[6][4];
board[6][4] = " ";
console.log(board.join("\n"));

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , ,p, , ,
 , , , , , , ,
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

const values = [];
for (let x = 0; x < 10; x++) {
  values.push([2 ** x, 2 * x ** 2]);
}
console.table(values);

// 
0  1    0
1  2    2
2  4    8
3  8    18
4  16   32
5  32   50
6  64   72
7  128  98
8  256  128
9  512  162

(RegExp) RegExp.prototype.exec() String.prototype.match()

// 1  d  1  b  1  d 
//  b  d 
// 

const myRe = /d(b+)(d)/i;
const execResult = myRe.exec("cdbBdbsbz");

console.log(execResult.input); // 'cdbBdbsbz'
console.log(execResult.index); // 1
console.log(execResult); // [ "dbBd", "bB", "d" ]

RegExp.prototype.exec() String.prototype.match()

callbackFn 0 arrayLength - 1 arrayLength

callbackFn
callbackFn
callbackFn callbackFn

forEach

function testSideEffect(effect) {
  const arr = ["e1", "e2", "e3", "e4"];
  arr.forEach((elem, index, arr) => {
    console.log(`: [${arr.join(", ")}], : ${index}, : ${elem}`);
    effect(arr, index);
  });
  console.log(`: [${arr.join(", ")}]`);
}

testSideEffect((arr, index) => {
  if (index + 1 < arr.length) arr[index + 1] += "*";
});
// : [e1, e2, e3, e4], : 0, : e1
// : [e1, e2*, e3, e4], : 1, : e2*
// : [e1, e2*, e3*, e4], : 2, : e3*
// : [e1, e2*, e3*, e4*], : 3, : e4*
// : [e1, e2*, e3*, e4*]

testSideEffect((arr, index) => {
  if (index > 0) arr[index - 1] += "*";
});
// : [e1, e2, e3, e4], : 0, : e1
// : [e1, e2, e3, e4], : 1, : e2
// : [e1*, e2, e3, e4], : 2, : e3
// : [e1*, e2*, e3, e4], : 3, : e4
// : [e1*, e2*, e3*, e4]

n n

testSideEffect((arr, index) => {
  if (index === 1) arr.splice(2, 0, "new");
});
// : [e1, e2, e3, e4], : 0, : e1
// : [e1, e2, e3, e4], : 1, : e2
// : [e1, e2, new, e3, e4], : 2, : new
// : [e1, e2, new, e3, e4], : 3, : e3
// : [e1, e2, new, e3, e4]
// e4 is not visited because it now has index 4

testSideEffect((arr) => arr.push("new"));
// : [e1, e2, e3, e4], : 0, : e1
// : [e1, e2, e3, e4, new], : 1, : e2
// : [e1, e2, e3, e4, new, new], : 2, : e3
// : [e1, e2, e3, e4, new, new, new], : 3, : e4
// : [e1, e2, e3, e4, new, new, new, new]

n n n - 1

testSideEffect((arr, index) => arr.splice(index, 0, "new"));
// : [e1, e2, e3, e4], : 0, : e1
// : [new, e1, e2, e3, e4], : 1, : e1
// : [new, new, e1, e2, e3, e4], : 2, : e1
// : [new, new, new, e1, e2, e3, e4], : 3, : e1
// : [new, new, new, new, e1, e2, e3, e4]
// e1

n n n undefined

testSideEffect((arr, index) => {
  if (index === 1) arr.splice(2, 1);
});
// : [e1, e2, e3, e4], : 0, : e1
// : [e1, e2, e3, e4], : 1, : e2
// : [e1, e2, e4], : 2, : e4
// : [e1, e2, e4]
//  3 

// Compare this with find(), which treats nonexistent indexes as undefined:
const arr2 = ["e1", "e2", "e3", "e4"];
arr2.find((elem, index, arr) => {
  console.log(`: [${arr.join(", ")}], : ${index}, : ${elem}`);
  if (index === 1) arr.splice(2, 1);
  return false;
});
// : [e1, e2, e3, e4], : 0, : e1
// : [e1, e2, e3, e4], : 1, : e2
// : [e1, e2, e4], : 2, : e4
// : [e1, e2, e4], : 3, : undefined

n n n undefined

testSideEffect((arr, index) => arr.splice(index, 1));
// : [e1, e2, e3, e4], : 0, : e1
// e2 e2  0 
// : [e2, e3, e4], : 1, : e3
// e4 e4  1 
// : [e2, e4]
//  2 

// find()  undefined 
const arr2 = ["e1", "e2", "e3", "e4"];
arr2.find((elem, index, arr) => {
  console.log(`: [${arr.join(", ")}], : ${index}, : ${elem}`);
  arr.splice(index, 1);
  return false;
});
// : [e1, e2, e3, e4], : 0, : e1
// : [e2, e3, e4], : 1, : e3
// : [e2, e4], : 2, : undefined
// : [e2, e4], : 3, : undefined


ECMAScript 2027 LanguageSpecification # sec-array-objects

MDN

MDN 202685

GitHub