网站导航
> 文章列表 > 20230412----重返学习-数组方法-vue2基础

20230412----重返学习-数组方法-vue2基础

网友: 文章列表 2024-03-21 22:35:29

20230412----重返学习-数组方法-vue2基础

day-048-forty-eight-20230412-数组方法-vue2基础

数组方法

数组的静态方法

  • 在Array()构造函数身上的方法

    console.dir(Array);//ƒ Array()

    • Array.from() 将类数组转为数组

      Array.from({0:'item0',1:'item1',2:'item2',length:3})//['item0', 'item1', 'item2']
Array.from({length:3})//[undefined, undefined, undefined]
Array.from({0:0,a:'itema',length:3})//[0, undefined, undefined]

    • Array.isArray() 判断是不是数组 是true 不是false

      let num = 100;
let arr1 = new Array();
let arr2 = [5];
console.log(arr1);//[]
console.log(Array.isArray(arr1));//true
console.log(Array.isArray(arr2));//true
console.log(Array.isArray(num));//false

    • Array.of()

      console.log(Array.of(1, 23, [12, 34]));//[1, 23, [12, 34]]

    • new Array() 构造函数

      • 传入一个数字，返回的是一个空槽数组，也叫稀疏数组。

        let arr = [6];
console.log(arr);//[6]
let arr1 = new Array(6,7);
console.log(arr1);//[6,7]
let arr2 = new Array(6);
console.log(arr2);//[空属性 × 6]

        • 空槽数组中的空槽不进行遍历，所以一般得要填充值之后才能

          let arr2 = new Array(6);
console.log(arr2);//[空属性 × 6]
//空属性数组不能循环，填充后数组可以循环
arr2.forEach((item) => {console.log("2222");
});
console.log(arr2.fill("a", 3, 6));//[空属性 × 3, 'a', 'a', 'a']//原来数组不能循环，填充后数组可以循环
//不写 默认填充 undefined
arr2.fill().forEach((item) => {console.log("111");
});

数组的静态属性

  • Array.length: 值为1，表示构造函数Array()的入参只有一个。
  • Array.name: 值为"Array"，表示构造函数Array()的名称为"Array"。

数组的私有属性

  • [].length 表示当前数组实例上有多少个元素
    • 索引下标，这个是数组实例上的元素才有，用它可以表示当前元素位于数组集合中的角标。

数组的公有方法

  • [].fill(value,startIndex,end) 数组填充

    • 形式参数默认值 [].fill(value=undefined,startIndex=0,end=this.length)

      • value: 要填充的值
      • startIndex: 开始填充的索引下标
      • end: 结束填充的位置，不包含自身
      let arr2 = new Array(6);
console.log(arr2);//[空属性 × 6]
console.log(arr2.fill("a", 3, 6));//[空属性 × 3, 'a', 'a', 'a']
console.log(arr2);//[空属性 × 6]//原来数组不能循环，填充后数组可以循环
//不写 默认填充 undefined
arr2.fill().forEach((item,index) => {console.log("111",item,index);
});

数组的公有迭代器公有方法

  • 迭代器方法，循环，共有9个

    • [].forEach(callback) 遍历数组

      • callback，默认为(item,index,array)=>{}
        • 被回调时的形参意义
          • item 当前循环到的数组元素
          • index 当前循环到的索引下标
          • array 当前处于循环的数组本身
        • 预期返回值: 未定义undefined，不需要返回值
      • 被回调时的返回值: 未定义undefined
      • 只有forEach没有return

    • [].map(callback) 遍历数组，返回一个回调函数返回值组成的新数组

      • callback，默认为(item,index,array)=>{}
        • 被回调时的形参意义
          • item 当前循环到的数组元素
          • index 当前循环到的索引下标
          • array 当前处于循环的数组本身
        • 被回调时的预期返回值: 任意类型的值
      • 返回值: 回调函数的预期返回值组成的新数组

    • [].filter(callback) 筛选，将满足条件的内容筛选出来，返回一个 新数组

      • callback，默认为(item,index,array)=>{}
        • 被回调时的形参意义
          • item 当前循环到的数组元素
          • index 当前循环到的索引下标
          • array 当前处于循环的数组本身
        • 被回调时的预期返回值: 布尔值
      • 返回值:

        • 回调函数的预期返回值为true时循环到的item值组成的新数组

        • 没有回调函数的预期返回值为true时，返回值是false

          let arr=[12,34,2,4,56,7,9];
let resultarr=arr.filter((item,index,arr)=>{return item>10;//条件
})
console.log(resultarr);//[12, 34, 56]

    • [].find(callback) 查找，将满足条件的第一个内容查找出来，返回结果 第一个内容

      • callback，默认为(item,index,array)=>{}
        • 被回调时的形参意义
          • item 当前循环到的数组元素
          • index 当前循环到的索引下标
          • array 当前处于循环的数组本身
        • 被回调时的预期返回值: 布尔值
      • 返回值:

        • 第一个回调函数的预期返回值为true时循环到的item值

        • 没有一个回调函数的预期返回值为true时就是undefined

          let arr = [12, 34, 2, 4, 56, 7, 9];
let resultarr = arr.find((item, index, arr) => {return item > 10; //条件
});
console.log(resultarr); //12

    • [].findIndex(callback) 查找，将满足条件的第一个内容索引下标查找出来，返回结果 (有)第一个内容索引下标, 没有就是-1

      • callback，默认为(item,index,array)=>{}
        • 被回调时的形参意义
          • item 当前循环到的数组元素
          • index 当前循环到的索引下标
          • array 当前处于循环的数组本身
        • 被回调时的预期返回值: 布尔值
      • 返回值:

        • 第一个回调函数的预期返回值为true时循环到的index索引下标

        • 没有一个回调函数的预期返回值为true时就是-1

          let arr=[12,34,2,4,56,7,9];
let resultarr=arr.findIndex((item,index,arr)=>{return item>10;//条件
})
console.log(resultarr);//0

    • [].every(callback) 必须每一个都满足条件，满足true，不满足false

      • callback，默认为(item,index,array)=>{}

        • 被回调时的形参意义
          • item 当前循环到的数组元素
          • index 当前循环到的索引下标
          • array 当前处于循环的数组本身
        • 被回调时的预期返回值: 布尔值

      • 返回值: 布尔值

        • 每一个被回调时的预期返回值都为true，就是true
        • 有一个被回调时的预期返回值为false，就是false
        let arr = [12, 34, 2, 4, 56, 7, 9];
let result = arr.every((item, index, arr) => {return item > 10; //条件
});
console.log(result);//false

    • [].some(callback) 只要有一个都满足条件，有一个满足就是true，所有都不满足就是false

      • callback，默认为(item,index,array)=>{}

        • 被回调时的形参意义
          • item 当前循环到的数组元素
          • index 当前循环到的索引下标
          • array 当前处于循环的数组本身
        • 被回调时的预期返回值: 布尔值

      • 返回值: 布尔值

        • 有一个被回调时的预期返回值为true，就是true
        • 每一个被回调时的预期返回值都为false，就是false
        let arr = [12, 34, 2, 4, 56, 7, 9];
let result = arr.some((item, index, arr) => {return item > 10; //条件
});
console.log(result);//true

    • [].reduce(callback,initialResult) 累加 从左向右计算，初始值initialResult可有可无

      • callback，默认为(result,item,index,arr)=>{}

        • 被回调时的形参意义
          • result 上一次循环的return值，即上一步运算的结果
            • 如果有初始值，result第一次的结果就是初始值,后面循环的结果，就是return运算的内容
            • 如果没有初始值，result第一次的结果就是数组的第一项(item就变成数组第二项,索引下标将从1开始),后面循环的结果，就是return运算的内容
          • item 当前循环到的数组元素
          • index 当前循环到的索引下标
          • array 当前处于循环的数组本身
        • 被回调时的预期返回值: 下一次运算的结果或函数最终的返回值

      • initialResult 初始值，视情况而定可有可无

      • 返回值：累计计算后的最终结果值，即最后一次循环的返回值

      • 一般用于实现累加，从左向右计算

        let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((result, item, index) => {console.log(result, item, index);// 100,1,0// 101,2,1// 103,3,2// 106,4,3// 110,5,4// 115return result + item; //上一步的结果
}, 100);
console.log(result); //115

        let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((result, item, index) => {console.log(result, item, index);//1,2,1//3,3,2//6,4,3//10,5,4//15return result + item;
});
console.log(result); //15

    • [].reduceRight(callback,initialResult) 累加 从左向右计算，初始值initialResult可有可无

      • callback，默认为(result,item,index,arr)=>{}

        • 被回调时的形参意义
          • result 上一次循环的return值，即上一步运算的结果
            • 如果有初始值，result倒数第一次的结果就是初始值,后面循环的结果，就是return运算的内容
            • 如果没有初始值，result倒数第一次的结果就是数组的倒数第一项(item就变成数组倒数第二项,索引下标将从this.length-1-1开始),后面循环的结果，就是return运算的内容
          • item 当前循环到的数组元素
          • index 当前循环到的索引下标
          • array 当前处于循环的数组本身
        • 被回调时的预期返回值: 下一次运算的结果或函数最终的返回值

      • initialResult 初始值，视情况而定可有可无

      • 返回值：累计计算后的最终结果值，即最后一次循环的返回值

      • 一般用于实现累加，从右向左计算

        let arr = [1, 2, 3, 4, 5];
let result = arr.reduceRight((result, item, index) => {console.log(result, item, index);//0,5,4return result + item;
}, 0);
console.log(result); //15

        let arr=[1,2,3,4,5];
let result=arr.reduceRight((result,item,index)=>{console.log(result,item,index);//5,4,3return  result+item;
})
console.log(result);//15

累加的场景-购物车总价

let arr = [{ price: 10, num: 3 },{ price: 20, num: 2 },{ price: 20, num: 1 },
];let result = arr.reduceRight((result, item) => {return result + item.price * item.num;
}, 0);
console.log(result); //90

vue2基础

设计模式

mvc

  • Model数据
  • Controller控制器
  • View视图
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O0lRobcZ-1681315099718)(./mvc软件架构模式.png)]

mvvm

  • Model数据 vue实例对象中的data
  • ViewModel视图模型 vue实例对象
  • View视图 template模板或DOM元素
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QNwzrjLm-1681315099720)(./mvvm软件架构模式.png)]
    mvvm模式：双向数据绑定
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body>vue2 mvvm模式 双向数据绑定 渐近式框架 vue vue-router vuex ...<!-- view视图  template模板代码 --><!-- 使用小胡子语法，展示数据 --><div id="app"><h1>{{msg}}</h1></div><script>// viewmodelvar vm = new Vue({//el:"#app",//将数据和视图关联//model 数据data: {msg: "hello",},}).$mount("#app"); //将数据和视图关联console.log(vm);console.log(vm.msg);</script></body>
</html>

渐近式框架

  • vue 核心，双向数据绑定
    • 基础模版，如div等
    • 围绕数据展开，操作数据，进而让vm去操作DOM元素
  • vuex 官方组件，全局数据
  • vue-router 官方组件，监控路由变动
  • vue-框架 第三方UI框架，内置常用的组件和统一的UI设计

常用写法

  1. {{}}可以做一些简单的逻辑运算
    • 刷新过快，网速慢的时候，会出现闪烁一下{{}}，再出数据的效果
      • 可以使用指令来处理
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><h1>{{msg}}</h1><h1>{{num.toFixed(2)}}</h1><h1>{{num+n}}</h1><h1>{{num>1000?"大数":"正常数"}}</h1></div><script>var vm = new Vue({el: "#app",data: {val: "aaa",msg: "<i>hello    你好</i>",num: 100,n: 200,},});</script></body>
</html>

方法

在配置项中的methods中设置

  • 方法中this指代的是vm这个实例
  • 在模板代码中通过@事件类型="事件名"进行绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>3</title><style></style></head><body><!-- view视图---模板代码 --><div id="app"><h1>{{msg}}</h1><button @click="toggle">切换</button><h1 v-show="flag">内容1</h1><h1 v-if="flag">内容2</h1><h1 v-if="num>=90">优秀</h1><h1 v-else-if="num>=60">合格</h1><h1 v-else>不合格</h1></div></body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var vm = new Vue({el: "#app", //将数据和视图关联//model 数据data: {msg: "hello",flag: true,num: 10,},methods: {toggle() {// console.log(`this.flag-->`, this.flag);this.flag = !this.flag;//this指的是当前所配置的vue实例对象vm。},},});// console.log(`vm.msg-->`, vm.msg);//vm可以访问Vue构造函数在进行配置时对应的data生成的响应式数据。
</script>

指令

  • 指令要结合标签一起使用
    • 可以把指令当成一个属性

  1. v-text 展示数据，不会出现闪烁的问题，会覆盖原来的内容

    • 渲染内容跟{{}}作用差不多

      <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><h1 v-text="msg">111</h1></div><script>var vm = new Vue({el: "#app",data: {msg: "<i>hello    你好</i>",},});</script></body>
</html>

  2. v-html 展示数据，不会有闪烁问题，会覆盖原来的内容

    • 能识别标签，一定要慎用。防止有人放script代码。

      <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><h1 v-html="msg">222</h1></div><script>var vm = new Vue({el: "#app",data: {msg: "<i>hello    你好</i>",},});</script></body>
</html>

  3. v-cloak 既能使用{{}}，也能解决闪烁问题，需要配合css

    [v-cloak]{display: none;
}

    <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>[v-cloak] {display: none;}</style></head><body><div id="app"><h1 v-cloak>{{msg}}</h1></div><script>var vm = new Vue({el: "#app",data: {msg: "<i>hello    你好</i>",},});</script></body>
</html>

  4. v-pre 内容是怎样的，就展示什么样子，不会进行编译

    • 使用了v-pre的标签里，里面的内容及变量都不会被编译
    <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><h1 v-pre>{{msg}}</h1></div><script>var vm = new Vue({el: "#app",data: {msg: "<i>hello    你好</i>",},});</script></body>
</html>

  5. v-model 双向数据绑定

    • input标签中代替的是value
    • 一般与表单元素结合一块使用
    <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><input type="text" v-model="val" /><h1>{{val}}</h1></div><script>var vm = new Vue({el: "#app",data: {val: "aaa",},});</script></body>
</html>

  6. v-once 只执行一次

    <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><input type="text" v-model="val" /><h1 v-once>{{val}}</h1></div><script>var vm = new Vue({el: "#app",data: {val: "aaa",},});</script></body>
</html>

  7. v-show 后面跟一个最终结果是boolean布尔类型的值，true显示，false隐藏

    • 底层原理是通过css中的display:none

      • 显示：移除display:none或者什么也不添加。

      • 隐藏：给该元素添加display:none。

        <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><button @click="toggle">点击切换</button><h1 v-show="flag">11111</h1><h1 v-show="num>6?true:false">2222</h1></div><script>var vm = new Vue({el: "#app",data: {flag: false,num: 10,},methods: {//方法toggle() {this.flag = !this.flag;},},});</script></body>
</html>

        <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><button @click="toggle">点击切换</button><h1 v-show="flag" style="display:flex;">11111</h1><h1 v-show="num>6?true:false">2222</h1></div><script>var vm = new Vue({el: "#app",data: {flag: false,num: 10,},methods: {//方法toggle() {this.flag = !this.flag;},},});</script></body>
</html>

    • 后方的值可以是指的是最终结果

      • 一个具体的值，非布尔值就转成布尔值

      • 表达式，如三元表达式或全等===之类的，运算结果转成布尔值

        <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style>.fang{display: flex !important;}</style></head><body><div id="app"><button @click="toggle">点击切换</button><h1 v-show="flag" class="fang" style="display:flex;">11111</h1><h1 v-show="num>6?true:false">2222</h1></div><script>var vm = new Vue({el: "#app",data: {flag: false,num: 10,},methods: {//方法toggle() {this.flag = !this.flag;},},});</script></body>
</html>

  8. v-if v-else-if v-else 与js中的if、else-if、else效果一样，可以做显示与隐藏

    • 底层原理是用来做删除与创建DOM元素

      • true显示创建标签

      • false隐藏删除标签

        <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><h1 v-if="flag">111</h1><button @click="toggle">点击切换</button></div><script>var vm = new Vue({el: "#app",data: {flag: false,},methods: {toggle() {this.flag = !this.flag;},},});</script></body>
</html>

    • 常用场景

      • 可以用来做比较复杂的判断，比v-show更灵活

        <!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script></head><body><div id="app"><h1 v-if="num>=90">优秀</h1><h1 v-else-if="num>=60">合格</h1><h1 v-else>不合格</h1></div><script>var vm = new Vue({el: "#app",data: {num: 18,},});</script></body>
</html>

      • 也可以用来做权限

        • 如果没权限，就没那个dom，用户就不能通过改css来让元素显示了

    • 与v-show的对比

      • v-show 适合频繁做显示与隐藏效果的时候，性能消耗小
      • v-if 适合只显示一次就不在改变效果的显示与隐藏，性能消耗小
        • 比如说一开始就显示，之后就一直隐藏了
        • 或者是一开始隐藏，之后就一直显示而不再隐藏

  9. v-for 循环数据

    • 可以循环
      • 数值：
        • 一项：item 数值item从1开始算起
        • 两项：(item,index) 数值item从1开始算起，索引下标index从0开始算起
      • 数组
      • 对象
    • 与key配合

      • v-for本身就有一个问题：就地复用同样结构的同名标签

        <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>添加</title></head><body><div id="app"><input type="text" v-model="val" /><button @click="add">add</button><ul><li v-for="item in arrdata"><input type="checkbox" />{{item.name}}</li></ul></div></body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var vm = new Vue({el: "#app",data: {val: "",arrdata: [{ id: "001", name: "黎明" }],},methods: {add() {let obj = {id: +new Date(),name: this.val,};this.arrdata.unshift(obj);console.log(`this.arrdata-->`, this.arrdata);this.val = "";},},});
</script>

        • 解决方案：添加一个唯一的key属性

          <li v-for="item in arrdata"><input type="checkbox" />{{item.name}}
</li>

          <li v-for="item in arrdata" :key="item.id"><input type="checkbox" />{{item.name}}
</li>

          <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>添加</title></head><body><div id="app"><input type="text" v-model="val" /><button @click="add">add</button><ul><li v-for="item in arrdata" :key="item.id"><input type="checkbox" />{{item.name}}</li></ul></div></body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>var vm = new Vue({el: "#app",data: {val: "",arrdata: [{ id: "001", name: "黎明" }],},methods: {add() {let obj = {id: +new Date(),name: this.val,};this.arrdata.unshift(obj);console.log(`this.arrdata-->`, this.arrdata);this.val = "";},},});
</script>
          • 组件使用 v-for必须使用key，为了防止更新的问题

  10. v-bind: 绑定属性

    • 简写为:
    • 特殊属性

      • class

        1. :class=“a” 如果a(引号里面又有引号)不加引号----》data

        2. :class=“[a,b]” 多个值，必须用数组

        3. :class=“true?b:‘’” 可以写三元运算

          data:{a:"one",b:"two",
}

        4. :class=“{‘one’:true,‘two’:false}” 对象的key必须是类名，不能查找data

            .one{color:red;}.two{background-color: aquamarine;}

      • style

        1. :style=“{color:‘pink’,backgroundColor:‘blue’}” 是对象

        2. :style=“stya”

          data:{stya:{color:'pink',backgroundColor:'blue'}
}

        3. :style=“[stya,styb]”

          data:{stya:{color:'pink',backgroundColor:'blue'},styb:{border:"10px solid yellow"}
}

vue插件

  1. Vetur
  2. Vue Language Features (Volar)
  3. VueHelper – vue代码提示插件，vue2所有api和vue-router2和vuex2的代码提示，2023年作者转行不更了
  4. Vue 3 Snippets – vue代码提示插件，依然更新，替代VueHelper

面试技巧

  • 把知识整理，背好，提前说知识
  • 把底层知识如源码说一下
  • 比相关的东西放一起，每一个懂的知识多回答多点，让面试者出题的题少一点
  • 一个题答案流程
    1. 说结果
    2. 说原因
    3. 说底层源码知识
    4. 说相关知识
  • 多面，一般面试主要就问重点，主要背重点

进阶参考

人力资源网

网络标签：

相关问题