一、数组的增删操作(直接改变原数组)
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 = [2,3,4,5,6,7];
结构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