[ Web Proxy ]
URL:
Viewing: https://uk.javascript.info/array-methods [Back]  [Original]
UK

.

!

[] [] [] []
    EPUB/PDF
    Javascript.info:
    :
    DanskEnglishEspaolFranaisIndonesiaItalianoTrkeOzbek
    2. JavaScript
    24 2025 .

    . , .

    /

    , :

    • 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

    , , , 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"];

//  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 - . 0 deleteCount:

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

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

    Symbol.isConcatSpreadable, concat : . length:

    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}   ${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

    , indexOf ===. , false, false, .

    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

    , includes , NaN, indexOf:

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

    , includes JavaScript .

    find findIndex/findLastIndex

    , . ?

    arr.find(fn).

    :

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

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

    , - , :

    [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( `A message to ${name}.` ); //  :  (  )
}

    split . , , . :

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

alert(arr); // ,

    split(s) s :

    let str = "test";

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

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

    , .

    1. sum initial ( reduce), 0, current , 1. , 1.
    2. sum = 1, (2).
    3. 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  )
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

    Javascript. .

    typeof :

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

    , : 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) ,
      • arr.pop() ,
      • arr.shift() ,
      • arr.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(func, initial) , func .

    • :

      • Array.isArray(value) , value , , true, false.

    , sort, reverse splice .

    99% , .

    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

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

    .

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

    .

    : 5

    user, user.name. , .

    :

    let ivan = { name: "", age: 25 };
let petro = { name: "", age: 30 };
let mariya = { name: "", age: 28 };

let users = [ ivan, petro, mariya ];

let names = /* ...   */

alert( names ); // , , 
    let ivan = { name: "", age: 25 };
let petro = { name: "", age: 30 };
let mariya = { name: "", age: 28 };

let users = [ ivan, petro, mariya ];

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

alert( names ); // , ,

    : 5

    user, name, surname id.

    , id fullName, fullName name surname.

    :

    let ivan = { name: "", surname: "", id: 1 };
let petro = { name: "", surname: "", id: 2 };
let mariya = { name: "", surname: "", id: 3 };

let users = [ ivan, petro, mariya ];

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

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

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

    , . =>. .

    let ivan = { name: "", surname: "", id: 1 };
let petro = { name: "", surname: "", id: 2 };
let mariya = { name: "", surname: "", id: 3 };

let users = [ ivan, petro, mariya ];

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 ivan = { name: "", age: 25 };
let petro = { name: "", age: 30 };
let mariya = { name: "", age: 28 };

let arr = [ petro, ivan, mariya ];

sortByAge(arr);

// now: [ivan, mariya, petro]
alert(arr[0].name); // 
alert(arr[1].name); // 
alert(arr[2].name); // 
    function sortByAge(arr) {
  arr.sort((a, b) => a.age - b.age);
}

let ivan = { name: "", age: 25 };
let petro = { name: "", age: 30 };
let mariya = { name: "", age: 28 };

let arr = [ petro, ivan, mariya ];

sortByAge(arr);

//  : [ivan, mariya, petro]
alert(arr[0].name); // Ivan
alert(arr[1].name); // Mariya
alert(arr[2].name); // Petro

    : 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 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 ivan = { name: "", age: 25 };
let petro = { name: "", age: 30 };
let mariya = { name: "", age: 29 };

let arr = [ ivan, petro, mariya ];

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: '', name: " ", age: 20},
  {id: '', name: " ", age: 24},
  {id: '', name: " ", age: 31},
];

let usersById = groupById(users);

/*
//      :

usersById = {
  : {id: '', name: " ", age: 20},
  : {id: '', name: " ", age: 24},
  : {id: '', name: " ", 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