JavaScript 数组常用方法😾

994 阅读5分钟

整理和分享一些数组中常用到的方法


大纲:

  1. 如何清空数组
  2. 如何将数组转换为字符串
  3. 如何将数组转换为指定格式字符串
  4. 如何将两个数组拼接为一个数组
  5. 如何对数组汇总的内容进行反转
  6. 如何截取数组中指定范围内容
  7. 如何查找元素在数组中的位置
  8. 如何判断数组中是否包含某个元素
  9. 如何把字符串转换为数组

如何清空数组

arr = []

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

arr.length = 0

    let arr = [1,2,3,4,5];
    arr.length = 0;
    console.log(arr);   //[]

arr.splice(0,arr.length)

    let arr = [1,2,3,4,5];
    arr.splice(0,arr.length);
    console.log(arr);   //[]

上面三种方法都可以清空数组,并且改变原数组


如何将数组转换为字符串

arr.toString()

    let arr = [1,2,3,4,5];
    let str = arr.toString();
    console.log(arr);   //[1,2,3,4,5]
    console.log(str);   //1,2,3,4,5

str = arr + ''

    let arr = [1,2,3,4,5];
    let str = arr + '';
    console.log(arr);   //[1,2,3,4,5]
    console.log(str);   //1,2,3,4,5

str = arr.join();

    let arr = [1,2,3,4,5];
    let str = arr.join();   // join 如果不传参数,默认使用 逗号(,)
    console.log(arr);   //[1,2,3,4,5]
    console.log(str);   //1,2,3,4,5

上面三种方法都可以把数组转换为字符串 并且 不改变原数组,而是返回一个新的字符串


如何将数组转换为指定格式字符串

arr.join()

    let arr = [1,2,3,4,5];
    let str = arr.join(); // join 如果不传参数,默认使用 逗号(,)
    console.log(arr);   //[1,2,3,4,5]
    console.log(str);   //1,2,3,4,5

arr.join("-")

    let arr = [1,2,3,4,5];
    let str = arr.join("-"); 
    console.log(arr);   //[1,2,3,4,5]
    console.log(str);   //1-2-3-4-5

join方法,会把数组转换为字符串, 如果不传参,那么则会默认使用逗号(,),如果传参,那么就会根据传参符号作为分隔符,并且 不改变原数组


如何将两个数组拼接为一个数组

arr1.concat(arr2)

    let arr1 = [1,3,5,7];
    let arr2 = [2,4,6,8];
    console.log(arr1);  //[1,3,5,7]
    console.log(arr2);  //[2,4,6,8]
    let res = arr1.concat(arr2);
    console.log(res);   //[1, 3, 5, 7, 2, 4, 6, 8]

res = [...arr1,...arr2]

    let arr1 = [1,3,5,7];
    let arr2 = [2,4,6,8];
    console.log(arr1);  //[1,3,5,7]
    console.log(arr2);  //[2,4,6,8]
    let res = [...arr1,...arr2];    //es6拓展运算符
    console.log(res);   //[1, 3, 5, 7, 2, 4, 6, 8]

拓展运算符注意点:
扩展运算符在解构赋值中(等号的左边)表示将剩余的数据打包成一个新的数组
扩展运算符在等号右边, 那么表示将数组中所有的数据解开, 放到所在的位置

以上两种方式都可以把两个数组拼接成一个数组,并且不会修改原本的数组,而是返回一个新的数组


如何对数组汇总的内容进行反转

arr.reverse()

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

把数组进行反转,会改变原数组


如何截取数组中指定范围内容

arr.slice(1, 3)

    let arr = [1, 3, 5, 7, 9];
    let res = arr.slice(1, 3);
    console.log(arr);   //[1, 3, 5, 7, 9]
    console.log(res);   //[3, 5];

slice注意点:
slice是包头不包尾的一个方法,意思就是他截取的时候,他只包含参数1,而不包含参数2;
slice 参数1 = 开始位置
slice 参数2 = 结束位置
slice 不改变原数组,而且会返回一个新数组


如何查找元素在数组中的位置

arr.indexOf()

如果indexOf查找到元素

    let arr = [1, 3, 5, 7, 9];
    let res = arr.indexOf(3);
    console.log(res);   //[1] 返回下标

如果indexOf没有查找到元素

    let arr = [1, 3, 5, 7, 9];
    let res = arr.indexOf(0);
    console.log(res);   //[-1] 返回下标

如果数组中有两个一样的数据,我想查找第二个(默认从左至右查找,找到就返回)

    let arr = [1, 3, 5, 7, 9, 3];
    let res = arr.indexOf(3);
    console.log(res);   //[1] 返回下标

而如果我一定要使用indexOf查找到第二个,那么则需要用到indexOf的第二个参数

    let arr = [1, 3, 5, 7, 9, 3];
    let res = arr.indexOf(3,2);
    console.log(res);   //[5] 返回下标

indexOf 注意点 :
indexOf 参数 :
indexOf 参数1 = 需要查找的元素
indexOf 参数1 = 从第几个下标开始找起
indexOf 返回值 :
indexOf 如果找到了元素 = 返回找到元素的下标
indexOf 如果没有找到元素 = 返回 - 1


arr.lastIndexOf()

    let arr = [1, 3, 5, 7, 9];
    let res = arr.lastIndexOf(3);
    console.log(res);   //[1] 返回下标

lastIndexOf 使用方法和注意点是indexOf一样 ,唯一区别就是:
indexOf 是从左往右开始查找
lastIndexOf 是从右往左开始查找


如何判断数组中是否包含某个元素

indexOf 和 lastIndexOf

    let arr = [1, 3, 5, 7, 9];
    let res = arr.indexOf(3);
    console.log(res);   // 1
    let arr = [1, 3, 5, 7, 9];
    let res = arr.lastIndexOf(3);
    console.log(res);   // 1
    let arr = [1, 3, 5, 7, 9];
    let res = arr.indexOf(0);
    console.log(res);    //-1
    let arr = [1, 3, 5, 7, 9];
    let res = arr.lastIndexOf(0);
    console.log(res);   //-1

使用 indexOflastIndexOf,查找数组,如果有该元素就返回 下标, 如果没有该元素就返回 -1

arr.includes()

    let arr = [1, 3, 5, 7, 9];
    let res = arr.includes(1);
    console.log(res);  //true
    let arr = [1, 3, 5, 7, 9];
    let res = arr.includes(0);
    console.log(res);  //fasle

使用 arr.includes()进行查找数组中是否有这个元素,如果有 ,返回true,如果没有.返回false


如何把字符串转换为数组

split()

    let str = "1,3,5,7,9";
    let arr = str.split(",");
    console.log(arr); //["1", "3", "5", "7", "9"]

split方法和join方法正好是相反的,split是把字符串转数组,join是把数组转字符串,两种方法都是通过参数来进行分割


去我个人博客逛逛?