Viewing: fa.javascript.info

. .

/

arr.push(...items)
arr.pop()
arr.shift()
arr.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

3 arr.length == 3 .

delete obj.key key . . . . .

arr.splice . : .

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

arr start : deleteCount elem1, ..., elemN . .

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

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

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

1 1 .

3 :

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

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

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

splice :

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

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

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

splice . deleteCount 0 :

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

//   2
//   0  
//    "language"  "complex" 
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 ( 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 .

argN . .

let arr = [1, 2];

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

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

//  [3,4]     5  6 arr :   
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) {
  // ...     
});
        

//    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.includes :

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

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

=== . false false .

item arr.includes .

arr.lastIndexOf indexOf .

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

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

````smart header=" `includes`  `NaN`     "
    `includes`        `NaN`      `indexOf`:

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

includes .

find findIndex/findLastIndex

arr.find(fn) .

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

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 . .

arr.findIndex . 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 
  //        
});
        

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

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 and join

. : John, Pete, Mary. .

str.split(delim) . delim .

space :

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

split(s) s :

let str = "test";

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

arr.join(glue) split . arr glue .

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, array) {
  // ...
}, [initial]);
        

accumulator initial ( initial ).
item .
index .
array .

. reduce .

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

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

alert(result); // 15

reduce 2 .

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

[]

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

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

//   ( 0) reduce   
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.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

find filter map sort thisArg .

. .

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

thisArg func this .

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

//     true    army.canJoin  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(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 ( ) .
- 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 true false.

sort reverse splice .

99% . :

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

fn map. true true false.

|| && : fn truthy arr.some() true fn falsy 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) value start end .
arr.copyWithin(target, start, end) start end target ( ).
arr.flat(depth)/arr.flatMap(fn) .

. .

. . .

border-left-width borderLeftWidth

camelize(str) my-short-string camel-cased myShortString .

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

: split join .

sandbox .

          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
}
        

sandbox.

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

sandbox .

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

          function filterRange(arr, a, b) {
  // added brackets around the expression for better readability
  return arr.filter(item => (a <= item && item <= b));
}
        

sandbox.

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]

sandbox .

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]

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

}
        

sandbox.

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

slice() :

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

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

let sorted = copySorted(arr);

alert( sorted );
alert( arr );

Calculator .

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

          let calc = new Calculator;

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

addMethod(name, func) . 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
        

sandbox .

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

sandbox.

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 = /* ...   */

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 suname .

          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 = /* ...   ... */

/*
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 => {...}.

} . :

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

sortByName(users) age age .

          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[0].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 = [ john, pete, mary ];

sortByName(arr);

// [john, mary, pete] :       
alert(arr[0].name); // John
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 .

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

( ):

          123: 250706
124425
249618
124880
125148
125223
        

: 123 213 .

sort : . .

. Fisher-Yates . :

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

    //    array[j]  array[i] 
    //          
    //          
    //     :
    // 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) {
  /*   */
}

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

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

sandbox .

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 .

100 result str result 100 . result 10000 10000 .

10000 .

for arr .

arr.length 10000 10000*10000 = 100 . .

Map Set .

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

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

  return result;
}
        

sandbox.

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

groupById(arr) id .

          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 .

sandbox .

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

sandbox.