Es6 都是平时使用过的(一)

ps: ES5之后的语法统称为ES6

let、const

let、const 和 var 的区别：

• var 声明变量会进行变量提升, let、const不会进行变量提升, 变量提升: 即可以在声明前使用变量
• var 声明的变量不存在块级作用域, 而 let、const 声明的变量存在块级作用域
• var 可以进行重复声明, let、const 不能重复进行声明
• const 是只读变量, 并且一定要有值, const声明的 Object 类型只要不是将其修改为另一个对象就不会报错

可选链操作符

只有 ?. 后面的值存在才会返回

const obj = {name: '小碎月儿', age: 18}
console.log(obj?.name)  //  '小碎月儿'
console.log(obj?.hobby)  //  undefined

const arr = [1, 2, 3, 4]
console.log(arr?.[1])  //  2
console.log(arr?.[5])  //  undefined

空值合并运算符

相对于 || 更加严格, ?? 只会在左边的值为 null 或者 undefined 时才会返回右边的值

const a = 0
const b = a || '18'
console.log(b)  //  '18'

const a = 0
const b = a ?? '18'
console.log(b)  //  0 

对象解构

• 没有顺序, 只需要变量同属性名相同即可
• 如果变量在属性名中不存在会导致 undefined
• : 后面的是别名
• 解构的对象不能是 null 和 undefined , 否则会报错

const obj = {name: '小碎月儿', age: 18}
const {name, age} = obj
const {name, age, hobby} = obj  //  {name: '小碎月儿', age: 18, hobby: undefined}
const {name, age, hobby: '编程'} = obj  //  {name: '小碎月儿', age: 18, hobby: '编程'}
// 解构后自定义命名
const {name: a, age: b} = obj  //  a='小碎月儿', b=18

数组解构

• 按顺序依次进行, 变量所属位置和数组每一项对应
• 可以进行解构, 代表剩余的全部
• 如果解构的数量不够会导致后面的变量值为 undefined

const arr = [ 1, 2, 3 ]
const [ a, b, c ] = arr
const [ a, b, c, d, ...e] = arr  //  1, 2, 3, undefined, []
const [a, ...b] = arr	//	1, [2, 3]
const [ a, b, c, d = 7, e = 8 ] = arr  //  1, 2, 3, 7, 8

扩展运算符

const obj1 = { name: '小碎月儿' }
const obj2 = { age: 18 }
const obj = { ...obj1, ...obj2 }	//	{name: '小碎月儿', age: 18}

const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr = [ ...arr1, ...arr2 ]	//	[1,2,3,4,5,6]

模板字符串

const obj = {name: '小碎月儿', age: 18}
const {name, age} = obj
const str = `大家好,我是${name},今年${age}岁了`	//	'大家好,小碎月儿,今年18岁了'

数组

都是平时用过的

• find() : 对数组进行查找, 返回第一个符合条件的值

• findIndex() : 对数组进行查找, 返回第一个符合条件的值的索引

• includes()：判断是否包含某一元素，返回布尔值

• fill() : 使用制定的元素对数组进行填充，返回 原数组

• Array.from() : 将一个类数组转化成一个 新的数组实例

• filter() : 返回符合条件的新数组

• flat(num) : 对数组进行扁平化, num 代表维度

• map : 遍历数组, 返回每一项, 可以进行一些操作

const arr = [1, 2, 3, 4, 5]
// find
arr.find(i => i === 1)	//	1
// findIndex
arr.findIndex(i => i === 2)	//	1
// includes
arr.includes(3)	//	true

// fill
const arr1 = []
arr1.length = 4
arr1.fill(1)	//	[1, 1, 1, 1]

// Array.from
function fn() {
	const arr2 = Array.from(arguments)	//	[1, 2, 3, 4, 5]
}
fn(...arr)

// filter
const arr3 = arr.filter( i => i > 2)  //  [3, 4, 5]

// flat
let arr4 = [1, [2], [3, [4]]]
arr4.flat(2)  //  [1, 2, 3, 4]

// map
const arr = [1, 2, 3, 4, 5]
arr.map(i => i + 1)  //  [2, 3, 4, 5, 6]

reduce((result, item)=> {}, initial)

result : 需要返回的最终结果

item : 枚举的每一项

initial : result 的初始值

const arr = [ 1, 2, 3, 4 ]
const sum = arr.reduce((a, b)=> a + b, 0)  //  10

every

用于检测数组每一项都符合条件, 返回 布尔值 , 不会检测空数组

const arr = [ 1, 2, 3, 4 ]
arr.every(i=> i > 0)  //  true

some

用于检测数组是否有满足条件的元素, 返回布尔值

const arr = [ 1, 2, 3, 4 ]
arr.some(i=> i > 2)  //  true

对象

都是平时用过的

Object.is() : 判断两个对象是否相等

Object.keys() : 返回属性名数组

Object.values() : 返回属性值数组

Object.assign(target, obj1...) : 将一个或多个对象的可枚举属性复制到目标对象中

const obj = {name: '小碎月儿', age: 18}
const obj1 = {hobby: '编程'}

Object.is('小碎月儿', '小碎月儿')  //  true
Object.is(obj, obj1)  //  false

Object.keys(obj)  //  ['name', 'age']

Object.values(obj)  //  ['小碎月儿', 18]

Object.assign(obj, obj1, { girlfriend: '冰可乐' })  //  {name: '小碎月儿', age: 18, hobby: '编程', girlfriend: '冰可乐'}

属性表达式

let a = 'name'
const obj = { [a]: '小碎月儿' }
console.log(obj)  //  { name: '小碎月儿' }

箭头函数

const fn = (a, b) => a + b
fn(1, 2)  //  3

箭头函数的特点

• 箭头函数的 this 指向父级作用域
• 不能使用 bind、call、apply更改 this 指向
• 箭头函数没有自己的 arguments , 访问的 arguments 实际是外层函数执行环境中的值
• 箭头函数不能作为构造函数

如有不对之处请多多指教，可发送邮箱[email protected]