<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          13 種在 JavaScript 中刪除/過濾數(shù)組的方法

          共 6869字,需瀏覽 14分鐘

           ·

          2021-11-15 18:45

          英文 | https://javascript.plainenglish.io/13-methods-to-remove-filter-an-item-in-an-array-and-array-of-objects-in-javascript-f02b71206d9d
          翻譯 | 楊小愛

          我們可能總是會遇到根據(jù)一個屬性或多個屬性值從數(shù)組或?qū)ο髷?shù)組中刪除項目的時候,今天讓我們看看根據(jù)屬性值從數(shù)組中刪除或過濾項目有哪些不同的方法。
          1、POP
          “pop() 方法從數(shù)組中刪除最后一個元素并返回該元素。這個方法改變了數(shù)組的長度。” (來源:MDN)
          數(shù)組:
          let arraypoptest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let testpop = arraypoptest.pop();console.log("array pop", testpop,"-", arraypoptest);//10 - [2, 1, 2, 5, 6, 7, 8, 9, 9];
          對象數(shù)組:
          let users1 = [{ id: 1, name: "ted" },{ id: 2, name: "mike" },{ id: 3, name: "bob" },{ id: 4, name: "sara" }];let testpop1 = users1.pop();console.log(    "array of objects pop",    JSON.stringify(testpop1),"-"    JSON.stringify(users1));//{"id":4,"name":"sara"} - [{"id":1,"name":"ted"},{"id":2,"name":"mike"},{"id":3,"name":"bob"}]
          2、Shift()
          “shift() 方法從數(shù)組中移除第一個元素并返回移除的元素。這個方法改變了數(shù)組的長度。” (來源:MDN)
          數(shù)組:
          let arrayshifttest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let testshift = arrayshifttest.shift();console.log("array shift", testshift,"-", arrayshifttest);//2 - [1, 2, 5, 6, 7, 8, 9, 9, 10]
          對象數(shù)組:
          let users2 = [{ id: 1, name: "ted" },{ id: 2, name: "mike" },{ id: 3, name: "bob" },{ id: 4, name: "sara" }];let testshift1 = users2.shift();console.log("array of objects shift", JSON.stringify(testshift1),"-", JSON.stringify(users2));//{"id":1,"name":"ted"} - [{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]
          3、slice
          “slice() 方法將數(shù)組的一部分的淺拷貝返回到從開始到結(jié)束(不包括結(jié)束)選擇的新數(shù)組對象中,其中開始和結(jié)束表示該數(shù)組中項目的索引。不會修改原始數(shù)組。” (來源:MDN)
          數(shù)組:
          let?arrayslicetest?=?[2,?1,?2,?5,?6,?7,?8,?9,?9,?10];let?testslice?=?arrayslicetest.slice(0,?3);console.log("array?slice",?testslice,?arrayslicetest);?//not?changed?original?array//[2,?1,?2]?-?[2,?1,?2,?5,?6,?7,?8,?9,?9,?10]
          對象數(shù)組:
          let?users3?=?[{ id: 1, name: "ted" },{ id: 2, name: "mike" },{ id: 3, name: "bob" },{ id: 4, name: "sara" }];let testslice1 = users3.slice(0, 3);console.log("array of objects slice", JSON.stringify(testslice1));//not changed original array//[{"id":1,"name":"ted"},{"id":2,"name":"mike"},{"id":3,"name":"bob"}]
          4、splice
          “ splice() 方法通過刪除或替換現(xiàn)有元素和/或在適當(dāng)位置添加新元素來更改數(shù)組的內(nèi)容。” (來源:MDN)
          數(shù)組:
          let?arraysplicetest?=?[2,?1,?2,?5,?6,?7,?8,?9,?9,?10];let?testsplice?=?arrayslicetest.splice(0,?3);
          對象數(shù)組:
          let?users4?=?[{ id: 1, name: "ted" },{ id: 2, name: "mike" },{ id: 3, name: "bob" },{ id: 4, name: "sara" }];let testspice1 = users3.splice(0, 3);console.log("array of objects splice", JSON.stringify(testsplice));//[{"id":1,"name":"ted"},{"id":2,"name":"mike"},{"id":3,"name":"bob"}]
          5、使用 splice 刪除特定值
          數(shù)組:
          let arr = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];for (var i = 0; i < arr.length; i++) {    if (arr[i] === 5) {        arr.splice(i, 1);    }}console.log("splice with specific value", arr);//[2, 1, 2, 6, 7, 8, 9, 9, 10]
          對象數(shù)組:
          let users5 = [{ id: 1, name: "ted" },{ id: 2, name: "mike" },{ id: 3, name: "bob" },{ id: 4, name: "sara" }];for (var i = 0; i < users5.length; i++) {    if (users5[i].name === "ted") {        users5.splice(i, 1);    }}console.log("splice with specific value array of objects",JSON.stringify( users5));//[{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]
          6、使用 splice 刪除特定值 — 簡寫
          “ splice() 方法通過刪除或替換現(xiàn)有元素,或在適當(dāng)位置添加新元素來更改數(shù)組的內(nèi)容。”(來源:MDN)
          “indexOf() 方法返回可以在數(shù)組中找到給定元素的第一個索引,如果不存在,則返回 -1。”(來源:MDN)
          數(shù)組:
          let arrShorthand = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];let val = arr.indexOf(5);arrShorthand.splice(val, 1);console.log("splice shorthand specific value", arrShorthand);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
          對象數(shù)組:
          let users6 = [{ id: 1, name: "ted" },{ id: 2, name: "mike" },{ id: 3, name: "bob" },{ id: 4, name: "sara" }];var removeIndex = users6.map(item => item.id).indexOf(1);users6.splice(removeIndex, 1);console.log("splice shorthand specific value array of objects", JSON.stringify(users6));//[{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]
          7、Filter
          “filter() 方法創(chuàng)建一個新數(shù)組,其中包含所有通過所提供函數(shù)實現(xiàn)的測試的元素。”(來源:MDN)
          數(shù)組:
          let testarr = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let testarr2 = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let filtered = testarr.filter(function(value, index, arr) {    return value > 5;});let filtered2 = testarr2.filter(item => item !== 2);console.log("filter example 1", filtered);//[6, 7, 8, 9, 9, 10]console.log("filter example 2", filtered2);//[1, 5, 6, 7, 8, 9, 9, 10]
          刪除多個值的過濾器:
          let forDeletion = [2, 3, 5];let mularr = [1, 2, 3, 4, 5, 3];mularr = mularr.filter(item => !forDeletion.includes(item));console.log("multiple value deletion with filter", mularr);//[1, 4]
          對象數(shù)組:
          let users7 = [{ id: 1, name: "ted" },{ id: 2, name: "mike" },{ id: 3, name: "bob" },{ id: 4, name: "sara" }];let filterObj = users7.filter(item => item.id !== 2);console.log("filter example array of objects", filterObj);//[{"id":1,"name":"ted"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]
          8、delete operator
          “JavaScript delete 操作符從對象中刪除一個屬性;如果不再持有對同一屬性的更多引用,它最終會自動釋放。”(來源:MDN)
          let ar = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];delete ar[4]; // delete element with index 4console.log(ar);//[2, 1, 2, 5, undefined, 7, 8, 9, 9, 10]
          9、lodash remove
          _remove “從數(shù)組中刪除謂詞返回真值的所有元素,并返回已刪除元素的數(shù)組。謂詞使用三個參數(shù)調(diào)用:(值、索引、數(shù)組)。” (來源:lodash)
          數(shù)組:
          let arrlodashtest = [2, 1, 2, 5, 6, 7, 8, 9, 9, 10];let evens = _.remove(arrlodashtest, function(n) {    return n % 2 == 0;});console.log("lodash remove array", arrlodashtest);//[1, 5, 7, 9, 9]
          對象數(shù)組:
          let users8 = [{ id: 1, name: "ted" },{ id: 2, name: "mike" },{ id: 3, name: "bob" },{ id: 4, name: "sara" }];let evensObj = _.remove(users8, function(n) {    return n.id % 2 == 0;});console.log("lodash remove array of object", JSON.stringify(evensObj));//[{"id":2,"name":"mike"},{"id":4,"name":"sara"}]
          10、對象實用程序
          “Object.entries() 方法返回給定對象自己的可枚舉字符串鍵控屬性 [key, value] 對的數(shù)組,其順序與 for...in 循環(huán)提供的順序相同。” (來源:MDN)
          const object = [1, 2, 3, 4];const valueToRemove = 3;const arrObj = Object.values(    Object.fromEntries(        Object.entries(object).filter(([key, val]) => val !== valueToRemove)    ));console.log("object utilites", arrObj); // [1,2,4]
          11、?lodash filter
          _filter “迭代集合的元素,返回所有元素的數(shù)組,謂詞返回真值。謂詞使用三個參數(shù)調(diào)用:(值、索引|鍵、集合)。” (來源:lodash)
          let users10 = [{ id: 1, name: “ted” },{ id: 2, name: “mike” },{ id: 3, name: “bob” },{ id: 4, name: “sara” }];const lodashFilter = _.filter(users10, { id: 1 });console.log(“l(fā)odash filter”, JSON.stringify(lodashFilter));//[{"id":1,"name":"ted"}]
          12、lodash without
          _without “返回過濾值的新數(shù)組。” (來源:lodash)
          let lodashWithout = [2, 1, 2, 3];let lodashwithoutTest = _.without(lodashWithout, 1, 2);console.log(lodashwithoutTest);//[3]
          13、lodash reject
          _reject “與 _.filter 做相反的事情,這個方法返回predicate不返回真值的集合元素。”(來源:lodash)
          let users9 = [{ id: 1, name: "ted" },{ id: 2, name: "mike" },{ id: 3, name: "bob" },{ id: 4, name: "sara" }];const result = _.reject(users9, { id: 1 });console.log("lodash reject", result);//[{"id":2,"name":"mike"},{"id":3,"name":"bob"},{"id":4,"name":"sara"}]

          總結(jié)

          以上就是我今天與你分享的內(nèi)容,如果你覺得對你有所幫助,請記得點贊,并且分享給你身邊做開發(fā)的朋友。

          最后,感謝你的閱讀,祝編程愉快!

          學(xué)習(xí)更多技能

          請點擊下方公眾號

          瀏覽 36
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  人妻综合网 | 婷婷丁香五月激情网 | 啊啊啊啊啊在线 | 欧美操逼片 | 91视频在线观看18 |