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

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

文章目录

- - - - let和const命令
      - 变量的解构赋值

let和const命令

let和const命令都是声明变量的关键字，类同var
let特点
- 用来声明变量，不能再次定义，但是值可以改变
- 存在块级作用域
- 不存在变量提升(暂时性死区)，好的语法习惯先声明后使用
- let在全局环境下统一的变量，不会挂载到window对象下
```
{
  let a = 10
  var 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) // 1
	console.log(y) // 3
	console.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指向的是window
    console.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 = 0
  for (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语法