數組操作與應用(very important）

這是我第11篇簡書。

一、操作

（一）Array.find/ Array.findIndex

  • find() 方法返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined
  • findIndex()方法返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。
 1.val是特定值
  let obj = {}
  obj = this.province.find(item => {
    return item.value === val
  })

 2.傳入一個回調函數，找到數組中符合當前搜索規(guī)則的第一個元素，返回它，并且終止搜索。
  const arr = [1, "2", 3, 3, "2"]
  console.log(arr.find(n => typeof n === "number")) // 1

（二）Array.filter

用于篩選數組中滿足條件的元素，返回一個篩選后的新數組

  過濾兩個數組中相同的項
 var a = [1, 2, 3, 4]
 var b = [2, 3, 5]
// 篩選a中不包含b的元素的元素，返回新數組
a.filter(item => b.indexOf(item) === -1)  // [1, 

[1, 2, 3].filter(item => {return item > 2}) //[3]

（三）slice()和splice()

1、slice(start,end)：方法可從已有數組中返回選定的元素，返回一個新數組，包含從start到end（不包含該元素）的數組元素（返回的新數組包含start，不包含end）。

  • start參數：必須，規(guī)定從何處開始選取，如果為負數，規(guī)定從數組尾部算起的位置，-1是指最后一個元素。
  • end參數：可選（如果該參數沒有指定，那么切分的數組包含從start倒數組結束的所有元素，如果這個參數為負數，那么規(guī)定是從數組尾部開始算起的元素）。

注意：該方法不會改變原數組，而是返回一個子數組，如果想刪除數組中的一段元素，應該使用Array.splice()方法。

var arr = [1,2,3,4,5];
arr.slice(0,3); // [1,2,3]
arr.slice(1,3); // [2,3]
arr.slice(2); // [3,4,5]

2、splice()：該方法向或者從數組中添加或者刪除項目，返回被刪除的項目。（該方法會改變原數組）
splice（index,howmany,item1,...itemX）

  • index參數：必須，整數，規(guī)定添加或者刪除的位置，使用負數，從數組尾部規(guī)定位置。
  • howmany參數：必須，要刪除的數量，如果為0，則不刪除項目。
  • tem1,...itemX參數：可選，向數組添加的新項目。
var arr = [1,2,3,4,5];
console.log(arr.splice(2,1,"hello")); // [3]  返回的新數組
console.log(arr); // [1, 2, "hello", 4, 5]  改變了原數組

console.log(arr.splice(1,2)); // [2,3] 
console.log(arr); // [1, 4, 5]

（四）Array.from()

Array.from() 可以將類數組對象和可遍歷對象（包括ES6新增的數據結構 Set 和 Map）轉化為真正的數組。

從 String 生成數組：

Array.from('foo'); 
// [ "f", "o", "o" ]

從類數組對象（arguments）生成數組:

function fn() {
  return Array.from(arguments);
}

fn(1, 2, 3);

// [ 1, 2, 3 ]

從 Set 生成數組：

set用來定義不重復數組的數據類型（es6）
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

從 Map 生成數組：

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

在 Array.from 中使用箭頭函數：

Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

數組去重合并:

function combine(){ 
    let arr = [].concat.apply([], arguments);  //沒有去重復的新數組 
    return Array.from(new Set(arr));
} 

var m = [1, 2, 2], n = [2,3,3]; 
console.log(combine(m,n));    // [1, 2, 3]

（五）map()

用于遍歷數組，返回處理之后的新數組

arr = data.map(item => ({
      id: item.id,
      name: item.departmentName,
      departmentId: item.departmentId,
      corpid: item.corpid,
      isLeaf: !item.isleaf
  }))

arr.map(item => item * 2)

1.將string數組轉換為number數組 
 
let x1 = ['1','2'];
console.log(x1);
//["1", "2"]
 
x1 = x1.map(Number);
console.log(x1);
//[1,2]

2.將number數組轉換為string數組 
 
let x2 = [1,2];
console.log(x2);
//[1, 2]
 
x2 = x2.map(String);
console.log(x2);
//['1','2']

（六）reduce方法

reduce()方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce()可以作為一個高階函數，用于函數的 compose。

注意： reduce()對于空數組是不會執(zhí)行回調函數的。

語法：

arr.reduce(function(prev,cur,index,arr){

}, initialValue);

arr 表示原數組；
prev 表示上一次調用回調時的返回值，或者初始值 initialValue;
cur 表示當前正在處理的數組元素；
index 表示當前正在處理的數組元素的索引，若提供 initialValue 值，則索引為0，否則索引為1；
initialValue 可選。傳遞給函數的初始值?？蛇x0，也可選[]

// 求和
const arr = [1, 2, 3, 4, 5] 
const sum = arr.reduce((pre, item) => { 
    return pre + item 
  }, 0)  // 從數組第1項開始
console.log(sum) // 15

注：reduceRight()
該方法用法與reduce()其實是相同的，只是遍歷的順序相反，它是從數組的最后一項開始，向前遍歷到第一項。

（七）forEach()

用于遍歷數組，無返回值。

// 一般第數組處理
dataList.forEach(item => {
   arr.push(item)
})

// 加入篩選條件
datagroup.forEach(item => {
 if (item.modelType === 2) {
   personIds.push(item.id)
 }
 if (item.modelType === 1) {
   departmentIds.push(item.departmentId)
 }
})

//
data.forEach(item => {
 let obj = {
     ...item,
     name: item.departmentName,
     id: item.departmentId
   }
   arr.push(obj)
   this.dataObj[item.departmentId] = obj
})

（八）every()

用于判斷數組中的每一項元素是否都滿足條件，返回一個布爾值。

var isEvery = arr.every(function(item,index,array){
    return item > 0;
});
console.log(isEvery);

 // 是否更新全選
updateCheckAll(list) {
  this.isCheckAll = list.every(item => item.checkeds)
}

（九）some()

用于判斷數組中的是否存在滿足條件的元素，返回一個布爾值。

let parendId = this.data.parentId
let isExist = this.parentDepartments.some(({ departmentId }) => {
    return parseInt(departmentId) === parseInt(parendId)
})

item.isFullSelected = this.parentDepartments.some(
    pd => pd.departmentId === item.departmentId
)

（10）補充

以上forEach()、map()、every()、some()和filter()等除了傳遞一個匿名函數作為參數之外，還可以傳第二個參數，該參數用于指定匿名函數內的this指向。

// 傳兩個參數
arr.forEach(function(item,index,array){
    console.log(this);  // 指向arr
},arr);

// 只傳一個匿名函數的話，則this指向window
arr.forEach(function(item,index,array){
    console.log(this);  // window
});

二、數組的應用

1、數組去重

普通方法：

Array.prototype.distinct = function() {
  var arr = this,
    result = [],
    i,
    j,
    len = arr.length;
  for (i = 0; i < len; i++) {
    for (j = i+1; j < len; j++) {
      if (arr[i] === arr[j]) {
        j = ++i;
      }
    } 
    result.push(arr[i]);
  }
  return result;
}

[1, 2, 3, 3, 4, 4].distinct();  // [1, 2, 3, 4]

reduce方法：

var new Arr = [1, 2, 3, 3, 4, 4].reduce(function (prev, cur) {
  prev.indexOf(cur) === -1 && prev.push(cur);
}). [])

建議(騷)方法：

set用來定義不重復數組的數據類型
  [...new Set([1, 2, 3, 3, 4, 4])]   // [1, 2, 3, 4]

Array.from(new Set([1, 2, 3, 3, 4, 4]))  // [1, 2, 3, 4]

2、排序

內置方法：

升序： [2, 1, 3, 4].sort((a, b) => a - b);  // [1, 2, 3, 4]
降序： [1, 2, 3, 4].sort((a, b) => b - a);  // [4, 3, 2, 1]

冒泡排序：

升序：
Array.prototype.bubleSort = function() {
  let arr = this,
    len = arr.length;
  for (let outer = len; outer >= 2 ; outer--) {
    for (let inner = 0; inner <= outer - 1; inner++) {
      if (arr[inner] > arr[inner+1]) {
        [arr[inner], arr[inner + 1]] = [arr[inner + 1], arr[inner]]
      }
    }
  }
  return arr;
}
[3, 4, 2, 1].bubleSort();  // [1, 2, 3, 4]

選擇排序：

Array.prototype.selectSort = function() {
  let arr = this,
    len = arr.length,
    i,
    j;
  for (i = 0; i < len; i++) {
    for (j = i; j < len; j++) {
      if (arr[i]) > arr[j]) {
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
    }
  }
  return arr;
}
[3, 4, 2, 1].selectSort();  // [1, 2, 3, 4]

3、最大值

Math.max(...[1, 2, 3, 4]) // 4

Math.max.apply(this, [1, 2, 3, 4]) // 4

[1, 2, 3, 4].reduce( (prev, cur, curIndex, arr) => {
  return Math.max(prev, cur);
}, 0)

4、求和

利用eval()函數：

  • eval()函數會將傳入的字符串當做 JavaScript 代碼進行執(zhí)行。
    eval("2+3") // 5 
eval([1,2,3,4].join('+'))  // 10

利用reduce()方法：

[1,2,3,4].arr.reduce((prev, cur) => prev + cur) //10

5、合并

[1,2,3,4].concat([5,6]) //[1,2,3,4,5,6]

[...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6]

[1,2,3,4].push.apply([1,2,3,4],[5,6]) //[1,2,3,4,5,6]

6、判斷是否包含某值

[1,2,3].includes(4) //false
[1,2,3].indexOf(4) //-1 如果存在換回索引
[1, 2, 3].find((item) => item===3 )) //3 如果數組中無值返回undefined
[1, 2, 3].findIndex((item) => item === 3)) //2 如果數組中無值返回-1
[1,2,3].some(item => { return item===3 }) // true

7、扁平化n維數組

（1）利用遞歸和數組合并方法concat實現(xiàn)扁平:

function flatten(arr) {
    while(arr.some(item=>Array.isArray(item))) {
        arr = [].concat(...arr);
    }
    return arr;
}
flatten([1,[2,3]]) //[1,2,3]
flatten([1,[2,3,[4,5]]) //[1,2,3,4,5]

（2）利用ES10新api——Array.flat(n)：
Array.flat(n)是ES10扁平數組的api,n表示數組嵌套的深度,如果數組嵌套兩層,n取值大于或等于1都可以,n值為Infinity時維度為無限大。

[1,[2,3]].flat(1) //[1,2,3]
[1,[2,3,[4,5]].flat(1) //[1,2,3,4,5]
[1[2,3,[4,5[...]].flat(Infinity) //[1,2,3,4...n]

8、對象和數組轉化

Object.keys({name:'張三',age:14})  //['name','age']
Object.values({name:'張三',age:14})  //['張三',14]
Object.entries({name:'張三',age:14})  //[[name,'張三'],[age,14]]

9、數組第每一項設置值

[1,2,3].map(() => 0)  // [0, 0, 0]

[1,2,3].map(() => '')   // ["", "", ""]

fill():

[1,2,3].fill(false)  // [false,false,false]
注：fill填充對象會報錯
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
禁止轉載，如需轉載請通過簡信或評論聯(lián)系作者。

相關閱讀更多精彩內容

友情鏈接更多精彩內容