JS中的Array数组方法小整理

ゞ浴缸里的玫瑰 2022-12-13 04:58 193阅读 0赞

## join ##

数组专为字符串

var arr = [1,2,3];
    arr.join(); //"1,2,3"

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

## reverse ##

数组逆序(会影响原数组)

var arr = [1,2,3];
    arr.reverse(); //[3,2,1]
    arr; //[3,2,1]

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

## sort ##

按字符串排序(会影响原数组)

var arr = ["a","d","c","b"]
    arr.sort() //["a","b","c","d"]
    
    arr = [13,24,51,3];
    arr.sort() //[13,24,3,51]
    arr. //[13,24,3,51]
    只比较第一位
    
    如果希望升序或者降序排列需要给 sort 传入比较参数
    arr.sort(function(a,b) { 
    	return a - b;
    }) //[3,13,24,51]

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

## concat ##

合并数组(不影响原数组)

var arr = [1,2,3];
    arr.concat(4,5) //[1,2,3,4,5]
    arr; //[1,2,3]
    
    arr.concat([10,11],13) //[1,2,3,10,11,13]

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

## slice ##

返回部分数组

var arr = [1,2,3,4,5];
    arr.slice(1,3)  //左闭右开区间 [2,3]
    arr.slice(1) //去掉第一个到最后 [2,3,4,5]
    arr.slice(1,-1) //去掉第一个和最后一个 [2,3,4]
    arr.slice(-4,-3) //感觉没这么用的,记起来容易混乱不考虑

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

## splice ##

数组拼接(对原数组有影响)

var arr = [1,2,3,4,5];
    arr.splice(2) // [3,4,5] 切掉从索引 2 的元素开始到最后的部分
    arr // [1,2]
    
    var arr = [1,2,3,4,5];
    arr.splice(2,2) // [3,4] 切掉从索引 2 的元素开始 2 个元素
    arr // [1,2,5]
    
    var arr = [1,2,3,4,5];
    arr.splice(1,1,'a','b')  // 返回删除的元素[2]
    arr // [1,"a","b",3,4,5]

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

## forEach ##

数组遍历

var arr = [1,2,3,4];
    arr.forEach(function(x,index,a) { 
    	console.log(x + '|' + index + '|' + (a===arr))
    })
    
    // 元素 a 在每次遍历的时候都一样, 都指向数组本身
    // 1|0|true
    // 2|1|true
    // 3|2|true
    // 4|3|true

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

## map ##

数组映射(不改变原数组)  
比如想给数组中每一个元素做一个转换

var arr =[1,2,3];
    arr.map(function() { 
    	return x + 10
    }) //[11,12,13]
    arr; //[1,2,3]
    
    把一个函数作为参数传入 map
    该函数在每次遍历元素的时候调用

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

## filter ##

数组过滤(不改变原数组)

var arr = [1,2,3,4,5,6,7,8,9,10];
    arr.filter(function(x,index) { 
    	return index % 3 === 0 || x >= 8;
    }) // [1,4,7,8,9,10]
    arr //[1,2,3,4,5,6,7,8,9,10]

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

## every & some ##

数组判断

判断数组中每一项元素是否符合条件
    var arr = [1,2,3,4,5];
    arr.every(function(x) { 
    	return x < 10;
    }) //true
    arr.every(function(x) { 
    	return x < 3;
    }) //false
    
    ---------------------------------
    判断数组中任意一项元素是否符合条件
    var arr = [1,2,3,4,5];
    arr.some(function(x) { 
    	return x ==== 3;
    }) //true
    arr.some(function(x) { 
    	return x === 100;
    }) //false

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

## reduce & reduceRight ##

把数组聚合成某种结果(不改变原数组)

var arr = [1,2,3];
    var sum = arr.reduce(function(x,y) { 
    	return x + y
    },0) //6
    arr //[1,2,3]
    
    有点麻烦 暂时不怎么用

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

## indexOf & lastIndexOf ##

数组检索

var arr = [1,2,3,2,1]
    arr.indexOf(2);  //1 查找值为 2 的元素,结果在索引 1
    arr.indexOf(99); //-1 查找值为 99 的元素, 没有找到返回 -1
    arr.indexOf(1,1) //4 查找值为 1 的元素从索引 1 开始查找返回 索引 4
    arr.lastIndexOf(2) //3 查找值为 2 的元素从右向左查找返回结果在索引 3

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

## isArray ##

判断是否为数组  
注意这里是 Array.isArray是 Array 构造器对象上的属性  
还可以用

> \[\] instanceof Array; //true

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

## 数组 VS 一般对象 ##

> 相同点:  
> 数组也是对象,所以它也可以继承. 比如刚才很多方法都是从 Array.prototype 上继承下来  
> Array.prototype 的原型是 Object.prototype, 所以 toString, hasOwnproperty 等也可以使用  
> 也可以通过修改原型链上的属性  
> 数组是对象, 对象不一定是数组  
> 也可以通过 array.x = 1, array y = 2, 这样来添加属性

> 不同点:  
> 数组有 length 属性  
> 因为浏览器引擎的优化, 所以按索引访问数组常常比访问一般对象属性明显迅速  
> 数组对象继承 Array.prototype 上的大量数组操作方法, 一般对象没有 join, concat 等等这些方法

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

## 字符串 VS 数组 ##

字符串可以看做一个类数组,  
比如:

var str = "hello world";
    str.charAt(0);  //"h"
    str[1] // e
    说明字符串有 length 属性来表示长度, 也有索引
    
    Array.prototype.join.call(str,"_");  // "h_e_l_l_o__w_o_r_l_d"
    通过字符串的 prototype 上的 join 方法, 然后通过 call 方法把字符串传进来