JavaScript對數(shù)組的操作

本篇文章純屬于個人的學習總結(jié)五续，如果文章中出現(xiàn)錯誤或不嚴謹?shù)牡胤饺髅簦Ｍ蠹夷軌蛑赋觯x謝疙驾！

數(shù)組檢測的方法

instanceof
主要是檢測變量的原型鏈是否指向Array構(gòu)造函數(shù)的prototype原型上凶伙，但instanceof不能保證返回的結(jié)果一定正確，因為只要在原型鏈上都會返回true它碎。arr instanceof Object 也會返回true函荣。

let arr = [1, 2, 3];
arr instanceof Array; //true

contructor

var arr = [];
arr.constructor === Array  return true
但constructor可以被重寫铣卡，不能保證一定是數(shù)組
    var str = "abc";
    str.constructor = Array;
    str.constructor === Array //return true
很顯然，str不是數(shù)組

Array.isArray()

ES5在Array上新增了檢測數(shù)組的方法偏竟，存在兼容性問題煮落。

Object.prototype.toString.call()

可以確保方法能檢測一定是數(shù)組。

var arr = [1, 3, 6];
Object.prototype.toString.call(str) === "[object Array]"; //rturn true

總結(jié)：

由于Array.isArray()是封裝在瀏覽器中踊谋，運行效率比較高蝉仇，所以當要真正檢測變量類型時，先會檢測瀏覽器是否支持Array.isArray()殖蚕，之后再用Object.prototype.call()方法轿衔。代碼應該如下：

// 判斷元素是不是數(shù)組
    let arr4 = "12, 45";

    function isArray(value) {
      if (typeof Array.isArray === "function") {
        return Array.isArray(value);
      } else {
        return Object.prototype.toString.call(value) === "[object Array]";
      }
    }
    console.log(isArray(arr4));

數(shù)組對象方法

創(chuàng)建

let a = new Array(); 等價于 let a = [];

實例方法

push()

在數(shù)組最后添加，返回新數(shù)組的長度睦疫，改變原數(shù)組

pop()

刪除數(shù)組最后一項害驹，返回刪除的元素，改變原數(shù)組

shift()

刪除數(shù)組中第一個元素蛤育，返回刪除的元素宛官，改變原數(shù)組

unshift()

在數(shù)組最前面添加，返回新數(shù)組的長度瓦糕，改變原數(shù)組

fill(val, start, end)

用一個固定的值替換數(shù)組中的元素底洗，返回新數(shù)組，改變原數(shù)組

reverse()

前后調(diào)換元素位置咕娄，返回新數(shù)組亥揖，改變原數(shù)組

sort()

數(shù)組排序，返回新數(shù)組圣勒，改變原數(shù)組费变。sort()方法會調(diào)用數(shù)組每項的toString()方法，比較字符串進行排序圣贸。

splice()

用于數(shù)組的刪除挚歧、插入、替換旁趟，會改變原數(shù)組
一個參數(shù)時昼激，表示刪除的開始位置；
兩個參數(shù)時锡搜，第一個表示刪除的開始位置(0)橙困，第二個表示刪除的個數(shù)；
三個參數(shù)時耕餐，刪除的開始位置凡傅、刪除的個數(shù)、添加的元素

join()

將原數(shù)組轉(zhuǎn)化成字符串肠缔，默認以空格分隔夏跷，返回替換后的值哼转，不改變原數(shù)組

concat()

將兩個數(shù)組連接，返回新數(shù)組槽华，不改變原數(shù)組

slice(start, end)

從數(shù)組中返回指定的元素壹蔓，返回新數(shù)組，不改變原數(shù)組

位置方法

indexOf()

匹配數(shù)組猫态，第一個參數(shù)為要查詢的值佣蓉，第二個參數(shù)表示開始查詢位置，沒有返回-1亲雪。

lastIndexOf()

從后面往上找勇凭，參數(shù)同上，起始位置從正向開始數(shù)

includes()

判斷數(shù)組是否包含某一元素义辕，返回布爾值虾标。
第一個參數(shù)，要查詢的元素
第二個參數(shù)灌砖，查詢的開始位置璧函。負數(shù)，表示從右數(shù)過來第幾個周崭，但是不改變判斷搜索的方向柳譬，搜索方向還是從左到右。

迭代方法

every()

數(shù)組元素全部滿足添加返回true续镇，否則返回false

let nums = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResults = nums.every((item, index,array) => {
  return (item > 0);
    });
  console.log(everyResults); //true

some()

只要有一項滿足條件就返回true，否則返回false销部。

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array)=>{
  return (item > 3);
});
console.log(someResult);

find()

array.find(function(currentValue, index, arr), thisValue)

//返回符合測試條件的數(shù)組元素值摸航，如果沒有符合條件的則返回undefined。
// 獲取數(shù)組中大于18第一個的元素
let arr2 = [15, 6.8, 49.5, 102];
function findResult(array, value) {
  return array.find(value => {
    return value > 18
  })
}
console.log(findResult(arr2, 18));

findIndex()

原理和 find() 相同舅桩，但返回的索引值

filter()

過濾酱虎。過濾的元素組成新數(shù)組，不改變原數(shù)組擂涛。

// 獲取數(shù)組中大于18第一個的元素
let arr2 = [15, 6.8, 49.5, 102];
function findResult(array, value) {
  return array.find(value => {
    return value > 18
  })
}
console.log(findResult(arr2, 18));

forEach()

遍歷數(shù)組中的每個元素读串，并為每個元素執(zhí)行指定操作，不改變元素組

let nums = [1, 2, 3, 4, 5, 4, 3, 2, 1];
nums.forEach((item, index, array) => {
  console.log(item)
})

map()

對數(shù)組中的每一項執(zhí)行一些操作撒妈，返回新數(shù)組恢暖，改變原數(shù)組。

let numbers = [1,2,3,4,5,4,3,2,1];
let mapResult = numbers.map(function(item, index, array) {
    return item + 1;
});
console.log(mapResult);//[2, 3, 4, 5, 6, 5, 4, 3, 2]

歸并方法

reduce()

prev：前一個值; cur: 當前值; index: 項的索引; array: 數(shù)組對象狰右。將數(shù)組中的數(shù)相加杰捂，返回和，不改變原數(shù)組棋蚌。

// reduce 統(tǒng)計同一元素出現(xiàn)的次數(shù)
    let arr6 = [1, 2, 3, 1, 2, 5, 4, 6, 7, 8, 9, 1, 3];
function countNum(array, item) {
  return arr6.reduce((total, cur) => {
    total += cur === item ? 1 : 0;
    return total;
  }, 0);
}
console.log(countNum(arr6, 1)); //3

reduceRtght()

方法的功能和 reduce() 功能是一樣的嫁佳，不同的是 reduceRight() 從數(shù)組的末尾向前將數(shù)組中的數(shù)組項做累加挨队。

區(qū)分數(shù)組和對象

let a = [];
let b = {};
function isArray (value) {
  //小寫的是返回的值的格式中默認的，大寫的是對象的名字Array
  return Object.prototype.toString.apply(value) == "[object Array]";
};
console.log(isArray(a));//true
console.log(isArray(b));//false

清空數(shù)組方法

arr.length = 0;

修改數(shù)組本身蒿往，如果通過一個不同的變量訪問他盛垦，會得到修改的數(shù)組。

arr = [];

創(chuàng)建一個新數(shù)組瓤漏，并為其賦予一個變量的引用情臭。任何其他引用不受影響，并指向原數(shù)組赌蔑。

arr.splice(0, arr.length);
while (arr.pop()) {}

數(shù)組去重

要求：將兩個數(shù)組合并俯在，并去除重復部分

let arr1 = [1, 2, 3, 4, 5, 6];
let arr2 = [1, 2, 3, 4, 8, 6];

Array.filter() + indexOf()

思路：將兩個數(shù)組拼接，使用ES6中的方法Array.filter()遍歷數(shù)組娃惯，并結(jié)合indexOf()排除重復項跷乐。

function distinct(item1, item2) {
  let arr = item1.concat(item2);
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index;
  });
}
console.log(distinct(arr1, arr2));

雙重for循環(huán)

思路：外層for循環(huán)遍歷元素，內(nèi)層循環(huán)檢查元素是否重復趾浅，如果元素重復可以使用push()也可以使用splice()

// 雙重for循環(huán)
function distinct(item1, item2) {
  let arr = item1.concat(item2);
  console.log(arr);
  for (let i = 0; i <= arr.length; i++) {
    for (let j = i + 1; j <= arr.length; j++) {
      if (arr[i] == arr[j]) {
        arr.splice(j, 1);
        // splice 會改變數(shù)組長度愕提，要將數(shù)組下標減一
        j--;
      }
    }
  }
  return arr;
}
console.log(distinct(arr1, arr2));

for...of + includes()

思路：雙重for循環(huán)的升級。外層for…代替for循環(huán)皿哨，把內(nèi)層循環(huán)替換為includes(). 先創(chuàng)建一個空數(shù)組浅侨，當includes()返回false時，就將該元素push到數(shù)組中证膨。類式如输，可以用indexOf替換includes。

function distinct(item1, item2) {
  let arr = item1.concat(item2);
  console.log(arr);
  let newArr = [];
  for (const i of arr) {
    !newArr.includes(i) ? newArr.push(i) : "";
  }
  return newArr;
}
console.log(distinct(arr1, arr2));

Array.sort()

思路：先將數(shù)組進行排序央勒，然后比較兩個相鄰元素是否相同不见，去除重復項。

function distinct(item1, item2) {
  let arr = item1.concat(item2);
  arr = arr.sort();
  for (let i = 0; i < arr.length; i++) {
      arr[i] === arr[i - 1] && arr.splice(i, 1);
  }
  return arr;
}
console.log(distinct(arr1, arr2));

new Set()

思路：利用Set 對象存儲的值總是唯一的特性崔步。

function distinct(item1, item2) {
  return Array.from(new Set([...item1, ...item2]));
}
console.log(distinct(arr1, arr2));

for…of + Object

思路：創(chuàng)建一個空對象稳吮，用for循環(huán)遍歷，利用對象的屬性不能重復的特點井濒，校驗元素是否重復灶似。

function distinct(item1, item2) {
  let arr = item1.concat(item2);
  let newArr = [];
  let obj = {};
  for (let i of arr) {
    if (!obj[i]) {
      newArr.push(i);
      obj[i] = 1;
    }
  }
  return newArr;
}
console.log(distinct(arr1, arr2));

性能：6> 5> 4> 3> 1> 2
參考網(wǎng)站http://www.reibang.com/p/6300a031dba5

數(shù)組扁平化

什么是數(shù)組扁平化?

數(shù)組扁平化是指：將多維數(shù)組轉(zhuǎn)換成一維數(shù)組，即將數(shù)組內(nèi)部嵌套著其他數(shù)組的數(shù)組提煉成沒有嵌套的一維數(shù)組瑞你。

如何實現(xiàn)數(shù)組扁平化拳喻？

Array.prototype.flat()

ES6提供的方法振愿，用于數(shù)組扁平化，會返回一個新數(shù)組，不會改變元素組恩尾。

let arr = [1, [2, 3],4];
console.log(arr.flat());//[1,2,3,4]

flat()默認扁平一層嵌套质况，可以帶一個整數(shù)參數(shù)便是扁平的層數(shù)；

let arr = [1, [[2,3],4]];
console.log(arr.flat(2));

無論嵌套多少層，可以通過傳遞Infinity作為參數(shù)轉(zhuǎn)為一維數(shù)組纺铭。

使用擴展運算符和concat()

可以使用擴展運算符展開數(shù)組，再用concat()可以合并數(shù)組刀疙，但操作做一次只能展開一層舶赔；

let array = [1, [[2, 3], 4]] 
function flatten(array) {
    return [].concat(...array)
}
console.log(flatten(array))
// 打印[1, [2, 3], 4]

要完全展開要對嵌套的數(shù)組進行遍歷才能展開

let arr = [1, [2, 3], 4];
console.log(arr.flat());

function flatten(array) {
  // 先用some()檢測數(shù)組中的元素是否是數(shù)組
  while (array.some(item => {
      return Object.prototype.toString.call(item) === "[object Array]"
    })) {
    array = [].concat(...array);
  }
  return array;
};
console.log(flatten(arr));