Article Directory
foreword
In the work, the data in the array is often processed, but there are many methods of the array, and it is often forgotten what a method is called and how to use it, so here is a special record of how to use the commonly used array.
It should be noted that I wrote this based on the Vue framework. If you use native JS or other frameworks, you need to pay attention to the formatting issues.
will change the original array
pop
Removes the last element of the array and returns the removed element.
- grammar
array.pop()
- the code
<script>
export default {
data(){
return{
data:[1,2,3,4,5,6,7,8,9,10],
}
},
mounted(){
console.log('修改前:'+this.data)
let newData = this.data.pop()
console.log('修改后:'+newData);
console.log('修改后:'+this.data);
}
}
</script>
- Effect
push
Adds one or more elements to the end of the array and returns the new length.
- grammar
array.push(item1, item2, …, itemX)
- the code
<script>
export default {
data(){
return{
data:[1,2,3,4,5,6,7,8,9,10],
}
},
mounted(){
console.log('修改前:'+this.data)
let newData = this.data.push('77')
console.log('修改后:'+this.data);
console.log('修改后返回的值:'+newData);
}
}
</script>
- Effect
shift
Remove and return the first element of the array.
- grammar
array.shift()
- the code
<script>
export default {
data(){
return{
data:[1,2,3,4,5,6,7,8,9,10],
}
},
mounted(){
console.log('修改前:'+this.data)
let newData = this.data.shift()
console.log('修改后:'+this.data);
console.log('修改后返回的值:'+newData);
}
}
</script>
- Effect
unshift
Adds one or more elements to the beginning of the array and returns the new length.
- grammar
array.unshift(item1,item2, …, itemX)
- the code
<script>
export default {
data(){
return{
data:[1,2,3,4,5,6,7,8,9,10],
}
},
mounted(){
console.log('修改前:'+this.data)
let newData = this.data.unshift('0')
console.log('修改后:'+this.data);
console.log('修改后返回的值:'+newData);
}
}
</script>
- Effect
reverse
Reverses the order of the elements of an array.
- grammar
array.reverse()
- the code
<script>
export default {
data(){
return{
data:[1,2,3,4,5,6,7,8,9,10],
}
},
mounted(){
console.log('修改前:'+this.data)
this.data.reverse()
console.log('修改后:'+this.data);
}
}
- Effect
sort
Sorts the elements of an array.
- grammar
array.sort(sortfunction)
- the code
<script>
export default {
data(){
return{
data:[5,3,6,1,7,8,2,9,4],
}
},
mounted(){
console.log('修改前:'+this.data)
this.data.sort()
console.log('修改后:'+this.data);
}
}
</script>
- Effect
splice
Used to insert, delete or replace elements of the array.
- grammar
array.splice(index,howmany,item1,…,itemX)
- the code
<script>
export default {
data(){
return{
data:[1,2,3,4,5,6,7,8,9,10],
}
},
mounted(){
console.log('修改前:'+this.data)
this.data.splice(1,3) //删除下标1至3
console.log('删除下标1至3:'+this.data);
this.data = [1,2,3,4,5,6,7,8,9,10]
this.data.splice(1,0,'a') //在下标1插入a
console.log('在下标1插入a:'+this.data);
this.data = [1,2,3,4,5,6,7,8,9,10]
this.data.splice(1,2,'a','b') //在下标1至2替换为'a','b'
console.log('在下标1至2替换为a,b:'+this.data);
}
}
</script>
- Effect
does not change the original array
concat
Concatenates two or more arrays and returns the result.
- grammar
string.concat(string1, string2, …, stringX)
- the code
<script>
export default {
data(){
return{
data:[1,2,3,4,5,6,7,8,9,10],
data2:['a','b','c','d','e','f','g','h','i','j'],
}
},
mounted(){
console.log('修改前(data)：',this.data);
console.log('修改前(data2)：',this.data2);
let newData = this.data.concat(this.data2)
console.log('修改后:'+newData);
}
}
</script>
- Effect
every
Checks whether each element of the array element meets the condition.
- grammar
array.every(function(currentValue,index,arr), thisValue)
- the code
<script>
export default {
data(){
return{
data:[200,50,300,400,500]
}
},
mounted(){
let newData = this.data.every((item) => {
return item > 10
})
let newData2 = this.data.every((item,index,arr) => {
console.log(index); //index可以当做第一个不符合验证的下标
console.log(arr); //当前数组
return item > 100
})
console.log(newData);
console.log(newData2);
}
}
</script>
- Effect
some
Checks whether any element in the array element meets the specified condition.
- grammar
array.some(function(currentValue,index,arr),thisValue)
- the code
<script>
export default {
data(){
return{
data:[200,50,300,400,500]
}
},
mounted(){
let newData = this.data.some((item,index,arr) => {
console.log(index); //index可以当做符合验证的下标
console.log(arr); //当前数组
return item < 100
})
let newData2 = this.data.some((item) => {
return item > 100
})
console.log(newData);
console.log(newData2);
}
}
</script>
- Effect
filter
Detects array elements and returns an array of all elements that meet the criteria.
- grammar
array.filter(function(currentValue,index,arr), thisValue)
- the code
<script>
export default {
data(){
return{
data:[200,50,300,400,500]
}
},
mounted(){
let newData = this.data.filter((item,index,arr) => {
console.log(index); //当前下标
console.log(arr); //当前数组
return item < 100
})
let newData2 = this.data.filter((item) => {
return item > 100
})
console.log(newData);
console.log(newData2);
}
}
</script>
- Effect
indexOf
Searches for an element in an array and returns its position.
- grammar
string.indexOf(searchvalue,start)
- the code
<script>
export default {
data(){
return{
data:[200,50,300,400,500]
}
},
mounted(){
let newData = this.data.indexOf(300) //找第一个300的位置并返回下标
let newData2 = this.data.indexOf(100) //找第一个100的位置并返回下标，没找到则为-1
let newData3 = this.data.indexOf(300,3) //从下标为3开始找300，没找到为-1
console.log(newData);
console.log(newData2);
console.log(newData3);
}
}
</script>
- Effect
join
Put all the elements of the array into a string.
- grammar
array.join(separator)
- the code
<script>
export default {
data(){
return{
data:[],
data2:[200,50,300,400,500]
}
},
mounted(){
console.log('修改前:',this.data);
this.data = this.data2.join(',') //将data2赋值给data1并且以','隔开,注意会覆盖data中的内容
console.log('修改后:',this.data);
}
}
</script>
- Effect
Convert an array to a string and return the result.
- grammar
number.toString(radix)
- the code
<script>
export default {
data(){
return{
data:[200,50,300,400,500]
}
},
mounted(){
console.log('修改前:',this.data);
this.data = this.data.toString()
console.log('修改后:',this.data);
}
}
</script>
- Effect
lastIndexOf
Returns the position of the last occurrence of a specified string value, searching backwards and forwards at the specified position in a string.
- grammar
string.lastIndexOf(searchvalue,start)
- the code
<script>
export default {
data(){
return{
data:[200,50,300,400,500]
}
},
mounted(){
console.log('data:',this.data);
let num = this.data.lastIndexOf(50)
console.log('50最后出现的位置:',num);
let num2 = this.data.lastIndexOf(300,1) //下标为1的地方找，注意这里是从后往前找
console.log('300最后出现的位置:',num2);
let num3 = this.data.lastIndexOf(600)
console.log('600最后出现的位置:',num3); //没找到则返回-1
}
}
</script>
- Effect
map
Processes each element of the array with the specified function and returns the processed array.
- grammar
array.map(function(currentValue,index,arr), thisValue)
- the code
<script>
export default {
data(){
return{
data:[200,50,300,400,500]
}
},
mounted(){
let newData = this.data.map((item,index,arr) => {
console.log(index); //当前下标
console.log(arr); //当前数组
return item < 100
})
let newData2 = this.data.map((item) => {
return item > 100
})
console.log(newData);
console.log(newData2);
}
}
</script>
- Effect
slice
Select a portion of an array and return a new array.
- grammar
rray.slice(start, end)
- the code
<script>
export default {
data(){
return{
data:[200,50,300,400,500]
}
},
mounted(){
console.log('data:',this.data);
let num = this.data.slice(1,4)
console.log('截取第一个到第三个:',num);
let num2 = this.data.slice(-4,-1)
console.log('截取倒数第四个到倒数第二个:',num2);
let num3 = this.data.slice(-3)
console.log('截取倒数三个:',num3);
let num4 = this.data.slice(2)
console.log('截取第二个后面的全部:',num4);
}
}
</script>
- Effect
Returns the primitive value of the array object.
- grammar
number.valueOf()
- the code
<script>
export default {
data(){
return{
data:1
}
},
mounted(){
console.log(this.data);
let newData = this.data.valueOf()
console.log(newData);
}
}
</script>
- Effect
