数组操作
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[ES6]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* find() [#k2b9bfd9]
#codeprettify{{
// An highlighted block
this.result = this.imgItems.find(item => item.required &&...
let obj = this.companyOptions.find(item => item.value ===...
}}
&color(red){注意};： 如果不符合条件要求。result会是 unde...
* findIndex() [#f5812bbe]
findIndex()用法与find()非常类似，返回第一个符合条件的数组...
#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 === 'c...
console.log(index); // 3
console.log(fruits[index]);
}}
* filter() [#ldd1a445]
filter()使用指定的函数测试所有元素，并创建一个包含所有通...
filter() 为数组中的每个元素调用一次 callback 函数，并利用...
#codeprettify{{
var arr = [10, 20, 30, 40, 50]
var newArr = arr.filter(item => item > 30);
console.log(newArr); //[40, 50]
}}
* forEach() [#r36e34ef]
遍历数组全部元素，利用回调函数对数组进行操作，自动遍历整...
#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[...
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]
#codeprettify{{
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖...
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: 上一次调用回调返回的值,或者是提供的初始...
- currentValue: 数组中当前被处理的元素;
- index: 当前元素在数组中的索引;
- array: 调用reduce的数组;
#codeprettify{{
// 获取购物车中商品列表的价格总和
let goodList = [{id: 1, price: 10, qty: 5}, {id: 2, price...
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
終了行:
[[ES6]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* find() [#k2b9bfd9]
#codeprettify{{
// An highlighted block
this.result = this.imgItems.find(item => item.required &&...
let obj = this.companyOptions.find(item => item.value ===...
}}
&color(red){注意};： 如果不符合条件要求。result会是 unde...
* findIndex() [#f5812bbe]
findIndex()用法与find()非常类似，返回第一个符合条件的数组...
#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 === 'c...
console.log(index); // 3
console.log(fruits[index]);
}}
* filter() [#ldd1a445]
filter()使用指定的函数测试所有元素，并创建一个包含所有通...
filter() 为数组中的每个元素调用一次 callback 函数，并利用...
#codeprettify{{
var arr = [10, 20, 30, 40, 50]
var newArr = arr.filter(item => item > 30);
console.log(newArr); //[40, 50]
}}
* forEach() [#r36e34ef]
遍历数组全部元素，利用回调函数对数组进行操作，自动遍历整...
#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[...
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]
#codeprettify{{
// 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖...
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: 上一次调用回调返回的值,或者是提供的初始...
- currentValue: 数组中当前被处理的元素;
- index: 当前元素在数组中的索引;
- array: 调用reduce的数组;
#codeprettify{{
// 获取购物车中商品列表的价格总和
let goodList = [{id: 1, price: 10, qty: 5}, {id: 2, price...
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
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
