Viewing: zh.javascript.info

/

arr.push(...items)
arr.pop()
arr.shift()
arr.unshift(...items)

splice

delete

let arr = ["I", "go", "home"];

delete arr[1]; // remove "go"

alert( arr[1] ); // undefined

// now arr = ["I",  , "home"];
alert( arr.length ); // 3

3 arr.length == 3

delete obj.key key

arr.splice

arr.splice(start[, deleteCount, elem1, ..., elemN])

start arr deleteCount elem1, ..., elemN

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); //  1  1 

alert( arr ); // ["I", "JavaScript"]

1 1 splice start start

let arr = ["I", "study", "JavaScript", "right", "now"];

// 
arr.splice(0, 3, "Let's", "dance");

alert( arr ) //  ["Let's", "dance", "right", "now"]

splice

let arr = ["I", "study", "JavaScript", "right", "now"];

// 
let removed = arr.splice(0, 2);

alert( removed ); // "I", "study" <--

deleteCount 0splice

let arr = ["I", "study", "JavaScript"];

//  2 
//  0 
//  "complex"  "language"
arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

let arr = [1, 2, 5];

//  -1
//  0 
//  3  4
arr.splice(-1, 0, 3, 4);

alert( arr ); // 1,2,3,4,5

slice

arr.slice arr.splice

arr.slice([start], [end])

start end endstart end

str.slice

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s 1  3 

alert( arr.slice(-2) ); // s,t -2

arr.slice() arr

concat

arr.concat

arr.concat(arg1, arg2...)

arr arg1arg2

argN

let arr = [1, 2];

//  arr  [3,4] 
alert( arr.concat([3, 4]) ); // 1,2,3,4

//  arr[3,4]  [5,6] 
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

//  arr[3,4]5  6 
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

let arr = [1, 2];

let arrayLike = {
  0: "something",
  length: 1
};

alert( arr.concat(arrayLike) ); // 1,2,[object Object]

Symbol.isConcatSpreadable concat

let arr = [1, 2];

let arrayLike = {
  0: "something",
  1: "else",
  [Symbol.isConcatSpreadable]: true,
  length: 2
};

alert( arr.concat(arrayLike) ); // 1,2,something,else

forEach

arr.forEach

          arr.forEach(function(item, index, array) {
  // ... do something with item
});
        

//  alert
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

indexOf/lastIndexOf includes

arr.indexOf arr.includes

arr.indexOf(item, from) from item -1
arr.includes(item, from) from item true false

item

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

indexOf includes === false false 0

item arr.includes

arr.lastIndexOf indexOf

let fruits = ['Apple', 'Orange', 'Apple'];

alert( fruits.indexOf('Apple') ); // 0 Apple
alert( fruits.lastIndexOf('Apple') ); // 2 Apple

includes NaN indexOf

const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1 0
alert( arr.includes(NaN) );// true

includes JavaScript

find findIndex/findLastIndex

arr.find

          let result = arr.find(function(item, index, array) {
  //  true item 
  // falsy undefined
});
        

item
index
array

true item undefined

id name id == 1

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // John

find

find item => item.id == 1 find

arr.findIndex arr.find -1

arr.findLastIndex findIndex lastIndexOf

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"},
  {id: 4, name: "John"}
];

//  John 
alert(users.findIndex(user => user.name == 'John')); // 0

//  John 
alert(users.findLastIndex(user => user.name == 'John')); // 3

filter

find true

arr.filter(fn)

find filter

          let results = arr.filter(function(item, index, array) {
  //  true item  push  results
  // 
});
        

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

map

arr.map

          let result = arr.map(function(item, index, array) {
  // 
})
        

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

sort(fn)

arr.sort in-place ()

arr

let arr = [ 1, 2, 15 ];

//  arr 
arr.sort();

alert( arr );  // 1, 15, 2

1, 15, 2

"2" > "15"

arr.sort()

          function compare(a, b) {
  if (a > b) return 1; // 
  if (a == b) return 0; // 
  if (a < b) return -1; // 
}
        

function compareNumeric(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

alert(arr);  // 1, 2, 15

arr

arr.sort(fn) Timsort fn

alert

[1, -2, 15, 2, 0, 8].sort(function(a, b) {
  alert( a + " <> " + b );
  return a - b;
});

let arr = [ 1, 2, 15 ];

arr.sort(function(a, b) { return a - b; });

alert(arr);  // 1, 2, 15

arr.sort( (a, b) => a - b );

str.localeCompare

let countries = ['sterreich', 'Andorra', 'Vietnam'];

alert( countries.sort( (a, b) => a > b ? 1 : -1) ); // Andorra, Vietnam, sterreich

alert( countries.sort( (a, b) => a.localeCompare(b) ) ); // Andorra,sterreich,Vietnam

reverse

arr.reverse arr

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

arr

split join

John, Pete, Mary

str.split(delim) delim

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', ');

for (let name of arr) {
  alert( `A message to ${name}.` ); // A message to Bilbo
}

split

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

s split(s)

let str = "test";

alert( str.split('') ); // t,e,s,t

arr.join(glue) split glue arr

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); //  ; 

alert( str ); // Bilbo;Gandalf;Nazgul

reduce/reduceRight

forEachfor for..of

map

arr.reduce arr.reduceRight

          let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);
        

carry on

accumulator initial initial
item
index
arr

reduce

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

reduce 2

sum initialreduce 0current 1 1
sum = 12
sum = 3

[]

	`sum`	`current`	`result`
1	`0`	`1`	`1`
2	`1`	`2`	`3`
3	`3`	`3`	`6`
4	`6`	`4`	`10`
5	`10`	`5`	`15`

let arr = [1, 2, 3, 4, 5];

//  reduce  0
let result = arr.reduce((sum, current) => sum + current);

alert( result ); // 15

reduce

let arr = [];

// Error: Reduce of empty array with no initial value
//  reduce  arr 
arr.reduce((sum, current) => sum + current);

arr.reduceRight arr.reduce

Array.isArray

typeof

alert(typeof {}); // object
alert(typeof []); // object

Array.isArray(value) value true false

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

thisArg

findfiltermap sort thisArg

          arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg 
        

thisArg func this

army thisArg passes the context

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

//  army.canJoin  true  user
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23

users.filter(army.canJoin) army.canJoin this=undefined

users.filter(user => army.canJoin(user)) users.filter(army.canJoin, army)

/
- push(...items)
- pop()
- shift()
- unshift(...items)
- splice(pos, deleteCount, ...items) pos deleteCount items
- slice(start, end) start end end
- concat(...items) items items
- indexOf/lastIndexOf(item, pos) pos item -1
- includes(value) value true false
- find/filter(func) func func true /
- findIndex find
- forEach(func) func
- map(func) func
- sort(func) in-place
- reverse() in-place
- split/join /
- reduce/reduceRight(func, initial) func
- Array.isArray(value) value true false

sortreverse splice

arr.some(fn)/arr.every(fn)

map fn/ true true false

|| && fn arr.some() true fn arr.every() false

every

function arraysEqual(arr1, arr2) {
  return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
}

alert( arraysEqual([1, 2], [1, 2])); // true

arr.fill(value, start, end) start end value
arr.copyWithin(target, start, end) start end target
arr.flat(depth)/arr.flatMap(fn)
Array.of(element0[, element1[, [, elementN]]]) Array

border-left-width borderLeftWidth

camelize(str) my-short-string myShortString

          camelize("background-color") == 'backgroundColor';
camelize("list-style-image") == 'listStyleImage';
camelize("-webkit-transition") == 'WebkitTransition';
        

split join

          function camelize(str) {
  return str
    .split('-') // splits 'my-long-word' into array ['my', 'long', 'word']
    .map(
      // capitalizes first letters of all array items except the first one
      // converts ['my', 'long', 'word'] into ['my', 'Long', 'Word']
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    )
    .join(''); // joins ['my', 'Long', 'Word'] into 'myLongWord'
}
        

filterRange(arr, a, b) arr a b

          let arr = [5, 3, 8, 1];

let filtered = filterRange(arr, 1, 4);

alert( filtered ); // 3,1

alert( arr ); // 5,3,8,1

function filterRange(arr, a, b) {
  // 
  return arr.filter(item => (a <= item && item <= b));
}

let arr = [5, 3, 8, 1];

let filtered = filterRange(arr, 1, 4);

alert( filtered ); // 3,1

alert( arr ); // 5,3,8,1

in place

filterRangeInPlace(arr, a, b) arr a b a arr[i] b

          let arr = [5, 3, 8, 1];

filterRangeInPlace(arr, 1, 4); //  1  4 

alert( arr ); // [3, 1]

function filterRangeInPlace(arr, a, b) {

  for (let i = 0; i < arr.length; i++) {
    let val = arr[i];

    // 
    if (val < a || val > b) {
      arr.splice(i, 1);
      i--;
    }
  }

}

let arr = [5, 3, 8, 1];

filterRangeInPlace(arr, 1, 4); //  1  4 

alert( arr ); // [3, 1]

          let arr = [5, 2, 1, -10, 8];

// 

alert( arr ); // 8, 5, 2, 1, -10

let arr = [5, 2, 1, -10, 8];

arr.sort((a, b) => b - a);

alert( arr );

arr arr

copySorted(arr)

          let arr = ["HTML", "JavaScript", "CSS"];

let sorted = copySorted(arr);

alert( sorted ); // CSS, HTML, JavaScript
alert( arr ); // HTML, JavaScript, CSS (no changes)

slice()

function copySorted(arr) {
  return arr.slice().sort();
}

let arr = ["HTML", "JavaScript", "CSS"];

let sorted = copySorted(arr);

alert( sorted );
alert( arr );

calculator

Calculator calculator

calculate(str) "1 + 2" + -

          let calc = new Calculator;

alert( calc.calculate("3 + 7") ); // 10

addMethod(name, func) calculator name func(a,b)

* / **

          let powerCalc = new Calculator;
powerCalc.addMethod("*", (a, b) => a * b);
powerCalc.addMethod("/", (a, b) => a / b);
powerCalc.addMethod("**", (a, b) => a ** b);

let result = powerCalc.calculate("2 ** 3");
alert( result ); // 8
        

this.methods
calculate

          function Calculator() {

  this.methods = {
    "-": (a, b) => a - b,
    "+": (a, b) => a + b
  };

  this.calculate = function(str) {

    let split = str.split(' '),
      a = +split[0],
      op = split[1],
      b = +split[2];

    if (!this.methods[op] || isNaN(a) || isNaN(b)) {
      return NaN;
    }

    return this.methods[op](a, b);
  };

  this.addMethod = function(name, func) {
    this.methods[name] = func;
  };
}
        

names

user user.name names

          let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let users = [ john, pete, mary ];

let names = /* ... your code */

alert( names ); // John, Pete, Mary
        

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let users = [ john, pete, mary ];

let names = users.map(item => item.name);

alert( names ); // John, Pete, Mary

user namesurname id

id fullName fullName name surname

          let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = /* ... your code ... */

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

alert( usersMapped[0].id ) // 1
alert( usersMapped[0].fullName ) // John Smith
        

=>

let john = { name: "John", surname: "Smith", id: 1 };
let pete = { name: "Pete", surname: "Hunt", id: 2 };
let mary = { name: "Mary", surname: "Key", id: 3 };

let users = [ john, pete, mary ];

let usersMapped = users.map(user => ({
  fullName: `${user.name} ${user.surname}`,
  id: user.id
}));

/*
usersMapped = [
  { fullName: "John Smith", id: 1 },
  { fullName: "Pete Hunt", id: 2 },
  { fullName: "Mary Key", id: 3 }
]
*/

alert( usersMapped[0].id ); // 1
alert( usersMapped[0].fullName ); // John Smith

          let usersMapped = users.map(user => {
  fullName: `${user.name} ${user.surname}`,
  id: user.id
});
        

value => expr value => {...}

JavaScript { ()

          let usersMapped = users.map(user => ({
  fullName: `${user.name} ${user.surname}`,
  id: user.id
}));
        

sortByAge(users) age age

          let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let arr = [ pete, john, mary ];

sortByAge(arr);

// now: [john, mary, pete]
alert(arr[0].name); // John
alert(arr[1].name); // Mary
alert(arr[2].name); // Pete
        

function sortByAge(arr) {
  arr.sort((a, b) => a.age - b.age);
}

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 28 };

let arr = [ pete, john, mary ];

sortByAge(arr);

// [john, mary, pete]
alert(arr[0].name); // John
alert(arr[1].name); // Mary
alert(arr[2].name); // Pete

shuffle(array)

shuffle

          let arr = [1, 2, 3];

shuffle(arr);
// arr = [3, 2, 1]

shuffle(arr);
// arr = [2, 1, 3]

shuffle(arr);
// arr = [3, 1, 2]
// ...
        

[1,2,3] [1,2,3] [1,3,2] [3,1,2]

function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}

let arr = [1, 2, 3];
shuffle(arr);
alert(arr);

Math.random() - 0.5

100 shuffle

function shuffle(array) {
  array.sort(() => Math.random() - 0.5);
}

// 
let count = {
  '123': 0,
  '132': 0,
  '213': 0,
  '231': 0,
  '321': 0,
  '312': 0
};

for (let i = 0; i < 1000000; i++) {
  let array = [1, 2, 3];
  shuffle(array);
  count[array.join('')]++;
}

// 
for (let key in count) {
  alert(`${key}: ${count[key]}`);
}

Javascript

          123: 250706
124425
249618
124880
125148
125223
        

123 213

JavaScript

sort

Fisher-Yates shuffle

          function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); //  0  i 

    //  array[i]  array[j]
    // destructuring assignment
    // 
    // 
    // let t = array[i]; array[i] = array[j]; array[j] = t
    [array[i], array[j]] = [array[j], array[i]];
  }
}
        

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

// 
let count = {
  '123': 0,
  '132': 0,
  '213': 0,
  '231': 0,
  '321': 0,
  '312': 0
};

for (let i = 0; i < 1000000; i++) {
  let array = [1, 2, 3];
  shuffle(array);
  count[array.join('')]++;
}

// 
for (let key in count) {
  alert(`${key}: ${count[key]}`);
}

          123: 166693
166647
166628
167517
166199
166316
        

Fisher Yates

getAverageAge(users) age

(age1 + age2 + ... + ageN) / N

          let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 29 };

let arr = [ john, pete, mary ];

alert( getAverageAge(arr) ); // (25 + 30 + 29) / 3 = 28
        

function getAverageAge(users) {
  return users.reduce((prev, user) => prev + user.age, 0) / users.length;
}

let john = { name: "John", age: 25 };
let pete = { name: "Pete", age: 30 };
let mary = { name: "Mary", age: 29 };

let arr = [ john, pete, mary ];

alert( getAverageAge(arr) ); // 28

arr

unique(arr) arr

          function unique(arr) {
  /* your code */
}

let strings = ["Hare", "Krishna", "Hare", "Krishna",
  "Krishna", "Krishna", "Hare", "Hare", ":-O"
];

alert( unique(strings) ); // Hare, Krishna, :-O
        

function unique(arr) {
  let result = [];

  for (let str of arr) {
    if (!result.includes(str)) {
      result.push(str);
    }
  }

  return result;
}

let strings = ["Hare", "Krishna", "Hare", "Krishna",
  "Krishna", "Krishna", "Hare", "Hare", ":-O"
];

alert( unique(strings) ); // Hare, Krishna, :-O

result.includes(str) result str

result 100 str result 100 result 10000 10000

JavaScript 10000

for arr

arr.length 10000 10000 * 10000 = 1

Map and Set

{id:..., name:..., age:... }

groupById(arr) id key

          let users = [
  {id: 'john', name: "John Smith", age: 20},
  {id: 'ann', name: "Ann Smith", age: 24},
  {id: 'pete', name: "Pete Peterson", age: 31},
];

let usersById = groupById(users);

/*
// 

usersById = {
  john: {id: 'john', name: "John Smith", age: 20},
  ann: {id: 'ann', name: "Ann Smith", age: 24},
  pete: {id: 'pete', name: "Pete Peterson", age: 31},
}
*/
        

id id

.reduce

          function groupById(array) {
  return array.reduce((obj, value) => {
    obj[value.id] = value;
    return obj;
  }, {})
}
        