vue中操作数组的相关方法

Posted 2021-06-08 水星记_

1，锁定数组的长度，让数组的长度变成只读 object.defineProperty(object, propertyname, descriptor)

object： 必须，要修改的属性的对象；
propertyname ：必须，属性名称；
descriptor：必须，属性描述符，他可以针对数据属性或访问器属性；
返回值：已修改的对象。

var num = [1, 2, 3] //定义一个数组num
Object.defineProperty(num, "length", {
     writable: false
}) //将数组的长度属性设为只读
num.length = 0 //将num的长度改为0
console.log(num.length); //打印结果：3

2、将数组合并成字符串（返回字符串） Array.join()

var num = [1, 2, 3];//定义一个数组num
var obj = num.join("");
console.log(num); //打印结果：[1, 2, 3],原数组不改变
console.log(obj); //打印结果：123,变成字符串

3、倒叙排列数组 Array.reverse()

var num = [1, 2, 3];//定义一个数组num
num.reverse();//通过reverse改变num数组的值
console.log(num); //打印结果：[321]

4、返回排序后的数组。如果数组包含 undefined，会被排到数组的尾部。如果不带参数的调用 sort() ，数组元素以字母表顺序排序 Array.sort()

var num = ["Banana", "Orange", "Apple", "Mango"];//定义一个数组num
num.sort();//利用sort方法改变排序方式
console.log(num);//打印结果：["Apple", "Banana", "Mango", "Orange"]

5、创建并返回一个新数组 Array.concat()

var a = [1, 2, 3];
var b = a.concat(4, 5);
var c = a.concat([4, 5]);
console.log(a); //打印结果：[1,2,3]
console.log(b); //打印结果：[1,2,3,4,5] 
console.log(c); //打印结果：[1,2,3,4,5]
// 复制数组
var a = [1, 2, 3];
var b = a.concat();
console.log(a); //打印结果：[1,2,3] 
console.log(b); //打印结果：[1,2,3]

6、返回指定数组的片段或者子数组，不会改变原数组 Array.slice()

var num = [1, 2, 3, 4, 5];
num.slice(0, 3); //打印结果：[1,2,3] 第一个参数是截取开始的位置（包括），第二个参数是截取结束的位置（不包括）           
num.slice(3); //打印结果：[4,5]             
num.slice(1, -1); //打印结果：[2,3,4] 负数表示倒数             
console.log(num); //打印结果：[1,2,3,4,5]

7、用来删除或插入元素，会修改原数组 Array.splice()

// 数组的起始位置为0
var num = [1, 2, 3, 4, 5, 6, 7, 8];//定义一个数组num
var count = num.splice(1, 2); //第一个参数是截取的起始位置（包括），第二个参数是截取的个数，之后的参数就是添加在元数组的新值             
console.log(num); //打印结果：[1, 4, 5, 6, 7, 8]             
console.log(count); //打印结果：[2, 3]

8、 push() 方法与 pop() 方法

// push()方法
var num = [1, 2, 3]; //定义一个数组num
var count = num.push("red", "green"); //通过push()方法将它们逐个添加到数组末尾，并返回修改后数组的长度
console.log(num); //打印结果：[1, 2, 3, "red", "green"]
console.log(count); //打印结果：5
// pop()方法
var count = num.pop(); //通过pop()方法取得最后一项并移除了,减小数组的length值，然后返回移除的项。
console.log(num); //打印结果：[1, 2]
console.log(count); //打印结果：3

9、 unshift() 方法与 shift() 方法

// unshift()方法
var num = ["张三", "李四", "王五"]; //定义一个数据num
var count = num.unshift("赵六", "小明"); //通过unshift方法将数组count添加到数组num的开头
console.log(count); //打印结果：5
console.log(num); //打印结果：["赵六", "小明", "张三", "李四", "王五"]

//shif()方法
var num = ["张三", "李四", "王五"]; //定义一个数组num
var count = num.shift(); //通过shift()方法将count数组的第一个元素从其中删除，并返回第一个元素的值
console.log(count); //输出结果：张三
console.log(num); //输出结果：["李四", "王五"]

10、 toString() 方法 和 toLocaleString() 方法

这两个方法都是可以把一个 Number 对象转换为一个字符串，并返回结果。不同在于当数字是四位数及以上时，有区别，区别看以下代码，当目标是标准时间格式时，用以上两种方法是有区别的，区别看以下代码。

// 正常情况下
var num = 123; //定义一个num
var count = num.toString(); //toString()方法
var obj = num.toLocaleString(); //toLocaleString()方法
console.log(count); //打印结果：123
console.log(obj); //打印结果：123

//超过4位数情况下
var num = 12345678; //定义一个num
var count = num.toString(); //toString()方法
var obj = num.toLocaleString(); //toLocaleString()方法会让数字三位三位一分隔，像我们有时候数字也会三位一个分号
console.log(count); //打印结果：12345678
console.log(obj); //打印结果：12,345,678

//标准时间格式
var num = new Date(); //定义一个时间
var count = num.toLocaleString(); //toLocaleString()方法
var obj = num.toString(); //toString()方法
console.log(count); //打印结果：Tue May 11 2021 15:10:24 GMT+0800 (中国标准时间)
console.log(obj); //打印结果：Tue May 11 2021 15:10:24 GMT+0800 (中国标准时间)

11、从头至尾遍历数组，为每个元素调用指定的函数 forEach()

var num = [1, 2, 3, 4, 5]; //定义一个数组num
var count = 0; //定义count为0
num.forEach(function (value) {
    count += value //通过forEach()方法从头至尾遍历数组，并加等于count
})
console.log(count); //打印结果 15

12、 和forEach()类似，调用数组的每个元素传递给指定函数，并返回一个数组，所以它和forEach()的区别在于，有一个返回值。不修改原数组，返回的数组长度和原数组相同 map()

var num = [1, 2, 3, 4, 5]; //定义一个数组num
var count = num.map(function (value) {
    return value + 1 //通过map()方法不修改原数组，返回的数组长度和原数组相同
})
console.log(count); //打印结果：[2, 3, 4, 5, 6]

13、返回的是调用数组的一个子集 filter()

var num = [1, 2, 3, 4, 5]; //定义一个数组num
var count = num.filter(function (value) {
    return value > 3 //通过filter()方法过滤出大于3的数字
})
console.log(count); //打印结果：[4, 5]

14、 every() 方法 和 some() 方法

every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。
some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

var arr = [1, 2, 3, 4, 5, 6]; //定义一个数组arr
// every()方法
console.log(arr.every(function (item, index, array) {
    console.log('item=' + item + ',index=' + index + ',array=' + array);
    return item > 3;
}));
//打印结果：
//item=1,index=0,array=1,2,3,4,5,6    false

// some()方法
console.log(arr.some(function (item, index, array) {
    console.log('item=' + item + ',index=' + index + ',array=' + array);
    return item > 3;
}));
//打印结果：
//item=1,index=0,array=1,2,3,4,5,6
//item=2,index=1,array=1,2,3,4,5,6
//item=3,index=2,array=1,2,3,4,5,6
//item=4,index=3,array=1,2,3,4,5,6
//true

15、 indexOf() 方法和 lastIndexOf() 方法

这两个方法都是用来搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引，如果没找到，则返回-1。
区别在于indexOf()从头至尾搜索，而后者则是反向搜索。

// //lastIndexOf()方法
var num = "1234567895"; //定义一个对象
var count = num.lastIndexOf("5"); //通过lastIndexOf()方法来找到 "5" 在数组num中最后出现的一次
console.log(count); //打印结果：9  输出结果意味着 "5" 元素在数组num中最后出现的一次为第 9 个位置

// indexOf()方法
var num = ["Banana", "Orange", "Apple", "Mango"];//定义一个数组num
var count = num.indexOf("Apple");//通过indexOf()方法查找数组中的 "Apple" 元素
console.log(count);//打印结果：2  输出结果意味着 "Apple" 元素位于数组中的第 3 个位置