[ Web Proxy ]
URL:
Viewing: https://learn.javascript.ru/array-methods [Back]  [Original]
RU
. , .
[] [] [] []
EPUB/PDF
Javascript.ru:
:
DanskEnglishEspaolFranaisIndonesiaItalianoTrkeOzbek
  2. JavaScript
6 2024 .

. , .

/

, :

  • 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

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

, , , arr.length == 3.

, delete obj.key key. , . . , . , .

.

arr.splice . : , .

:

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

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

, .

:

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

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

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

, ? 1, 1 .

3 .

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

//  3      
arr.splice(0, 3, "", "");

alert( arr ) //  ["", "", "", ""]

, splice :

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

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

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

splice , deleteCount 0:

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

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

alert( arr ); // "", "", "", "", "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  )

slice : arr.slice() arr. , , .

concat

arr.concat , .

:

arr.concat(arg1, arg2...)

, , .

, arr, arg1, arg2 .

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: "-",
  length: 1
};

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

Symbol.isConcatSpreadable, , concat: :

let arr = [1, 2];

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

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

: forEach

arr.forEach .

:

arr.forEach(function(item, index, array) {
  // ...  -  item
});

, :

//  alert   
["", "", ""].forEach(alert);

:

["", "", ""].forEach((item, index, array) => {
  alert(` ${item}  ${index}  ${array}`);
});

( - ) .

.

indexOf/lastIndexOf includes

arr.indexOf arr.includes , , :

  • arr.indexOf(item, from) item from , , -1.
  • arr.includes(item, from) item from 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, .

, arr.includes.

arr.lastIndexOf indexOf, .

let fruits = ['', '', '']

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

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

:

  • item .
  • index .
  • array .

true, item. , undefined.

, , id name. id == 1:

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

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

alert(user.name); //

, find .

, find item => item.id == 1 . , .

arr.findIndex , , , . -1 , .

arr.findLastIndex findIndex, , lastIndexOf.

:

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

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

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

filter

find () , true.

, arr.filter(fn).

find, filter :

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

:

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

//  ,     
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 = ["", "", ""].map(item => item.length);
alert(lengths); // 6,8,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, .

, - , :

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

, .

localeCompare

? , .

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

. , , , : , , . - , . ?

str.split(delim) . delim.

.

let names = ', , ';

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

for (let name of arr) {
  alert( ` : ${name}.` ); //  :  (  )
}

split . , , . :

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

alert(arr); // ,

split(s) s :

let str = "";

alert( str.split('') ); // ,,,

arr.join(glue) split. arr, glue .

:

let arr = ['', '', ''];

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

alert( str ); // ;;

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

.

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

:

[]

, :

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

, .

:

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

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

alert( result ); // 15

! , initial , .

.

. , 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). true, value , 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 this func.

, 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) item, pos, -1, .
    • includes(value) true, value, 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 .

, , push, pop, shift, unshift, sort, reverse splice .

, 99% . :

MDN.

, , . , .

, , , , , . .

, - , , , . , .

border-left-width borderLeftWidth

: 5

camelize(str), my-short-string myShortString.

, .

:

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(
      //            
      //  ['my', 'long', 'word']  ['my', 'Long', 'Word']
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    )
    .join(''); //  ['my', 'Long', 'Word']  'myLongWord'
}

.

: 4

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

.

" "

: 4

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]

.

: 4
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 );

: 5

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

: 5

Calculator, .

.

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

    :

    let calc = new Calculator;

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

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

.

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

.

: 5

user, user.name. , .

:

let vasya = { name: "", age: 25 };
let petya = { name: "", age: 30 };
let masha = { name: "", age: 28 };

let users = [ vasya, petya, masha ];

let names = /* ...   */

alert( names ); // , , 
let vasya = { name: "", age: 25 };
let petya = { name: "", age: 30 };
let masha = { name: "", age: 28 };

let users = [ vasya, petya, masha ];

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

alert( names ); // , ,

: 5

user, name, surname id.

, id fullName, fullName name surname.

:

let vasya = { name: "", surname: "", id: 1 };
let petya = { name: "", surname: "", id: 2 };
let masha = { name: "", surname: "", id: 3 };

let users = [ vasya, petya, masha ];

let usersMapped = /* ...   ... */

/*
usersMapped = [
  { fullName: " ", id: 1 },
  { fullName: " ", id: 2 },
  { fullName: " ", id: 3 }
]
*/

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

, . =>. .

let vasya = { name: "", surname: "", id: 1 };
let petya = { name: "", surname: "", id: 2 };
let masha = { name: "", surname: "", id: 3 };

let users = [ vasya, petya, masha ];

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

/*
usersMapped = [
  { fullName: " ", id: 1 },
  { fullName: " ", id: 2 },
  { fullName: " ", id: 3 }
]
*/

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

, .

:

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

.

: 5

sortByAge(users), age .

:

let vasya = { name: "", age: 25 };
let petya = { name: "", age: 30 };
let masha = { name: "", age: 28 };

let arr = [ vasya, petya, masha ];

sortByAge(arr);

// : [vasya, masha, petya]
alert(arr[0].name); // 
alert(arr[1].name); // 
alert(arr[2].name); // 
function sortByAge(arr) {
  arr.sort((a, b) => a.age - b.age);
}

let vasya = { name: "", age: 25 };
let petya = { name: "", age: 30 };
let masha = { name: "", age: 28 };

let arr = [ vasya, petya, masha ];

sortByAge(arr);

//  : [vasya, masha, petya]
alert(arr[0].name); // 
alert(arr[1].name); // 
alert(arr[2].name); //

: 3

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

sort , .

, . shuffle 1000000 arr:

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

( JS):

123: 250706
132: 124425
213: 249618
231: 124880
312: 125148
321: 125223

: 123 213 , .

JavaScript, , .

? , sort : , . - , , , JavaScript.

. , . , , .

function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1)); //    0  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
132: 166647
213: 166628
231: 167517
312: 166199
321: 166316

: .

, , , .

: 4

getAverageAge(users), age .

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

:

let vasya = { name: "", age: 25 };
let petya = { name: "", age: 30 };
let masha = { name: "", age: 29 };

let arr = [ vasya, petya, masha ];

alert( getAverageAge(arr) ); // (25 + 30 + 29) / 3 = 28
function getAverageAge(users) {
  return users.reduce((prev, user) => prev + user.age, 0) / users.length;
}

let vasya = { name: "", age: 25 };
let petya = { name: "", age: 30 };
let masha = { name: "", age: 29 };

let arr = [ vasya, petya, masha ];

alert( getAverageAge(arr) ); // 28

: 4

arr .

unique(arr), , arr.

:

function unique(arr) {
  /*   */
}

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

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

.

:

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

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

  return result;
}

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

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

, .

result.includes(str) result str, .

, result 100 str, result 100 . result , , 10000, 10000 .

, JavaScript , 10000 .

arr for.

, arr.length 10000, - 10000*10000 = 100 . .

.

Map Set , .

.

: 4

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

.

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

.

GitHub
Web Proxy Viewer  |  New URL  |  Original Page