28、js数组方法和字符串方法

一、数组

1）创建数组

1. 使用new Array()的方法创建数组：var arr = new Array();
2. 如果知道数组的长度可以在new的时候指定数组的长度：var arr = new Array(20),但是如果写入一个字符串会创建一个长度为1，等于该字符串的数组。
3. 使用数组字面变量的方法创建数组：var arr = ['a', 'b', 'c'];

2）检测数组

    arr.isArray()检测arr是否是数组。

1）Push方法

    push方法是先数组的末尾添加元素。

    let arr = [3, 5, 1, 6, 2, 1];

    console.log(arr.push("hh")); //7。返回插入元素后数组的长度 
    console.log(arr); //[3, 5, 1, 6, 2, 1, "hh"]

2）Pop方法

   pop方法是移除数组末尾的元素,并返回该元素。

    let arr = [3, 5, 1, 6, 2, 9];

    console.log(arr.pop()); //9。返回删除的数组最后一个元素
    console.log(arr); //[3, 5, 1, 6, 2]

 利用push和pop方法可以实现栈

3）unshift方法 

    unshift方法是向数组的前面添加任意个长度的数组，并返回数组的长度。 

    let arr = [3, 5, 1, 6, 2, 9];

    console.log(arr.unshift("cc")); //7。返回插入元素后数组的长度
    console.log(arr); //["cc", 3, 5, 1, 6, 2, 9]

利用unshift和pop可以实现反方向的队列

4）shift方法

    shift会移除数组的第一项元素，并返回该元素。

    let arr = [3, 5, 1, 6, 2, 9];

    console.log(arr.shift()); //3。 返回删除的数组第一项元素
    console.log(arr); //[5, 1, 6, 2, 9]

利用shift方法和push方法可以实现队列

5）reverse方法

数组.reverse() 返回反转后的数组

    let arr = [3, 5, 1, 6, 2, 1];
    console.log(arr.reverse()); //[1, 2, 6, 1, 5, 3]

6）splice方法

    splice是一个强大的数组。它既可以删除数据也可以插入数据，也可以删除、替换数据。

splice(开始操作的下标，删除的项数，插入的元素)

1. 删除。2个参数，splice(起始下标，删除的项数)

var arr = ['a', 'b', 'c']; 
var c = arr.splice(1,1);//arr输出为a,c（从下标1开始，删除1项）

2. 添加。3个参数， splice(起始下标，删除的项数0，添加的元素)

如果要添加多项，可以继续在后面写参数，用逗号分隔

var arr = ['a', 'b', 'c']; 
var c = arr.splice(1,0,'d','e'); //在下标1处添加元素d、e
console.log(arr); // ['a', 'd', 'e', 'b', 'c']

3. 替换。3个参数，  splice(起始下标，删除的项数，添加的元素)

与添加的区别是，其删除项数不为0

  var arr = ['a', 'b', 'c']; 
  var c = arr.splice(1,2,'d','e'); //在下标1处开始，删除2项(b、c)，添加元素d、e
  console.log(arr); // ['a', 'd', 'e']

7）sort方法

sort方法，会返回排序后的结果。有三种排序方式

1. 默认逐位排序。先根据第一位排序，再根据第二位排序，依次类推

    let arr = [3, 11, 12, 2, 23, 9];

    arr.sort()
    console.log(arr); //[11, 12, 2, 23, 3, 9] 。

2. 递增排序。

    let arr = [3, 11, 12, 2, 23, 9];

    arr.sort(function (a, b) { 
        return a - b;
      }) 
    console.log(arr); //[2, 3, 9, 11, 12, 23] 。

3.递减排序 

    let arr = [3, 11, 12, 2, 23, 9];

    arr.sort(function (a, b) {
      return b - a;
    });
    console.log(arr); // [23, 12, 11, 9, 3, 2]。

---

---

接下来，为不会改变数组内容的9种方法

8）join方法

    join方法可以将数组通过指定的字符连接在一起，返回连接后的字符串

    let arr = [3, 8, 6, 2, 5, 9];
    console.log(arr.join("")); //386259。未指定连接的中间字符
    console.log(arr.join("&$")); //3&$8&$6&$2&$5&$9。指定连接的中间字符串为：&$

9）concat方法

    concat在没有参数的时候，会复制当前数组，返回副本。但有一个或多个数组，会把这些添加到结果数组中。返回连接后的数组。例如：

    let arr = [3, 8, 6, 2, 5, 9];
    console.log(arr.concat()); //[3, 8, 6, 2, 5, 9]。
    //参数为多个参数，或 一个数组参数，返回值是一样的
    console.log(arr.concat("a", "b")); //[3, 8, 6, 2, 5, 9, "a", "b"]。 
    console.log(arr.concat(["a", "b"])); //[3, 8, 6, 2, 5, 9, "a", "b"]。

10）slice方法

  slice(开始下标，结束下标): 从开始下标截取数组，并返回截取的数组，不包括结束下标的项。例如：

    let arr = [3, 8, 6, 2, 5, 9];
    console.log(arr.slice()); //[3, 8, 6, 2, 5, 9]。  1）不传参数，截取整个数组
    console.log(arr.slice(1)); //[8, 6, 2, 5, 9]。    2）传一个参数，从当前下标1截取到最后
    console.log(arr.slice(1, 3)); //[8, 6]。          3）传两个参数，从下标1截取到下标2

 11）indexOf方法

返回指定元素在数组中的下标，若该元素在数组中出现多次，只返回第一次出现位置的下标。

    let arr = [3, 5, 6, 2, 5, 9];
    console.log(arr.indexOf(5)); //1。   1）返回该元素第一次出现位置的下标
    console.log(arr.indexOf(10)); //-1。 2）数组种不存在该元素时，返回-1

 12）forEach方法

• 可以获取数组元素和数组下标。第一个参数为数组的元素，第二个元素为数组的下标，第二个元素为数组本身。
• 缺点：不能使用 break 语句来跳出循环（报错），也不能使用 return 语句来从闭包函数中返回。
• 没有返回值

    let arr = [1,2,3,"a",true]; 
 
    // value为数组元素，index为数组下标
    arr.forEach((value,index) =>{
        console.log("下标"+index+"的值为："+value)
    })

  

 13）map方法

    let arr = [1,2,3]; 
 
    let newArr = arr.map(item =>{
        return item+1;
    })
 
    console.log(arr) // 原数组未变：[1,2,3]
    console.log(newArr) //新数组：[2,3,4]

两个参数的map方法：

    let a = ["aa", "bb", "cc"];
 
    [1, 2].map( function(value, index, arr) { // 注意：绑定this时不能是用箭头函数，不然this会指向window。
        console.log(this[index])    // this就是第二个参数a
    }, a)
 
    // 打印结果：aa bb

 forEach循环和map循环一样也可以用绑定回调函数内部的this变量，间接操作其它变量（参考上面的map()循环例子） 

 14）filter方法

    let a = [1,2,3,4,5,6,7,8];
 
    let newArr = a.filter((value,index)=>{ //获取数组a中小于5的所有元素
        return value<5;
    })
 
    console.log(newArr) //[1,2,3,4]

 15）every方法和some方法

 some的使用：

    let a = [1,2,3,4,5,6,7,8];
 
    let res = a.some((value,index)=>{  //只有8大于7
        return value>7
    })
    
    console.log(res) //true

every的使用：

    let a = [1,2,3,4,5,6,7,8];
 
    let res = a.every((value,index)=>{ //只有8大于7
        return value>7
    })
 
    console.log(res) //false

 16）reduce方法和reduceRight方法

不改变数组，返回最终的计算结果

 利用reduce获取数组中最长的字符串：

nowRes 存放每一轮的结果，value是当前遍历的值，index是当前遍历值的下标。

    let a = ["aaa","cc","fbwss","dw"];
 
    let res = a.reduce((nowRes,value,index)=>{
        console.log("当前累积变量："+nowRes+"  当前值："+value+"  当前下标："+index);
        return nowRes.length < value.length ? value: nowRes;
    },"") //设置最长字符nowRes的初始值为""
 
    console.log(res); //fbwss

17）上述 遍历方法的区别

 

二、字符串

1）创建字符串

1.     通过New String()的方式创建，返回新对象
2.     通过字面直接去创建

 2）字符串.charAt(索引index)

      查询指定index的字符，如果存在返回字符，否则返回空字符串

 3） 字符串. toLowerCase()

           转换为小写，返回值为转换好的字符串

4) 字符串. toUpperCase()

          转换为大写，返回值为转换好的字符串

5) 字符串. replace(replaceStr, str)

将字符串中的子串replaceStr替换为str 。返回值：替换好的字符串   

 

注意：只替换第一个满足 换下条件 的字符串 

    let str = "我是Y，我爱中国";
    console.log(str.replace("我", "你")); //你是Y，我爱中国 。只替换了第一个“我”

6）字符串.trim()

    let str = "  我是Y，我爱中国   "; 
    console.log(str);                  //输出：   我是Y，我爱中国   
    console.log(str.trim("我", "你")); //输出：我是Y，我爱中国

7） 字符串.split(分隔符str)

 

str表示按照指定的字符划分，在划分的时候例如'|a|c'，他会划分为['', 'a', 'c']这样的数组。和ARRAY.join(str)刚好相反。

    let str = "2022-03-26";
    console.log(str.split("")); // 参数为空串时： ["2", "0", "2", "2", "-", "0", "3", "-", "2", "6"]
    console.log(str.split("-")); // 参数为"-"时 ["2022", "03", "26"]

---

下面的 8）substr、9）substring、10）slice的作用和返回值都是：

主要区别在于第二个参数

8）substr(from,length)

 从from位置开始截取length个字符

    let str = "I Miss You";
    console.log(str.substr(2, 4)); // Miss。 两个参数，从下标2开始，截取4个字符
    console.log(str.substr(2));    // Miss You。只有一个参数时，截取该下标到结尾的所有字符。

9）substring(from,to)

截取下标从from到to的字符串。包含from，不包含下标to的字符

    let str = "I Miss You";
    console.log(str.substring(2, 4)); // Mi。 两个参数，从下标2开始，截取到下标4（不包含4）
    console.log(str.substring(2)); // Miss You。只有一个参数时，截取该下标到结尾的所有字符。

10）slice(from, to)

截取下标从from到to的字符串。包含from，不包含结束下标to的字符

    let str = "I Miss You";
    console.log(str.slice(2, 4)); // Mi。 两个参数，从下标2开始，截取到下标4（不包含4）
    console.log(str.slice(2)); // Miss You。只有一个参数时，截取该下标到结尾的所有字符。

  11）concat(str1...)

• 作用：用于连接一个或多个字符串。
• 返回值：为连接后的字符串。
• 不改变原字符串。

    let str = "I Miss You";
    console.log(str.concat(" ", "hei")); // I Miss You hei。 将" "和"hei"连接到str后
    console.log(str.concat()); // I Miss You。不传参数时，返回原字符串。

  12）indexof(value, from)

• 作用：从下标from开始查找value在字符串中的下标。如果不写from，默认从首部查找。
• 返回值：返回value在字符串第一次出现的下标；如果value不存在返回-1。
• 不改变原字符串

    let str = "i Miss You";
    console.log(str.indexOf("i")); // 下标0
    console.log(str.indexOf("K")); // 下标-1（不存在）

  13）lastIndexOf(value, from)

  作用：同indexOf， 从后向前查找value字符串位置。查找不到返回-1。

    let str = "i Miss Youi";
    console.log(str.lastIndexOf("i")); // 下标10。 默认从尾部开始向前查找
    console.log(str.lastIndexOf("i", 5)); // 下标3。 从下标5开始向前查找

以上都不会改变字符串