JavaScript学习笔记（十八）——ES6新增的方法

ES6新增的字符串方法

• startWith()
  • 用于判定原字符串是否是以某字符串开始
  • 有两个参数
    • 参数1表示原字符串是否以该字符串开始
    • 参数2表示在原字符串的哪一个索引值开始判断，索引值从0开始
  • 返回值是一个布尔值。true表示原字符串以参数1指定的字符串开始，false表示原字符串不以参数1指定的字符串开始

        var str = "abcdefg";
        var isStart = str.startsWith("a");
        console.log(isStart); // true
        var isStart1 = str.startsWith("d");
        console.log(isStart1); // false
        var isStart2 = str.startsWith("cd", 2);
        console.log(isStart2); // true

• endsWith()
  • 用于判定原字符串是否是以某字符串结尾
  • 有两个参数
    • 参数1表示原字符串是否以该字符串结尾
    • 参数2表示在原字符串的哪一个位置开始判断，这里的指针是从1开始
  • 返回值是一个布尔值。true表示原字符串以参数1指定的字符串结尾，false表示原字符串不以参数1指定的字符串结尾

        var str1 = "abcdefg";
        // 需求：判定是否以“efg”结束的
        var isEnd = str1.endsWith("efg");
        console.log(isEnd); // true
        var isEnd1 = str1.endsWith("bc");
        console.log(isEnd1); // false
        var isEnd2 = str1.endsWith("e", 5);
        console.log(isEnd2); // true

• includes()
  • 用于判定原字符串是否包含某个字符串
    • 有两个参数
      • 参数1表示原字符串中是否包含该字符串
      • 参数2表示在原字符串的哪一个索引值开始判断，索引值从0开始
    • 返回值是一个布尔值。true表示原字符串包含参数1指定的字符串，false表示原字符串中不包含参数1指定的字符串

        var str = "abcadefgh";
        var result1 = str.includes("a"); 
        console.log(result1); // true
        var result2 = str.includes("a", 2); 
        console.log(result2); // true
        var result3 = str.includes("a", 4); 
        console.log(result3); // false

可以利用includes和replace来替换字符串中的字符

        var str2 = "abcdefgAAbGefAg";
        var arr = ["A", "G"];
        for (var i = 0; i < arr.length; i++){
            while(str2.includes(arr[i])){
                str2 = str2.replace(arr[i], "*");
            }
        } 
        console.log(str2);

• repeat()
  • 用于设置重复的字符或字符串
    • 有一个参数
      • 参数表示重复几次
    • 返回值返回的是一个字符串

        var str = "hello";
        var str1 = str.repeat(5);
        console.log(str1);

---

ES6中新增的数组方法

在ES6中新增了3个普通方法和2个静态方法

静态方法：

• Array.from()
  • 用于将类数组转成数组，不改变原来的类数组
  • 有一个参数
    • 参数是需要转化的类数组
  • 返回值是一个数组

        function f1(){
            console.log(arguments); // 类数组
            // 将类数组转换为数组
            let arr = Array.from(arguments); 
            console.log(arr); // 数组
            console.log(arguments); // 没有改变原来的类数组
        }
        f1(1, 2, 3, 4, 5);

使用ES6之前的方式将类数组转化成数组

        function f1(){
            console.log(arguments); // 类数组
            // 将类数组转换为数组
            let arr = [].slice.call(arguments); 
            console.log(arr); // 数组
            console.log(arguments); // 没有改变原来的类数组
        }
        f1(1, 2, 3, 4, 5);

• Array.of()
  • 用于创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型
  • 它的参数是数组的成员
  • 返回值是一个数组

        var arr = Array.of();
        console.log(arr); // []
        var arr1 = Array.of(5);
        console.log(arr1); // [5]
        var arr2 = Array.of(10, 1, 2, 3, 4);
        console.log(arr2); // [10, 1, 2, 3, 4]

Array.of()与Array()的区别：

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组（注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组）。

        var arr3 = Array(5);
        console.log(arr3); // [empty × 5]
        var arr4 = Array();
        console.log(arr4); // []

普通方法：

• find()
  • 该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。
  • 在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。

以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：

        var arr=[1,2,3,4,5,6];
        var v = arr.find(function(value){
            return value > 4;
        });
        console.log(v);// 5

没有符合元素，返回undefined:

        var arr=[1,2,3,4,5,6];
        var v = arr.find(function(value){
            return value > 40;
        });
        console.log(v);// undefined

查找索引值为4的元素：

        var arr=[1,2,3,4,5,6];
        var v = arr.find(function(value, index, slef){
            return index == 4;
        });
        console.log(v);// 5

• findIndex()
  • findIndex()与find()的使用方法相同，只是当条件为true时findIndex()返回的是索引值，而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1，而find()返回的是undefined。

以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的索引值：

        var arr=[1,2,3,4,5,6];
        var v = arr.findIndex(function(value){
            return value > 4;
        });
        console.log(v);// 4

没有符合元素，返回-1:

        var arr=[1,2,3,4,5,6];
        var v = arr.find(function(value){
            return value > 40;
        });
        console.log(v);// -1

• copyWithin()
  • 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组
  • 有三个参数
    • target（必需）：从该位置开始替换数据
    • start（可选）：从该位置开始读取数据，默认为0。如果为负值，表示倒数

        var result1 = [1, 2, 3, 4, 5].copyWithin(0, 3);
        console.log(result1); // [4, 5, 3, 4, 5]

上面代码表示将从3号位直到数组结束的成员（4和5），复制到从0号位开始的位置，结果覆盖了原来的1和2。

将3号位复制到0号位：

        var result1 = [1, 2, 3, 4, 5].copyWithin(0, 3, 4);
        console.log(result1); // [4, 2, 3, 4, 5]

-2相当于3号位，-1相当于4号位：

        var result1 = [1, 2, 3, 4, 5].copyWithin(0, -2, -1);
        console.log(result1); // [4, 2, 3, 4, 5]

---

ES6新增的对象方法

• Object.is()
  • 用于判断两者是否全等，等价于"==="，但是又有些许差异
  • 区别：简单的说，两等号判等会在比较时自动进行类型转换，而三等号不会，如果类型不同，会直接返回false，而Object.is()则是在三等号的基础上，又特别处理了NaN、-0、+0，保证了-0和+0不再相同，但是要注意的是Object.is(NaN, NaN)会返回true

        console.log(NaN === NaN); // false
        console.log(0 === -0); // true
        console.log(Object.is(NaN, NaN)); // true
        console.log(Object.is(0, -0)); // false

• Object.assign()
  • 用于浅复制，将源对象(source)的所有可枚举属性复制到目标对象(target)

        var target = { a: 1 };
        var source1 = { b: 2 };
        var source2 = { c: 3 };
        Object.assign(target, source1, source2);
        console.log(target) // {a:1, b:2, c:3}

        var obj = {};
        var obj1 = {
            color: "red"
        }
        var obj2 = {
            son: {
                name: "小明"
            }
        }
        Object.assign(obj, obj1, obj2);
        console.log(obj);
        obj.son.name = "小华";
        console.log(obj2.son); // 小华