一文带你走进ES6

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第一天，点击查看活动详情

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);
})