VUE基础讲解

今天叶秋学长带领小伙伴们一起学习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.对象字面量的增强写法

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

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

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)循环方法

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情况下,不返回数据

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:回调函数,返回计算的结果

const countArr = newArr.map(function(item){
    console.log(item);
    return item/ 2
})
console.log(countArr);

(4)reduce(callback,value)

功能:统计

callback(pre,item)

value:初始值

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 使用场景处理多个异步时候

Promise.all([
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(333);
        }, 1000)
    }),
    new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(444);
        }, 1000)
    }),
]).then(res=>{
    console.log(res);
})

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