數(shù)組和對象の常見操作

一、操作數(shù)組和對象的常見方法

  • 獲取數(shù)組中的最大值Math.max.apply()和最小值 Math.min.apply() ---JS方法 
var arr = [22,13,6,55,30];  
var max = Math.max.apply(null, arr);  
var min = Math.min.apply(null, arr);
console.log(max, min) // 55,6
  • 獲取一組數(shù)中的最大值 Math.max()和最小值 Math.min()---ES6擴(kuò)展運算符 
let arr = [22,13,6,55,30];
 console.log(Math.max(...arr)); // 55

? 注意：兩者區(qū)別在于，前者是獲得數(shù)組中的最大值，后者是獲得一組數(shù)的最大值

  • array.push()方法用于 數(shù)組末尾添加元素
  • array.pop()方法用于刪除并返回數(shù)組的最后一個元素
  • unshift() 方法可向數(shù)組的開頭添加一個或更多元素，并返回新的長度
 const arr = ['George','John'];
 console.log(arr.unshift('William') ); // 3
 console.log(arr); // [William,George,John]
  • shift () 方法用于刪除數(shù)組中的第一項
  • splice() 方法用于添加或刪除數(shù)組中的元素
// 添加
var fruits = ['Banana','Orange', 'Apple','Mango'];
fruits.splice(2,0,'Lemon','Kiwi');
console.log(fruits) // ['Banana','Orange','Lemon','Kiwi','Apple','Mango']
// 刪除(如果僅刪除一個元素，則返回一個元素的數(shù)組。 如果未刪除任何元素，則返回空數(shù)組。)
var fruits = ['Banana','Orange', 'Apple','Mango'];
console.log(fruits.splice(2,1)) // ['Apple']
console.log(fruits) // ['Banana','Orange','Mango']
  • join() 方法用于把數(shù)組中的所有元素放入一個字符串
const array=arr=['dd','d4','ff']
arr.join() //  "dd,d4,ff"
  • reverse() 方法用于數(shù)組反轉(zhuǎn)
const array=['dd','d4','ff']
array.reverse() // ['ff','d4','dd']

?注意：該方法會改變原來的數(shù)組，而不會創(chuàng)建新的數(shù)組

  • sort () 于對數(shù)組的元素進(jìn)行排序（按字符編碼的順序排序）
const array=['Thomas','George','John']
array.sort () // ['George','John','Thomas']

const array=['3','1','10'];
array.sort() // ["1", "10", "3"]

// 要實現(xiàn)按照數(shù)值的大小對數(shù)字進(jìn)行排序,必須使用一個排序函數(shù),如下
function sortNumber(a,b){return a-b;}
array.sort(sortNumber) // ["1", "3", "10"]

?注意：組在原數(shù)組上進(jìn)行排序，不生成副本

  • some()方法用于檢測數(shù)組中的元素是否滿足指定條件，會依次執(zhí)行數(shù)組的每個元素,如果有一個元素滿足條件，則表達(dá)式返回true , 剩余的元素不會再執(zhí)行檢測，如果沒有滿足條件的元素，則返回false
var ages = [3, 10, 18, 20];
function checkAdult(age) {  return age >= 18;}
 ages.some(checkAdult); // true
  • every()方法用于檢測數(shù)組所有元素是否都符合指定條件，如果數(shù)組中檢測到有一個元素不滿足，則整個表達(dá)式返回 false ，且剩余的元素不會再進(jìn)行檢測,如果所有元素都滿足條件，則返回 true
var ages = [3, 10, 18, 20];
function checkAdult(age) {  return age >= 18;}
 ages.every(checkAdult); // false
  • reduce()方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    return total + num;
}
 ages.numbers (getSum); // 125
  • isArray()方法用于判斷一個對象是否為數(shù)組
var fruits = ["Banana", "Orange", "Apple", "Mango"];
Array.isArray(fruits); // true
  • filter()方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素
const array=[{a:'good',b=2},{a:'good',b=3},{a:'go',b=3}]
const list = array.filter((ele: any) => { return ele.a === 'good';});
console.log(list); // [{a:'good',b=2},{a:'good',b=3}]
  • find()方法返回通過判斷的數(shù)組的第一個元素
const array=[{a:'good',b=2},{a:'good',b=3},{a:'go',b=3}]
const item = array.find((ele: any) => { return ele.a === 'good';});
console.log(item); // {a:'good',b=2}
  • findIndex()方法返回傳入一個測試條件（函數(shù)）符合條件的數(shù)組第一個元素位置。
//  js
var ages = [4, 12, 16, 20];
function checkAdult(age) {
    return age >=15;
}
console.log(ages.findIndex(checkAdult)); // 2
// es6
const array = [{label:'name1'},{label:'name2'},{label:'name1'}];
const index = array.findIndex((ele: { label: any; }) => ele.label === 'name1');
console.log(index) //0
  • concat() 方法用于連接兩個或多個數(shù)組
var list1 = [1, 2, 3, 4];
var list2 = [5,6];
var array=list1.concat(list2); // 或者 list1.concat(5,6)
console.log(array); // [1,2,3,4,5,6]

? 注意：該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個副本

  • match() 方法可在字符串內(nèi)檢索指定的值，找到一個或多個正則表達(dá)式的匹配,并返回一個數(shù)組
var str = '國慶節(jié)你們放5天假我們放7天，很開心';
console.log(str.match(/\d+/g)) // ['5','7']
  • ES6中new Set()方法可用于數(shù)組的去重，取并集，交集，差集等
// 數(shù)組去重
var array=[1,1,2]
console.log([...new Set(array)]) // [1,2]
// 并集
var a= new Set([1,2,3]);
var b= new Set([4,3,2]);
console.log(new Set([...a,...b])) // {1,2,3,4}
// 交集
var a= new Set([1,2,3]);
var b= new Set([4,3,2]);
console.log(new Set([...a].filter(x=>b.has(x)))) // {2,3}
// 差集
var a= new Set([1,2,3]);
var b= new Set([4,3,2]);
console.log(new Set([...a].filter(x=>!b.has(x)))) // {1}

?注意：該數(shù)組去重方法對于對象數(shù)組是無法達(dá)到預(yù)期效果的

  • includes()方法檢查數(shù)組是否包含某個元素，也可用于判斷字符串是否包含指定的子字符串，輸出true還是相應(yīng)地false
var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world"); // n 輸出結(jié)果為true

const array1 = [1, 2, 3];
console.log(array1.includes(2));// true

?注意：該方法對于對象數(shù)組是無法達(dá)到預(yù)期效果的

  • indexOf(value,index)方法方法可返回某個指定的字符串值在字符串中首次出現(xiàn)的位置或者返回數(shù)組中某個指定的元素位置，如果要檢索的值沒有出現(xiàn)，則該方法返回 -1，第二個參數(shù)為可選參數(shù)，規(guī)定開始檢索的位置
    注意：indexOf() 方法對大小寫敏感
  • JSON.stringify()和JSON.parse()
    JSON.stringify()用于將js對象轉(zhuǎn)換為JSON字符串，而JSON.parse()可以將JSON字符串轉(zhuǎn)為一個對象
let arr = [1,2,3];
JSON.stringify(arr); // '[1,2,3]'
typeof JSON.stringify(arr); // string

let string = '[1,2,3]';
console.log(JSON.parse(string))； // [1,2,3]
console.log(typeof JSON.parse(string))； // object

/* JSON.stringify()的幾種妙用*/

1.判斷數(shù)組是否包含某對象，或者判斷對象是否相等
// 判斷數(shù)組是否包含某對象
let data = [
    {name:'echo'},
    {name:'聽風(fēng)是風(fēng)'},
    {name:'天子笑'},
    ],
let val = {name:'天子笑'};
JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1; // true
// 判斷兩數(shù)組/對象是否相等
let a = [1,2,3], 
    b = [1,2,3];
JSON.stringify(a) === JSON.stringify(b); // true

2.讓localStorage/sessionStorage可以存儲對象。
// 存
 localStorage.setItem('key',JSON.stringify(val));
// 取
 JSON.parse(localStorage.getItem('key'));

3.實現(xiàn)對象深拷貝
// 深拷貝
function deepClone(data) {
    let _data = JSON.stringify(data),
        dataClone = JSON.parse(_data);
    return dataClone;
};
// 測試
let arr = [1,2,3],
    _arr = deepClone(arr);
arr[0] = 2;
console.log(arr,_arr) // [2,2,3]  [1,2,3]
  • toString() 數(shù)組或數(shù)字轉(zhuǎn)字符串，它的受眾更多是數(shù)字
// 和JSON.stringify的區(qū)別
let arr = [1,2,3];
JSON.stringify(arr); // '[1,2,3]'
arr.toString(); // 1,2,3
  • hasOwnProperty()方法用于判斷對象中有沒有當(dāng)前字段
var a = {a:1,b:2,c:3};
var n = a.hasOwnProperty('c') // n輸出結(jié)果true
var y = a.hasOwnProperty('d') // y輸出結(jié)果 false
  • Number() 函數(shù)把對象的值轉(zhuǎn)換為數(shù)字。
Number('999') // 999
Number(true) // 1
  • Object.assign方法用于對象的合并，將源對象（source）的所有可枚舉屬性，復(fù)制到目標(biāo)對象（target）
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
// Object.assign方法的第一個參數(shù)是目標(biāo)對象，后面的參數(shù)都是源對象

?注意：如果目標(biāo)對象與源對象有同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性

  • Object.keys()用于獲取對象中的鍵
  var person = {
    name: '張三',
    age: 18,
    66: '66',
    2: '2'
  };
console.log(Object.keys(person)); // [ 'name','age','66','3']

二、循環(huán)數(shù)組和對象操作

  • 普通的for循環(huán)遍歷數(shù)組
//  可以得到數(shù)組索引值和某一項的值
 var array = [1,2,3,4,5,6,7];  
    for (var i = 0; i < array.length; i) {  
        console.log(i,array[i]);  
    }

可以使用 break, continue 和 return跳出循環(huán)

  • ES6中新增 for...of遍歷數(shù)組
//  可以得到數(shù)組某一項的值無法獲取索引值
 var array = [{a:1,b:2},{a:2,b:2}];  
   for(let item of array) {  
        console.log(item);  
    };

可以使用 break, continue 和 return跳出循環(huán)

  • for...in遍歷數(shù)組和對象
/* 可以得到數(shù)組和對象索引值和某一項的值 */
// 遍歷數(shù)組
var array = [{a:1,b:2},{a:2,b:2}];  
for(let k in array ) {  
   console.log(k ,array[k]);
} 
// 遍歷對象
var array = {a:1,b:2,c:3,d:"hello world"};
for(let k in array ) {
    console.log(k,array [k]);
}
  • forEach遍歷數(shù)組
//  可以得到數(shù)組索引值和某一項的值
var array = [{a:1,b:2},{a:2,b:2}];  
array.forEach((item,index)=>{
    console.log(item,index);
});

?forEach 方法無法使用 break 語句跳出循環(huán)，或者使用return從函數(shù)體內(nèi)返回

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容