JavaScript 操作数组和对象方法
splice
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
语法: arr.splice(index, arrlength, item1, item2, item3,…itemx)
参数
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
arrlength 必需。要删除的数组中元素的数量。如果设置为 0，则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目。
该方法返回值 是被删除或添加的项目
<div id="app">
<!--
声明一个数组 移除数组中所有的元素
splice 向数组中添加或删除元素
-->
<p>{
{
arr}}</p>
<button @click="removeArr">移除数组中所有的元素</button>
<button @click="removeArrIndex">移除数组前三个元素</button>
<button @click="addArr">添加回来</button>
</div>
<script>
const APP = {
data() {
return {
msg: 'hello Vue3.0！',
todo: {
name: 'Tom'
},
arr: ['1', '2', '3', '4', '5', '6']
}
},
methods: {
removeArr() {
this.arr.splice(0, this.arr.length)
console.log(this.arr.splice(0, this.arr.length))
},
removeArrIndex(){
this.arr.splice(0, 3);
},
addArr() {
this.arr.splice(0, 0, '1', '2', '3', '4', '5', '6');
}
}
};
const app = Vue.createApp(APP);
app.component('todo-item', {
props: ['todo'],
template: `<li>{
{todo.name}}</li>`
});
app.mount('#app');
</script>
注意 ：splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。
concat
concat() 方法用于连接两个或多个数组
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法 arr.concat( arr2, arr3, arrx …)
arr: ['1', '2', '3', '4', '5', '6'],
arr2: ['Tom', 'Jerry', 'speike']
arrConcat () {
this.concatArr = this.arr.concat(this.arr2)
// [ "1", "2", "3", "4", "5", "6", "Tom", "Jerry", "speike" ]
返回值需要一个变量来接收
}
join
join() 通过指定字符对数据进行分割，返回字符串。
语法: arr.join( 分割符 )
arr: ['1', '2', '3', '4', '5', '6']
arrJoin() {
this.joinArr = this.arr.join('-');
// 1-2-3-4-5-6
返回值需要一个变量来接收
}
pop
porp( ) 删除数组的最后一个对象，返回该删除元素的值
arr: ['1', '2', '3', '4', '5', '6'],
arrPop(){
this.popArr = this.arr.pop();
// 6
会改变原数组, 且返回被删除的元素
}
push
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
语法: array.push(newObject1,newObject2,…);
arr: ['1', '2', '3', '4', '5', '6']
arrPush(){
this.pushArr = this.arr.push(1);
// 7 返回值是追加后数组的长度 length
}
shift
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
语法: arr.shift( ))
arr: ['1', '2', '3', '4', '5', '6']
arrShift(){
this.arrShift = this.arr.shift();
// [ "2", "3", "4", "5", "6" ]
}
slice
slice() 方法可从已有的数组中返回选定的元素 , 该操作不会修改原数组的数据
语法: arr.slice(start, end)
参数
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
arr: ['1', '2', '3', '4', '5', '6'],
sliceShift() {
this.sliceArr = this.arr.slice(0, 5)
}
sort
sort() 方法用于对数组的元素进行排序, 按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
语法: arr.sort( fn )
参数 fn 可选 必须是函数
在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：
var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort()); // ["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort()); // [13, 24, 3, 51]
console.log(arr2); // [13, 24, 3, 51](原数组被改变)
为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [3, 13, 24, 51]
也相当于这样
function compare(a,b){
return a-b;
}
如果需要通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可：
function compare(value1, value2) {
if (value1 > value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
arr2 = [13, 24, 51, 3];
console.log(arr2.sort(compare)); // [51, 24, 13, 3]
reverse
reverse()：反转数组项的顺序
var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)
indexOf() lastIndexOf()
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。
这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回1。在比较第一个参数与数组中的每一项时，会使用全等操作符
var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1
forEach()
forEach() 对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。
var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
map()
map() ：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
实际使用中其实类似于forEach() 方法
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]
map() 方法与 forEach() 方法对比
相同点
都是循环遍历数组中的每一项
每一次执行匿名函数都支持三个参数，数组中的当前项item，当前项的索引index，原始数组input
匿名函数中的this都是指window
匿名函数中的this都是指window只能遍历数组
只能遍历数组
关于forEach
没有返回值
arr[].forEach(function(value,index,array){
xxxxx
})
-
参数：value数组中的当前项，index当前项的索引，array原始数组；
-
数组中有几项，那么传递进去的匿名回调函数就需要执行几次
-
理论上这个方式是没有返回值的，只是遍历数组中的每一项，不对原来数组进行修改，但是可以自己通过数组的索引来修改原来的数组
示例:
let arr = [ 1, 2, 3, 4, 5 ];
let res = arr.forEach((item,index)=>{
item[index] = item * 10;
});
console.log(res) // undefined;
console.log(arr); // 原数组改变 [100,340,570,430,760];
关于map()
有返回值
arr.map(function(value,index,array){
xxx
return xxx
});
- 参数：value数组中的当前项，index当前项的索引，array原始数组
- 区别：map的回调函数中支持return返回值，return出来的数据，相当于把数组中的这一项拷贝出了一份
示例
var array = [10,34,57,43,76];
var res = array.map(function (item,index,input) {
return item*10;
})
console.log(res); // [100,340,570,430,760];
console.log(array); // 原数组不会改变
filter()
filter()：“过滤”数组，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]
every()
every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
return x < 10;
});
console.log(arr2); //true
var arr3 = arr.every(function(x) {
return x < 3;
});
console.log(arr3); // false
some()
some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); // rue
var arr3 = arr.some(function(x) {
return x < 1;
});
console.log(arr3); // false