数组的方法及属性

灰太狼 2023-01-02 02:18 144阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  1.数组的创建方式
 *  2.数组长度length
 *  3.toString() 数组转化数组值(逗号隔开)的字符串 ,数组转化为字符串(逗号分割)
 *  4.join() 数组转化数组值的字符串 ,可以指定分割 数组转化为字符串(指定分割)
 *  5.unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
 *  6.shift()删除并返回数组的第一个元素。
 *  7.push() 向数组的末尾添加一个或更多元素，并返回新的长度。
 *  7.pop()删除数组的最后一个元素并返回删除的元素。
 *  8.concat() 连接两个或更多的数组，并返回结果。
 *  9.entries() 返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
 *  10.splice(删除的位置,删除的个数,添加的新元素)
 *  11.slice(开始截取的位置,截取到的位置(不包含最后一个元素)) 截取数组中的内容
 *  12.sort()排序 reverse()翻转排序
 *  12.循环遍历 for forEach map
 *  13.筛选数组 filter() every() some()
 *  14.模糊查询 indexOf() includes()
 *  15.flat()用于将嵌套的数组“拉平”，变成一维的数组。
 *  16.reduce() 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
 *  17.find() findIndex()

--------------------

# 1.数组的创建方式 #

var arr = new Array('1','2','3'); //第一种
     var arr2 = ['1','2','3','hha']; //第二种
     console.log(arr);  
     console.log(arr2);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

# 2.数组长度length #

var arr2 = ['1','2','3','hha']; //第二种
    console.log(arr2.length)  4
    
    获得数组最后的一个元素 arr[arr2.length -1] 'hha'

# 3.toString() 数组转化数组值(逗号隔开)的字符串 ,数组转化为字符串(逗号分割) #

console.log(arr2.toString()) //1,2,3,hha

# 4.join() 数组转化数组值的字符串 ,可以指定分割 数组转化为字符串(指定分割) #

console.log(arr2.join("--")) //1--2--3--hha
     //注意:字符串方法split("--") 以-分割的数组,例如"1--2--3" =>[1,2,3]

# 5.unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 #

arr2.unshift('4')

![在这里插入图片描述][20210104110849946.png]

# 6.shift()删除并返回数组的第一个元素。 #

arr2.shift()

![在这里插入图片描述][20210104111102408.png]

# 7.push() 向数组的末尾添加一个或更多元素，并返回新的长度。 #

arr2.push("4","5")

![在这里插入图片描述][20210104111215778.png]

# 7.pop()删除数组的最后一个元素并返回删除的元素。 #

arr2.pop()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]

# 8.concat() 连接两个或更多的数组，并返回结果。 #

var arr3 = arr.concat(arr2)

![在这里插入图片描述][20210104111548376.png]

# 9.entries() 返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。 #

迭代对象中数组的索引值作为 key， 数组元素作为 value。

# 10.splice(删除的位置,删除的个数,添加的新元素) #

注意：这种方法会改变原始数组。

var arr2 = ['1','2','3','hha']; //第二种
    arr2.splice(1,1,'ooxixi');
    console.log(arr2); //["1", "ooxixi", "3", "hha"]

![在这里插入图片描述][2021010411242851.png]

# 11.slice(开始截取的位置,截取到的位置(不包含最后一个元素)) 截取数组中的内容 #

arr2.slice(1,2); //不会改变数组
      console.log(arr2.slice(1,2)); 
      console.log(arr2);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]

# 12.sort()排序 reverse()翻转排序 #

var arr3 =[1,2,3,4,9,10,20,30,8,7];
     console.log(arr3.sort());  //[1, 10, 2, 20, 3, 30, 4, 7, 8, 9]
     console.log(arr3.reverse()); //[9, 8, 7, 4, 30, 3, 20, 2, 10, 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]

# 12.循环遍历 for forEach map #

# 13.筛选数组 filter() every() some() #

filter() 过滤(返回过滤后的数组)  
every() 每一项都返回true ,否则返回false  
some() 只要有一个满足就返回true ,全部不满足返回false

// filter() 过滤(返回过滤后的数组) 
     var arr5 =[10,26,3,4,5,25];
     var a6 = arr6.filter(function(item,index){ 
       return item >20
      })
    console.log(a6); //[26, 25]
    
     // every() 每一项都返回true ,否则返回false
       var a6 = arr6.every(function(item,index){ 
            return item >20
      })
      console.log(a6); //false(要求每一项满足才会返回true)
    
      //some() 只要有一个满足就返回true ,全部不满足返回false
        var a6 = arr6.some(function(item,index){ 
            return item >20
        })
      console.log(a6); //true(只要有一个满足就返回true ,全部不满足返回false)

# 14.模糊查询 indexOf() includes() #

indexOf() 搜索数组中的元素，并返回它所在的位置。返回位置  
includes() 判断一个数组是否包含一个指定的值。 返回true或者false

var arr7 = ['apple','helo','hi','gx','lala']
    arr7.indexOf('aoole'); //-1 没匹配到返回-1
    arr7.indexOf('a'); // -1
    arr7.indexOf('apple'); // 0
    
    arr7.includes('aoole'); //false
    arr7.includes('a'); //false
    arr7.includes('apple'); //true

# 15.flat()用于将嵌套的数组“拉平”，变成一维的数组。 #

[1, 2, [3, 4, 6],[7, 8]].flat(); //[1, 2, 3, 4, 6, 7, 8]
        //该方法返回一个新数组，对原数据没有影响。
        var arr = [1, 2, [3, 4, 6],[7, 8]];
        var a = arr.flat();
        console.log(arr); //[1, 2, [3, 4, 6],[7, 8]];
        console.log(a); // [1, 2, 3, 4, 6, 7, 8]
    
        //默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
        //flat()的参数为2，表示要“拉平”两层的嵌套数组
        [1, 2, [3, [4, 6]],[7, 8]].flat(2);//[1, 2, 3, 4, 6, 7, 8]
        [1, 2, [3, [4, [6]]],[7, 8]].flat(2); //[1, 2, 3, 4, [6], 7, 8]
    
        //如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。
        [1,2,[3,4,[5,[6,[7,[8]]]]]].flat(Infinity); //[1, 2, 3, 4, 5, 6, 7, 8]

# 16.reduce() 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 #

var arr8 = [65, 44, 12, 4];
    //total表示持续累加的,开始默认是第二个参数就是下面的0,
    //curItem 表示当前元素
    arr8.reduce((total,curItem)=>{ 
      return total + curItem;  //125
    },0)

# 17.find() findIndex() #

find()用于找出第一个符合条件的数组成员。它的参数是一个回调函数,，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。  
findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

var arr = [3,4,7,9];
    var a = arr.find(function(item,index,arr){  //用于找出第一个符合条件的数组成员
            return item >5
        });
    console.log(a);  //7
    var a2 = arr.findIndex(function(item,index,arr){  //返回第一个符合条件的数组成员的位置
            return item >5
        });
    console.log(a2);   //2

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221120/45ad0bd892474380a6abad241acd5bce.png
[20210104110849946.png]: /images/20221120/fdfc21126fd342c89b2e8f02b54b39fd.png
[20210104111102408.png]: /images/20221120/761070a8f5ba4001a0ef11885bbb3c52.png
[20210104111215778.png]: /images/20221120/eb39e7f0848d4c4aa6312be851e7229a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 1]: /images/20221120/3c2f6035e96942538a6f166267aca1c5.png
[20210104111548376.png]: /images/20221120/acffd535f97340c4b4ccd139f4a768dd.png
[2021010411242851.png]: /images/20221120/8a95ade62d444005b249aaa12588487b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 2]: /images/20221120/8b85731be2d346dcb85428e653700ab0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70 3]: /images/20221120/ec7f341e3c1b43fe966646d8305e7ff1.png