Viewing: ja.javascript.info

/

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

splice

delete :

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

delete arr[1]; // "go" 

alert( arr[1] ); // undefined

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

3arr.length == 3

delete obj.key key

arr.splice(str) :

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

index deleteCount elem1, ..., elemN

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

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

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

1 1

32:

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

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

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

splice :

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

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

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

splice deleteCount 0 :

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 (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" ("end" )start 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, arg1, arg2

Symbol.isConcatSpreadable

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) {
  // ... item 
});
        

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

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

()

indexOf/lastIndexOf and includes

arr.indexOf, arr.lastIndexOf arr.includes :

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

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

=== false false

arr.includes

includes indexOf/lastIndexOf NaN :

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

find findIndex

arr.find

          let result = arr.find(function(item, index, array) {
  // true item 
  //  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

item => item.id == 1 find find

arr.findIndex

filter

find true

arr.filter(fn)

find filter :

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

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

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

alert(someUsers.length); // 2

map

arr.map 1

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

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

sort(fn)

arr.sort

arr

let arr = [ 1, 2, 15 ];

//  arr 
arr.sort();

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

1, 15, 2

"2" > "15"

arr.sort() 2

          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 html

arr.sort(fn) ( ) 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 );

strings

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 2:

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(str) split arr str

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

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

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

reduce/reduceRight

forEach, for for..of

map

arr.reduce arr.reduceRight

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

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

2 reduce

sum initial (reduce ) 0 current 1 1
sum = 1 2(2)
sum = 3

[]

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

initial :

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

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

alert( result ); // 15

reduce 2

reduce

let arr = [];

// Error:  reduce 
// reduce  arr 
arr.reduce((sum, current) => sum + current);

arr.reduceRight

Array.isArray

typeof :

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

Array.isArray(value) value true false

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

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

thisArg

findfiltermapsort thisArg

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

thisArg func this

filter army thisArg :

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 
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(army.canJoin, army) users.filter(user => army.canJoin(user))

/:
- 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) true /
- findIndex find
:
- forEach(func) func
:
- map(func) func
- sort(func)
- reverse()
- split/join
- reduce/reduceRight(func, initial) func
:
- Array.isArray(arr) arr

sort, reverse splice

99%:

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

fn map / 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)

manual

border-left-width borderLeftWidth

my-short-string myShortString camelize(str)

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

P.S. : split join

          function camelize(str) {
  return str
    .split('-') // my-long-word -> ['my', 'long', 'word']
    .map(
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    ) // ['my', 'long', 'word'] -> ['my', 'Long', 'Word']
    .join(''); // ['my', 'Long', 'Word'] -> myLongWord
}
        

arr a b filterRange(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) {
  // added brackets around the expression for better readability
  return arr.filter(item => (a <= item && item <= b));
}
        

arr a b filterRangeInPlace(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];

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

}
        

          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

() "1 + 2" calculate(str) + -

          let calc = new Calculator;

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

addOperator(name, func) name 2 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
        

calculate

          function Calculator() {

  let 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 (!methods[op] || isNaN(a) || isNaN(b)) {
      return NaN;
    }

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

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

user user.name

          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 name, surname 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
        

1 =>

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

2: value => expr value => {...}

JavaScript { :

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

name sortByName(users)

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

let arr = [ john, pete, mary ];

sortByName(arr);

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

function sortByName(arr) {
  arr.sort((a, b) => b.name > a.name ? 1 : -1);
}

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

let arr = [ john, pete, mary ];

sortByName(arr);

// now sorted is: [john, mary, pete]
alert(arr[1].name); // Mary

() 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

shuffle 1000000:

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]}`);
}

(V8, 2017/7):

          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]] = [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]];
  }
}

// counts of appearances for all possible permutations
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('')]++;
}

// show counts of all possible permutations
for (let key in count) {
  alert(`${key}: ${count[key]}`);
}

          123: 166693
166647
166628
167517
166199
166316
        

Fisher-Yates

age t getAverageAge(users)

(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

arr unique(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 10000 result 10000

JavaScript 10000

for arr

arr.length 10000 10000*10000 = 1

"map-set-weakmap-weakset"

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

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

  return result;
}
        

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

id groupById(arr)

          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;
  }, {})
}
        