web前端练习17----es6新语法4，数组，Set集合，Map集合
Posted zhaihaohao1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端练习17----es6新语法4，数组，Set集合，Map集合相关的知识，希望对你有一定的参考价值。
一、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);
// 111、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);
以上是关于web前端练习17----es6新语法4，数组，Set集合，Map集合的主要内容，如果未能解决你的问题，请参考以下文章
web前端练习19----es6新语法6，异步任务 Promise
web前端练习20----es6新语法7，生成器对象 Generator