JavaScript筆記 目錄
基本的過濾查詢
資料：
1
|
const data = [0, 11, 22, 33, 44, 55, 66, 77, 88, 99];
|
filter()，將符合條件的元素存到新陣列，並回傳新陣列。
1
2
|
const result = data.filter((item)=> item > 50);
console.log(result); // [66, 77, 88, 99]
|
indexOf() 回傳第一個符合條件的元素索引，沒有找到回傳 -1。內部使用嚴格相等 === 比較。
1
2
|
const result = data.indexOf(55);
console.log(result); // 5
|
includes() 會判斷陣列使否包含特定的元素，有的話回傳 true，沒有則回傳 false。
1
2
|
const result = data.includes(99);
console.log(result); // true
|
some()，若至少有一個元素符合條件，回傳 true，沒有則回傳 false。
1
2
|
const result = data.some((item) => item === 55);
console.log(result); // true
|
find()，回傳第一個符合條件的元素，沒有則回傳 undefined。
1
2
|
const result = data.find((item) => item === 55);
console.log(result); // 55
|
findIndex()，回傳第一個符合條件的元素的索引，沒有則回傳 -1。
1
2
|
const result = data.findIndex((item) => item === 55);
console.log(result); // 5
|
進階資料過濾查詢
資料：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const data = [
{
id: 1,
user: 'Chupai',
isActive: false,
},
{
id: 2,
user: 'ET',
isActive: false,
},
{
id: 3,
user: 'Even',
isActive: true,
},
// ...
];
|
1. 單一條件
1
2
3
4
5
6
|
const key = 'user';
const target = 'ET';
const result = data.filter((item) => item[key] === target);
console.log(result);
// [ { id: 2, user: 'ET', isActive: false } ]
|
2. 複數條件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const condition = {
user: 'ET',
isActive: false,
};
const result = data.filter((item) => {
for (const key in condition) {
if (!item.hasOwnProperty(key) || item[key] !== condition[key]) {
return false;
}
}
return true;
});
console.log(result);
// [ { id: 2, user: 'ET', isActive: false } ]
|
3. 單一條件 + 多目標
1
2
3
4
5
6
7
8
9
|
const key = 'user';
const targets = ['ET', 'Chupai'];
const result = data.filter((item) => targets.includes(item[key]));
console.log(result);
// [
// { id: 1, user: 'Chupai', isActive: false },
// { id: 2, user: 'ET', isActive: false }
// ]
|
4. 複數條件 + 多目標
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
const condition = {
user: ['ET', 'Even'],
isActive: [true],
};
const result = data.filter((item) => {
for (const key in condition) {
if (!item.hasOwnProperty(key) || !condition[key].includes(item[key])) {
return false;
}
}
return true;
});
console.log(result);
// [ { id: 3, user: 'Even', isActive: true } ]
|
