一、对象字面量的增强写法
即可以在Vue外部定义变量，在创建vue实例时可以直接使用。
<body>
<div id="app">
{{name}}
</div>
<script src="..\vue.js"></script>
<script>
// const不可以修改对象的指向，但可以改变对象内部属性的指向
const name = 'hang';
const age = 18;
const heigh = 120;
const app = new Vue({
el: '#app',
data:{
// 属性的增强写法
name,
heigh,
age
},
methods:{
run(){
console.log('我在跑')
}
}
})
console.log(app);
</script>
</body>
二、js高阶函数的使用
2.1箭头函数
(一般在需要传递函数作为参数时使用)
- 当箭头函数不需要或者需要多个参数时，就使用()代表参数部分
let f = () => 5 - 当箭头函数里不需要参数并且需要写多行代码时，函数体像正常函数一样
const f = (){ console.log('1'); console.log(2); return ‘aa’; }
注意点:
正常函数体内的this对象就是定义时所在的对象。 箭头函数体内的this对象则是使用时的对象
2.2filter函数
对数组的每个元素进行过滤
const nums = [10,20,30,40]
let new_nums = [];
new_nums = nums.filter(function(n){
return n > 20 // 必须是返回boolean
})
console.log(new_nums) // Array [ 30, 40 ]
//箭头函数表示法
num = nums.filter(n => n>20)
console.log(num) // Array [ 30, 40 ]
2.3map函数
对数组的每个元素进行操作
new_nums = nums.map(function(n){
return n*2
})
console.log(new_nums) // Array(4) [ 20, 40, 60, 80 ]
//箭头函数表示法
num = nums.map(n => n*2)
console.log(num) // Array(4) [ 20, 40, 60, 80 ]
2.4reduce函数
对数组每个元素进行相加或其他操作
//previous:上一次返回的值 n:数组的每一个元素 0表示给previous赋初始值
new_nums = nums.reduce(function(previous,n){
return previous + n
},0)
console.log(new_nums) // 100
//箭头函数表示法
num = nums.reduce((previous,n) => previous + n,1)
console.log(num) // 101
