VUE基础讲解

2022-07-17 10:50:58 浏览数 (2)

今天叶秋学长带领小伙伴们一起学习ES6，废话不多说我们开始学习吧~~

1.const常量
  • 使用const声明常量(不会变),不能再次赋值
  • 确保声明常量不会被修改
  • 不可以重复声明
  • 常量的含义,指向的是对象,这个对象是不能修改,但是对象里面属性值
2.let和var
  • let是更完美的var 不可以重复声明 var name = "张三"; var name = "李四"; let age = 18; age = 20; console.log(age); // let age = 20 ​ let sex; sex = "男"; console.log(sex);
  • let块级作用域 var li = document.querySelectorAll("li"); // for(var i= 0;i<li.length;i ){ // (function(i){ // li[i].onclick = function(){ // console.log(i); // } // })(i) // } for (let i = 0; i < li.length; i ) { li[i].onclick = function () { console.log(i); }; }
  • let没有变量提升 console.log(hobby); //undefined,变量提升 var hobby = '唱歌'; ​ console.log(like); //报错,没有变量提升 let like = '唱歌';
  • let暂时性死区 代码块内,使用let命令之前,该变量都是不可以用的,语法上叫做暂时性死区
3.对象字面量的增强写法

字面量:赋值的时候,等号右边的值,我们叫它字面量

对象增强写法:键值命名一致

代码语言：javascript复制
const name ="张三"
const age = 18
const sex =  '男'
const obj = {
    // name:name,
    name,//增强写法
    age,
    sex
}
console.log(obj);
4.解构赋值

概念:解构赋值允许我们使用类似数组或者对象字面量的语法给变量赋值

(1)数组解构
  • 数组的每一项数据,对应放入变量当中 const arr = [111, 222, 333]; // let fir = arr[0]; // let sec = arr[1]; // let thi = arr[2]; // console.log(fir, sec, thi); // 解构赋值 const [fir, sec, thi] = arr; console.log(fir, sec, thi);
  • 预留位置 const [, sec, thi] = arr // 预留 console.log( sec, thi);
  • 后两位单独封装 const [fir,...newArrs] = arr; console.log(fir,newArrs); ...叫做扩展运算符
  • 数组的相互赋值,修改数据 // const afterArr = arr const afterArr = [...arr] //单独开辟空间 afterArr[0] = '我是笨蛋' console.log(arr,afterArr);
  • 合并数组 const arrA = [11,22,33] const arrB = [44,55,66] // const arrC = arrA.concat(arrB)//内置对象 const arrC =[...arrA,...arrB] arrC[0] = 000 console.log(arrA,arrB); console.log(arrC);
  • 交换位置 let a = 1; let b = 2; // let as; // as = a // a = b // b = as [a,b] = [b,a] console.log(a,b);
(2)对象解构
  • 数据逐一放到变量里 const user = { name:"康康", age:18, hobby:'跳舞' } // const {name(属性名):name(设置的变量名),age:age} = user const {name,age} = user//增强写法 console.log(name,age);
  • 赋值修改 const newUser = {...user,name:"张三",sex:"男"} console.log(newUser,user);
  • 默认值的设定 const user = { name:"康康", age:18, hobby:'跳舞' } // const {hobby:hobby='唱歌'} = user const {hobby='唱歌'} = user//设置默认值 console.log(hobby);
5.循环方法:高阶函数之 filter/map/reduce
(1)循环方法
代码语言：javascript复制
for (var i = 0; i < arr.length; i  ) {
console.log(arr[i]);
}
​
for (let i in arr) {
console.log(arr[i]);
}
​
for (let item of arr) {
console.log(item);
} //拿不到索引
​
arr.forEach(function (item, index) {
console.log(item, index);
});
(2)filter(callback)

功能:过滤数据

callback:回调函数,返回是布尔值

true情况下,数据存入数组,

false情况下,不返回数据

代码语言：javascript复制
const arr  = [111,559,454,12,15,78,9,45,456]
const newArr  = arr.filter(function(item){
    console.log(item);
    return item >100
})
console.log(newArr);
(3)map(callback)

功能:计算

callback:回调函数,返回计算的结果

代码语言：javascript复制
const countArr = newArr.map(function(item){
    console.log(item);
    return item/ 2
})
console.log(countArr);
(4)reduce(callback,value)

功能:统计

callback(pre,item)

value:初始值

代码语言：javascript复制
const total = countArr.reduce(function(pre,item){
    console.log(pre,item);
    return pre item
},0)
console.log(total);
6.箭头函数

概念:定义函数的方法

  • 箭头函数的使用 const next = ()=>{ // 代码块 console.log('箭头函数'); } next()
  • 参数情况
    • 没有参数 const next = ()=>{ // 代码块 console.log('箭头函数'); } next()
    • 一个参数 const next = res=>{ // 代码块 console.log(res); } next(123)
    • 多个参数 const next = (a,b)=>{ // 代码块 console.log('箭头函数'); } next(1,2)
    • 代码块只有一行的时候 const next = (a,b)=>console.log('箭头函数'); next(1,2)
7.this指向问题
  • 函数调用的时候,BOM方法,this指向window
  • 事件:this的指向,事件源
8.promise

概念:解决异步编程的方案

回调地狱:上一个接口还没有走完,下一个接口已经开始了,但是下一个接口需要上一个接口的数据

如果请求很多的话,就会出现回调地狱

  • promise的使用 参数:resolve,reject resolve:返回成功值,.then进行数据捕获 reject:返回失败值,.catch捕获失败的数据 格式:new Promise(callback)
  • promise三种状态 pendding:等待状态,等待请求数据结束,或者定时器结束 fullfill:满足状态:说明成功,resolve rejet:拒绝状态:说明失败,reject new Promise((resolve, reject) => { setTimeout(() => { resolve(111); }, 1000); }).then((res) => { console.log(res); return new Promise((resolve, reject) => { setTimeout(() => { // console.log(res); resolve(222); }, 1000); }).then(res=>{ console.log(res); }) });
  • promise.all 使用场景处理多个异步时候
代码语言：javascript复制
Promise.all([
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(333);
        }, 1000)
    }),
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(444);
        }, 1000)
    }),
]).then(res=>{
    console.log(res);
})

本期分享到此为止，别忘了给博主点点关注，关注博主不迷路，叶秋学长带你上高速

vue.js 腾讯云前端性能优化大赛前端 VUE

0 人点赞