จะแทนที่รายการในอาร์เรย์ด้วย Javascript ได้อย่างไร


315

แต่ละรายการของอาเรย์นี้มีจำนวนบ้าง

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

ฉันจะแทนที่ตัวเลขบางส่วนด้วยอาร์เรย์ด้วยหมายเลขใหม่ได้อย่างไร

ตัวอย่างเช่นเราต้องการแทนที่ 3452 ด้วย 1010 เราจะทำเช่นนี้ได้อย่างไร


5
มี 3452 หลายอินสแตนซ์ที่จำเป็นต้องเปลี่ยนแปลงหรือไม่
mellamokb

53
จะมีหนึ่งกรณีถ้ากองกำลังมืดจะไม่เพิ่มอีก
James

2
เมื่อมีการแทนที่สตริงเหตุใดจึงไม่มีreplaceวิธีสำหรับอาร์เรย์
lifebalance

คำตอบ:


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 ของcontains: var contains = (a, b) => !!~a.indexOf(b): P
Florrie

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

array.map ยังส่งคืนดัชนีในพารามิเตอร์ตัวที่สอง a = a.map (ฟังก์ชั่น (รายการ, คีย์) {ถ้า (รายการ == 3452) a [คีย์] = 1010;});
Ricky sharma

38

ทางออกที่แนะนำของฉันจะเป็น:

items.splice(1, 1, 1010);

การดำเนินการประกบกันจะลบ 1 รายการเริ่มต้นที่ตำแหน่งที่ 1 ในอาร์เรย์ (คือ3452) 1010และจะแทนที่ด้วยรายการใหม่


6
นี้เป็นความเข้าใจผิดในขณะที่คุณแสดงความหมายว่าครั้งแรกที่พารามิเตอร์หมายความว่ารายการจะถูกลบออกในเมื่อความจริงเป็นครั้งแรกพารามิเตอร์หมายถึงว่าการดำเนินการจะเกิดขึ้นที่ดัชนี1 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/1
......

28

ใช้ indexOf เพื่อค้นหาองค์ประกอบ

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

1
เกิดอะไรขึ้นถ้ามันไม่ได้เป็นองค์ประกอบที่คาดหวัง หากพบว่ามันจะกลับดัชนีขององค์ประกอบที่พบ แต่ถ้าไม่มันจะกลับ -1 และมันจะตั้งค่านั้นเป็น -1 โปรดดูjsbin.com/wugatuwora/edit?js,console
surekha shelake

23

ทำได้อย่างง่ายดายด้วยการforวนซ้ำ

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

9
ได้อย่างง่ายดาย แต่ไม่จำเป็นต้องมีประสิทธิภาพ;)
อีไล

7
@Eli: OP ไม่ชัดเจนหากพวกเขาแทนที่หนึ่งอินสแตนซ์หรือหลายอินสแตนซ์ โซลูชันของฉันจัดการหลายอินสแตนซ์
mellamokb

@Eli หากมีสิ่งใดนี่จะเป็นคำตอบที่มีประสิทธิภาพที่สุดที่โพสต์เพื่อแทนที่เหตุการณ์ทั้งหมด
Tobiq

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

การทดแทนสามารถทำได้ในหนึ่งบรรทัด:

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

เราต้องการแทนที่3452ด้วย1010วิธีแก้ปัญหา:

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

แน่นอนว่าคำถามนี้เป็นเวลาหลายปีที่ผ่านมาและสำหรับตอนนี้ฉันแค่ชอบใช้วิธีที่ไม่เปลี่ยนรูปแบบแน่นอนมันยอดเยี่ยมสำหรับReactJSวิธีการแก้ปัญหาแน่นอนมันเป็นเรื่องที่น่ากลัวสำหรับ

สำหรับการใช้งานบ่อยฉันขอเสนอฟังก์ชันด้านล่าง:

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

4

วิธีแรก

วิธีที่ดีที่สุดในหนึ่งบรรทัดเพื่อแทนที่หรืออัปเดตรายการของอาร์เรย์

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 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 / ขีดให้อาร์เรย์ตระหนักถึงreplaceตอนนี้ ..._.replace([1, 2, 3], 2, 3);
Droogans

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

ถ้าใครสนใจวิธีเปลี่ยนวัตถุจากดัชนีในอาเรย์นี่เป็นวิธีแก้ปัญหา

ค้นหาดัชนีของวัตถุตามรหัส:

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

แทนที่วัตถุโดยใช้ Object.assign () วิธีการ:

Object.assign(items[index], newValue)

1

คำตอบจาก @ gilly3 ยอดเยี่ยม

วิธีการขยายสิ่งนี้สำหรับอาร์เรย์ของวัตถุ

ฉันต้องการวิธีต่อไปนี้เพื่ออัปเดตระเบียนที่อัปเดตใหม่เป็นเรคคอร์ดของฉันเมื่อฉันรับข้อมูลจากเซิร์ฟเวอร์ มันทำให้การสั่งซื้อเหมือนเดิมและค่อนข้างตรงไปข้างหน้าหนึ่งซับ

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 ดังนั้นสูตรการกำหนดจำนวนดัชนี(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
ให้ดัชนี ในขณะที่ ((index = indexOf (findValue))! == -1) เพื่อหลีกเลี่ยง double indexOf (findValue)
Juan R

0

ฉันแก้ไขปัญหานี้โดยใช้ลูปและวนซ้ำผ่านอาร์เรย์เดิมและเพิ่มตำแหน่งของการจับคู่ Arreas ไปยังอาร์เรย์อื่นแล้ววนลูปผ่านอาร์เรย์นั้นแล้วเปลี่ยนเป็นอาร์เรย์เดิมจากนั้นส่งคืนฉันใช้และฟังก์ชั่นลูกศร แต่เป็นฟังก์ชันปกติ ก็จะทำงานเช่นกัน

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

หากคุณต้องการ sintax น้ำตาลง่าย ๆ คุณก็สามารถ:

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