ES6内置对象的新方法新特性

一、Map与Set

Map

Map对象保存键值对，任何值都可以作为一个键或一个值，而对比与object，它的键只能是字符串或symbols。

Map特点：有序、键值对（键可以是任意类型）、键名不能重复（如果重复，那么覆盖）

使用方法：

1、new Map(),得到一个Map对象

2、Map的set方法给Map对象设置键值对，如mymap.set("a"，"我是")

3、Map的get方法通过键值获得值，如：mymap.get("a")

4、Map的delete方法删除一个值，如：mymap.delete("key")；

5、Map的clear方法清空值；

6、Map.size获取Map对象的长度。

补充：Map对象还有entries 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组；

keys方法返回一个新的 Iterator 对象， 它按插入顺序包含了 Map 对象中每个元素的键；

 values 方法返回一个新的 Iterator 对象，它按插入顺序包含了 Map 对象中每个元素的值。

Map对象为可迭代对象，可以通过ES6的新语法去遍历它。

代码展示：

<script>
    var myMap = new Map();
    myMap.set(0, "zero");
    myMap.set(1, "one");
    for (var [key, value] of myMap) {
        console.log(key + " = " + value);
        //打印：0=zero  1=one
}
</script>

 Map对象的操作

Map 与 Array的转换

Map 构造函数可以将一个二维键值对数组转换成一个 Map 对象，使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组

Map的克隆

代码演示：

<script>
            var arr=[[1,10],[2,90],["hello",100]]
			var m1=new Map(arr)
            var m2=new Map(m1);
</script>

注意的是m1!==m2,因为他们是两个对象。

 Map的合并

<script>
           var first = new Map([[1, 'one'], [2, 'two'], [3, 'three']]);
            var second = new Map([[1, 'uno'], [2, 'dos']]);
        // 合并两个 Map 对象时，如果有重复的键值，则后面的会覆盖前面的，对应值即 uno，dos， three
            var merged = new Map([...first, ...second]);
</script>

 Set

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用,与Map不同的是它存储的不是键值对，同时它还是无序的。

唯一值：Set对象内的值不出现重复值，注意虽然两个NaN不相等，但是在Set内也不能重复出现。

 Set对象的操作

通过 Set对象的add方法为对象添加元素，如myset.add(1)

类型转换

数组与Set的转换

<script>
       //数组转Set
        var myset=new Set([1,"a",2,"b"])
       //Set转数组
        var myArray=[...myset]
</script>

字符串与Set的转换

<script>
       //字符串转Set
        var myset=new Set("hello")
        console.log(mySet);// Set(4) {"h", "e", "l", "o"}
        //因为转换为Set对象不会存在重复值，所以有一个l被删掉
        //注：Set 中 toString 方法是不能将 Set 转换成 String
</script>

 交集、并集、差集操作

<script>
     
        var a = new Set([1, 2, 3]);
        var b = new Set([4, 3, 2]);
         //并集
        var union = new Set([...a, ...b]); // {1, 2, 3, 4}
        //交集
        var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3}
        //差集
        var difference = new Set([...a].filter(x => !b.has(x))); // {1}
</script>

Set对象在实际开发中运用最多的就是为数组去重。 

二、字符串相关方法

字符串识别：

1、includes()返回布尔值，判断是否找到参数字符串。

2、startsWith()返回布尔值，判断参数字符串是否在原字符串的头部。

3、endWith()返回布尔值，判断参数字符串是否在原字符串的尾部。

注意：

这三个方法只返回布尔值，如果需要知道子串的位置，还是得用 indexOf 和 lastIndexOf 。

这三个方法如果传入了正则表达式而不是字符串，会抛出错误。而 indexOf 和 lastIndexOf 这两个方法，它们会将正则表达式转换为字符串并搜索它。

字符串重复：

1、repeat("参数")返回新的字符串，表示将字符串重复指定次数返回。

注意的是如果参数是小数则向下取整，如果是字符串则先转换为数字再进行，如果是参数是负数或infinity则报错，如果是NaN则等同于零次

字符串补全：

1、padStart：返回新的字符串，表示用参数字符串从头部补全原字符串。

2、padEnd：返回新的字符串，表示用参数字符串从尾部补全原字符串。

以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。

代码展示：

<script>
     console.log("ello".padStart(5,"h"));  // "hello"
    console.log("hell".padEnd(5,"o"));    // "hello"
    console.log("h".padStart(5));      // "    h"
     console.log("h".padEnd(5));      //"h    "
</script>

 如果指定的长度小于或等于原字符串的长度，则返回原字符串;

如果原字符串加上补全字符串长度大于指定长度，则截去超出位数的。

模板字符串：

模板字符串相当于加强版的字符串，用反引号 `,重点可以在字符串中添加变量和表达式。

其中会保留换行和空格

举例说明：

<script>
    //将变量放在${}里可以加到字符串中
    let info = `My Name is ${name},I am ${age+1} years old next year.`
    //还可以在字符串中调用函数
    function fn(){
        console.log("你调用了我")
    }
    var re=`my function${fn()}`
</script>

三、数值相关方法

新增了检查是否一个数是否有限的方法Number.isFinite()

注意：Number.isFinate 没有隐式的 Number() 类型转换，所有非数值都返回 false

改进isNaN,Number.isNaN()不存在隐式number()类型转换，非 NaN 返回 false;而isNaN()非 NaN 返回 true

四、Math对象的相关扩展：

Math.cbrt()：用于计算一个数的立方根。

Math.imul()：两个数以 32 位带符号整数形式相乘的结果，返回的也是一个 32 位的带符号整数。

Math.hypot()：用于计算所有参数的平方和的平方根。勾股定理

四、对象相关：

对象字面量：

ES6允许对象的属性直接写变量，这时候属性名是变量名，属性值是变量值。

在对象中，方法名也能简写：

<script>
    const age = 12;
    var obj={
        age,
        fun(){
        //....
        }
    }
</script>

ES6还允许用表达式作为属性名，但是一定要将表达式放在方括号内。

例如：

<script>
    var obj={
        ["f"+"un"](){
        //....
        }
    }
</script>

注意：属性的简洁表示法和属性名表达式不能同时使用，否则会报错。

新增一个拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。经常用于合并两个对象。

演示：

<script>
    let person = {name: "Amy", age: 15};
    let someone = {name: "Mike", age: 17, ...person};
    console.log(someone);  //{name: "Amy", age: 15}
</script>

 自定义的属性和拓展运算符对象里面属性的相同的时候，就用后面的值覆盖前面的值。

举例说明：

<script>
    let person = {name: "Amy", age: 15};
    let someone = { ...person, name: "Mike", age: 17};
    console.log(someone);  //{name: "Mike", age: 17}
    
    let person = {name: "Amy", age: 15};
    let someone = {name: "Mike", age: 17, ...person};
    console.log(someone);  //{name: "Amy", age: 15}
</script>

对象的新方法：

Object.is(value1, value2)：用来比较两个值是否严格相等，与（===）基本类似。

但是它与===存在区别，object.is(+0,-0)返回false,object.is(NaN,NaN)返回true

五、数组相关

提供了新的数组创建方式：

1、Array.of()：将参数中所有值作为元素形成数组。如：Array.of(1，2，3，4)，当括号内的参数为空时，创建空数组。

2、Array.from(arrayLike，[ mapFn，[thisArg]] )：将类数组对象或可迭代对象转化为数组。前面将Map可迭代对象转换为数组就是用的这个方法，值得注意的是当参数位含空位时，数组中对应位置返回undefined.

参数说明：arrayLike想要转换的类数组对象或可迭代对象；

mapFn：可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。

thisArg：可选，用于指定 map 函数执行时的 this 对象

 

<script>
let s=new Set([1,2,3,4,4,4])
var re=Array.from(s,function(e){
        console.log(e,this)
        //2 []
        //4 []
        //6 []
        //8 []
        return e*2 //对数组中每个元素的处理
    },[])//指定this指向这个[]
    
</script>

类数组对象：一个类数组对象必须含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符。

例子

<script>
    //类数组
let obj = {
      0: '1',
      1: '2',
      2: 3,
      length: 3
}
</script>

 新增的方法：

1、find()：查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

<script>
    let arr = Array.of(1, 2, 3, 4);
    console.log(arr.find(item => item > 2)); // 3
</script>

2、 findIndex()：查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引，与find方法相似。

3、fill()：将一定范围索引的数组元素内容填充为单个指定的值。

<script>
    let arr = Array.of(1, 2, 3, 4);
    // 参数1：用来填充的值
    // 参数2：被填充的起始索引
    // 参数3(可选)：被填充的结束索引，默认为数组末尾
    console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
</script>

4、 entrys()：遍历键值对

5、keys()：遍历键名

6、values()：遍历键值

7、includes()：数组是否包含指定值。注意：与 Set 和 Map 的 has 方法区分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。

8、flat()：嵌套数组转一维数组

<script>
   console.log([1 ,[2, 3]].flat()); // [1, 2, 3]
</script>