js 数组常用方法

我不是女神ヾ 2021-11-02 00:48 585阅读 0赞

> 零碎知识点：  
> ① 当给子元素设置了绝对或者固定定位且父元素设置了`overflow:hidden`，若不给父元素设置高/宽，会出现子元素隐藏的现象  
> ② 火狐浏览器只有在页面加载完成后，才可以获取到offsetHeight

##### 一、 数组的常用方法 #####

###### 1. 定义数组 ######

> 1.  除数字外其余赋值都为新建分组的第一个值，且该分组的长度为1（eg:`var arr = new Array("{"id":1}")//arr的长度为1，且索引为0的元素为{"id":1}`）
> 2.  数组实际上继承于object类，故其类型为`object`类型。因此可以给数组的元素赋任意类型的值

<table> 
 <thead> 
  <tr> 
   <th>定义</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>var arr = new Array(1)</code></td> 
   <td>代表生成的arr数组的长度为1</td> 
  </tr> 
  <tr> 
   <td><code>var arr = new Array(1,2)</code></td> 
   <td>代表生成的arr数组的长度为2，且有两个元素</td> 
  </tr> 
  <tr> 
   <td><code>var arr = new Array("1")</code></td> 
   <td>代表生成的arr数组的长度为1，且有一个元素，该元素为"1"</td> 
  </tr> 
 </tbody> 
</table>

① ![在这里插入图片描述][20190812212658340.jpg]  
② ![在这里插入图片描述][20190812212812622.jpg]

###### 2. 合并数组:`arr.concat(arr2)`——>返回新数组，不改变原数组 ######

var a=[1,2,3,4]
    var b=["1","2","3"]
    a.concat(b);//结果为：[1,2,3,4,"1","2","3"]

###### 3. 数组的过滤：`arr.filter(function(val,index,arr){})`——>返回新数组，不改变原数组,有返回值，可对每个元素执行操作 ######

> ① 该方法的参数为一个回调函数，该方法执行的结果是回调函数筛选后的返回值拼凑起来的新数组。  
> ② 当回调函数的返回值为`index/val/arr`时，filter方法的执行结果都为相关val拼凑起来的新数组  
> ③ 如果在回调函数中没有进行条件筛选，若返回val/arr，则结果为数组本身，若返回index,则会过滤到索引0对应的数

/*对元素进行操作*/
    var arr = [1,2,3,4]
    function e(val,index,arr){ 
    	if(val%2==0){ 
    	return arr;//return index或return val
    }
    }
    /*也可通过arr[index]获取到val*/
    function e  (val,index,arr) { 
            if (arr[index] % 2 == 0) { 
                return val;//无论是返回val index还是arr，结果都为[2,4]
            }
    console.log(arr.filter(e));//上述三种返回结果都为[2,4]

/*不能对数组本身进行操作*/
    var a=[1,2,3,4]
    function e  (val,index,arr) { 
            arr[index] = -val;
            return arr；
        }
        console.log(a.filter(e));//结果依旧为arr本身:[1,2,3,4]
        console.log(a);//[-1.,-2,-3,-4]

###### 4. 数组的遍历:`arr.forEach(function(val,index,arr){})`——>无返回值，改变原数组，可在回调函数中对数组直接进行处理。、 ######

> 无论回调函数有没有返回值，打印出a.forEach的结果都为undefined

var a=[1,2,3,4]
     console.log(a.forEach(function (val, index, arr) { 
            arr[index] = -arr[index];
        }));
        console.log(a);//[-1,-2,-3,-4]

###### 5. 遍历数组，并映射成一个新的数组：`arr.map(function(val,index,arr){})`——>有返回值，是否改变原数组与回调函数对谁操作有关 ######

> ① map方法每次遍历都会得到一个值，而不是在遍历完arr后再赋值的  
> ② map方法的执行结果为回调函数每一次遍历所得值所组成得新数组。（如果返回index，则最终结果是由index组成得新数组，类似的，返回数组，结果是数组组成得新数组）  
> ③ map方法对各个元素进行操作，不改变数组  
> ④ map方法对数组进行操作，改变数组

var  a=[6,4,3,4];;
     var b = a.map(function(val,index,arr){ 
    	 arr[index] = -arr[index]
            return val;
    })
    console.log(b,a);//[6, 4, 3, 4] [-6, -4, -3, -4]

###### 6. 累加器：`arr.reduce(function(total,current,index){},default)`——>有返回值，对原数组不改变 ######

> ① total初始值为arr数组索引为0对应得值/default  
> ② current代表当前值，index代表当前索引（index和current是相配的）

console.log(b.reduce(function (totle, current, index) { 
            console.log(totle,current);
            return totle *= current;
        },3));//当给函数传入初始值时，total便为初始值，不再是数组索引0对应的值

###### reduce和map ######

> ① map函数是将传入的函数依次作用域序列的每个元素，每个元素都是独自被函数处理的  
> ② reduce函数是将传入的函数作用再序列的第一个元素得到结果后，把这个结果继续与下一个元素作用。

###### 7. 数组的截取：`arr.slice(startIndex,endIndex)`——>截取startIndex-endIndex-1,对原数组不影响 ######

var  a=[6,4,3,4];;
    console.log(a.slice(1, 3));//[4,3]
        console.log(a);//[6,4,3,4]

###### 8. 数组的截断:`arr.splice(startIndex,num)`——>从startIndex开始，截断num个元素，最终数组变为截断后其余元素组成的数组 ######

> splice方法的执行结果为截断部分组成的数组，与阶段后的原数组不同

var  a=[6,4,3,4];;
    	 console.log(a.splice(0, 3));//[6,3,4]
        console.log(a);//[4]

###### 9. 数组的追加：`arr.push(ele)`——>向后追加；`arr.unshift(ele)`——>向前追加 ######

> 返回结果为数组的长度

var  a=[6,4,3,4];;
    console.log(a.push(9);)//5
       console.log(a);//[6,4,3,4,9]
    a.unshift(2);
    console.log(a);//[2,6,4,3,4,9]

###### 10. 数组的删除：`arr.shift()`——>删除第一个元素；`arr.pop()`——>删除最后一个元素 ######

> 返回结果为删除的值

var  a=[6,4,3,4];;
    console.log(a.pop);//4
    console.log(a);//[6,4,3]
    a.shift();
    console.log(a);//[4,3]

###### 11. 翻转数组:`arr.reverse()` ——>对原数组有影响 ######

###### 12. 排序：`arr.sort(function(n1,n2)(return n1-n2))`=`arr.sort()`——>默认为从小到大，对原数组有影响 ######

> 从大到小排：`arr.sort(function(n1,n2){return n2-n1})`

var  a=[6,4,3,4];
    arr.sort();//[3,4,4,6]
    arr.sort(function(n1,n2{ return n2-n1}));//[6,4,4,3]

###### 13. 检测数组：`arr.some(function(val,inedx,arr){})`——>返回值为true/false ######

var b=[1,2,3,4]
     console.log(b.some(function (val, index, arr) { 
            return val == 1;
        }));//true

[20190812212658340.jpg]: /images/20211101/95ecc8e608cc4d8ba53f5b1bf41aa6ed.png
[20190812212812622.jpg]: /images/20211101/40e03bf4b9d849aeaf705369581a4024.png