配列内のアイテムをJavaScriptで置き換える方法は?


315

この配列の各項目はいくつかの数値です。

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

配列のある数値を新しい数値に置き換えるにはどうすればよいですか?

たとえば、3452を1010に置き換えたい場合、どうすればよいでしょうか。


5
変更する必要がある3452のインスタンスが複数ありますか、それとも1つだけですか?
mellamokb、

53
ダークフォースがもう1つ追加しない場合、インスタンスは1つになります。
ジェームズ

2
文字列置換があるときなぜreplace配列のメソッドがないのですか?
ライフバランス

回答:


464
var index = items.indexOf(3452);

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

また、配列を初期化するためにコンストラクターメソッドを使用しないことをお勧めします。代わりに、リテラル構文を使用します。

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

~JavaScriptが簡潔で、-1比較を短くしたい場合は、演算子を使用することもできます。

var index = items.indexOf(3452);

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

containsこのチェックを抽象化し、何が起こっているのかを簡単に理解できるようにする関数を作成したい場合さえあります。これは配列と文字列の両方で機能します:

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

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

文字列についてはES6 / ES2015から、配列についてはES2016で提案されているように、ソースに別の値が含まれているかどうかをより簡単に判断できます。

if (haystack.includes(needle)) {
    // do your thing
}

9
ちょうど私がのES6版与えるだろうと思ったcontainsvar contains = (a, b) => !!~a.indexOf(b)P:
フローリー

1
@geonのデメリットを教えてください。
カールテイラー

1
@KarlTaylorあまり慣用的ではありません。ES2017を使用できる場合は、Array.prototype.includes代わりに使用してください。
geon '

1
オブジェクト要素でIndexOfを使用できますか?
ValRob

2
@ValRobいいえ、ただしin、オブジェクトにキーがあるかどうかを確認するために使用できます(例:)'property' in obj、またはでオブジェクトの値をループすることもできますObject.values(obj).forEach(value => {})
Eli

95

このArray.indexOf()メソッドは最初のインスタンスを置き換えます。すべてのインスタンスを取得するには、次を使用しますArray.map()

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

もちろん、それによって新しい配列が作成されます。それをその場で行いたい場合は、以下を使用しますArray.forEach()

a.forEach(function(item, i) { if (item == 3452) a[i] = 1010; });

7
これを読んでいる誰かのために。map()とforEach()はどちらもJavascript仕様への新しい追加であり、一部の古いブラウザには存在しません。あなたがそれらを使用する場合は、古いブラウザの互換性のコードを追加する必要がある場合がありますdeveloper.mozilla.org/en/JavaScript/Reference/Global_Objects/...
jfriend00

2
Array.indexOf()map()およびと同時に導入されましたforEach()。IE8以前をサポートしていて、shimを使用してサポートを追加していない場合は、mellamokbの答えを使用することをお勧めします
gilly3、2015

array.mapは、2番目のパラメーターでインデックスも返しますa = a.map(function(item、key){if(item == 3452)a [key] = 1010;});
Ricky sharma

38

私が提案する解決策は:

items.splice(1, 1, 1010);

スプライス操作は、配列(つまり3452)の位置1から始まる1つの項目を削除し、それを新しい項目に置き換えます1010


6
最初のパラメーター1が実際に最初のパラメーターが操作がインデックスで行われることを意味するときに削除されることを最初のパラメーターが意味することを暗示するので、これは誤解を招きます1developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...
InsOp

28

indexOfを使用して要素を検索します。

var i = items.indexOf(3452);
items[i] = 1010;

1
それが要素を期待していない場合はどうなりますか?見つかった場合は見つかった要素のインデックスを返しますが、見つからなかった場合は-1を返します。その値を-1に設定します。jsbin.com/wugatuwora/edit?js,console
surekha shelake 2017

23

forループで簡単に達成。

for (var i = 0; i < items.length; i++)
    if (items[i] == 3452)
        items[i] = 1010;

9
簡単だが、必ずしも効率的ではない;)
Eli

7
@エリ:1つのインスタンスを置き換えるのか、複数のインスタンスを置き換えるのか、OPは明確ではありませんでした。私のソリューションは複数のインスタンスを処理します。
mellamokb、

@Eliどちらかと言えば、これはすべての
出来事

15

インデックスを使用してリストをいくつでも編集できます

例えば ​​:

items[0] = 5;
items[5] = 100;

11

複雑なオブジェクト(または単純なオブジェクト)を使用していて、es6を使用できる場合Array.prototype.findIndexは、これが適切です。OPの配列については、

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

より複雑なオブジェクトの場合、これは本当に優れています。例えば、

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

items[index].lastName = 'Utah'
items[index].firstName = 'Johnny'

6

交換は1行で行うことができます。

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

または、再利用する関数を作成します。

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


6

ES6の方法:

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

私たちは、置き換えたく34521010、解決策:

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

確かに、問題は何年も前のことであり、今のところ私は不変のソリューションを使用することを好むだけですReactJS。間違いなく、それはにとって素晴らしいことです。

頻繁に使用する場合、以下の機能を提供します。

const itemReplacer = (array, oldItem, newItem) =>
  array.map(item => item === oldItem ? newItem : item);

4

最初の方法

配列のアイテムを置換または更新するための1行だけの最善の方法

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

例えば:

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

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

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

第二の方法

同じ操作を行う別の簡単な方法は次のとおりです。

items[items.indexOf(oldValue)] = newValue

3

最も簡単な方法は、underscorejsやmapメソッドなどのライブラリを使用することです。

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

_.map(items, function(num) {
  return (num == 3452) ? 1010 : num; 
});
=> [523, 1010, 334, 31, ...5346]

2
lodash / underscoreが配列対応を提供するようになった一種の願いreplace..._.replace([1, 2, 3], 2, 3);
Droogans 2014

3

ES6スプレッド演算子と.sliceメソッドを使用してリスト内の要素を置き換える不変の方法。

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

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

動作することを確認する

console.log(arr)     // [ 'fir', 'next', 'third' ]
console.log(nextArr) // ['fir', 'second', 'third']

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

値がわかっている場合は、

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

値が存在するかどうかを知りたい場合は、

var point = items.indexOf(334);

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

場所(位置)がわかっている場合は直接使用し、

items[--position] = 1010;

いくつかの要素を置き換えたい場合で、開始位置しか意味がない場合は、

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

詳細について.splice


1
var index = Array.indexOf(Array value);
        if (index > -1) {
          Array.splice(index, 1);
        }

ここから、配列から特定の値を削除し、同じインデックスに基づいて配列に値を挿入できます。

 Array.splice(index, 0, Array value);

1

配列内のインデックスからオブジェクトを置き換える方法について誰かが気になっているなら、これが解決策です。

IDでオブジェクトのインデックスを見つけます。

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

Object.assign()メソッドを使用してオブジェクトを置き換えます。

Object.assign(items[index], newValue)

1

@ gilly3からの回答は素晴らしいです。

オブジェクトの配列に対してこれを拡張する方法

サーバーからデータを取得したときに、次の方法で新しい更新されたレコードをレコードの配列に更新します。それは注文をそのままにして、1つのライナーをかなりまっすぐに保ちます。

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


0

まず、次のように配列を書き換えます。

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

次に、インデックス番号を使用して配列の要素にアクセスします。インデックス番号を決定する式は次のとおりです。n-1

(n=1)配列の最初の項目を置き換えるには、次のように記述します。

items[0] = Enter Your New Number;

あなたの例では、番号3452は2番目の位置にあり(n=2)ます。したがって、インデックス番号を決定する式は2-1 = 1です。だから、交換するには、次のコード記述3452では1010

items[1] = 1010;

0

再利用可能な関数にされた基本的な答えは次のとおりです。

function arrayFindReplace(array, findValue, replaceValue){
    while(array.indexOf(findValue) !== -1){
        let index = array.indexOf(findValue);
        array[index] = replaceValue;
    }
}

1
インデックスをみましょう; while((index = indexOf(findValue))!== -1)を回避して、二重のindexOf(findValue)
Juan R

0

forループを使用してこの問題を解決し、元の配列を反復処理して、一致するアレリアの位置を別の配列に追加し、その配列をループして元の配列で変更した後、それを返します。矢印関数を使用しましたが、通常の関数ですも動作します。

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

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.

0

最も簡単な方法はこれです。

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]

はインデックス0で見つかったアイテムで replaceWhat = 523, replaceWith = 999999は機能しません
Anthony Chung

0

こちらがワンライナーです。アイテムが配列にあると想定しています。

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


0

単純な砂糖シンタックスワンライナーが必要な場合は、次の操作を実行できます。

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

お気に入り:

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

idがない場合は、次のように要素を文字列化できます。

(elements = elements.filter(element => JSON.stringify(element) !== JSON.stringify(updatedElement))).push(updatedElement);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.