js高级函数（filter/map/reduce）
编程范式： 命令式编程/声明式编程
编程范式： 面向对象编程(第一公民：对象)/函数式编程(第一公民：函数)
编程范式详情可查看：https://www.cnblogs.com/sirkevin/p/8283110.html-
filter
filter中的回调函数有一个要求：必须返回一个boolean值 true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中 false:当返回false时，函数内部会过滤掉这次的n#1.需求：取出所有小于一百的数字 const nums = [10,20,80,40,60,110]; let numbers = nums.filter(function (n) { return n<100 ? true:false; }); console.log(numbers); // ==== 或者 const nums = [10,20,80,40,60,110]; let numbers = nums.filter(n => n<100); console.log(numbers);
-
map
map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理的后值。 map()方法按照原始数组元素顺序依次处理元素。 map不会对空数组进行检测 map不会改变原始数组#2.需求：将数组中的数字进行转化：全部*2 const nums = [10, 20, 80, 40, 60, 110]; let numbers = nums.map(n => n * 2); console.log(numbers); // 或者 let numbers1 = nums.map(function (n) { return n * 2; }); console.log(numbers1)
-
reduce
reduce作用：对数组中所有的内容进行汇总
注意: reduce() 对于空数组是不会执行回调函数的。
语法：
arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
initialValue （作为第一次调用 callback 的第一个参数。）#3.需求：将所有里面的数字相加，得到最终的结果
const nums = [10, 20, 80, 40, 60, 110];
let number = nums.reduce((previousValue, currentValue) => {
return previousValue + currentValue;
}, 0);
console.log(number);
// 或者
let number1 = nums.reduce(function (previousValue, currentValue) {
return previousValue + currentValue;
}, 0);
console.log(number1);
实战训练：
const nums = [10, 20, 80, 40, 60, 110];
//需求：计算数组中元素小于100 乘以2 累加的和
let number = nums.filter(n => n < 100)
.map(n => n * 2)
.reduce(((previousValue, currentValue) => {
return previousValue + currentValue;
}), 0);
console.log(number);
Vue中v-model的使用
- v-model的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input type="text" v-model="message"> { {message}} </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message : '你好' } }) </script> </body> </html> - v-model的原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- <input type="text" v-model="message">--> <!--双向绑定原理： v-model其实是一个语法糖，它的背后本质上市包含两个操作： 1.v-bind绑定一个value属性 2.v-on指令给当前元素绑定input事件 --> <!-- <input type="text" :value="message" @input="valueChange">--> <input type="text" :value="message" @input="message = $event.target.value"> <h2>{ {message}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好啊' }, methods: { valueChange(event) { this.message = event.target.value; } } }) </script> </body> </html> - v-model结合radio类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label for="male"> <input type="radio" id="male" value="男" v-model="sex">男 </label> <label for="female"> <input type="radio" id="female" value="女" v-model="sex">女 </label> <h2>您选择的性别是：{ {sex}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', sex: '男' } }) </script> </body> </html> - v-model结合checkbox类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label for="isAgree"> <input type="checkbox" id="isAgree" v-model="isAgree">是否同意 </label> <h2>你选择的是：{ {isAgree}}</h2> <button :disabled="!isAgree">下一步</button> <!--2.checkbox多选框--> <input type="checkbox" value="篮球" v-model="hobbies">篮球 <input type="checkbox" value="足球" v-model="hobbies">足球 <input type="checkbox" value="美女" v-model="hobbies">美女 <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球 <h2>您的爱好是：{ {hobbies}}</h2> <!--值绑定：动态的给value赋值--> <label v-for="item in originHobbies" :for="item"> <input type="checkbox" :value="item" :id="item" v-model="hobbies">{ {item}} </label> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', sex: '男', isAgree: false, hobbies: [],//多选框 originHobbies: ['篮球', '足球', '乒乓球', '台球', '棒球'] } }) </script> </body> </html> - v-model结合select类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--1.选择一个--> <select name="abc" v-model="fruit"> <option value="西瓜" >西瓜</option> <option value="苹果" >苹果</option> <option value="香蕉" >香蕉</option> <option value="哈密瓜" >哈密瓜</option> </select> <h2>您选择的水果是:{ {fruit}}</h2> <!--2.选择多个--> <select name="abc" v-model="fruits" multiple> <option value="西瓜" >西瓜</option> <option value="苹果" >苹果</option> <option value="香蕉" >香蕉</option> <option value="哈密瓜" >哈密瓜</option> </select> <h2>您选择的水果是:{ {fruits}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', fruit: '香蕉', fruits: [] } }) </script> </body> </html> - v-model修饰符的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--1.修饰符:lazy 默认情况下，v-model默认是在input事件中同步输入框的数据的。 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。 lazy修饰符可以让数据在失去焦点或者回车时才会更新： --> <input type="text" v-model.lazy="message"> <h2>{ {message}}</h2> <!--2.修饰符：number--> <input type="number" v-model.number="age"> <h2>{ {age}} --- { {typeof age}}</h2> <!--3.修饰符：trim--> <input type="text" v-model.trim="name"> <h2>您输入的名字：{ {name}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: '你好', age: '', name: '' } }) </script> </body> </html>