數(shù)組操作與應(yīng)用(very important）

這是我第11篇簡書。

一、操作

（一）Array.find/ Array.findIndex

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

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

（二）Array.filter

用于篩選數(shù)組中滿足條件的元素，返回一個(gè)篩選后的新數(shù)組

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

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

（三）slice()和splice()

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

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

注意：該方法不會(huì)改變?cè)瓟?shù)組，而是返回一個(gè)子數(shù)組，如果想刪除數(shù)組中的一段元素，應(yīng)該使用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()：該方法向或者從數(shù)組中添加或者刪除項(xiàng)目，返回被刪除的項(xiàng)目。（該方法會(huì)改變?cè)瓟?shù)組）
splice（index,howmany,item1,...itemX）

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

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

（四）Array.from()

Array.from() 可以將類數(shù)組對(duì)象和可遍歷對(duì)象（包括ES6新增的數(shù)據(jù)結(jié)構(gòu) Set 和 Map）轉(zhuǎn)化為真正的數(shù)組。

從 String 生成數(shù)組：

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

從類數(shù)組對(duì)象（arguments）生成數(shù)組:

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

fn(1, 2, 3);

// [ 1, 2, 3 ]

從 Set 生成數(shù)組：

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

從 Map 生成數(shù)組：

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 中使用箭頭函數(shù)：

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

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

數(shù)組去重合并:

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

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

（五）map()

用于遍歷數(shù)組，返回處理之后的新數(shù)組

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數(shù)組轉(zhuǎn)換為number數(shù)組 
 
let x1 = ['1','2'];
console.log(x1);
//["1", "2"]
 
x1 = x1.map(Number);
console.log(x1);
//[1,2]

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

（六）reduce方法

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

注意： reduce()對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。

語法：

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

}, initialValue);

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

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

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

（七）forEach()

用于遍歷數(shù)組，無返回值。

// 一般第數(shù)組處理
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()

用于判斷數(shù)組中的每一項(xiàng)元素是否都滿足條件，返回一個(gè)布爾值。

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

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

（九）some()

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

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）補(bǔ)充

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

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

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

二、數(shù)組的應(yīng)用

1、數(shù)組去重

普通方法：

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用來定義不重復(fù)數(shù)組的數(shù)據(jù)類型
  [...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、排序

內(nèi)置方法：

升序： [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()函數(shù)：

  • eval()函數(shù)會(huì)將傳入的字符串當(dāng)做 JavaScript 代碼進(jìn)行執(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 如果數(shù)組中無值返回undefined
[1, 2, 3].findIndex((item) => item === 3)) //2 如果數(shù)組中無值返回-1
[1,2,3].some(item => { return item===3 }) // true

7、扁平化n維數(shù)組

（1）利用遞歸和數(shù)組合并方法concat實(shí)現(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扁平數(shù)組的api,n表示數(shù)組嵌套的深度,如果數(shù)組嵌套兩層,n取值大于或等于1都可以,n值為Infinity時(shí)維度為無限大。

[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、對(duì)象和數(shù)組轉(zhuǎn)化

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

9、數(shù)組第每一項(xiàng)設(shè)置值

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

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

fill():

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

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

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