Array数组方法总结

179 阅读6分钟

一、数组的增删操作(直接改变原数组)

1、push /pʊʃ/

1、作用:该方法可以在数组的最后面,添加一个或者多个元素
2、结构: arr.push(值)
3、返回值:返回的是添加元素后数组的长度.

2、unshift /unʃɪft/

1、作用:该方法可以在数组的最前面,添加一个或者几个元素
2、结构: arr.unshift(值)
3、返回值: 返回的是添加元素后数组的长度

3、pop /pɒp/

1、作用:该方法可以在数组的最后面,删除一个元素
2、结构: arr.pop(值)
3、返回值:返回的是刚才删除的元素.

4、shift /ʃɪft/

1、作用:该方法可以在数组的最前面,删除一个元素
2、结构: arr.shift(值)
3、返回值: 返回的是刚才删除的元素.

二、数组的拼接(原数组不受影响)

1、扩展运算符(...)

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// ...arr1  => 1,2,3
// ...arr2  => 4,5,6

let arr3 = [...arr1, ...arr2];
console.log("arr3: ", arr3); // Array(6), [1, 2, 3, 4, 5, 6]

2、扩展运算符 + push /pʊʃ/

let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];

// 将ary2 追加到ary1中
ary1.push(...ary2);
console.log("ary1: ", ary1);  // Array(6), [1, 2, 3, 4, 5, 6]

// 如果不使用拓展运算符,是直接把后一个元素原封不动的添加到第一个数组的后面
ary1.push(ary2);
console.log("ary1: ", ary1);  // Array(4), [ 1, 2, 3, [4, 5, 6] ]

3、concat/kɒnkæt/ 拼接

1、作用:该方法可以把两个数组里的元素拼接成一个新的数组
2、返回值: 返回拼接后的新数组

一:数组默认展开
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = arr1.concat(arr2);//arr = [1,2,3,4,5,6];

二:对象默认不展开
const arr1 = [1]
const arr2 = [3, 4]
const arr3 = { a: 1, b: 2} 
const arr4 = arr1.concat(arr2, arr3)
console.log(arr4) // [1, 3, 4, {a:1, b:2}]

该方法和push的区别: push是直接把后一个元素原封不动的添加到第一个数组的后面;

arr1.push(arr2);//arr1 = [1,2,3,[4,5,6]];

三、join 和 split (数组<==>字符串)

1、join /dʒɔɪn/

1、作用:该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。
2、返回值:返回一个新的字符串

//将数组用 - 符号连接起来
let arr = [1,2,3,4,5];
let str = arr.join('-');
console.log(str)//str = 1-2-3-4-5;

2、split/splɪt/

1、作用:该方法是用指定的分隔符,将字符串分割成数组。
2、返回值:返回一个新的数组

let str = wqz-ttj;
let arr = str.split('-');
console.log(arr);// arr=['wqz','ttj'];

3、toString /tustrɪŋ/方法

1、作用:把数组转换为(逗号分隔)的字符串
2、当数组用于字符串环境时,JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下,需要显式地调用该方法。

var fruits = [1, 2, "Apple", "Mango"];
//转换为字符串输出
console.log(fruits.toString())
//结果 1,2,Apple,Mango

四、数组的翻转和排序(改变数组)

1、reverse /rɪˈvɜːs/ 翻转数组

结构:arr.reserse()

2、sort /sɔːt/ 数组排序

作用:该方法可以对数组进行排序

let arr = [1,3,5,2,4,23,122,34];
//没有参数:时按照首字符的先后排序
arr.sort()//arr=[1,122,2,23,3,34,4,5];
//有参数
arr.sort(function(a,b){
	return a-b;//从小到大排序
	return b-a;//从大到小排序
})

五、slice、splice

1、slice /slaɪs/ 截取

1、作用:该方法可以从数组中截取指定的字段,返回出来
2、返回值:返回截取出来的字段,放到新的数组中,不改变原数组\

结构1:arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end

let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(0,3)//newArr = [0,1,2];

结构2:arr.slice(start) ;从start下标开始截取,一直到最后

let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [234567];

结构3:arr.slice( ) ;全部截取

let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice()//newArr = [0,1,2,3,4,5,6,7];

2、splice /splaɪs/

1、作用:删除或增加元素(任意在任何位置,直接改变原数组,没有返回值)
结构1: arr.splice(start,deletedCount) 纯删除
从start下标开始,删除几个

结构2: arr.splice(start,deletedCount,item) 替换
从start下标开始,删除几个,并在该位置添加item

结构3: arr.splice(start,0,item) 纯添加
从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动

let arr = [1,2,6,7,8];
arr.splice(2,0,3,4,5);//arr = [1,2,3,4,5,6,7,8];

六、查找元素在数组中出现的位置

1、indexOf

该方法用来查找元素在数组中第一次出现的位置

结构: arr.indexOf(元素)

特殊用法:

(1) arr.indexOf (ele,fromIndex),从fromIndex这个下标开始,元素第一次出现的位置

用来判断元素是否存在于数组中!

if (arr.indexOf(ele) === -1){//说明元素不存在!!
	console.log('元素不存在!)
} else {
	console.log(' 元素存在! ')
}

2、find

1、作用:查找符合条件的第一个数组元素,调用格式应该是使用数组对象来调用,该方法接收一个回调函数callback,如:array.find(callback)
2、这个方法比较适合用来 判断数组内是否包含某种条件的值的元素。

var array = [1,4,6,7,9,11,13];

//需求: 查找大于10的第一个数
function callback(elem){
  return elem > 10;
}
var dayu10 = array.find(callback);
console.log(dayu10); // 11
如果找不到,返回undefined
查找json数组内包含某个值的对象。如下:
var array = [ {name:'xxa',age: 15}, {name:'xxb',age:18} ];
var xx = array.find(elem => elem.name === 'xxa');
console.log(xx); // {name:'xxa',age: 15}

3、findIndex

1、作用:查找符合条件的第一个数组元素的下标index,调用格式应该是使用数组对象来调用,该方法接收一个回调函数callback,如:array.find(callback)\

var array = [1,4,6,7,9,11,13];
//需求: 查找大于10的第一个数
function callback(elem){
  return elem > 10;
}
var dayu10index = array.findIndex(callback);
console.log(dayu10index); // 5
如果找不到,返回-1,这点类似字符串查找的indexOf或者正则表达式的search,
总而言之,无论什么查找方法,找不到就是-1.

4、includes

1、作用:判断 数据x 是否存在于数组arrayObject中,如果存在,返回值为true;不存在,返回值为false。

var arr = [1,2,3,4];
conlose.log(arr.includes(2));
//输出:true
console.log(arr.includes(22));
//输出:false

七、字符串和数组通用的方法

1、str.indexOf()

判断字符串中是否包含指定字符,如果包含则返回该字符索引的位置(查找到了立即返回),如果不包含则返回-1

let str = 'hello world';
console.log(str.indexOf('world')) //6
console.log(str.indexOf('fire')) //-1

2、str.includes()

判断字符串中是否包含指定字符,包含则返回true,不包含则返回false

let str = 'hello world';
console.log(str.includes('hello')) //true
console.log(str.includes('fire')) //flase

3、str.slice(beginIndex,endIndex)

此方法用来提取一个字符串,并返回一个新的字符串
参数:1)beginIndex,表示从该索引处开始提取字符串的字符(包括),如果为负数则从后开始计算
2)endIndex,表示从该索引处结束提取字符串(不包括),如果省略则一直提取到字符串末尾,如果为负数从后开始计算

let str = 'hello world';
console.log(str.slice(6)) //'world'
console.log(str.slice(-5,-3)) //'wo'

八、实例介绍

// 流程名称的处理
if(this.paramsForm.title.indexOf("_") != -1){
    this.paramsForm.title = this.paramsForm.title.split("_")[0];
}
如:处理前:资金流转项目_项目申诉 -> 处理后:资金流转项目
解释:
如果查找到 paramsForm.title 的 _ 元素中存在,则使用 _ 元素作为分隔符,
则将字符串分割成数组中的两个元素,即"资金流转项目_项目申诉" -> ["资金流转项目","项目申诉"],
并把数组中下标为 0 的元素-"资金流转项目",重新赋值给 this.paramsForm.title