vue检测数组更新的几个方法
检测数组更新
方法
-
-
pop()： 删除数组中的最后一个元素
-
shift(): 删除数组中的第一个元素
-
unshift(): 在数组最前面添加元素
-
splice作用：删除元素，插入元素，替换元素
-
sort() 排序
-
代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="../js/vue.js">script>
head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in letters">{{item}}li>
ul>
<button @click="btnClick">按钮button>
div>
<script>
const vm = new Vue({
el: '#app',
data: {
letters: ['A','B','C','D','E']
},
methods: {
btnClick() {
// 1.push方法
// this.letters.push('aaaa')
// this.letters.push('aaa','bbb','ccc')
// 2.pop()： 删除数组中的最后一个元素
// this.letters.pop();
// 3.shift(): 删除数组中的第一个元素
// this.letters.shift();
// 4.unshift(): 在数组最前面添加元素
// this.letters.unshift()
// this.letters.unshift('aaa','bbb','ccc')
// 5.splice作用：删除元素，插入元素，替换元素
// 删除元素：第二个参数传入你要删除几个元素(如果没有传，就删除后面所有的元素)
// 替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
// 插入元素：第二个参数，传入0，并且后面跟上要插入的元素
// splice(start)
// const start = 2
// this.letters.splice(start, this.letters.length-start)
// this.letters.splice(1, 3,'m','n','l')
// this.letters.splice(1, 3)
// this.letters.splice(1, 0,'a','b','v')
// 6.sort() 排序
// this.letters.sort()
// 7.reverse() 反转
// this.letters.reverse()
// 注意.通过索引值修改数组中的元素，不建议，因为这个不是响应式的
// this.letters[0] = 'bbbb'
this.letters.splice(0, 1, 'aaa') // 建议用splice
// Vue.set(this.letters,0,'aaa')
}
},
})
script>
body>
html>
编程范式
-
-
命令式编程
-
声明式编程
-
-
也可以分为
-
面向对象编程(第一公民：对象)
-
filter函数的使用
true: 当返回true时，函数内部会自动将这次回调的n加入到新的数组中
false:当返回false时，函数内部会过滤掉这次的n
const nums = [10,20,111,222,444,40,50]
?
// 1.filter函数的使用
let newNums = nums.filter(function(n) {
return n<100
})
console.log(newNums)
map函数的使用
// 2.map函数的使用
let new2Nums = newNums.map(function(n) {
return n * 2
})
console.log(new2Nums)
reduce函数的使用
//3.reduce函数的使用
let total = new2Nums.reduce(function(preValue,n){
return preValue+n
},0)
console.log(total)
代码：
需求：将数组中小于100的数乘以2后，求和
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="../js/vue.js">script>
head>
<body>
<div id="app">
div>
<script>
const nums = [10,20,111,222,444,40,50]
// 1.filter函数的使用
let newNums = nums.filter(function(n) {
return n<100
})
console.log(newNums)
// 2.map函数的使用
let new2Nums = newNums.map(function(n) {
return n * 2
})
console.log(new2Nums)
//3.reduce函数的使用
let total = new2Nums.reduce(function(preValue,n){
return preValue+n
},0)
console.log(total)
// 函数式编程
let total2 = nums.filter(function(n){
return n<100
}).map(function(n) {
return n*2
}).reduce(function(preValue,n){
return preValue + n
},0)
console.log(total2)
//lambel表达式
let sumNums = nums.filter(n => n<100).map(n => n*2).reduce((a,b)=>(a+b))
console.log(sumNums)
script>
body>
html>