web前端练习17----es6新语法4，数组，Set集合，Map集合

最新推荐文章于 2022-12-09 15:02:44 发布

zhaihaohao1

最新推荐文章于 2022-12-09 15:02:44 发布

阅读量465

点赞数

分类专栏： web前端2018

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/102057290

版权

web前端2018 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

一、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);

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端练习17----es6新语法4，数组，Set集合，Map集合

一、Array数组百度搜索mdn数组https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array1、数组创建 // 创建数组 var fruits = ['Apple', 'Banana', '梨子', '橘子', '桃子', '1',...
复制链接

扫一扫