【vue】splice、shift 、pop、unshift、push、reverse、sort、slice、concat、join、indexOf等常用方法

数组的常用方法中可以分为会改变数组与不会改变原数组的二类

1、会改变原数组的常用方法

①、splice方法有三个参数，可以对数组分别进行 增、 删 、改 操作  solice(x,y,z) 三个参数，会改变原数组

当进行增加操作，三个参数分别表示的意思：
x：从  0  开始数的数组下标
y:  进行增加操作时，y参数只能为 0 ，如果为其他数字时，进行的操作就变为 ‘改’
z:  要添加的 值

        

 // 对原数组进行 增加 操作
 let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
 let oldArr = newArr.splice(0, 0, '我们')
 console.log('原数组:', newArr) // ['我们','大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
 console.log('修改后数组:', oldArr) // []

 当进行删除操作，就不需要三个参数
x：从  0  开始数的数组下标
y:  删除的元素个数

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
let oldArr = newArr.splice(3, 2)
console.log('原数组:', newArr) //['大', '家', '都', '仔', '靓', '女', '!']
console.log('修改后数组:', oldArr) //['是', '靓']

当进行修改操作，三个参数分别表示的意思：
x：从  0  开始数的数组下标
y:  去除数组中 元素的个数，然后再添加第三个参数的值
z:  修改的 值

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
let oldArr = newArr.splice(3, 1, '叫')
console.log('原数组:', newArr) //['大', '家', '都', '叫', '靓', '仔', '靓', '女', '!']
console.log('修改后数组:', oldArr) //['是']

②、shift 方法删除数组的第一个 元素，会改变原数组

删除数组的第一个元素，返回被删除的元素；如果数组为空，则返回undefined；

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
let oldArr = newArr.shift()
console.log(newArr) //['家', '都', '是', '靓', '仔', '靓', '女', '!']
console.log(oldArr) // 大

③、pop方法删除数组的最后一个元素，会改变原数组

删除数组的最后一个元素，返回被删除的元素；如果数组为空，则返回undefined；

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
let oldArr = newArr.pop()
console.log(newArr) //['大', '家', '都', '是', '靓', '仔', '靓', '女']
console.log(oldArr) // !

④、unshift方法在数组头部添加一项，会改变原数组

在数组的头部添加一项，返回添加后的数组长度

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
let oldArr = newArr.unshift('我们')
console.log(newArr) //['我们', '大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
console.log(oldArr) //10

⑤、push方法在数组尾部添加一项，会改变原数组

在数组的尾部添加一项，返回添加后的数组长度

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
let oldArr = newArr.push('我们')
console.log(newArr) //['大', '家', '都', '是', '靓', '仔', '靓', '女', '!', '我们']
console.log(oldArr) //10

⑥、reverse方法将数组顺序颠倒，并返回一个新数组，会改变原数组。

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
let oldArr = newArr.reverse()
console.log(newArr) //['!', '女', '靓', '仔', '靓', '是', '都', '家', '大']
console.log(oldArr) //['!', '女', '靓', '仔', '靓', '是', '都', '家', '大']

⑦、sort方法将数组进行排序，按照第一个数组从小到大排序，会改变原数组。

排序并不会完全按照从小到大排序，而是第一个数字的从小到大排序

let newArr = ['5', '7', '3', '1', '6', '4', '9', '12', '4']
let oldArr = newArr.sort()
console.log(newArr) //['1', '12', '3', '4', '4', '5', '6', '7', '9']
console.log(oldArr) //['1', '12', '3', '4', '4', '5', '6', '7', '9']

 2、不会改变原数组的常用方法。

①、slice方法将数组进行切割，不会改变原数组

slice(x,y) 若x<y，则返回空数组，x:开始下标 ，y:结束下标。包括下标x不包括下标y（区间：左闭右开）；切割下标x->y 区间的元素，包括x

若x，y为负数时，则表示切割倒数第x个元素 ---- 倒数第y个元素。

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
console.log(newArr.slice(1, 3)) //['家', '都']
console.log(newArr.slice(-3, -1)) //['靓', '女']

②、concat() 合并二个或多个数组，不会改变原数组，返回一个新数组。

let arr1 = ['a', 'b', 'c', 'd'];
let arr2 = ['e', 'f']
console.log(arr1.concat(arr2)) // ['a', 'b', 'c', 'd', 'e', 'f']

③、join()将一个数组的所有元素连接成一个字符串并返回这个字符串，如果数组只有一个元素，返回这个元素。

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
console.log(newArr.join('')) //大家都是靓仔靓女!
console.log(newArr.join(',')) //大,家,都,是,靓,仔,靓,女,!

④、indexOf() 查找数组的元素，若找到了则返回第一次该元素的下标，没有找到就返回 -1

let newArr = ['大', '家', '都', '是', '靓', '仔', '靓', '女', '!']
console.log(newArr.indexOf('都')) // 2
console.log(newArr.indexOf('靓仔')) // -1