JavaScript--Array-CSDN博客

本文链接：https://blog.csdn.net/m0_62946540/article/details/147855256

数组

学习方法看三部分

参数、返回值、是否会改变原来的变量

基础数组

Array.concat()合并数组

1、参数：要合并的数组可以传一个以上的参数

2、返回值：合并后的结果返回的是一个新数组

3、是否会改变原来的变量：不会

//Array.concat()方法，合并数组
        var arr = ['我的','名字','是','YH'];
        var arr1 = [1 , 2 , 3 , 4 , 5];
        var arr2 = [11 , 22 , 33];

        console.log(arr.concat(arr1));//['我的', '名字', '是', 'YH', 1, 2, 3, 4, 5]

        console.log(arr);//['我的', '名字', '是', 'YH']

        console.log(arr.concat(arr1,arr2));//['我的', '名字', '是', 'YH', 1, 2, 3, 4, 5, 11, 22, 33]

Array.indexOf()

1、参数：

两个参数

第一个参数代表，要找的元素

第二个参数代表，查找的起始下标

如果是负数，从末端开始计数，但是查找顺序还是从左到右

2、返回值：返回下标值，不存在会返回-1

3、是否会改变原来的变量：不会

//Array.indexOf()方法，查找数组对应内容的下标

        var arr = ['我的','名字','是','YH'];
        var plants = ['西红柿', '黄瓜', '芹菜', '豆角', '土豆','黄瓜'];

        console.log(arr.indexOf('名字'));//1

        console.log(arr.indexOf(' '));//-1

        console.log(plants.indexOf('黄瓜'));//1

        console.log(plants.indexOf('黄瓜',-6));//1

        console.log(plants.indexOf('黄瓜',2));//5

        console.log(plants.indexOf('黄瓜',-3));//5

Array.isArray()

1、参数：判断的对象

2、返回值：Boolean值

3、是否会改变原来的变量：不会

//Array.isArray()方法，判断是否是数组
        console.log(Array.isArray('123'));//false
        console.log(Array.isArray(123));//false
        console.log(Array.isArray([]));//true

Array.join()连接

1、参数：需要添加的分割符号

2、返回值：添加后的字符串

3、是否会改变原来的变量：不会

//Array.join()方法，数组元素之间添加分割符号进行连接
        var arr = ['我的','名字','是','YH'];
        var arr1 = [1 , 2 , 3 , 4 , 5];
        console.log(typeof(arr.join('')));//string
        console.log(arr.join(''));//我的名字是YH
        console.log(arr1.join('|'));//1|2|3|4|5
        console.log(arr1);//[1 , 2 , 3 , 4 , 5]

Array.pop()删除

1、参数：无

2、返回值：被删除的数组元素

3、是否会改变原来的变量：会

//Array.pop()方法，从数组的末端进行删除，只要执行了pop()就会进行删除
        var arr = ['我的','名字','是','YH'];

       arr.pop();

       console.log(arr);//['我的', '名字', '是']

       console.log(arr.pop());//是 

       console.log(arr);//['我的', '名字']

Array.push()添加

1、参数：需要添加的内容

2、返回值：数组的长度

3、是否会改变原来的变量：会

//Array.push()方法，从数组的末端进行添加
        var arr = ['我的','名字','是','YH'];
        var arr1 = [1 , 2 , 3 , 4 , 5];

        arr.push(arr1[0]);
        console.log(arr);//['我的', '名字', '是', 'YH', 1]

        arr.push('!');
        console.log(arr);//['我的', '名字', '是', 'YH', 1, '!']

        console.log(arr.push(arr1));//7,返回值是 数组的长度//Array.concat()方法，合并数组
        var arr = ['我的','名字','是','YH'];
        var arr1 = [1 , 2 , 3 , 4 , 5];
        var arr2 = [11 , 22 , 33];

        console.log(arr.concat(arr1));//['我的', '名字', '是', 'YH', 1, 2, 3, 4, 5]

        console.log(arr);//['我的', '名字', '是', 'YH']

        console.log(arr.concat(arr1,arr2));//['我的', '名字', '是', 'YH', 1, 2, 3, 4, 5, 11, 22, 33]

Array.shift()删除

1、参数：无

2、返回值：被删除的数组元素

3、是否会改变原来的变量：会

//Array.shift()方法，从数组的前端进行删除，只要执行了shift()就会进行删除
        var arr = ['我的','名字','是','YH'];

       arr.shift();

       console.log(arr);//['名字', '是', 'YH']

       console.log(arr.shift());//名字 

       console.log(arr);//['是', 'YH']

Array.unshift()添加

1、参数：需要添加的内容

2、返回值：数组的长度

3、是否会改变原来的变量：会

//Array.unshift()方法，从数组的前端进行添加
        var arr = ['我的','名字','是','YH'];
        var arr1 = [1 , 2 , 3 , 4 , 5];

        arr.unshift(arr1[0]);
        console.log(arr);//[1, '我的', '名字', '是', 'YH']

        arr.unshift(':');
        console.log(arr);//[':', 1, '我的', '名字', '是', 'YH']

        arr.unshift(arr1);
        console.log(arr);//[Array(5), ':', 1, '我的', '名字', '是', 'YH']
        
       // console.log(arr.unshift(arr1));//7,返回值是 数组的长度

Array.slice()切割

1、参数：

不管是正数还是负数，方向都是从左到右进行切割

正数：

切割从0开始计数

一个参数的情况下，保留头并且一直到最后部分

两个参数，“保留头，不要尾”

负数：

从末端开始切割，1开始计数

一个参数的情况下，保留头并且一直到最后部分

两个参数，“保留头，不要尾”

2、返回值：

“保留头，不要尾”的部分,并且是一个新数组（浅拷贝）

3、是否会改变原来的变量：

不会

//Array.slice()方法，切割数组，“保留头，不要尾”
        var arr = [1 , 2 , 3 , 4 , 5 , 6];

        
        console.log(arr.slice(0));//[1, 2, 3, 4, 5, 6]

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

        console.log(arr.slice(2));//[3, 4, 5, 6]

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

        console.log(arr.slice(2,4));//[3, 4]

        console.log(arr.slice());//[1, 2, 3, 4, 5, 6] 浅拷贝

        console.log(arr.slice(-2));//[5, 6]

        console.log(arr.slice(-5,-2));//[2, 3, 4]

进阶数组

数组的高级方法，会进行遍历，让每一个数组都进行对应的操作

Array.filter()过滤

1、参数：

current 元素

index 元素下标

array 数组

2、返回值：返回过滤掉之后的新数组有return返回，就要有接受的容器

3、是否会改变原来的数组：不会

//Array.filter() 过滤
       var arr = [1 , 2 , 3 , 4 , 5];
      
       var newArr = arr.filter(function(current,index,arr) {
        return current > 3;
       });

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

Array.forEach()添加

1、参数：callback(current,index,array)，[option指定this对象]

2、返回值：无

3、是否会改变原来的变量：会

// Array.forEach() 遍历数组
       var arr = [1,2,3,4];

       /*
        forEach()里面放的是函数，有遍历数组的作用
        里面三个参数，第一个是值，第二个是对应的下标，第三个是数组
       */
       arr.forEach(function(current,index,array){
        console.log(current,index,array);//[1, 2, 3, 4]
       });

       var obj ={
            name:"lisi",
            age:18
        }

       arr.forEach(function(){
		//this指向obj，对obj进行遍历
           console.log(this.name);//lisi
       },obj);

Array.map()

1、参数：

current 元素

index 元素下标

array 数组

2、返回值：返回一个新数组有return返回，就要有接受的容器

3、是否会改变原来的数组：不会

//Array.map() 让每一个数组元素进行对应的操作并返回
       var arr = [1 , 2 , 3 , 4 , 5];
       var arr1 = [3 , 4 , 5];

       var newArr = arr.map(function(current,index,arr) {
        return current*2;
       });

       console.log(arr);//[1, 2, 3, 4, 5] 不会改变原来的数组

       console.log(newArr);//[2, 4, 6, 8, 10]


       var kvArray = [
                        {key: 1, value: 10}, 
                        {key: 2, value: 20}, 
                        {key: 3, value: 30}];

        var newK = kvArray.map(function(current,index,arr) {
            var newArray = {};
           newArray[current['key']] = current['value'];
            return newArray;
        });

        console.log(newK);//[{1: 10}, {2: 20}, {3: 30}]

Array.reduce()叠加

1、参数：

accumulator 累计器可以设置初始值

current 元素

index 元素下标

array 数组

2、返回值：返回过滤掉之后的新数组有return返回，就要有接受的容器

3、是否会改变原来的数组：不会

//Array.reduce() 合并 叠加
      var arr = [1, 2, 3, 4, 5];

      var newArr = arr.reduce(function (acc, current, index, arr) {
        console.log(acc);
        return acc + current;
      }, 10);

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

      var str = "qwenrhtgfncgzhgnrertyuiytx";
      //字符串转换成数组
      var newStr = str.split("");
      console.log(newStr); //['q', 'w', 'e', 'n', 'r', 'h', 't', 'g', 'f', 'n', 'c', 'g', 'z', 'h', 'g', 'n', 'r', 'e', 'r', 't', 'y', 'u', 'i', 'y', 't', 'x']

      var count = newStr.reduce(function (acc, current, index, arr) {
        if (acc[current]) {
          acc[current]++;
        } else {
          acc[current] = 1;
        }

        return acc;
      }, {});

      console.log(count);

Array.sort()排序

1、参数：function

2、返回值：排序后结果

3、是否会改变原来的变量：会

// Array.sort() 给数组排序
        var arr = [100,5,3,4,9];
        const months = ['March', 'Jan', 'Feb', 'Dec'];

        //直接使用sort方法，什么都不加，会按照开头进行排序
        console.log(arr.sort());//[100, 3, 4, 5, 9]
        console.log(months.sort());//['Dec', 'Feb', 'Jan', 'March']

        //使用函数返回值，进行大小排序
        //从小变大
        arr.sort(function(a,b) {
            return a-b;
        });
        console.log(arr);//[3, 4, 5, 9, 100]

        //从大变小
        arr.sort(function(a,b) {
            return b-a;
        });
        console.log(arr);//[100, 9, 5, 4, 3]

        //返回值为0，不会改变排序
        arr.sort(function(a,b) {
            return 0;
        });
        console.log(arr);//[100, 9, 5, 4, 3]

        //返回值为-1,倒序
        arr.sort(function(a,b) {
            return -1;
        });
        console.log(arr);//[3, 4, 5, 9, 100]

Array.flat()降维

1、参数：

需要进行降维的次数

2、返回值：返回降维后的数组

3、是否会改变原来的数组：不会

//Array.flat() 展开嵌套的数组，对数组进行降维
       var arr = [1 , 2 , [3 , [1 , 9] , 8] , 5 , 6];//三维数组
      

       console.log(arr.flat());//[1, 2, 3, Array(2), 8, 5, 6]三维==>二维
       console.log(arr.flat(1));//[1, 2, 3, Array(2), 8, 5, 6]三维==>二维
       console.log(arr.flat(2));//[1, 2, 3, 1, 9, 8, 5, 6]三维==>一维
       console.log(arr);//[1, 2, Array(3), 5, 6]

Array.includes()

1、参数：

需要进行判断的内容

2、返回值：返回Boolean值

3、是否会改变原来的数组：不会

//Array.includes() 判断数组里面是否有这个元素
       var arr = [1 , 2 , 3 , 4 , 5 , 6];
             console.log(arr.includes(5));//true

       console.log(arr.includes(100));//false//Array.filter() 过滤
       var arr = [1 , 2 , 3 , 4 , 5];
      
       var newArr = arr.filter(function(current,index,arr) {
        return current > 3;
       });

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

Array.lastIndexOf()

1、参数：

要找的数组元素

2、返回值：返回从末端开始找到的对应的下标有return返回，就要有接受的容器

3、是否会改变原来的数组：不会

//Array.lastIndexOf() 从末端开始找下标
       var arr = [1 , 2 , 3 , 4 , 1, 3];      
       console.log(arr.lastIndexOf(1));//4

       //查找到重复的元素
     function duplicates() {
        var newArr = [];
       for (var i = 0,len = arr.length;i < len;i++) {
        if (arr.lastIndexOf(arr[i]) !== arr.indexOf(arr[i])&&newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i]);
       }
       }
       return newArr;
       }
       console.log(duplicates(arr));

Array.reverse()反向

1、参数：无

2、返回值：返回反向后的数组

3、是否会改变原来的数组：会

//Array.reverse() 将数组进行反向
       var arr = [1 , 2 , 3 , 4];
      
       console.log(arr.reverse());//[4, 3, 2, 1]

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

Array.some()和every()

1、参数：

需要删除的下标，从0开始

删除或者替换的个数

需要进行替换的字符串。可以有很多个字符串，用逗号,进行分割

2、返回值：返回删除的部分，删除是从下标开始

如果只设置了一个参数，那么就会从开始的下标进行删除，直到最后

如果设置两个参数，会根据下标和删除的个数进行删除

3、是否会改变原来的数组：会

/*
            判断一个数组是不是纯数字数组

            some 数组中至少有一项符合return的测试 如果有 返回true 如果没有 返回false ||

            every 每一项都通过return的条件 返回true 有一项不通过就返回false  &&

       */
       var arr = [1 , 2 , "3" , 4 , 5 , 6];
     
        var result1 = arr.some(function (current,index,arr) {
            return typeof current === 'number';
        });
      console.log(result1);//true

      var result2 = arr.every(function (current,index,arr) {
            return typeof current === 'number';
        });
      console.log(result2);//false

Array.splice()替换

1、参数：

需要删除的下标，从0开始

删除或者替换的个数

需要进行替换的字符串。可以有很多个字符串，用逗号,进行分割

2、返回值：返回删除的部分，删除是从下标开始

如果只设置了一个参数，那么就会从开始的下标进行删除，直到最后

如果设置两个参数，会根据下标和删除的个数进行删除

3、是否会改变原来的数组：会

//Array.splice() 在对应的地方进行删除或者替换
       var arr = [1 , 2 , 3 , 4 , 5 , 6];
      //设置一个参数
       console.log(arr.splice(1));//[2, 3, 4, 5, 6]

       console.log(arr);//[1]

       //设置两个参数
       arr = [1 , 2 , 3 , 4 , 5 , 6];

       console.log(arr.splice(1,2));//[2, 3]

       console.log(arr);//[1, 4, 5, 6]

       //设置三个参数
       arr = [1 , 2 , 3 , 4 , 5 , 6];

       console.log(arr.splice(1,2,'100','56'));//[2, 3]

       console.log(arr);//[1, '100', '56', 4, 5, 6]

       arr = ['a','b','c','d','e','f'];
       var eTargetIndex = 1,colliIndex = 3,colliEle = arr[1];
       arr.splice(eTargetIndex,1);

       console.log(arr);//['a', 'c', 'd', 'e', 'f']

       arr.splice(colliIndex,0,colliEle);

       console.log(arr);//['a', 'c', 'd', 'b', 'e', 'f']