一、Array數組
百度搜索 mdn 數組
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
1、數組創建
// 創建數組
var fruits = ['Apple', 'Banana', '梨子', '橘子', '桃子', '1', '2'];
2、添加元素在數組末尾
fruits.push('Orange');
3、刪除數組末尾元素
// 刪除數組末尾元素
fruits.pop();
4、數組中是否包含某個元素 includes() 返回true或false
console.log(fruits.includes('2'));
5、數組中是否包含某個元素 array.indexOf() 返回下標或者-1
// array.indexOf() 數組中是否存在某個字符串
function method3() {
let iarray = ['劉備', '關羽', '張飛', '趙雲', '馬超'];
// 數組中存在這個字符串，返回對應索引值 4
let iiarray = iarray.indexOf('馬超');
console.log(iiarray);
// 數字組中不存在這個字符串，返回-1
let iiiarray = iarray.indexOf('zhh');
console.log(iiiarray);
}
method3();
6.1、Array.from() 類數組（HTMLCollection集合）轉成數組的第一種方法
// Array.from() 類數組轉成數組
function method1() {
// 和對象的寫法很像
// 類數組滿足條件：有下標，有length
let obj = {
0: '0',
1: '1',
2: '2',
3: '3',
length: 4
}
// Array.from 把類數組轉成數組
let iarray = Array.from(obj);
// ["0", "1", "2", "3"]
console.log(iarray);
}
method1();
6.2、展開運算符，類數組（HTMLCollection集合）轉成數組的第二種方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ol>
<li>zhh1</li>
<li>zhh2</li>
<li>zhh3</li>
<li>zhh4</li>
<li>zhh5</li>
</ol>
<script>
// lis是一個類數組
let lis = document.getElementsByTagName('li');
// 把類數組轉成數組,方法1
let liArray = Array.from(lis);
// 把類數組轉成數組，方法2
let liArrays = [...lis];
console.log(lis);
console.log(Array.isArray(lis));
console.log(Array.isArray(liArray));
console.log(Array.isArray(liArrays));
</script>
</body>
</html>
7、Array.isArray() 判斷是否是數組
// Array.isArray() 判斷是否是數組
function method2() {
// 和對象的寫法很像
// 類數組滿足條件：有下標，有length
let obj = {
0: '0',
1: '1',
2: '2',
3: '3',
length: 4
}
// 判斷是否是數組 false
console.log(Array.isArray(obj));
}
method2();
8、array.flat() 把多維數組轉成一維數組
// array.flat() 把多維數組轉成一維數組
function method4() {
let iarray = ['a', ['b', ['c', ['d', ['e', 'f', ['g', 'h']]]]]];
let iiarray = iarray.flat(Infinity);
// ["a", "b", "c", "d", "e", "f", "g", "h"]
console.log(iiarray);
}
method4();
9、forEach 遍歷數組
fruits.forEach(function (item, index, array) {
console.log(item, index, array);
});
10、find() 查找 符合條件的第一個元素
// find() 查找符合條件的第一個元素
// 返回數組中滿足提供的測試函數的第一個元素的值,返回一個元素，否則返回 undefined。
var found = fruits.find(function (element) {
return element == '1';
});
console.log(found);
// 1
11、filter() 過濾出新數組
//filter() 過濾出符合條件的元素，組成一個新數組，並返回
var fru = fruits.filter(function(element){
return element.length>2;
});
console.log(fru);
// ["Apple", "Banana"]
12、map() 修改成一個新數組
// map() 方法根據條件創建一個新數組,並返回
var mapfur = fruits.map(function(element){
return 'zhh'+element;
});
console.log(mapfur);
// ["zhhApple", "zhhBanana", "zhh梨子", "zhh橘子", "zhh桃子", "zhh1", "zhh2"]
13、擴展運算符數組的合併
// 數組的合併
var iii =[1,2,3];
var jjj =[4,5,6];
var lll =[...iii,...jjj];
console.log(lll);
二、Set集合
Set 存儲的元素不能重複
查找的時候在百度中搜索 mdn set
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set
1、創建對象
let set = new Set();
2、添加元素
set.add("wo").add("wo").add("zhh");
// 不能出現重複元素，所以裏面只有 {"wo", "zhh"}
console.log(set);
3、刪除元素
// 刪除元素
set.delete("wo");
// {"zhh"}
console.log(set);
4、包含某個元素,返回true或false
let ooo = set.has('zhh');
console.log(ooo);
5、添加數組
let set2 = new Set([1, 2, 3, 4, 5, 5]);
// {1, 2, 3, 4, 5}
console.log(set2);
6、集合長度
// 集合長度
let changdu = set2.size;
console.log(changdu);
7、循環遍歷
// 循環遍歷
for (let item of set2.values()) {
console.log(item);
}
8、轉成數組
// 轉成數組
var myArr = Array.from(set2);
console.log(myArr);
9、字符串轉成set
var text = 'Indiana';
var mySet = new Set(text);
// Set {"I", "n", "d", "i", "a"}
console.log(mySet);
10、擴展運算符把set合併成數組
let xSet = new Set();
xSet.add('1').add('2').add('3');
let ySet = new Set();
ySet.add('4').add('5').add('6');
let zSet = [...xSet, ...ySet];
console.log(zSet);
三、Map集合
Map 對象保存鍵值對
1、創建對象
let map = new Map();
2、添加數據
// 存數據
map.set(0, 'zhh0');
map.set(1, 'zhh1');
map.set(2, 'zhh2');
map.set(3, 'zhh3');
3、取數據
console.log(map.get(0));
console.log(map.get(1));
console.log(map.get(2));
4、刪除數據
map.delete(0);
console.log(map);
5、清空數據
map.clear();
console.log(map);
6、foreach遍歷
map.forEach(
function (value, key, map) {
console.log(key, value);
}
);
7、轉成數組,轉成了二維數組
let iarray = Array.from(map);
console.log(iarray);
8、使用擴展運算符把map對象轉成二維數組
let iarray2 = [...map];
console.log(iarray2);
9、擴展運算符，合併 Map 對象
// 使用擴展運算符,合併對象
// 合併兩個Map對象時，如果有重複的鍵值，則後面的會覆蓋前面的。
// 展開運算符本質上是將Map對象轉換成數組。
var first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
var second = new Map([
[3, 'uno'],
[4, 'dos']
]);
// 本質上是轉成數組，合併數組之後，在轉成map
var third = new Map([...first, ...second]);
console.log(third);