数组操作 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +ES6+数组操作 へ行く。
• +ES6+数组操作 の差分を削除

#author("2022-09-04T12:29:35+08:00","default:Admin","Admin")
#author("2023-08-10T16:48:37+08:00","default:Admin","Admin")
[[ES6]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* find() [#k2b9bfd9]

#codeprettify{{
// An highlighted block
this.result = this.imgItems.find(item => item.required && !this.form[item.key])

let obj = this.companyOptions.find(item => item.value === 1)
}}

&color(red){注意};： 如果不符合条件要求。result会是  undefined
* findIndex() [#f5812bbe]

findIndex()用法与find()非常类似，返回第一个符合条件的数组成员位置，如果所有成员都不符合条件，则返回-1。

#codeprettify{{
[1, 2, 5, -1, 9].findIndex((n) => n < 0)
//返回符合条件的值的位置（索引）
// 3
}}

#codeprettify{{
const fruits = [
   {name: 'apples', quantity: 2},
   {name: 'bananas', quantity: 0},
   {name: 'cherries', quantity: 5}
];
const index = fruits.findIndex(fruit => fruit.name === 'cherries');
console.log(index); // 3
console.log(fruits[index]);
}}

* filter() [#ldd1a445]

filter()使用指定的函数测试所有元素，并创建一个包含所有通过测试元素的新数组。

filter() 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值元素创建一个新数组。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。filter() 不会改变原数组。

#codeprettify{{
var arr = [10, 20, 30, 40, 50]
var newArr = arr.filter(item => item > 30);
console.log(newArr); //[40, 50]
}}
* forEach() [#r36e34ef]

遍历数组全部元素，利用回调函数对数组进行操作，自动遍历整个数组，&color(red){且无法break中途跳出循环，不可控，不支持return操作，return只用于控制循环是否跳出当前循环。};

#codeprettify{{
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.forEach((a) => {
  if (a % 2 == 0) {
    return;
  }
  console.log("a:", a);
});
}}

用try catch可以跳出foreach遍历

#codeprettify{{
try {
  let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  arr.forEach((a) => {
    if (a % 2 == 0) {
      throw "跳出foreach";
      return;
    }
    console.log("a:", a);
  });
} catch (error) {
  console.log("error:", error);
}
}}
* some() [#h9dc3a0a]

判断数组中是否至少有一个元素满足条件:
- 只要有一个满足就返回true;
- 只有都不满足时才返回false;

#codeprettify{{
// 判断数组arr1是否全是偶数
// 判断数组arr2是否至少有一个偶数
var arr1=[1, 2, 3, 4, 5];
var arr2=[1, 4, 6, 8, 10];

console.log(
  arr2.some(function(value, index, array){
      return value % 2 == 0;
  })
);    // true
}}
* every() [#x284b578]

判断数组中是否每个元素都满足条件:
- 只有都满足条件才返回true；
- 只要有一个不满足就返回false；

#codeprettify{{
// 判断数组arr1是否全是偶数
// 判断数组arr2是否至少有一个偶数
var arr1=[1, 2, 3, 4, 5];
var arr2=[1, 4, 6, 8, 10];
console.log(
  arr1.every(function(value, index, array){
      return value % 2 == 0;
  })
);    // false
}}
* map() [#m17a356c]

键值对的集合,但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

#codeprettify{{
var myMap = new Map();
myMap.set(keyString, "和键'a string'关联的值");
for (var i = 0; i < this.tableData.length; i++) {
   let n = this.tableData4[i].Id + '-' + this.tableData4[i].name
   this.myMap.set(n, this.tableData[i].bdwant)
}
myMap.set(keyString, {name："和键'a string'关联的值"});
}}

list的对象求和
#codeprettify{{
let totalSumAll = 0;
listObject.map((item) => {totalSumAll += item.count})
}}
** get（查找） [#u8af2fcc]

 this.myMap .get(row.recive)

** has(返回是否存在) [#tbdd0eeb]

 //返回值:布尔值,若存在于Map中,则返回true
 myMap.has(arr) //true

** delete(删除) [#u0f3bfd4]

 myMap.delete(key);


** clear(清除所有) [#lc8f728b]

 map.clear()

**　map的合并、转换 [#uca1aaab]
** map的合并、转换 [#uca1aaab]

#codeprettify{{
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
var merged = new Map([...first, ...second]);
//map转数组
 var map = new Map()
    .set('aa',11)
    .set('bb',22)
    .set('cc',33)
    
    [...map] // [ ['aa',11],['bb',22],['cc',33] ]
    [...map.keys()] //  ["aa", "bb", "cc"]
    [...map.values()] // [11, 22, 33]
    [...map.entries()] //  [ ['aa',11],['bb',22],['cc',33] ]
}}
* reduce() [#x8c36320]

reduce()接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值.

 array.reduce(callback, initialValue)

callback:执行数组中每个值的函数(也可以叫做reducer),包含4个参数.
- previousValue: 上一次调用回调返回的值,或者是提供的初始值(initialValue);
- currentValue: 数组中当前被处理的元素;
- index: 当前元素在数组中的索引;
- array: 调用reduce的数组;


#codeprettify{{
// 获取购物车中商品列表的价格总和
let goodList = [{id: 1, price: 10, qty: 5}, {id: 2, price: 15, qty: 2}, {id: 3, price: 20, qty: 1}]
 
let totalPrice = goodList.reduce((prev, cur) => {
	return prev + cur.price * cur.qty
}, 0)
 
console.log(totalPrice) // 100

var arrString = 'abcdaabc'
// 获取字符中中每个字母出现的次数
let count = arrString.split('').reduce(function(res, cur) {
	res[cur] ? res[cur]++ : res[cur] = 1
	return res
}, {})
 
console.log(count) // {a: 3, b: 2, c: 2, d: 1}
}}

* 判断数据是否存在 [#s496dbfc]

#codeprettify{{
let numbers = [12, 5, 8, 130, 44];
let result = numbers.includes(8);
# 结果： true
result = numbers.includes(118);
# 结果： false
}}

* 删除指定的元素 [#bbcbd558]

splice(index,num);

 index代表的是数组元素的下标位置；
 num代表的是删除的个数

findIndex(); 是找到某元素的下标的位置

#codeprettify{{
arr.splice(arr.findIndex(item => item.id === id), 1)
}}

#hr();
コメント：
#comment_kcaptcha