JS es6中对数组扩展对象新增（数据结构） Set Map

倾城857

码龄5年

关注

原创最新推荐文章于 2026-01-30 08:00:00 发布 1.7k 阅读

Notepad++ 下载安装使用指南【一文通关，超详细~】 Notepad++ 文本编辑器的下载、安装及使用教程，附常用快捷键和相关实操案例阅读详情

一：数组新增

数组可以存储多个数据，在JavaScript中已经学习了数组定义和一些方法包含添加、删除、获取等。es6中对数组一些方法进行了扩展。

新增方法

Array.of

语法：Array.of( ...args )

作用：Array.of

代码案例：

    <script>
        let arr = [];
        // let arr2 = new Array(1, 2, 7);
        let arr2 = new Array(7); //有歧义
        let arr3 = Array.of(7);
        // let arr3 = Array.of(7, 9, 11);
        console.log(arr2, arr3);
    </script>

Array.from

语法：Array.from( arrayLike )

作用：把伪数组或可遍历的对象转换成真正的数组，相对于ES5的写法，更加简洁方便

代码案例：

  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        let divs = document.getElementsByTagName('div');
        let arr5 = Array.from(divs); //将伪数组转换成真正的数组
        console.log(divs, arr5);

        let obj = {
            0: '11',
            1: "b",
            'ok': "lisi",
            2: 100,
            length: 3
        };

        let arr6 = Array.from(obj); //将可遍历的对象转换成真正的数组
        console.log(arr6);
    </script>
</body>

二：对象新增

对象（object）是 JavaScript 最重要的数据类型。ES6 对它进行了重大升级，包括（数据结构本身的改变和Object对象的新增方法）

对象的简写形式：

1)、对象属性名简写：当对象的属性名与属性值同名时可以简写

2)、对象的方法简写：直接省略冒号及function关键词

代码案例：

<script>
        let usr = "张三";
        let age = 20;
        // let obj = {
        //     "usr": usr,
        //     "age": age
        // };
        let obj = {
            usr,
            age,
            // fn: function() {
            fn() {
                console.log('fn()方法');
            }
        };
        console.log(obj);
        obj.fn();
    </script>

对象属性名表达式

对象属性名表达式的语法：对象[表达式]或 {[表达式]:属性值}

代码案例：

 <script>
        let t = 3;
        let obj = {
            "x": 11,
            ["x" + t]: 99,
            "y": 100,
            "z": "OK"
        };

        obj["z" + t] = 'yes';
        console.log(obj);

        //需求：遍历对象
        for (let k in obj) {
            console.log(k, obj.k, obj[k]);
        }
    </script>

新增方法：

Object.keys

语法：Object.keys( object )

描述：返回一个数组，成员是参数对象自身的属性的键名

Object.values

语法：Object.values( object )

描述：返回一个数组，成员是参数对象自身的属性的键值

代码案例：

<script>
        // Obj.keys() ;  //获取对象中所有的键名
        let obj = {
            x: 1,
            y: 22,
            z: 100
        };

        let kArr = Object.keys(obj);
        let vArr = Object.values(obj);
        console.log(kArr, vArr);
    </script>

Object.assign

语法： Object.assign( target,source1,source2,... )

描述：对象的合并( 拷贝 )，将源对象（source），复制到目标对象 ( target )

代码案例：

<script>

        let obj2 = {
            "usr": "李四",
            "age": 20
        };
        let obj3 = {
            "a": 11,
            "b": 99,
            "c": 'Hello',
            "d": ["yes", "OK", 'zhangsan']
        };

        let obj4 = {};
        Object.assign(obj4, obj2, obj3); //浅拷贝
        obj4.d[1] = '小李';
        console.log(obj4, obj3);
    </script>

SON.parse

语法：JSON.parse( jsonstr)

描述：把json字符串转换成真正的js对象

JSON.stringify

语法：JSON.stringify( object )

描述：把真正的js对象转换成json字符串

代码案例：

  <script>
        let str = '{"email":"lisi@qq.com","uid":11}';
        let strObj = JSON.parse(str); //ajax知识点
        let str2 = JSON.stringify(strObj);
        console.log(strObj, strObj.uid, str2, typeof str2);
    </script>

三：Set

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值

基本用法

代码案例：


 <script>
        //Set是es6新增的数据结构，Set类似于数组，但与数组不同的是Set中的值是唯一的、没有重复

        let curset = new Set([11, 2, 3, 9, 11, 2, 99]);
        curset.add('hello');
        curset.delete(99);
        console.log(curset.has(99), curset.has(9), curset.size);
        // curset.clear();
        let arr = Array.from(curset);
        console.log(curset, curset[4], arr[4]);
    </script>

常见方法

size 获取set集合的长度
add(值) 给集合添加值，返回新set
delete(值) 删除某个值，返回布尔值，表示是否删除成功
has(值) 查询这个值是否时集合的成员，返回布尔值
clear() 清空集合,没有返回值
代码案例：

<script>

        //Set应用：数组去重
        function uniqueArr(arr) {
            return Array.from(new Set(arr));
        }

        let arr8 = [11, 1, 2, 3, 2, 5, 7, 3];
        console.log(uniqueArr(arr8));
    </script>

四：Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

常见方法
size 获取Map的长度

set(key,val) 添加一条数据

get(key) 根据key获取val
has(key) 是否存在key
delete(key) 删除某条数据
clear() 清空所有数据
代码案例：

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        //Map:是es6新增的数据结构，Map类似于对象，但与对象不同的是对象的键名通常是字符串，而Map中的键名可以是任意类型。

        let obj = {
            "x": 11,
            "uid": 321,
            "uname": "李四"
        };

        let divs = document.getElementsByTagName('div');
        let curMap = new Map();

        let k1 = false;
        curMap.set(k1, 'OK');
        curMap.set(divs, 'lisi@qq.com');
        console.log(curMap.has(k1));
        console.log(curMap, curMap.get(divs));
    </script>
</body>