ES6/07/Array的扩展方法，...扩展运算符,Array.from()，（arr.find(),arr.findIndex()和arr.includes()）模板字符串,Set数据结构

最新推荐文章于 2022-09-07 08:36:07 发布

浅香沉木

最新推荐文章于 2022-09-07 08:36:07 发布

阅读量195

点赞数

文章标签： es6/es7

本文链接：https://blog.csdn.net/Java_53/article/details/106535110

版权

ES6扩展的内置对象

1,Array的扩展方法

…扩展运算符（展开语法）

1,扩展运算可以的将数组或者对象转为用逗号分隔的参数序列；

let ary =[1,2,3];
//…ary;//“1”,“2”,“3”
console.log(…ary);//1 2 3
console.log(1,2,3);//1 2 3

2，扩展运算符可以应用于合并数组

1，用[…array1,…array2]组成一个新数组
let ary1 =[1,2,3];
let ary2 =[4,5,6,7];
let ary3 =[…ary1,…ary2];
2，array对象的push(参数序列)方法追加数组元素
arr1.push(…arr2);//把arr2数组扩展为参数序列，然后追加到arr1上

3,剩余参数和解构配合使用

let students = {“wangwu”,“zhangsan”,“lisi”};
let [s1,…s2]=students;
console.log(s1);//“wangwu”
console.log(s2);//[“zhangsan”,“lisi”]

1,新增的构造函数方法：Array.from()

Array对象下的from()方法,此方法还可以接受第二个参数，作用类似于数组的map()方法，用来对每个元素进行处理的代码，将处理后的值放入返回的数组；
let arrayLike ={
“0”:1,
“1”:2,
“length”:3
}
let newArr =Array.from(aryLike,item =>item*2);

2,新增的数组的实例方法：1，arr.find()

2，arr.findIndex()方法

arr.includes()方法

1,模板字符串(用反引号``包裹的字符串)

模板字符串中可以解析变量；
let name =zhangsan;
let sayHello =hello,my name is ${name};//hello,my name is zhangsan
console.log(sayHello);

" Esc “键下面的” ` "键快速单击二次就可打出反引号;

2,新增的String实例方法：str.repeat(重复次数)

Set 数据结构

ES6提供了新的数据结构Set，它类似于数组，但是成员的值都是唯一的，没有重复的值；
Set 本身是一个构造函数，用来生成Set数据结构；
const s =new Set();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set型数据结构</title>
</head>

<body>
    <script>
        const s1 = new Set();//声明一个Set对象
        console.log(s1.size);//Set对象下有个size属性指的是Set对象中数据的个数

        const s2 = new Set(["a", "b"]);
        console.log(s2.size);

        const s3 = new Set(["a", "a", "b", "c", "c"]);
        console.log(s3.size);
        const arr = [...s3];//把s3转为arr数组
        console.log(arr);
        /* Set对象的实例方法
        1，add(value);添加某个值，返回Set结构本身
        2，delete(value);删除某个值，返回一个布尔值，表示删除是否成功
        3，has(value);返回一个布尔值，表示该值是否为Set的成员
        4，clear();清除所有成员，没有返回值
         */

    </script>
</body>

</html>