Jak zamienić element w tablicy JavaScript?

315

Każdy element tej tablicy ma pewną liczbę.

var items = Array(523,3452,334,31, ...5346);

Jak zamienić pewną liczbę na tablicę na nową?

Na przykład, chcemy zastąpić 3452 1010, jak byśmy to zrobili?

James
źródło
5
Czy istnieje wiele wystąpień 3452, które należy zmienić, czy tylko jeden?
mellamokb
53
Będzie jedna instancja, jeśli ciemne siły nie dodadzą więcej.
James
2
Jeśli ciąg znaków zastępuje, dlaczego nie ma replacemetody dla tablic?
lifebalance

Odpowiedzi:

464
var index = items.indexOf(3452);

if (index !== -1) {
    items[index] = 1010;
}

Zaleca się również, aby nie używać metody konstruktora do inicjowania tablic. Zamiast tego użyj dosłownej składni:

var items = [523, 3452, 334, 31, 5346];

Możesz także użyć ~operatora, jeśli interesujesz się zwięzłym JavaScriptem i chcesz skrócić -1porównanie:

var index = items.indexOf(3452);

if (~index) {
    items[index] = 1010;
}

Czasami lubię nawet pisać containsfunkcję, aby streścić tę kontrolę i ułatwić zrozumienie, co się dzieje. Niesamowite jest to, że działa zarówno na tablicach, jak i na ciągach znaków:

var contains = function (haystack, needle) {
    return !!~haystack.indexOf(needle);
};

// can be used like so now:
if (contains(items, 3452)) {
    // do something else...
}

Począwszy od ES6 / ES2015 dla ciągów i proponowanych dla ES2016 dla tablic, możesz łatwiej określić, czy źródło zawiera inną wartość:

if (haystack.includes(needle)) {
    // do your thing
}
Eli
źródło
9
Pomyślałem, że dam wersję ES6 z contains: var contains = (a, b) => !!~a.indexOf(b): P
Florrie
1
@geon, czy możesz wyjaśnić wady?
Karl Taylor,
1
@KarlTaylor To po prostu niezbyt idiomatyczne. Jeśli możesz użyć ES2017, użyj Array.prototype.includeszamiast tego.
geon
1
czy mogę używać IndexOf z elementami obiektowymi?
ValRob
2
@ValRob nie, ale możesz użyć, inaby sprawdzić, czy obiekt ma klucz (np. 'property' in obj), Lub możesz również zapętlić wartości obiektu za pomocą Object.values(obj).forEach(value => {}).
Eli
95

Array.indexOf()Sposób zastąpi pierwszy przypadek. Aby uzyskać każdą instancję, użyj Array.map():

a = a.map(function(item) { return item == 3452 ? 1010 : item; });

Oczywiście tworzy to nową tablicę. Jeśli chcesz to zrobić na miejscu, użyj Array.forEach():

a.forEach(function(item, i) { if (item == 3452) a[i] = 1010; });
gilly3
źródło
7
Dla każdego, kto to czyta. Zarówno map (), jak i forEach () są nowszymi dodatkami do specyfikacji Javascript i nie są obecne w niektórych starszych przeglądarkach. Jeśli chcesz ich użyć, może być konieczne dodanie kodu zgodności dla starszych przeglądarek: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
jfriend00
2
Array.indexOf()został wprowadzony w tym samym czasie co map()i forEach(). Jeśli wspierasz IE8 lub wcześniejszą wersję i nie używasz podkładki dystansowej, aby dodać obsługę, lepiej skorzystaj z odpowiedzi mellamokb .
gilly3
array.map również zwraca indeks w drugim parametrze a = a.map (funkcja (pozycja, klucz) {if (item == 3452) a [klucz] = 1010;});
Ricky sharma
38

Moje sugerowane rozwiązanie to:

items.splice(1, 1, 1010);

Operacja łączenia usunie 1 element, zaczynając od pozycji 1 w tablicy (tj. 3452), I zastąpi go nowym elementem 1010.

Shimon Agassi
źródło
6
Jest to mylące, gdy sugerujesz, że pierwszy parametr oznacza, że 1element zostanie usunięty, podczas gdy w rzeczywistości pierwszy parametr oznacza, że ​​operacja odbywa się z indeksem 1. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
InsOp,
28

Użyj indexOf, aby znaleźć element.

var i = items.indexOf(3452);
items[i] = 1010;
Tesserex
źródło
1
co jeśli nie oczekuje elementu. jeśli znaleziono, zwróci indeks znalezionego elementu, ale jeśli nie, zwróci -1. i ustawi tę wartość na -1. proszę odnieść się do strony jsbin.com/wugatuwora/edit?js,console
surekha shelake
23

Łatwo to zrobić za pomocą forpętli.

for (var i = 0; i < items.length; i++)
    if (items[i] == 3452)
        items[i] = 1010;
mellamokb
źródło
9
Łatwo, ale niekoniecznie skutecznie;)
Eli
7
@Eli: OP nie było jasne, czy zastępują one jedną instancję, czy wiele instancji. Moje rozwiązanie obsługuje wiele instancji.
mellamokb
@Eli Jeśli to cokolwiek, byłaby to najbardziej efektywna odpowiedź opublikowana w celu zastąpienia wszystkich wystąpień
Tobiq
14

Możesz edytować dowolną liczbę list za pomocą indeksów

na przykład :

items[0] = 5;
items[5] = 100;
VirtualTroll
źródło
11

Jeśli używasz złożonego obiektu (lub nawet prostego) i możesz używać es6, Array.prototype.findIndexto jest dobre. Jeśli chodzi o tablicę PO, mogliby zrobić,

const index = items.findIndex(x => x === 3452)
items[index] = 1010

W przypadku bardziej złożonych obiektów to naprawdę świeci. Na przykład,

const index = 
    items.findIndex(
       x => x.jerseyNumber === 9 && x.school === 'Ohio State'
    )

items[index].lastName = 'Utah'
items[index].firstName = 'Johnny'
Yatrix
źródło
6

Wymiana może być wykonana w jednym wierszu:

var items = Array(523, 3452, 334, 31, 5346);

items[items.map((e, i) => [i, e]).filter(e => e[1] == 3452)[0][0]] = 1010

console.log(items);

Lub stwórz funkcję do ponownego użycia:

Array.prototype.replace = function(t, v) {
    if (this.indexOf(t)!= -1)
        this[this.map((e, i) => [i, e]).filter(e => e[1] == t)[0][0]] = v;
  };

//Check
var items = Array(523, 3452, 334, 31, 5346);
items.replace(3452, 1010);
console.log(items);

Artee
źródło
6

Sposób ES6 :

const items = Array(523, 3452, 334, 31, ...5346);

Wanna Zamieniamy 3452z 1010, roztwór:

const newItems = items.map(item => item === 3452 ? 1010 : item);

Z pewnością pytanie brzmi już wiele lat temu i na razie wolę używać niezmiennego rozwiązania, na pewno jest niesamowite ReactJS.

Do częstego użytkowania oferuję poniższą funkcję:

const itemReplacer = (array, oldItem, newItem) =>
  array.map(item => item === oldItem ? newItem : item);
AmerllicA
źródło
4

Pierwsza metoda

Najlepszy sposób w jednym wierszu, aby zastąpić lub zaktualizować element tablicy

array.splice(array.indexOf(valueToReplace), 1, newValue)

Na przykład:

let items = ['JS', 'PHP', 'RUBY'];

let replacedItem = items.splice(items.indexOf('RUBY'), 1, 'PYTHON')

console.log(replacedItem) //['RUBY']
console.log(items) //['JS', 'PHP', 'PYTHON']

Druga metoda

Innym prostym sposobem wykonania tej samej operacji jest:

items[items.indexOf(oldValue)] = newValue
Goms
źródło
3

Najprostszym sposobem jest użycie niektórych bibliotek, takich jak underscorejs i metoda mapy.

var items = Array(523,3452,334,31,...5346);

_.map(items, function(num) {
  return (num == 3452) ? 1010 : num; 
});
=> [523, 1010, 334, 31, ...5346]
mrded
źródło
2
Niby życzenie lodash / podkreślenie zapewniło tablicę świadomą replaceteraz ..._.replace([1, 2, 3], 2, 3);
Droogans
3

Niezmienny sposób na zastąpienie elementu na liście za pomocą operatorów i .slicemetody rozprzestrzeniania ES6 .

const arr = ['fir', 'next', 'third'], item = 'next'

const nextArr = [
  ...arr.slice(0, arr.indexOf(item)), 
  'second',
  ...arr.slice(arr.indexOf(item) + 1)
]

Sprawdź, czy działa

console.log(arr)     // [ 'fir', 'next', 'third' ]
console.log(nextArr) // ['fir', 'second', 'third']
Purkhalo Alex
źródło
2
var items = Array(523,3452,334,31,5346);

Jeśli znasz wartość, użyj

items[items.indexOf(334)] = 1010;

Jeśli chcesz wiedzieć, że ta wartość jest obecna, czy nie, użyj,

var point = items.indexOf(334);

if (point !== -1) {
    items[point] = 1010;
}

Jeśli znasz miejsce (pozycję), użyj bezpośrednio,

items[--position] = 1010;

Jeśli chcesz wymienić kilka elementów i wiesz, że tylko pozycja początkowa oznacza,

items.splice(2, 1, 1010, 1220);

aby uzyskać więcej informacji o .splice

KarSho
źródło
1
var index = Array.indexOf(Array value);
        if (index > -1) {
          Array.splice(index, 1);
        }

stąd możesz usunąć określoną wartość z tablicy i na podstawie tego samego indeksu możesz wstawić wartość do tablicy.

 Array.splice(index, 0, Array value);
Gunjan Kumar
źródło
1

Cóż, jeśli ktoś zastanawia się, jak zastąpić obiekt z jego indeksu w tablicy, oto rozwiązanie.

Znajdź indeks obiektu według jego identyfikatora:

const index = items.map(item => item.id).indexOf(objectId)

Zastąp obiekt za pomocą metody Object.assign ():

Object.assign(items[index], newValue)
faye.babacar78
źródło
1

Odpowiedź od @ gilly3 jest świetna.

Jak rozszerzyć to dla tablicy obiektów

Wolę następujący sposób aktualizacji nowego zaktualizowanego rekordu do mojej tablicy rekordów, gdy otrzymuję dane z serwera. Utrzymuje porządek w nienaruszonym stanie i całkiem prosto jedna linijka.

users = users.map(u => u.id !== editedUser.id ? u : editedUser);

var users = [
{id: 1, firstname: 'John', lastname: 'Sena'},
{id: 2, firstname: 'Serena', lastname: 'Wilham'},
{id: 3, firstname: 'William', lastname: 'Cook'}
];

var editedUser = {id: 2, firstname: 'Big Serena', lastname: 'William'};

users = users.map(u => u.id !== editedUser.id ? u : editedUser);

console.log('users -> ', users);

muasif80
źródło
0

Najpierw przepisz tablicę w następujący sposób:

var items = [523,3452,334,31,...5346];

Następnie uzyskaj dostęp do elementu w tablicy poprzez jego numer indeksu. Wzór na określenie numeru indeksu to:n-1

Aby zastąpić pierwszy element (n=1)w tablicy, napisz:

items[0] = Enter Your New Number;

W twoim przykładzie liczba 3452znajduje się na drugiej pozycji (n=2). Tak więc formuła określająca numer indeksu to 2-1 = 1. Więc napisać następujący kod do wymiany 3452z 1010:

items[1] = 1010;
Anthony Levato
źródło
0

Oto podstawowa odpowiedź w funkcji wielokrotnego użytku:

function arrayFindReplace(array, findValue, replaceValue){
    while(array.indexOf(findValue) !== -1){
        let index = array.indexOf(findValue);
        array[index] = replaceValue;
    }
}
JohnP2
źródło
1
niech indeks; while ((index = indexOf (findValue))! == -1), aby uniknąć podwójnego indexOf (findValue)
Juan R
0

Rozwiązałem ten problem, używając pętli i iteracji po oryginalnej tablicy oraz dodając pozycje pasujących obszarów do innej tablicy, a następnie zapętlając tę ​​tablicę i zmieniając ją w oryginalnej tablicy, a następnie zwracam, użyłem funkcji strzałki i zwykłej funkcji też by działał.

var replace = (arr, replaceThis, WithThis) => {
    if (!Array.isArray(arr)) throw new RangeError("Error");
    var itemSpots = [];
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == replaceThis) itemSpots.push(i);
    }

    for (var i = 0; i < itemSpots.length; i++) {
        arr[itemSpots[i]] = WithThis;
    }

    return arr;
};
J. Svec
źródło
0
presentPrompt(id,productqty) {
    let alert = this.forgotCtrl.create({
      title: 'Test',
      inputs: [
        {
          name: 'pickqty',
          placeholder: 'pick quantity'
        },
        {
          name: 'state',
          value: 'verified',
          disabled:true,
          placeholder: 'state',

        }
      ],
      buttons: [
        {
          text: 'Ok',
          role: 'cancel',
          handler: data => {

            console.log('dataaaaname',data.pickqty);
            console.log('dataaaapwd',data.state);


          for (var i = 0; i < this.cottonLists.length; i++){

            if (this.cottonLists[i].id == id){
                this.cottonLists[i].real_stock = data.pickqty;

            }
          }

          for (var i = 0; i < this.cottonLists.length; i++){

            if (this.cottonLists[i].id == id){
              this.cottonLists[i].state = 'verified';   

          }
        }
            //Log object to console again.
            console.log("After update: ", this.cottonLists)
            console.log('Ok clicked');
          }
        },

      ]
    });
    alert.present();
  }

As per your requirement you can change fields and array names.
thats all. Enjoy your coding.
mahendren
źródło
0

Najłatwiej jest to zrobić.

var items = Array(523,3452,334,31, 5346);
var replaceWhat = 3452, replaceWith = 1010;
if ( ( i = items.indexOf(replaceWhat) ) >=0 ) items.splice(i, 1, replaceWith);

console.log(items);
>>> (5) [523, 1010, 334, 31, 5346]
Vladimir Prudnikov
źródło
nie działa dla przedmiotów znalezionych w indeksie 0 replaceWhat = 523, replaceWith = 999999nie daje poprawnych wyników
Anthony Chung
0

Oto jeden liniowiec. Zakłada, że ​​element będzie w tablicy.

var items = [523, 3452, 334, 31, 5346]
var replace = (arr, oldVal, newVal) => (arr[arr.indexOf(oldVal)] = newVal, arr)
console.log(replace(items, 3452, 1010))

Alex Cory
źródło
0

Jeśli chcesz prosty oneliner z sintaksem cukrowym, możesz po prostu:

(elements = elements.filter(element => element.id !== updatedElement.id)).push(updatedElement);

Lubić:

let elements = [ { id: 1, name: 'element one' }, { id: 2, name: 'element two'} ];
const updatedElement = { id: 1, name: 'updated element one' };

Jeśli nie masz identyfikatora, możesz skreślić element taki jak:

(elements = elements.filter(element => JSON.stringify(element) !== JSON.stringify(updatedElement))).push(updatedElement);
Marco Silva
źródło