0
0

【vue2】vue框架学习前置必备基础知识

1d43f75f092a4050a8ce31e2d85f6868.gif

🥳博 主：初映CY的前说(前端领域)

🌞个人信条：想要变成得到，中间还有做到！

🤘本文核心：数组 | 字符串中常用方法、对象解构语法、function |箭头函数this指向、展开运算符、原型链、本地存储

一、数组常用方法

1.数组增删改查

1.push()

arr.push(...元素) : 往数组后面添加元素 , 返回数组长度

  1.         // arr.push(...元素) : 往数组后面添加元素 , 返回数组长度 
  2.         let arr = [10, 20, 30, 40, 50]
  3.         let res = arr.push(60, 70, 80)
  4.         console.log(arr)//[10,20,30,40,50,60,70,80]
  5.         console.log(res)//8

2.unshift()

arr.unshift(...元素) : 往数组前面添加元素 , 返回数组长度

  1.         // arr.unshift(...元素) : 往数组前面添加元素 , 返回数组长度
  2.         let arr = [10, 20, 30, 40, 50]
  3.         let res = arr.unshift(60, 70, 80)
  4.         console.log(arr)// [60, 70, 80, 10, 20, 30, 40, 50]
  5.         console.log(res)//8

3.shift()

shift() : 删除数组第一个元素, 返回删除的那个元素

  1.         // arr.shift() : 删除数组第一个元素, 返回删除的那个元素
  2.         let arr = [10, 20, 30, 40, 50]
  3.         let res = arr.shift(2,1)
  4.         console.log(arr)//[20,30, 40, 50]
  5.         console.log(res)//[10]

4.pop()

arr.pop() : 删除数组最后一个元素, 返回删除的那个元素

  1.         // arr.pop() : 删除数组最后一个元素, 返回删除的那个元素
  2.         let arr = [10, 20, 30, 40, 50]
  3.         let res = arr.pop()
  4.         console.log(arr)//[20, 30, 40, 50]
  5.         console.log(res)//10

5.splice()

写法1

arr.splice(开始下标,删除几个元素,...在删除位置插入元素)

  1.       // arr.splice(开始下标,删除几个元素,...在删除位置插入元素)
  2.         let arr = [10, 20, 30, 40, 50]
  3.         let res = arr.splice(2,1,60)
  4.         console.log(arr)//[10, 20, 60, 40, 50]
  5.         console.log(res)//[30]

写法2

arr.splice(开始下标,删除几个元素)// 传递的形参有有三个，我们最后的形参可以省略不写

  1.         // arr.splice(开始下标,删除几个元素)
  2.         let arr = [10, 20, 30, 40, 50]
  3.         let res = arr.splice(2,1)
  4.         console.log(arr)//[10, 20, 40, 50]
  5.         console.log(res)//[30]

6.join()

arr.join('分隔符') : 把数组元素拼接成字符串

  1.         let arr = [10, 20, 30, 40, 50]
  2.        // 2. arr.join('分隔符') : 把数组元素拼接成字符串
  3.         let str = arr.join('|')//10|20|30|40|50
  4.         console.log(str)
  5.         // join()应用场景 :   有的歌曲是合唱的，后台就会给一个数组 ['李宗盛','林忆莲']
  6.         //页面按照UI的设计显示歌手 '李宗盛&林忆莲'
  7.         console.log(['李宗盛', '林忆莲'].join('&'))//李宗盛&林忆莲

** 7.reverse()**

arr.reverse() : 翻转数组

  1.         //  arr.reverse() : 翻转数组
  2.         let arr = [10, 20, 30, 40, 50]
  3.         const res= arr.reverse()
  4.         console.log(res);//[50, 40, 30, 20, 10]

** 8.sort()**

arr.sort( (a,b)=>排序规则 )

1.升序（形参里面前者减去后者）

  1.         let arr = [10, 80, 300, 40, 50]
  2.         arr.sort( (a,b)=>a-b )
  3.         console.log(arr); //[10, 40, 50, 80, 300]

2.降序（形参里面后者减去前者）

配合对象使用：

  1.         let pArr = [
  2.             { name: '张三', age: 18 },
  3.             { name: '李四', age: 15 },
  4.             { name: '王五', age: 22 },
  5.         ]
  6.         //根据年龄排序  a和b就是数组中相邻的元素
  7.         pArr.sort((a, b) => {
  8.             return a.age - b.age
  9.         })
  10.         console.log(pArr);

2.数组遍历

数组遍历方法应用场景函数返回值****是否需要returnmap映射数组一个新数组
一定需要return
filter过滤数组一个新数组return true(元素添加到新数组)forEach遍历数组无无some找出符合条件的数布尔类型return true；循环结束every 判断所有元素是否符合条件布尔类型return true；循环继续findIndex
获取符合条件的第一个元素位置(下标)
数字return true；循环结束includes判断数组/字符串是否包含某一个值布尔w

1.map（）

map会遍历每一个元素，并对每一个元素做对应的处理，返回一个新数组

  1.         let arr = [23, 31, 60, 88, 90, 108, 260];
  2.         //需求：数组中每一个元素+1
  3.         let arr1 = arr.map((item, index) => {
  4.             return item+ 1;//让每一个元素的值+1
  5.         });
  6.         console.log(arr1);//[24, 32, 61, 89, 91, 109, 261]

2.filter（）

filter用于筛选数组中满足条件的元素，返回筛选后的新数组

  1.         let arr = [23, 31, 60, 88, 90, 108, 260];
  2.         //找出数组中的偶数
  3.         let arr1 = arr.filter((item) => {
  4.             return item %2 == 0;
  5.         });
  6.         console.log(arr1);//[60, 88, 90, 108, 260]]

** 3.forEach()**

forEach用于遍历数组，相当于for循环另一种写法

  1.         //  1.forEach用于遍历数组，相当于for循环另一种写法
  2.         let arr = [23, 31, 60, 88, 90, 108, 260];
  3.         arr.forEach((item,index) => {
  4.             console.log(`下标为${index}的元素是${item}`); 
  5.         });

4.some()

用于判断数组中是否存在满足条件的元素,遇到满足的就返回，停止遍历

  1.         /* 
  2.         1.some应用场景：用于判断数组中是否存在满足条件的元素
  3.         2.注意点：
  4.             a. 回调函数执行次数  != 数组长度
  5.                 * some函数在遍历的时候可以中途结束
  6.             b. some函数返回一个布尔类型值
  7.             c. 回调函数返回布尔类型值用于结束遍历
  8.                 return true; //遍历结束，且some函数返回值为true
  9.                (默认) return false; //遍历继续，且some函数返回值为false
  10.          */
  12.         //需求：判断数组中没有负数
  13.         let arr = [23, 31, 60, 88,-50, 90, 108, 260];
  14.         /**
  15.         * @description: 数组some遍历
  16.         * @param {Function}:回调函数 (元素,下标)=>{}
  17.         * @return: 布尔类型值
  18.         */
  19.         let arr1 = arr.some((item,index) => {
  20.             return item<0;//此处遇到-50就停止遍历喽
  21.         });
  22.         console.log(arr1);

5.every()

every用于判断数组中是否所有元素都满足条件

  1.         /* 
  2.         1.every应用场景：用于判断数组中是否所有元素都满足条件
  3.             * every与some功能类似，只是写法不同
  4.         2.注意点：
  5.             a. 回调函数执行次数  != 数组长度
  6.             b. every函数返回一个布尔类型值
  7.             c. 回调函数返回布尔类型值用于结束遍历
  8.                 return true; //遍历继续，且every函数返回值为true
  9.                 (默认)return false; //遍历结束，且every函数返回值为false
  10.          */
  11.         //需求：判断数组中没有负数
  12.         let arr = [23, 31, 60, 88,-50, 90, 108, 260];
  13.         /**
  14.         * @description: 数组every遍历
  15.         * @param {Function}:回调函数 (元素,下标)=>{}
  16.         * @return: 布尔类型值
  17.         */
  18.         let arr1 = arr.every((item,index) => {
  19.             console.log(`下标为${index}的元素是${item}`);
  20.             return item>0;
  21.             
  22.         });
  23.         console.log(arr1);

6.findindex()

findindex用于获取符合条件的第一个元素位置(下标)

  1.         /* 
  2.         1.数组findIndex方法
  3.             1.1 作用 : 获取符合条件的第一个元素位置(下标)
  4.             1.2 语法 ： arr.findIndex( (item,index)=>{ return true/false } )
  5.                 返回值： 符合则返回元素下标，不符合则返回-1
  6.             1.3 应用场景 ： 适用于数组中元素为对象类型，比传统for循环要高效
  7.         */
  8.         let arr1 = [
  9.             { name: '张三', age: 20 },
  10.             { name: '李四', age: 30 },
  11.             { name: '王五', age: 25 },
  12.             { name: '赵六', age: 1},
  13.             { name: '小七', age: 33 },
  14.         ];
  15.         //1.数组findIndex方法 : 获取符合条件的第一个元素位置(下标)
  16.         //示例：查找arr1中第一个未成年在什么位置
  17.         let res1 = arr1.findIndex((item,index)=>{
  18.             /* 回调函数
  19.             return true : 循环中断，findIndex方法返回值为当前index值
  20.             return false： 循环继续，如果数组全部遍历完还是没有返回true，则finedIndex方法最终返回-1
  21.              */
  22.             // if(item.age<18){
  23.             //     return true;
  24.             // }else{
  25.             //     return false;
  26.             // };
  27.             return item.age < 18;
  28.         });
  29.         console.log(res1);

7.reduce（）

reduce为每一个元素执行一次回调，并得到回调最终的结果

  1.         /* 
  2.         1. reduce作用： 为每一个元素执行一次回调，并得到回调最终的结果
  3.         2. reduce语法:  数组.reduce( (sum,item,index)=>{} , sum初始值 )
  4.             回调返回值: 下一次循环sum的结果
  5.             reduce自身返回值: 最后一次sum的结果
  6.         */
  8.         let arr = [1, 2, 3, 4, 5]
  9.         // 无条件求元素和，0是没有数据时候的初始值，当不写的到时候，如果数组为空就报错
  10.         let res = arr.reduce((sum, item, index) => sum + item, 0)
  11.         console.log(res)
  13.         //需求：有条件求元素和（求数组中奇数的和）
  14.         // 核心： 满足条件就与sum累加，不满足条件sum值不变
  15.         let res1 = arr.reduce((sum, item, index) => {
  16.             if (item % 2 === 1) {
  17.                 return sum + item//满足条件累加
  18.             } else {
  19.                 //如果没有这个return, 下一次sum就会变成undefined
  20.                 return sum//不满足条件 sum值不变
  21.             }
  22.         }, 0)
  23.         console.log(res1)

二、结构赋值语法

核心是获取我们想要的数据，不解构的数据自动丢弃。也可以对数据进行封装

  1. script>
  2.         /* 
  3.         解构赋值： 变量赋值的简写语法
  4.             (1)把对象的属性 赋值给 变量
  5.             (2)把变量的值   赋值给 对象的属性
  6.         */    
  7.         /* 1. 把对象的属性 赋值给 变量 
  8.         应用场景: 服务器返回的对象层级很多，通过解构简化代码
  9.         */
  11.         let obj = {
  12.             name:'张三',
  13.             age:20,
  14.             gender:'女',
  15.             student:{
  16.                 sex:'男'
  17.             }
  18.         }
  19.         // 底层原理：当属性名与属性值相同的时候可以直接简写成属性名即可 比如：name:name 写一个name就可以,记住属性名称：自定义变量名称
  20.         let { name,age:a,gender,student:{sex},} = obj
  21.         console.log( name,a,sex,gender )
  23.         /* 2.把变量的值   赋值给 对象的属性 
  24.         应用场景： 后台接口post参数需要对象， 把变量的值包在对象里面发给服务器
  25.         */
  26.         let username = 'admin'
  27.         let password = '123456'
  29.         //ES6
  30.         let body = {
  31.             username,
  32.             password,
  33.         }
  34.         console.log(body)

三、function函数与箭头函数this指向

  1.   function函数和箭头函数最大区别 ： this指向不同

function函数中this指向：

  • function函数this指向三种 : 谁调用我,我就指向谁
  • new 函数名() : this -> new创建的实例对象
  • 对象名.函数名() : this -> 对象
  • 函数名() : this -> window

箭头函数this指向

  • 箭头函数this指向 : 无this
  • 箭头函数this指向 ： 上级作用域中的this

四、展开运算符

①用于将数据提取出想要的②封装数据给属性③浅拷贝开辟新的地址空间

  1.   /* 
  2.         1.展开运算符:  ...
  3.             相当于数组/对象 遍历的简写
  4.         2.展开运算符应用场景 :
  5.             (1)H5端下拉刷新：  连接数组
  6.             (2)连接对象 : 把两个盒子的数据 合成一个对象发给服务器
  7.             (3)浅拷贝数据
  8.         */
  9.         //(1)连接数组
  10.         let arr = [10,20,30]
  11.         //服务器返回了一个新数组,添加到列表后面
  12.         let arr1 = [40,50,60]
  13.         arr.push(...arr1)
  14.         console.log(arr)
  16.         //(2)连接对象
  17.         let obj = {
  18.             username:'admin',
  19.             password:'123456'
  20.         }
  22.         let form = {
  23.             name:'张三',
  24.             age:20,
  25.             ...obj
  26.         }
  28.         console.log( form )
  30.         //(3)浅拷贝数据
  31.         /* 
  32.         浅拷贝 : 浅拷贝拷贝地址,只拷贝一层
  33.         深拷贝 : 深拷贝拷贝数据,拷贝多层
  34.         */
  36.         const person = {
  37.             name:'王五',
  38.             age:30,
  39.             sex:'男',
  40.             hobby:['学习','代码','干饭']
  41.         }
  43.         //浅拷贝 : 拷贝地址
  44.         const person1 = person
  45.         person1.name = '老六'
  46.         console.log(person1,person)//{name: '老六', age: 30, sex: '男', hobby: Array(3)}
  48.         //需求： 拷贝person的数据, 修改拷贝后的数据不影响
  49.         /* 原理：只拷贝person第一层数据,相当于开辟一个全新的地址空间，因此数据不会发生覆盖（地址不同）
  50.             }*/
  51.  
  52.         const person2 = { ...person }
  53.         person2.name = '老铁'
  54.         console.log(person2,person)

五、原型对象

  1.    /*  vue会给自己的原型对象添加一些共有的成员(属性+方法) 
  2.             所有的vm实例都可以直接使用. 
  3.             一般情况下，vue原型中的成员都会有一个前缀$
  4.         应用： 项目开发中，如果你希望每一个页面都可以使用这个属性，就可以把这个属性加到Vue原型中
  5.         */
  7.         // 1.构造函数
  8.         function Person(name,age){
  9.             //此处this指向的是Proson
  10.             this.name = name
  11.             this.age = age
  12.         }    
  14.         // 2.原型对象,写在这里的东西，我们在new出来的实例上面都能找到这个东西
  15.         Person.prototype.eat = function(){
  16.             console.log('吃东西')
  17.         }
  18.         Person.prototype.name = '我是初映'
  19.         
  21.         // 3.实例对象
  22.         let p1 = new Person('张三',20)
  23.         let p2 = new Person('李四',30)
  25.         console.log(p1,p2)

六、本地存储

  1. 常用于用于存储token，在我们登录的时候使用
  • 存: 常用于用户登录成功
  • 取: 发送ajax的时候取出来, 添加到请求头
  • 删: 退出登录

语法：

  1.         存:  localStorage.setItem('属性名',属性值)
  2.         取:  localStorage.getItem('属性名')
  3.         删:  localStorage.removeItem('属性名')
  4.         清空(删所有):  localStorage.clear()
  6.         注意点: localStorage只能存储字符串，如果是引用类型则需要转JSON
  8.         存: js转json -> 存储
  9.             localStorage.setItem('属性名', JSON.stringify(对象) )
  10.         取: 取出来 -> 解析json
  11.             JSON.parse( localStorage.getItem('属性名') )

兄弟姐妹们，学习vue还远远不止上述的内容。必须学习HTML、Css、JavaScript、Ajax等相关语法呦！！！上述内容仅仅这几大模块经常需要在vue中使用的。

愿你所愿即所得！2023遇见更完美的自己！！！

标签： 前端 javascript 开发语言
本文转载自: https://blog.csdn.net/m0_61118311/article/details/128864506
版权归原作者 初映CY的前说 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【vue2】vue框架学习前置必备基础知识”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？