ES6：let和const命令解读以及变量的解构赋值

有时候，我们需要的不是答案，而是一双倾听的耳朵

let和const命令

• let和const命令都是声明变量的关键字，类同var
• let特点
  • 用来声明变量，不能再次定义，但是值可以改变
  • 存在块级作用域
  • 不存在变量提升(暂时性死区)，好的语法习惯先声明后使用
  • let在全局环境下统一的变量，不会挂载到window对象下

  {let a = 10var b = 2
  }
  a // a is not defined
  b // 2
  

• const特点
  • 定义常量(固定的值)，不能再次定义，不能修改值
  • 定义常量的时候必须有值
  • 存在块级作用域
  • 不存在变量提升(暂时性死区)，好的语法习惯先声明后使用
  • const在全局环境下统一的变量，不会挂载到window对象下

  const PI = 3.1415
  PI // 3.1415
  PI = 3  // Assignment to constant variable
  

变量的解构赋值

• 数组的结构赋值

  const arr = [40, 10, 100]
  // 得到所有数据,通过变量去接收
  const a = arr[0]
  const b = arr[1]
  const c = arr[2]
  console.log(a, b, c) // 40 10 100
  // ES6中解构赋值
  const arr1 = [40, 10, 100]
  // 情况1：数组有几项数据，就定义几个变量，一一对应
  const [a1, b1, c1] = arr
  console.log(a1, b1, c1) // 40 10 100
  // 情况2：变量少于数组长度，按照变量的顺序进行对应即可
  const [a2, b2] = arr
  console.log(a2, b2) // 40 10
  // 情况3：变量多于数组长度，按照变量的顺序进行对应，多余的变量值就是undefined
  const [a3, b3, c3, d] = arr
  console.log(a3, b3, c3, d) // 40 10 100 undefined
  // 情况4：按需取值，使用空占位即可
  const [, b4, c4] = arr
  console.log(b4, c4) // 10 100
  // 情况5：除去某几项，得到剩余的所有选项 (...的作用：剩余匹配)
  const [a5,...arr2] = arr
  console.log(arr2) // [10, 100]
  // 情况6：多维数组解构赋值，把握结构对应即可
  const arr3 = [1, 2, [100, 200]]
  const [, , [a6, b6]] = arr3
  console.log(a6, b6) // 100 200
  

• 对象的解构赋值

  const obj = { name: 'tom', age: 10, hobby: { ball: '打球', game: '游戏' }
  }
  // 解构赋值
  const {name, age, hobby: {game}} = obj
  // 等同于
  const name = obj.name
  const age = obj.age
  const game = obj.hobby.game
  console.log(name, age, game) // tom 10 游戏
  

• 函数相关

  • 箭头函数

    // 1.如果形参只有一个，则可以省略小括号
    var fn = x => {return x * x
    }
    console.log(fn(4)) // 16
    // 2.如果函数只有一行代码,则可以省略大括号,并且自带return效果(意思是自动将函数体返回)
    var fn1 = (x, y) => x + y
    console.log(fn1(2, 3)) // 5
    var fn2 = x => x * x 
    console.log(fn2(2)) // 4
    // 3.箭头函数内部没有arguments对象 (arguments对象,可以获取到函数所有的实参)
    var fn3 = () => { console.log(arguments) } // 报错,没有找到arguments对象
    fn3()
    var fn4 = (x, y, ...z) => {// x 用于接收第一个实参的值// y 用于接收第二个实参的值// z 用于接收剩余所有实参的值console.log(x) // 1console.log(y) // 3console.log(z) // 5, 7, 9, 10
    }
    fn4(1, 3, 5, 7, 9, 10)
    var fn5 = (...value) => { console.log(value) } // 使用value接收所有实参的值
    fn5(2, 4, 6, 8, 10)
    // 4.注意: 箭头函数内部的this执行和之前不一样了
    // this的值取决于声明的环境，不取决于调用的环境
    // 理解为: 箭头函数没有自己的this 或者 箭头函数内部的this执行外部作用域
    var fn6 = () => { console.log(this) } // window
    fn6()
    var obj = { abc: fn }
    obj.abc() // 还是window对象,和谁来调用没关系
    const obj1 = {age: 17,say() {console.log(this.age) // 此时的this是obj本身},say2: () => {console.log(this.age) // 此时的this是window,是当前函数作用域外部的作用域},// say3属于obj的一个普通函数,此时this就是obj本身say3() {setTimeout(function () {// 这个位置是一个匿名函数,一般this指向的是windowconsole.log(this.age)}, 1000)setTimeout(() => {// 没有this,使用的是外层作用域的this,就是obj本身console.log(this.age)}, 1000)}
    }
    obj1.say() // 17
    obj1.say2() // undefined
    obj1.say3() // undefined 17
    // 5.箭头函数不能当做构造函数
    var fn7 = () => {}
    var obj = new fn7() // 报错,fn is a constructor
    

    

  • 参数默认值

    // 之前的写法
    function fn(a) {// 没有传参的时候,可以做一个默认值处理a = a || '默认值'console.log(a)
    }
    fn()
    // ES6写法
    function fn(a = '默认值') {// 如果调用参数没有传参a, 那么a的默认值就是 = 后的值console.log(a)
    }
    fn()
    

  • 匹配剩余参数

    // 之前的写法
    const add = (a, b, c) => {// 累加所有的参数return a + b + c
    }
    console.log(add(1, 4, 5))
    // 假设传参的个数不固定 有多个 此时用ES6语法会更容易
    const add = (...args) => {// args匹配到所有的参数,是数组类型let result = 0for (let i = 0; i < args.length; i++) {result += args[i]}return result
    }
    console.log(add(1, 2, 4))
    

• 数组相关
  • 展开运算符 ...

    // 之前的写法
    const arr = [1, 10, 4, 50, 60]
    const max1 = Math.max(1, 10, 4, 50)
    console.log(max1) // 50
    // ES6写法
    const max2 = Math.max(...arr)
    console.log(max) // 50
    // 拼接数组
    const arr1 = [1, 2]
    const arr2 = [3, 4]
    const arr3 = [...arr1, ...arr2]
    console.log(arr3) // [1, 2, 3, 4]
    // 对象的合并
    const obj1 = { name: 'tom' }
    const obj2 = {age: 10,gender: '女',...obj1 // 把obj1的属性合并到obj2中
    }
    console.log(obj2) // {age: 10, gender: "女", name: "tom"}
    

  • Array.from() 把伪数组转成数组

    // 伪数组
    const arrObj = {0: 'tom',1: 'tony',2: 'lucy',length: 3
    }
    // 将上述伪数组转成真数组
    const arr = Array.from(arrObj)
    console.log(arr) // ['tom', 'tony', 'lucy']
    // 1.length决定数组的长度
    // 2.如果伪数组中数据不够length定义的长度,剩余的显示undefined
    

  • forEach() 遍历函数

    const arr = [{name:'tom',agr:20},{name:'lucy',agr:23},{name:'nick',agr:25}]
    // item是每次遍历对应的数据选项
    // i 是每次对应的索引
    arr.forEach((item,i)=>{console.log(item,i)
    })
    

  • find() 查找数组中符合条件的选项

    const arr = [{name:'tom',agr:20},{name:'lucy',agr:23},{name:'nick',agr:25}]
    const item = arr.find(item => {// 也会遍历数组// 回调函数的返回值如果为真,终止循环,find函数会返回当前遍历的这项数据return item.name === 'nick'
    })
    console.log(item)
    

  • findIndex() 查找数组中符合条件的第一个选项的索引

    const arr = [{name:'tom',agr:20},{name:'lucy',agr:23},{name:'nick',agr:25}]
    const i = arr.findIndex(item => {// 也会遍历数组// 回调函数的返回值如果为真,终止循环,find函数会返回当前遍历的这项数据return item.name === 'tom'
    })
    console.log(i)
    

• 字符串相关
  • 模板字符串 (字符串拼接更方便；支持换行)

    const name = 'tony'
    const age = 20
    const str = name + '今年' + age + '岁'
    console.log(str)
    // 模板字符串写法
    const str1 = `${name}今年${age}岁`
    console.log(str1)
    const html = '<div><p>名字:Lucy</p><p>年龄:28</p></div>'
    const html1 = `<div><p>名字:Lucy</p>;<p>年龄:28</p>;</div>
    `
    

  • 字符串扩展API
    • includes() 判断当前字符串是否包含某段字符串
    • startsWith() 判断是否以某一段字符串开头
    • endWith() 判断是否以某一段字符串结尾
    • repeat() 重复拼接同一段字符串
    • padStart() 补齐字符串长度,不够使用某一个字符串进行补全,往前补
    • padEnd() 补齐字符串长度,不够使用某一个字符串进行补全,往后补

    const str = 'Hi es6'
    // 判断是否包含 es 字符串      
    console.log(str.includes('es')); // true
    console.log(str.includes('es1')); // false
    // 判断是否以 Hi 字符串开头     
    console.log(str.startsWith('Hi')); // true
    console.log(str.startsWith('hi')); //false
    // 判断是否以 s6 字符串结尾   
    console.log(str.endsWith('s6')); // true
    console.log(str.endsWith('S6')); // false
    // 重复拼接3次 Hi es6 字符串   重复拼接同一段字符串
    console.log(str.repeat(3)); // Hi es6Hi es6Hi es6
    const str2 = '1'
    // 往 1 之前补 0 , 补齐之后一共6位    
    console.log(str2.padStart(6, '0'));
    // 往 1 之后补 0 , 补齐之后一共6位     
    console.log(str2.padEnd(6, '0'));
    

• Number相关
  • 以前学的转换数字函数
    • parseInt() 转成整数
    • parseFloat() 转换成浮点数(小数)
  • ES6中的转换数字函数
    • Number.parseInt()
    • Number.parseFloat()
• ES6集合-Set
  • Set是一个集合，和Array类似,数组的值可以重复，而Set的值不可重复。Set用于数组去重
  • 在js环境中，提供了Set的构造函数，就是创建一个Set集合：newSet()
  • 集合的值不能重复

    // 创建Set集合
    const set = new Set()
    // Set添加数据使用add()函数
    set.add(1)
    set.add(2)
    set.add(3)
    // 添加一个重复的数据,添加无效
    set.add(2)
    console.log(set)
    

  • Set数组去重

    const arr = [1, 2, 2, 3, 5, 4, 5]
    // 将数组转换成set, new Set(数组) 得到一个Set集合
    const set = new Set(arr)
    console.log(set)
    // 将set转换成数组
    // 方式1:
    const arr2 = Array.from(set)
    console.log(arr2)
    // 方式2:
    const arr3 = [...set]
    console.log(arr3)
    

• ES6语法兼容
  • 总结：ES6提升了语法和API两个方面
  • 采用banel工具使用ES6语法降级到ES5语法，从而去兼容更多的浏览器
  • 官网地址： https://babeljs.io/
  • 工具作用：Babel is a JavaScript compiler. (babel是一个js编译器)
    • 将ES6语法转换成ES5语法