it-swarm.com.ru

Как вставить элемент в массив по определенному индексу (JavaScript)?

Я ищу метод вставки массива JavaScript, в стиле:

arr.insert(index, item)

Желательно в jQuery, но любая реализация JavaScript подойдет на этом этапе.

2335
tags2k

То, что вы хотите, это функция splice для собственного объекта массива.

arr.splice(index, 0, item); вставит item в arr по указанному индексу (сначала удаляются элементы 0, то есть это просто вставка).

В этом примере мы создадим массив и добавим элемент в индекс 2:

var arr = [];
arr[0] = "Jani";
arr[1] = "Hege";
arr[2] = "Stale";
arr[3] = "Kai Jim";
arr[4] = "Borge";

console.log(arr.join());
arr.splice(2, 0, "Lene");
console.log(arr.join());

3846
tvanfosson

Вы можете реализовать метод Array.insert, выполнив это:

Array.prototype.insert = function ( index, item ) {
    this.splice( index, 0, item );
};

Тогда вы можете использовать его как:

var arr = [ 'A', 'B', 'D', 'E' ];
arr.insert(2, 'C');

// => arr == [ 'A', 'B', 'C', 'D', 'E' ]
230
FrEsC 81

Кроме сращивания, вы можете использовать этот подход, который не будет изменять исходный массив, но создаст новый массив с добавленным элементом. Обычно вы должны избегать мутаций, когда это возможно. Я использую спред оператора ES6 здесь.

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, newItem) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted item
  newItem,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10)

console.log(result)
// [1, 10, 2, 3, 4, 5]

Это можно использовать для добавления более одного элемента, слегка подправив функцию, чтобы использовать оператор rest для новых элементов, и распространить ее также в возвращаемом результате.

const items = [1, 2, 3, 4, 5]

const insert = (arr, index, ...newItems) => [
  // part of the array before the specified index
  ...arr.slice(0, index),
  // inserted items
  ...newItems,
  // part of the array after the specified index
  ...arr.slice(index)
]

const result = insert(items, 1, 10, 20)

console.log(result)
// [1, 10, 20, 2, 3, 4, 5]

72
Gaafar

Пользовательский массив insert методы

1. С несколькими аргументами и поддержкой цепочки

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    this.splice.apply(this, [index, 0].concat(
        Array.prototype.slice.call(arguments, 1)));
    return this;
};

Он может вставлять несколько элементов (как собственный splice делает) и поддерживает цепочку:

["a", "b", "c", "d"].insert(2, "X", "Y", "Z").slice(1, 6);
// ["b", "X", "Y", "Z", "c"]

2. С поддержкой объединения и создания цепочек аргументов типа массива

/* Syntax:
   array.insert(index, value1, value2, ..., valueN) */

Array.prototype.insert = function(index) {
    index = Math.min(index, this.length);
    arguments.length > 1
        && this.splice.apply(this, [index, 0].concat([].pop.call(arguments)))
        && this.insert.apply(this, arguments);
    return this;
};

Он может объединять массивы из аргументов с данным массивом, а также поддерживает цепочку:

["a", "b", "c", "d"].insert(2, "V", ["W", "X", "Y"], "Z").join("-");
// "a-b-V-W-X-Y-Z-c-d"

DEMO:http://jsfiddle.net/UPphH/

69
VisioN

Если вы хотите вставить несколько элементов в массив одновременно, проверьте ответ «Переполнение стека»: Лучший способ объединить массив в массив в javascript

Также вот несколько функций для иллюстрации обоих примеров:

function insertAt(array, index) {
    var arrayToInsert = Array.prototype.splice.apply(arguments, [2]);
    return insertArrayAt(array, index, arrayToInsert);
}

function insertArrayAt(array, index, arrayToInsert) {
    Array.prototype.splice.apply(array, [index, 0].concat(arrayToInsert));
    return array;
}

Наконец, вот jsFiddle, так что вы можете увидеть его сами: http://jsfiddle.net/luisperezphd/Wc8aS/

И вот как вы используете функции:

// if you want to insert specific values whether constants or variables:
insertAt(arr, 1, "x", "y", "z");

// OR if you have an array:
var arrToInsert = ["x", "y", "z"];
insertArrayAt(arr, 1, arrToInsert);
33
Luis Perez

Для правильного функционального программирования и создания цепочек изобретение Array.prototype.insert() имеет важное значение. На самом деле, сплайсинг мог бы быть идеальным, если бы он возвращал измененный массив вместо совершенно бессмысленного пустого массива. Так что здесь идет

Array.prototype.insert = function(i,...rest){
  this.splice(i,0,...rest)
  return this
}

var a = [3,4,8,9];
document.write("<pre>" + JSON.stringify(a.insert(2,5,6,7)) + "</pre>");

Хорошо, все вышеперечисленное с Array.prototype.splice() мутирует в исходный массив, а некоторые могут жаловаться, что «вы не должны изменять то, что вам не принадлежит», и это также может оказаться правильным. Поэтому для общественного блага я хотел бы дать другое Array.prototype.insert(), которое не изменяет исходный массив. Здесь это идет;

Array.prototype.insert = function(i,...rest){
  return this.slice(0,i).concat(rest,this.slice(i));
}

var a = [3,4,8,9],
    b = a.insert(2,5,6,7);
console.log(JSON.stringify(a));
console.log(JSON.stringify(b));

16
Redu

Я рекомендую использовать чистый JavaScript в этом случае, также нет метода вставки в JavaScript, но у нас есть метод, который является встроенным в Array методом, который делает работу за вас, он называется сращивание ...

Посмотрим, что там splice () ...

Метод splice () изменяет содержимое массива, удаляя существующие элементы и/или добавление новых элементов.

Хорошо, представьте, что у нас есть этот массив ниже:

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

Мы можем удалить 3 так:

arr.splice(arr.indexOf(3), 1);

Он вернет 3, но если мы проверим arr сейчас, мы имеем:

[1, 2, 4, 5]

Пока все хорошо, но как мы можем добавить новый элемент в массив, используя splice? Давайте вернем 3 в arr ...

arr.splice(2, 0, 3);

Давайте посмотрим, что мы сделали ...

Мы снова используем splice , но на этот раз для второго аргумента мы передаем 0 , значит, мы не хотим удалять элемент, но в то же время мы добавляем третий аргумент, который будет добавлен как 3 на втором указателе ...

Вы должны знать, что мы можем удалить и добавить одновременно, например, теперь мы можем сделать:

arr.splice(2, 2, 3);

Который удалит 2 элемента в индексе 2, затем добавит 3 в индексе 2, и результат будет:

[1, 2, 3, 5];

Это показывает, как работает каждый элемент в соединении:

array.splice (start, deleteCount, item1, item2, item3 ...)

10
Alireza

Несмотря на то, что на этот вопрос уже дан ответ, я добавляю эту заметку для альтернативного подхода.

Я хотел поместить известное число элементов в массив, в определенные позиции, так как они выходят из «ассоциативного массива» (то есть объекта), который по определению не гарантированно находится в отсортированном порядке. Я хотел, чтобы результирующий массив был массивом объектов, но объекты должны располагаться в определенном порядке в массиве, поскольку массив гарантирует их порядок. Я так и сделал.

Сначала исходный объект, строка JSONB, полученная из PostgreSQL. Я хотел отсортировать его по свойству order в каждом дочернем объекте.

var jsonb_str = '{"one": {"abbr": "", "order": 3}, "two": {"abbr": "", "order": 4}, "three": {"abbr": "", "order": 5}, "initialize": {"abbr": "init", "order": 1}, "start": {"abbr": "", "order": 2}}';

var jsonb_obj = JSON.parse(jsonb_str);

Поскольку число узлов в объекте известно, я сначала создаю массив с указанной длиной:

var obj_length = Object.keys(jsonb_obj).length;
var sorted_array = new Array(obj_length);

А затем выполните итерацию объекта, поместив вновь созданные временные объекты в нужные места в массиве без какой-либо «сортировки».

for (var key of Object.keys(jsonb_obj)) {
  var tobj = {};
  tobj[key] = jsonb_obj[key].abbr;

  var position = jsonb_obj[key].order - 1;
  sorted_array[position] = tobj;
}

console.dir(sorted_array);
6
Ville

Другое возможное решение с использованием Array#reduce.

var arr = ["Apple", "orange", "raspberry"],
    arr2 = [1, 2, 4];

function insert(arr, item, index) {
    arr = arr.reduce(function(s, a, i) {
      i == index ? s.Push(item, a) : s.Push(a);
      return s;
    }, []);   
    console.log(arr);
}

insert(arr, "banana", 1);
insert(arr2, 3, 2);

6
kind user

Добавить отдельный элемент по определенному индексу

//Append at specific position(here at index 1)
arrName.splice(1, 0,'newName1');
//1: index number, 0: number of element to remove, newName1: new element


//Append at specific position (here at index 3)
arrName[3] = 'newName1';

Добавить несколько элементов по определенному индексу

//Append from index number 1
arrName.splice(1, 0,'newElemenet1', 'newElemenet2', 'newElemenet3');
//1: index number from where append start, 
//0: number of element to remove, 
//newElemenet1,2,3: new elements
5
Srikrushna Pal

Я попробовал это, и он работает нормально!

var initialArr = ["India","China","Japan","USA"];
initialArr.splice(index, 0, item);

Индекс - это позиция, в которую вы хотите вставить или удалить элемент . 0, т.е. вторые параметры определяют номер элемента из индекса, который нужно удалить Item - это новые записи, которые вы хотите сделать в массиве. Это может быть один или несколько.

initialArr.splice(2, 0, "Nigeria");
initialArr.splice(2, 0, "Australia","UK");
3
Pawan

Любой, у кого все еще есть проблемы с этим и попробовал все варианты выше и никогда не получал это. Я поделюсь своим решением, это принять во внимание, что вы не хотите явно указывать свойства вашего объекта против массива.

function isIdentical(left, right){
    return JSON.stringify(left) === JSON.stringify(right);
}

function contains(array, obj){
    let count = 0;
    array.map((cur) => {
          if(this.isIdentical(cur, obj)) count++;
    });
    return count > 0;
}

Это комбинация итерации эталонного массива и сравнения его с объектом, который вы хотите проверить, преобразование их обоих в строку, а затем повторение, если оно совпадает. Тогда вы можете просто посчитать. Это можно улучшить, но это то, где я остановился. Надеюсь это поможет.

2
Clyde

Взятие прибыли по методу снижения следующим образом:

function insert(arr, val, index) {
    return index >= arr.length 
        ? arr.concat(val)
        : arr.reduce((prev, x, i) => prev.concat(i === index ? [val, x] : x), []);
}

Таким образом, таким способом мы можем вернуть новый массив (это будет классный функциональный способ - гораздо лучше, чем использовать Push или splice) с элементом, вставленным в index, и если индекс больше длины массива, он будет вставлен в конце.

2
alejoko

Вот рабочая функция, которую я использую в одном из своих приложений. 

Это проверяет, если пункт выхода

let ifExist = (item, strings = [ '' ], position = 0) => {
     // output into an array with empty string. Important just in case their is no item. 
    let output = [ '' ];
    // check to see if the item that will be positioned exist.
    if (item) {
        // output should equal to array of strings. 
        output = strings;
       // use splice in order to break the array. 
       // use positition param to state where to put the item
       // and 0 is to not replace an index. Item is the actual item we are placing at the prescribed position. 
        output.splice(position, 0, item);
    }
    //empty string is so we do not concatenate with comma or anything else. 
    return output.join("");
};

И тогда я называю это ниже. 

ifExist("friends", [ ' ( ', ' )' ], 1)}  // output: ( friends )
ifExist("friends", [ ' - '], 1)}  // output:  - friends 
ifExist("friends", [ ':'], 0)}  // output:   friends: 
0
Lesly Revenge