前端数组的操作

网上下载的资料，不知道是谁写的，我就整理发出来了，有侵权请私聊

前言

数组的四个基本方法如下：（数组元素的添加和删除）

方法	描述	备注
push()	向数组的最后面插入一个或多个元素，返回结果为该数组新的长度	会改变原数组
pop()	删除数组中的最后一个元素，返回结果为被删除的元素	会改变原数组
unshift()	在数组最前面插入一个或多个元素，返回结果为该数组新的长度	会改变原数组
shift()	删除数组中的第一个元素，返回结果为被删除的元素	会改变原数组
数组的常见方法如下：

方法	描述	备注
slice()	从数组中提取指定的一个或多个元素，返回结果为新的数组	不会改变原数组
splice()	从数组中删除指定的一个或多个元素，返回结果为新的数组	会改变原数组
concat()	连接两个或多个数组，返回结果为新的数组	不会改变原数组
join()	将数组转换为字符串，返回结果为转换后的字符串	不会改变原数组
reverse()	反转数组，返回结果为反转后的数组	会改变原数组
sort()	对数组的元素,默认按照Unicode编码，从小到大进行排序	会改变原数组
遍历数组的方法如下：

方法	描述	备注
for循环	这个大家都懂
forEach()	和 for循环类似，但需要兼容IE8以上	forEach() 没有返回值。也就是说，它的返回值是 undefined
map()	对原数组中的每一项进行加工，将组成新的数组	不会改变原数组
filter()	对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组，返回结果为新的数组。可以起到过滤的作用	不会改变原数组
every()	如果有一项返回false，则停止遍历，此方法返回 false	一假即假。要求每一项都返回true，最终的结果才返回true
some()	只要有一项返回true，则停止遍历，此方法返回true	一真即真。要求每一项都返回false，最终的结果才返回false
reduce	为数组中的每一个元素，依次执行回调函数
数组的其他方法如下：

方法	描述	备注
indexOf(value)	从前往后索引，获取 value 在数组中的第一个下标
lastIndexOf(value)	从后往前索引，获取 value 在数组中的最后一个下标
find(function())	找出第一个满足「指定条件返回true」的元素。
findIndex(function())	找出第一个满足「指定条件返回true」的元素的index
Array.from(arrayLike)	将伪数组转化为真数组
Array.of(value1, value2, value3)	将一系列值转换成数组。

数组的四个基本方法（数组元素的添加和删除）

push()

push()：向数组的最后面插入一个或多个元素，返回结果为该数组新的长度。

语法：

数组的新长度 = 数组.push(元素);

代码举例：

    var arr = ["王一", "王二", "王三"];
​
    var result1 = arr.push("王四"); // 末尾插入一个元素
    var result2 = arr.push("王五", "王六"); // 末尾插入多个元素
​
    console.log(result1); // 打印结果：4
    console.log(result2); // 打印结果：6
    console.log(JSON.stringify(arr)); // 打印结果：["王一","王二","王三","王四","王五","王六"]

​

pop()

pop()：删除数组中的最后一个元素，返回结果为被删除的元素。

语法：

被删除的元素 = 数组.pop();

代码举例：

    var arr = ["王一", "王二", "王三"];
​
    var result1 = arr.pop();
​
    console.log(result1); // 打印结果：王三
    console.log(JSON.stringify(arr)); // 打印结果：["王一","王二"]

unshift()

unshift()：在数组最前面插入一个或多个元素，返回结果为该数组新的长度。插入元素后，其他元素的索引会依次调整。

语法：

数组的新长度 = 数组.unshift(元素);

代码举例：

    var arr = ["王一", "王二", "王三"];
​
    var result1 = arr.unshift("王四"); // 最前面插入一个元素
    var result2 = arr.unshift("王五", "王六"); // 最前面插入多个元素
​
    console.log(result1); // 打印结果：4
    console.log(result2); // 打印结果：6
    console.log(JSON.stringify(arr)); // 打印结果：["王五","王六","王四","王一","王二","王三"]

​

shift()

shift()：删除数组中的第一个元素，返回结果为被删除的元素。

语法：

被删除的元素 = 数组.shift();

代码举例：

    var arr = ["王一", "王二", "王三"];
​
    var result1 = arr.shift();
​
    console.log(result1); // 打印结果：王一
    console.log(JSON.stringify(arr)); // 打印结果：["王二","王三"]

数组的常见方法

slice()

slice()：从数组中提取指定的一个或者多个元素，返回结果为新的数组（不会改变原来的数组）。

备注：该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回。

语法：

新数组 = 原数组.slice(开始位置的索引, 结束位置的索引);    //注意：包含开始索引，不包含结束索引

举例：

  var arr = ["a", "b", "c", "d", "e", "f"];
​
    var result1 = arr.slice(2); //从第二个值开始提取
    var result2 = arr.slice(-2); //提取最后两个元素
    var result3 = arr.slice(2, 4); //提取从第二个到第四个之间的值（不包括第四个值）
    var result4 = arr.slice(4, 2); //空
​
    console.log("arr:" + JSON.stringify(arr));
    console.log("result1:" + JSON.stringify(result1));
    console.log("result2:" + JSON.stringify(result2));
    console.log("result3:" + JSON.stringify(result3));
    console.log("result4:" + JSON.stringify(result4));

​
打印结果：

arr:["a","b","c","d","e","f"]
result1:["c","d","e","f"]
result2:["e","f"]
result3:["c","d"]
result4:[]

补充：

很多前端开发人员会用 slice()将伪数组，转化为真数组。写法如下：

array = Array.prototye.slice.call(arrayLike)
或者
array = [].slice.call(arrayLike)

ES6 看不下去这种蹩脚的转化方法，于是出了一个新的 API：（专门用来将伪数组转化成真数组）

array = Array.from(arrayLike)

splice()

splice()：从数组中删除指定的一个或多个元素，返回结果为新的数组（会改变原来的数组）。

备注：该方法会改变原数组，会将指定元素从原数组中删除；被删除的元素会封装到一个新的数组中返回。

语法：

新数组 = 原数组.splice(起始索引index, 需要删除的个数, 第三个参数, 第四个参数...);

上方语法中，第三个及之后的参数，表示：向原数组中添加新的元素，这些元素将会自动插入到开始位置索引的前面。

举例1：

    var arr1 = ["a", "b", "c", "d", "e", "f"];
    var result1 = arr1.splice(1); //从第index为1的位置开始，删除元素
​
    console.log("arr1：" + JSON.stringify(arr1));
    console.log("result1：" + JSON.stringify(result1));

打印结果：

   arr1：["a"]
    result1：["b","c","d","e","f"]

举例2：

    var arr2 = ["a", "b", "c", "d", "e", "f"];
    var result2 = arr2.splice(-2); //删除最后两个元素
​
    console.log("arr2：" + JSON.stringify(arr2));
    console.log("result2：" + JSON.stringify(result2));

打印结果：

arr2：["a","b","c","d"]
result2：["e","f"]

举例3：

    var arr3 = ["a", "b", "c", "d", "e", "f"];
    var result3 = arr3.splice(1, 3); //从第index为1的位置开始删除元素,一共删除三个元素
​
    console.log("arr3：" + JSON.stringify(arr3));
    console.log("result3：" + JSON.stringify(result3));

打印结果：

  arr3：["a","e","f"]
    result3：["b","c","d"]

举例4：（我们来看看第三个参数的用法）

var arr4 = ["a", "b", "c", "d", "e", "f"];
​
//从第index为1的位置开始删除元素,一共删除三个元素。并且在 index=1 的前面追加两个元素
var result4 = arr4.splice(1, 3, "千古壹号", "vae");
​
console.log("arr4：" + JSON.stringify(arr4));
console.log("result4：" + JSON.stringify(result4));

打印结果：

arr4：["a","千古壹号","vae","e","f"]
result4：["b","c","d"]

concat()

concat()：连接两个或多个数组，返回结果为新的数组。（不会改变原数组）

语法：

新数组 = 数组1.concat(数组2, 数组3 ...);

​
举例：

    var arr1 = [1, 2, 3];
    var arr2 = ["a", "b", "c"];
    var arr3 = ["千古壹号", "vae"];
​
    var result1 = arr1.concat(arr2);
​
    var result2 = arr2.concat(arr1, arr3);
​
    console.log("arr1 =" + JSON.stringify(arr1));
    console.log("arr2 =" + JSON.stringify(arr2));
    console.log("arr3 =" + JSON.stringify(arr3));
​
    console.log("result1 =" + JSON.stringify(result1));
    console.log("result2 =" + JSON.stringify(result2));

打印结果：

arr1 =[1,2,3]
arr2 =["a","b","c"]
arr3 =["千古壹号","vae"]
​
result1 =[1,2,3,"a","b","c"]
result2 =["a","b","c",1,2,3,"千古壹号","vae"]

从打印结果中可以看到，原数组并没有被修改。

join()

join()：将数组转换为字符串，返回结果为转换后的字符串（不会改变原来的数组）。

补充：join()方法可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符；如果不指定连接符，则默认使用,作为连接符，此时和 toString()的效果是一致的。

语法：

新的字符串 = 原数组.join(参数); // 参数选填

代码举例：

   var arr = ["a", "b", "c"];
​
    var result1 = arr.join(); // 这里没有指定连接符，所以默认使用 , 作为连接符
​
    var result2 = arr.join("-"); // 使用指定的字符串作为连接符
​
    console.log(typeof arr); // 打印结果：object
    console.log(typeof result1); // 打印结果：string
​
    console.log("arr =" + JSON.stringify(arr));
    console.log("result1 =" + JSON.stringify(result1));
    console.log("result2 =" + JSON.stringify(result2));

​
上方代码中，最后三行的打印结果是：

arr =["a","b","c"]
result1 =a,b,c
result2 =a-b-c

reverse()

reverse()：反转数组，返回结果为反转后的数组（会改变原来的数组）。

语法：

反转后的数组  =  数组.reverse();

举例：

   var arr = ["a", "b", "c", "d", "e", "f"];
​
    var result = arr.reverse(); // 将数组 arr 进行反转
​
    console.log("arr =" + JSON.stringify(arr));
    console.log("result =" + JSON.stringify(result));

打印结果：

arr =["f","e","d","c","b","a"]
result =["f","e","d","c","b","a"]

从打印结果可以看出，原来的数组已经被改变了。

sort()方法

sort()方法要好好理解。所以，我们单独用一大段来讲。

sort()：对数组的元素进行从小到大来排序（会改变原来的数组）。

sort()方法举例：无参时

如果在使用 sort() 方法时不带参，则默认按照Unicode编码，从小到大进行排序。

举例1：（当数组中的元素为字符串时）

   var arr1 = ["e", "b", "d", "a", "f", "c"];
​
    var result = arr1.sort(); // 将数组 arr1 进行排序
​
    console.log("arr1 =" + JSON.stringify(arr1));
    console.log("result =" + JSON.stringify(result));

打印结果：

  arr1 =["a","b","c","d","e","f"]
    result =["a","b","c","d","e","f"]

举例2：（当数组中的元素为数字时）

   var arr2 = [5, 2, 11, 3, 4, 1];
​
    var result = arr2.sort(); // 将数组 arr2 进行排序
​
    console.log("arr2 =" + JSON.stringify(arr2));
    console.log("result =" + JSON.stringify(result));

打印结果：

arr2 =[1,11,2,3,4,5]
result =[1,11,2,3,4,5]

上方的打印结果中，你会发现，使用 sort() 排序后，数字11竟然在数字2的前面。这是为啥呢？因为上面讲到了，sort()方法是按照Unicode编码进行排序的。

那如果我想让 arr2 里的数字，完全按照从小到大排序，怎么操作呢？继续往下看。

sort()方法举例：带参时

如果在 sort()方法中带参，我们就可以自定义排序规则。具体做法如下：

我们可以在sort()添加一个回调函数，来指定排序规则。回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数

浏览器根据回调函数的返回值来决定元素的排序：（重要）

如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个0，则认为两个元素相等，则不交换位置
代码举例：

  var arr3 = [5, 2, 11, 3, 4, 1];
​
    // 自定义排序规则
    var result = arr3.sort(function(a, b) {
    if (a > b) { // 如果 a 大于 b，则交换 a 和 b 的位置
      return 1;
    } else if (a < b) { // 如果 a 小于 b，则位置不变
      return -1;
    } else { // 如果 a 等于 b，则位置不变
      return 0;
    }
    });
​
    console.log("arr3 =" + JSON.stringify(arr3));
    console.log("result =" + JSON.stringify(result));

打印结果：

arr3 =[1,2,3,4,5,11]
result =[1,2,3,4,5,11]

上方代码的写法太啰嗦了，其实也可以简化为如下写法：

代码优化：（冒泡排序）

var arr3 = [5, 2, 11, 3, 4, 1];

​
// 自定义排序规则
var result = arr3.sort(function(a, b) {
return a - b; // 升序排列
// return b - a; // 降序排列
});
​
console.log(“arr3 =” + JSON.stringify(arr3));
console.log(“result =” + JSON.stringify(result));
打印结果：

arr3 =[1,2,3,4,5,11]
result =[1,2,3,4,5,11]

数组的遍历

遍历数组即：获取并操作数组中的每一个元素。在我们的实战开发中，使用得非常频繁。

遍历数组的方法包括：every()、filter()、forEach()、map()、some()

PS：这几个方法不会修改原数组。

语法格式：

数组/boolean/无 = 数组.every/filter/forEach/map/some(
                        function(item, index, arr){
                                        程序和返回值；
                        })

有了这几种方法，就可以替代一些for循环了。下面依次来介绍。

for循环 遍历

举例：

        var arr = ["生命壹号","许嵩","永不止步"];
        for(var i = 0;i<arr.length;i++){
            console.log(arr[i]);  // arr[i]代表的是数组中的每一个元素i
        }
​
        console.log(arr);

打印结果：

forEach() 遍历

forEach() 这种遍历方法只支持IE8以上的浏览器。IE8及以下的浏览器均不支持该方法。所以如果需要兼容IE8，则不要使用forEach，改为使用for循环来遍历即可。

forEach()方法需要一个函数作为参数。这种函数，是由我们创建但是不由我们调用的，我们称为回调函数。

数组中有几个元素，该回调函数就会执行几次。执行完毕后，浏览器会将遍历到的元素。

回调函数中传递三个参数：

第一个参数，就是当前正在遍历的元素
第二个参数，就是当前正在遍历的元素的索引
第三个参数，就是正在遍历的数组
代码举例：

    var arr = ["王一", "王二", "王三"];
​
    arr.forEach(function(item, index, obj) {
    console.log("item:" + item);
    console.log("index:" + index);
    console.log("obj:" + obj);
    console.log("----------");
    });

打印结果：

item:王一
index:0
obj:王一,王二,王三
----------
​
item:王二
index:1
obj:王一,王二,王三
----------
​
item:王三
index:2
obj:王一,王二,王三
----------

注意，forEach() 的返回值是 undefined。也就是说，它没有返回值。如果你尝试 tempArry = arr.forEach()这种方式来接收，是达不到效果的。

map()方法

解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是加工之后的新数组）。

举例1：（拷贝的过程中改变数组元素的值）

有一个已知的数组arr1，我要求让arr1中的每个元素的值都加10，这里就可以用到 map 方法。代码举例：

    var arr1 = [1, 3, 6, 2, 5, 6];
​
    var arr2 = arr1.map(function (item, index) {
        return item + 10;  //让arr1中的每个元素加10
​
    })
    console.log(arr2);

打印结果：

举例2：【重要案例】

将A数组中某个属性的值，存储到B数组中。代码举例：

  const arr1 = [
        { name: '千古壹号', age: '28' }, { name: '许嵩', age: '32' }
    ];
    const arr2 = arr1.map(item => item.name); // 将数组 arr1 中的 name 属性，存储到 数组 arr2 中
​
    console.log('arr1:' + JSON.stringify(arr1));
    console.log('arr2:' + JSON.stringify(arr2));

打印结果：

  arr1:[{"name":"千古壹号","age":"28"},{"name":"许嵩","age":"32"}]
​
    arr2:["千古壹号","许嵩"]

​
map的应用场景，主要就是以上两种。

filter()

解释：对数组中每一项运行回调函数，该函数返回结果是true的项，将组成新的数组（返回值就是这个新的数组）。

举例1：找出数组 arr1 中大于4的元素，返回一个新的数组。代码如下：

  var arr1 = [1, 3, 6, 2, 5, 6];
​
    var arr2 = arr1.filter(function(item, index) {
        return item > 4; //将arr1中大于4的元素返回，组成新的数组
    });
    console.log(JSON.stringify(arr2));

​
打印结果：

[6,5,6]

上方代码的ES6写法：

    const arr1 = [1, 3, 6, 2, 5, 6];
​
    const arr2 = arr1.filter(item=> item > 4); //将arr1中大于4的元素返回，组成新的数组
​
    console.log(JSON.stringify(arr2));

​
举例2：

获取数组A中指定类型的对象，放到数组B中。代码举例如下：

    const arr1 = [
        { name: '许嵩', type: '一线' },
        { name: '周杰伦', type: '过气' },
        { name: '邓紫棋', type: '一线' },
    ];
​
    const arr2 = arr1.filter(item => item.type == '一线'); // 筛选出一线歌手
​
    console.log(JSON.stringify(arr2));

打印结果：

  [{"name":"许嵩","type":"一线"},{"name":"邓紫棋","type":"一线"}]

every()方法

every()：对数组中每一项运行回调函数，如果都返回true，every就返回true；如果有一项返回false，则停止遍历，此方法返回false。

注意：every()方法的返回值是boolean值，参数是回调函数。

举例：

    var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
    var bool1 = arr1.every(function (element, index, array) {
        if (element.length > 2) {
            return false;
        }
        return true;
    });
    console.log(bool1);  //输出结果：false。只要有一个元素的长度是超过两个字符的，就返回false
​
    var arr2 = ["千古", "宿敌", "南山", "素颜"];
    var bool2 = arr2.every(function (element, index, array) {
        if (element.length > 2) {
            return false;
        }
        return true;
    });
    console.log(bool2);  //输出结果：true。因为每个元素的长度都是两个字符。

some()方法

some()：对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，此方法返回true。

注意：some()方法的返回值是boolean值。

reduce()方法

reduce的发音：[rɪ’djuːs]。中文含义是减少。

reduce()：为数组中的每一个元素，依次执行回调函数。

语法：

   arr.reduce(
        function(previousValue, item, index, arr) {
​
        }, initialValue)

​
参数解释：

previousValue：上一次调用回调函数时的返回值，或者初始值
currentValue：当前正在处理的数组元素
currentIndex：当前正在处理的数组元素下标
array：调用reduce()方法的数组
initialValue：可选的初始值（作为第一次调用回调函数时传给 previousValue 的值）
备注：如果能熟练使用 reduce 的用法，将能替代很多其他的数组方法。

举例1：

计算数组中所有元素项的总和。代码实现：

    var arr = [2, 0, 1, 9, 6];
    sumValue = arr.reduce(function(total, item) { //  计算 arr 数组中，所有元素项的综合
        return total + item;
    }, 0);
​
    console.log('sumValue:' + sumValue); // 打印结果：18

数组的其他方法

indexOf() 和 lastIndexOf()：获取数据的索引

语法：

    索引值 = 数组.indexOf(value);
​
    索引值 = 数组.lastIndexOf(value);

解释：

indexOf(value)：从前往后索引，获取 value 在数组中的第一个下标。
lastIndexOf(value) ：从后往前索引，获取 value 在数组中的最后一个下标。
作用：

利用这个方法，我们可以判断某个值是否在指定的数组中。如果没找到则返回-1。

举例1：

  var arr = ["a","b","c","d","e","d","c"];
​
    console.log(arr.indexOf("c"));       //从前往后，找第一个"c"在哪个位置
    console.log(arr.lastIndexOf("d"));   //从后往前，找第一个"d"在哪个位置

打印结果：

举例2：判断某个值是否在数组中

 var arr = ["29926392220", "29965620629", "28003663436", " ", "28818504366"];
​
    var str = [
        {name:"smyh", id: "12334"},
​
        {name:"vae", id: "28818504366"}
    ];
​
    str.filter(item => {
        console.log(arr.indexOf(item.id));
    })

​

find()

语法：

  find(function(item, index, arr){return true})

作用：找出第一个满足「指定条件返回true」的元素。

备注：一旦找到符合条件的第一个元素，将不再继续往下遍历。

举例：

     let arr = [2, 3, 2, 5, 7, 6];
​
        let result = arr.find(function (item, index) {
            return item > 4; //遍历数组arr，一旦发现有第一个元素大于4，就把这个元素返回
        });
​
        console.log(result);  //打印结果：5

findIndex()

语法：

findIndex(function(item, index, arr){return true})

作用：找出第一个满足「指定条件返回true」的元素的index。

举例：

我们直接把上面的代码中的find方法改成findIndex，来看看效果。

    let arr = [2, 3, 2, 5, 7, 6];
​
        let result = arr.findIndex(function (item, index) {
            return item > 4; //遍历数组arr，一旦发现有第一个元素大于4，就把这个元素的index返回
        });
​
        console.log(result); //打印结果：3

Array.from()

语法：

array = Array.from(arrayLike)

作用：将伪数组或可遍历对象转换为真数组。

举例：

<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
​
<script>
    let btnArray = document.getElementsByTagName('button');
    console.log(btnArray);
    console.log(btnArray[0]);
​
</script>
​
</body>

​
上面的布局中，有三个button标签，我们通过getElementsByTagName获取到的btnArray实际上是伪数组，并不是真实的数组：

既然btnArray是伪数组，它就不能使用数组的一般方法，否则会报错：

解决办法：采用Array.from方法将btnArray这个伪数组转换为真数组即可：

Array.from(btnArray);

然后就可以使用数组的一般方法了：

伪数组与真数组的区别：

伪数组的原型链中没有 Array.prototype，而真数组的原型链中有 Array.prototype。因此伪数组没有 pop、join等属性。

Array.of()

语法：

  Array.of(value1, value2, value3)

作用：将一系列值转换成数组。

举例：

let arr = Array.of(1, ‘abc’, true);
console.log(arr);

其他

isArray()：判断是否为数组

  布尔值 = Array.isArray(被检测的值) ;

以前，我们会通过 A instanceof B来判断 A 是否属于 B 类型。但是在数组里，这种 instanceof 方法已经用的不多了，因为有下面isArray()方法。

toString()：转换数组

字符串 = 数组.toString();

解释：把数组转换成字符串，每一项用,分割。

valueOf()：返回数组本身

数组本身 = 数组.valueOf();

这个方法的意义不大。因为我们指直接写数组对象的名字，就已经是数组本身了。

数组练习

splice()练习：数组去重

代码实现：

      //创建一个数组
      var arr = [1, 2, 3, 2, 2, 1, 3, 4, 2, 5];
​
      //去除数组中重复的数字
      //获取数组中的每一个元素
      for (var i = 0; i < arr.length; i++) {
        //console.log(arr[i]);
        /*获取当前元素后的所有元素*/
        for (var j = i + 1; j < arr.length; j++) {
          //console.log("---->"+arr[j]);
          //判断两个元素的值是否相等
          if (arr[i] == arr[j]) {
            //如果相等则证明出现了重复的元素，则删除j对应的元素
            arr.splice(j, 1);
            //当删除了当前j所在的元素以后，后边的元素会自动补位
            //此时将不会在比较这个元素吧，我需要在比较一次j所在位置的元素
            //使j自减
            j--;
          }
        }
      }
​
      console.log(arr);

清空数组

清空数组，有以下几种方式：

   var array = [1,2,3,4,5,6];
​
    array.splice(0);      //方式1：删除数组中所有项目
    array.length = 0;     //方式2：length属性可以赋值，在其它语言中length是只读
    array = [];           //方式3：推荐

练习1

问题：将一个字符串数组输出为|分割的形式，比如“千古|宿敌|素颜”。使用两种方式实现。

答案：

方式1：（不推荐）

   var arr = ["千古","宿敌","素颜"];
    var str = arr[0];
    var separator = "|";
    for(var i = 1;i< arr.length;i++) {
        str += separator+arr[i];    //从第1个数组元素开始，每个元素前面加上符号"|"
    }
​
    console.log(str);

输出结果：

不推荐这种方式，因为：由于字符串的不变性，str拼接过多的话，容易导致内存溢出（很多个str都堆放在栈里）。

方式2：（推荐。通过array数组自带的api来实现）

    var arr = ["千古","宿敌","素颜"];
​
    console.log(arr.join("|"));

结果：

练习2

题目：将一个字符串数组的元素的顺序进行反转，使用两种种方式实现。提示：第i个和第length-i-1个进行交换。

答案：

方式1：

function reverse(array) {
       var newArr = [];
       for (var i = array.length - 1; i >= 0; i--) {
           newArr[newArr.length] = array[i];
       }
       return newArr;
   }

方式2：（算法里比较常见的方式）

   function reverse(array){
       for(var i=0;i<array.length/2;i++){
           var temp = array[i];
           array[i] = array[array.length-1-i];
           array[array.length-1-i] = temp;
       }
       return array;
   }

方式3：（数组自带的reverse方法）

现在我们学习了数组自带的api，我们就可以直接使用reverse()方法。

练习3

问题：针对工资的数组[1500,1200,2000,2100,1800]，把工资超过2000的删除。

答案：

  var arr1 = [1500, 1200, 2000, 2100, 1800];
​
    var arr2 = arr1.filter(function (ele, index, array) {
        if (ele < 2000) {
            return true;
        }
        return false;
    })
    console.log(arr1);
    console.log(arr2);

结果：

练习4

问题：找到数组[“c”,“a”,“z”,“a”,“x”,“a”]中每一个元素出现的次数。

分析：这道题建议用json数据来做，因为我们想知道a出现了几次，c出现了几次，x出现了几次。恰好k:v … k:v这种键值对的形式就比数组方便很多了。

键值对的形式：用key代表数组中的元素，用value代表元素出现的次数。

略难，答案暂略。

练习5：数组去重

问题：编写一个方法去掉一个数组中的重复元素。

分析：创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加了。

答案：

//    编写一个方法 去掉一个数组的重复元素
    var arr = [1,2,3,4,5,2,3,4];
    console.log(arr);
    var aaa = fn(arr);
    console.log(aaa);
    //思路：创建一个新数组，循环遍历，只要新数组中有老数组的值，就不用再添加了。
    function fn(array){
        var newArr = [];
        for(var i=0;i<array.length;i++){
            //开闭原则
            var bool = true;
            //每次都要判断新数组中是否有旧数组中的值。
            for(var j=0;j<newArr.length;j++){
                if(array[i] === newArr[j]){
                    bool = false;
                }
            }
            if(bool){
                newArr[newArr.length] = array[i];
            }
        }
        return newArr;
    }

其它方法

数组

生成数组

当你需要要生成一个0-99的数组
方案1

const createArr = (n) => Array.from(new Array(n), (v, i) => i)
const arr = createArr(100) // 0 - 99 数组

方案2

const createArr = (n) => new Array(n).fill(0).map((v, i) => i)
createArr(100) // 0 - 99数组

打乱数组

当你有一个数组，你需要打乱这个数组的排序

const randomSort = list => list.sort(() => Math.random() - 0.5)
randomSort([0,1,2,3,4,5,6,7,8,9]) // 随机排列结果

数组简单数据去重

当你需要将数组中的所有重复的元素只保留一个

const removeDuplicates = list => [...new Set(list)]
removeDuplicates([0, 0, 2, 4, 5]) // [0,2,4,5]

数组唯一值数据去重

根据唯一值对数组进行去重

const duplicateById = list => [...list.reduce((prev, cur) => prev.set(cur.id, cur), new Map()).values()]
duplicateById([{id: 1, name: 'jack'}, {id: 2, name: 'rose'}, {id: 1, name: 'jack'}])
// [{id: 1, name: 'jack'}, {id: 2, name: 'rose'}]

多数组取交集

当你需要取多个数组中的交集

const intersection = (a, ...arr) => [...new Set(a)].filter((v) => arr.every((b) => b.includes(v)))

intersection([1, 2, 3, 4], [2, 3, 4, 7, 8], [1, 3, 4, 9])
// [3, 4]

查找最大值索引

但你需要找到一个数组中的最大值的索引

const indexOfMax = (arr) => arr.reduce((prev, curr, i, a) => (curr > a[prev] ? i : prev), 0);
indexOfMax([1, 3, 9, 7, 5]); // 2

查找最小值索引

当你需要找到一个数组中的最小值的索引

const indexOfMin = (arr) => arr.reduce((prev, curr, i, a) => (curr < a[prev] ? i : prev), 0)
indexOfMin([2, 5, 3, 4, 1, 0, 9]) // 5

找到最接近的数值

当你需要在一个数组中找到一个最接近的值

const closest = (arr, n) => arr.reduce((prev, curr) => (Math.abs(curr - n) < Math.abs(prev - n) ? curr : prev))
closest([29, 87, 8, 78, 97, 20, 75, 33, 24, 17], 50) // 33

压缩多个数组

当你需要将多个数组压缩成一个数组

const zip = (...arr) => Array.from({ length: Math.max(...arr.map((a) => a.length)) }, (_, i) => arr.map((a) => a[i]))
zip([1,2,3,4], ['a', 'b', 'c', 'd'], ['A', 'B', 'C', 'D'])
// [[1, 'a', 'A'], [2, 'b', 'B'], [3, 'c', 'C'], [4, 'd', 'D']]

矩阵交换行和列

当你需要将一个矩阵的行和列进行互相交换

const transpose = (matrix) => matrix[0].map((col, i) => matrix.map((row) => row[i]));
transpose(
    [              // [
        [1, 2, 3], //      [1, 4, 7],
        [4, 5, 6], //      [2, 5, 8],
        [7, 8, 9], //      [3, 6, 9],
     ]             //  ]
 ); 

数字转换

进制转换

将10进制转换成n进制，可以使用toString(n)

const toDecimal = (num, n = 10) => num.toString(n) 
// 假设数字10要转换成2进制
toDecimal(10, 2) // '1010'

将n进制转换成10进制，可以使用parseInt(num, n)

// 10的2进制为1010
const toDecimalism = (num, n = 10) => parseInt(num, n)
toDecimalism(1010, 2)

正则

手机号格式化

当你需要将手机号码格式化成xxx-xxxx-xxxx的形式

const formatPhone = (str, sign = '-') => str.replace(/(\W|\s)/g, "").split(/^(\d{3})(\d{4})(\d{4})$/).filter(item => item).join(sign)

formatPhone('13123456789') // '131-2345-6789'
formatPhone('13 1234 56 789', ' ') // '131 2345 6789'

去除多余空格

当你需要将一段文本中的多个空格合并成一个空格

const setTrimOut = str => str.replace(/\s\s+/g, ' ')
const str = setTrimOut('hello,   jack') // 

web

重新加载当前页面

const reload = () => location.reload();
reload()

滚动到页面顶部

如果你需要将页面翻到最顶部

const goToTop = () => window.scrollTo(0, 0);
goToTop()

元素滚动

如果你希望将一个元素顺滑的滚动到可视区域的起点

const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" })
scrollToTop(document.body)

如果你希望将一个元素顺滑的滚动到可视区域的终点

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" })
  scrollToBottom(document.body)

检查当前是否IE浏览器

const isIE = !!document.documentMode;

从给定文本中剥离html

当你需要在某个文本中将里面的标签全部过滤掉

const stripHtml = (html) => new DOMParser().parseFromString(html, 'text/html').body.textContent || '';
stripHtml('<div>test</div>') // 'test'

重定向

当你需要跳转到其他页面

const goTo = (url) => (location.href = url);

文本粘贴

当你需要复制文本到粘贴板上

const copy = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text)
copy('你需要粘贴的文本')

日期

判断日期是否为今天

const isToday = (date) => date.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10)

日期转换

当你需要将日期转换为为 YYYY-MM-DD 格式

const formatYmd = (date) => date.toISOString().slice(0, 10);
formatYmd(new Date())

秒数转换

当你需要将秒数转换为 hh:mm:ss 格式

const formatSeconds = (s) => new Date(s * 1000).toISOString().substr(11, 8)
formatSeconds(200) // 00:03:20

获取某年某月的第一天

当你需要获取某年某月的第一天

const getFirstDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth(), 1);
getFirstDate(new Date('2022-04')) // Fri Apr 01 2022 00:00:00 GMT+0800 (中国标准时间)

获取某年某月的最后一天

当你需要获取某年某月的最后一天

const getLastDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth() + 1, 0);
getLastDate(new Date('2023-03-04')) // Fri Mar 31 2023 00:00:00 GMT+0800 (中国标准时间)

获取某年月份天数

当你需要获取某年某个月份的总天数

const getDaysNum = (year, month) => new Date(year, month, 0).getDate()  
const day = getDaysNum(2024, 2) // 29

函数

异步函数判断

判断一个函数是否属于异步函数

const isAsyncFunction = (v) => Object.prototype.toString.call(v) === '[object AsyncFunction]'
isAsyncFunction(async function () {}); // true

数字

截断数字

当你需要将小数点后的某些数字截断而不取四舍五入

const toFixed = (n, fixed) => `${n}`.match(new RegExp(`^-?\d+(?:.\d{0,${fixed}})?`))[0]
toFixed(10.255, 2) // 10.25

四舍五入

当你需要将小数点后的某些数字截断，并取四舍五入

const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`)
round(10.255, 2) // 10.26

补零

当你需要在一个数字num不足len位数的时候前面补零操作

const replenishZero = (num, len, zero = 0) => num.toString().padStart(len, zero)
replenishZero(8, 2) // 08

对象

删除无效属性

当你需要删除一个对象中的属性值为null或undefined的所有属性

const removeNullUndefined = (obj) => Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {});

removeNullUndefined({name: '', age: undefined, sex: null}) // { name: '' }

反转对象键值

当你需要将对象的键值对交换

const invert = (obj) => Object.keys(obj).reduce((res, k) => Object.assign(res, { [obj[k]]: k }), {})
invert({name: 'jack'}) // {jack: 'name'}

字符串转对象

当你需要将一串字符串比如’{name: “jack”}'转换成对象时，直接使用JSON.parse将会报错。

const strParse = (str) => JSON.parse(str.replace(/(\w+)\s*:/g, (_, p1) => `"${p1}":`).replace(/\'/g, "\""))

strParse('{name: "jack"}')

其他

比较两个对象

当你需要比较两个对象，js的等于只能判断对象的地址是否相同，当地址不相同的时候无法判断两个对象的键值对是否一致。

const isEqual = (...objects) => objects.every(obj => JSON.stringify(obj) === JSON.stringify(objects[0]))
isEqual({name: 'jack'}, {name: 'jack'}) // true
isEqual({name: 'jack'}, {name: 'jack1'}, {name: 'jack'}) // false

随机颜色生成

当你需要获取一个随机颜色

const getRandomColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`
getRandomColor() // '#4c2fd7'

颜色格式转换

当你需要将16进制的颜色转换成rgb

const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => `#${r}${r}${g}${g}${b}${b}`).substring(1).match(/.{2}/g).map((x) => parseInt(x, 16));
hexToRgb('#00ffff'); // [0, 255, 255]
hexToRgb('#0ff'); // [0, 255, 255]

获取随机ip

当你需要生成一个ip地址

const randomIp = () =>
    Array(4)
        .fill(0)
        .map((_, i) => Math.floor(Math.random() * 255) + (i === 0 ? 1 : 0))
        .join('.');

uuid

当你需要生成一个id

const uuid = (a) => (a ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16) : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid))
uuid()

获取cookie

当你需要将cookie转换成对象

const getCookie = () => document.cookie
    .split(';')
    .map((item) => item.split('='))
    .reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {})
getCookie()

强制等待

当你需要等待一段时间，但又不想写在setTimeout函数中，造成回调地狱

const sleep = async (t) => new Promise((resolve) => setTimeout(resolve, t));
sleep(2000).then(() => {console.log('time')});