Vue学习记录day04：js高级函数（filter/map/reduce）的使用、v-model的使用

js高级函数（filter/map/reduce）

 编程范式： 命令式编程/声明式编程
 编程范式： 面向对象编程(第一公民：对象)/函数式编程(第一公民：函数)  
 编程范式详情可查看：https://www.cnblogs.com/sirkevin/p/8283110.html

1. 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);

   

2. 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)

   

3. 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的使用

1. v-model的基本使用

   
   
   
     
     
   
   
   
       
     {
         {message}}
   
   
   
   
   
   

2. v-model的原理

   
   
   
     
     
   
   
   
     
     
   
     
     
   {
         {message}}
   
   
   
   
   
   

3. v-model结合radio类型

   
   
   
     
     
   
   
   
     
       男
     
     
       女
     
     
   您选择的性别是：{
         {sex}}
   
   
   
   
   
   

    

4. v-model结合checkbox类型

   
   
   
     
     
   
   
   
     
       是否同意
     
     
   你选择的是：{
         {isAgree}}
     下一步
   
     
     篮球
     足球
     美女
     羽毛球
     
   您的爱好是：{
         {hobbies}}
   
     
     
       {
         {item}}
     
   
   
   
   
   
   

    

5. v-model结合select类型

   
   
   
     
     
   
   
   
     
     
       西瓜
       苹果
       香蕉
       哈密瓜
     
     
   您选择的水果是:{
         {fruit}}
   
     
     
       西瓜
       苹果
       香蕉
       哈密瓜
     
     
   您选择的水果是:{
         {fruits}}
   
   
   
   
   
   
   

    

6. v-model修饰符的使用

   
   
   
     
     
   
   
   
     
     
     
   {
         {message}}
   
     
     
     
   {
         {age}} --- {
         {typeof age}}
   
     
     
     
   您输入的名字：{
         {name}}