Array

20157

Array

JavaScript Array

JavaScript
JavaScript
JavaScript 0 0 1 length 1
JavaScript JavaScript

Array

toString toString()

arr.0; //

JavaScript years['2'] years[2]

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

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

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

JavaScript length

join()slice()indexOf() length

push()splice() length

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

JavaScript length

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

length undefined

fruits.length = 10;
console.log(fruits); // ['banana', 'apple', 'peach', empty x 2, 'mango', empty 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

length

forEach undefined

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

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

colors.reverse(); // ['',   2, '', '', '']

keys undefined undefined entries()fill()find()findIndex()findLast()findLastIndex()includes()join()keys()toLocaleString()values() with()

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

const newColors = colors.toReversed(); // ['', undefined, undefined, '', '', '']

StringNumber 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

element
index
array

callbackFn

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

callbackFn array array map()filter() flatMap()

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

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

reduce() reduceRight() thisArg

sort() thisArg

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);
      //  result 
    }
  }
}

i in this findfindIndexfindLast findLastIndex
length
method
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 0 253 - 1 NaN 0 length undefined 0

JavaScript length length 253 - 1 TypeError length 232

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

DOM NodeList HTMLCollectionarguments

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

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

Array(): Array

Array[Symbol.species]: Array

Array.from(): Array
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

Array.prototype.length

Array.prototype.at()
Array.prototype.concat()
Array.prototype.copyWithin()
Array.prototype.entries(): /
Array.prototype.every(): 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()
Array.prototype.join()
Array.prototype.keys()
Array.prototype.lastIndexOf(): -1
Array.prototype.map()
Array.prototype.pop()
Array.prototype.push(): length
Array.prototype.reduce(): reducer
Array.prototype.reduceRight(): reducer
Array.prototype.reverse()
Array.prototype.shift()
Array.prototype.slice()
Array.prototype.some(): true
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(): length
Array.prototype.values()
Array.prototype.with()
Array.prototype[Symbol.iterator](): values()

JavaScript

Array() String.prototype.split()

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

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

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

join() fruits

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

fruits

const fruits = ["Apple", "Banana"];

//  0
fruits[0]; // Apple

//  1
fruits[1]; // Banana

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

// "undefined"
fruits[99]; // undefined

indexOf() "Banana" fruits

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

fruits "Banana" "Cherry" includes() indexOf() -1

const fruits = ["Apple", "Banana"];

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

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

push() fruits

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

pop() fruits

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

pop()

splice() fruits 3

const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];
const start = -3;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItems);
// ["Strawberry", "Mango", "Cherry"]

N

splice() fruits 2

const fruits = ["Apple", "Banana", "Strawberry", "Mango", "Cherry"];
const start = 2;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItems);
// ["Strawberry", "Mango", "Cherry"]

shift() fruits

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

shift()

splice() fruits 3

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

unshift() 0 fruits

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

splice() fruits "Banana" "Banana"

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

splice() fruits "Banana" "Strawberry" "Banana"

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

splice() fruits

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

for...of fruits

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

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

forEach() fruits

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

concat() fruits moreFruits combinedFruits fruits moreFruits

const fruits = ["Apple", "Banana", "Strawberry"];
const moreFruits = ["Mango", "Cherry"];
const combinedFruits = fruits.concat(moreFruits);
console.log(combinedFruits);
// ["Apple", "Banana", "Strawberry", "Mango", "Cherry"]

// The 'fruits' array remains unchanged.
console.log(fruits);
// ["Apple", "Banana", "Strawberry"]

// The 'moreFruits' array also remains unchanged.
console.log(moreFruits);
// ["Mango", "Cherry"]

fruits from() slice()

const fruits = ["Strawberry", "Mango"];

// Create a copy using spread syntax.
const fruitsCopy = [...fruits];
// ["Strawberry", "Mango"]

// Create a copy using the from() method.
const fruitsCopy2 = Array.from(fruits);
// ["Strawberry", "Mango"]

// Create a copy using the slice() method.
const fruitsCopy3 = fruits.slice();
// ["Strawberry", "Mango"]

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

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

structuredClone()

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

board[6][4] 'p' 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);

// The first column is the index
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 JavaScript RegExp.prototype.exec() String.prototype.match()

//  d  b  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]0e1
// [e1, e2*, e3, e4]1e2*
// [e1, e2*, e3*, e4]2e3*
// [e1, e2*, e3*, e4*]3e4*
// [e1, e2*, e3*, e4*]

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

n n

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

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

n n n - 1

testSideEffect((arr, index) => arr.splice(index, 0, "new"));
// [e1, e2, e3, e4]0e1
// [new, e1, e2, e3, e4]1e1
// [new, new, e1, e2, e3, e4]2e1
// [new, new, new, e1, e2, e3, e4]3e1
// [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]0e1
// [e1, e2, e3, e4]1e2
// [e1, e2, e4]2e4
// [e1, e2, e4]
//  3 

//  find() 
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]0e1
// [e1, e2, e3, e4]1e2
// [e1, e2, e4]2e4
// [e1, e2, e4]3undefined

n n n undefined

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

//  find() 
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]0e1
// [e2, e3, e4]1e3
// [e2, e4]2undefined
// [e2, e4]3undefined


ECMAScript 2027 LanguageSpecification # sec-array-objects

MDN

20251023 MDN

GitHub