ES6-笔记1

Bilibili 深入解读ES6系列视频学习记录1。

本文内容:兼容性、变量与常量、箭头函数、函数参数、解构赋值

Tutor: Blue石川。
URL: bilibili.com/video/av20327829

一、兼容性

  1. 兼容:IE10+、Chrome、Firefox、移动端、NodeJS。
  2. 兼容性问题可通过bable(browser.js)或提前编译的方法来规避。
  3. babel是一个js转码器,可以将ES6风格转化为ES5风格。

二、变量与常量

原先:使用var进行变量声明,具有诸多bug。

  1. 对一个变量可以重复声明。
  2. 没有块级作用域,函数内声明的变量函数外可以调用。

现在:let和const

  1. 对变量声明使用let。
  2. 对常量声明使用const,不能重复赋值。
  3. 解决块级作用域问题,将作用域限制在花括号内。

三、箭头函数

箭头函数是ES6中的一个新语法规范。

// 旧式函数写法
function showUser(){
  // do something ...  
}

// ES6 style
let showUser = () => {
  // do something
}

⚠️注意:与Python lambda函数类似,ES6中有省略简写。

  1. 如果函数只有一个参数,则圆括号可以省略。
  2. 如果函数体中只有一个return语句,则花括号部分可以省略。

四、函数参数

主要讲解不定参数和默认参数值。

1、不定参数:

即不知道要接收多少个参数。

  1. 语法格式:  在形参面前加三个点( … ),形参名字无所谓,…args即可。
  2. 不定参数只能写在参数列表的最后,不能写在中间。function add(no1, no2, …othernos)
  3. 一个函数中,参数列表中的不定参数最多只能有一个。
  4. 注意,不定参数和arguments均为object类型。
// 可以获取到不定参数others
function sum( base, ...others ){
  console.log(others)  // [ 4, 3, 2 ]
  console.log(others[0])  // 4
  console.log(arguments)  // [Arguments] { '0': 5, '1': 4, '2': 3, '3': 2 }
  return (base + others)
}

let obj = sum( 5, 4, 3, 2);
console.log( obj );  // 54,3,2

2、默认参数

就参数对应位置,用等号给出默认值。注意对应!

function show(a, b=5, c=8) {
    console.log(a, b, c)
}
show2(1, 2)  // 1, 2, 8

3、扩展运算符

a、数组的扩展运算符:

// 以往取数组中最大的值
function max(...args){
    return Math.max.apply(null,args)
}
console.log(max(1,2,3,4,5,6)) // 6

// 现在用扩展运算符
function max(...args){
    return Math.max(...args) // 把args [1,2,3,4,5,6]展开为1,2,3,4,5,6
}
console.log(max(1,2,3,4,5,6)) // 6
// 扩展运算符可以把argument转为数组
function max(){
    console.log(arguments) // { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5, '5': 6 }
    let arr = [...arguments]
    console.log(arr) // [1,2,3,4,5,6]
}

max(1,2,3,4,5,6)

// 但是扩展运算符不能把伪数组转为数组(除了有迭代器iterator的伪数组,如arguments)
let likeArr = { "0":1,"1":2,"length":2 }
let arr = [...likeArr] // 报错 TypeError: likeArr is not iterable

// 但是可以用Array.from把伪数组转为数组
let likeArr = { "0":1,"1":2,"length":2 }
let arr = Array.from(likeArr)
console.log(arr) // [1,2]

b、对象的扩展运算符

// 以往合并对象
let name = { name:"Joe" }
let age = { age:26 }
let person = {}
Object.assign(person,name,age)
console.log(person) // { name: 'Joe', age: 26 }

// 使用扩展运算符
let name = { name:"Joe" }
let age = { age:26 }
let person = {...name,...age}
console.log(person) // { name: 'Joe', age: 26 }

⚠️注意:通过扩展运算符和Object.assign对对象进行合并的行为,是属于浅拷贝,那么我们在开发当中,经常需要对对象进行深拷贝,可使用JSON.stringify()、JSON.parse()进行深拷贝。

let swr = {
    name:"Joe",
    age:26,
    pets:['mimi']
}

let swrcopy = JSON.parse(JSON.stringify(swr))
console.log(swrcopy) // { name: 'Joe', age: 26, pets: [ 'mimi' ] }
// 此时我们新增swr的属性
swr.pets.push('gougou')
console.log(swr) // { name: 'Joe', age: 26, pets: [ 'mimi', 'gougou' ] }
// 但是swrcopy却不会受swr影响
console.log(swrcopy) // { name: 'Joe', age: 26, pets: [ 'mimi' ] }

五、解构赋值

  1. 主要分为:对象的解构、数组的解构。
  2. 简单理解就是等号的左边和右边相等。

1、数组的解构赋值

⚠️注意:解构赋值的过程中,参数为undefined时,会使用默认值。但参数为null时,就要使用null。

let [a, b, c] = [1, 2, 3]
console.log(a, b, c)  // 1 2 3

let {x, y, z} = {x: 1, y: 2, z: 3}
console.log(x, y, z) // 1 2 3

let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']
console.log(json, arr, num, str)  // { a: 1, b: 2 } [ 1, 2, 3 ] 8 'str'

let undefinedArr = [,1,2]
let [d='我是默认值',e,f] = undefinedArr
console.log(d,e,f)  // 我是默认值 1 2

let nullArr = [,1,2]
let [g=null,h,i] = nullArr
console.log(g,h,i)  // null 1 2

let x = [0,1,2,3]
let y = x  // x-y 共享同一个内存地址
let z = [...x]  // 将x复制一份到z,两个内存地址。

2、对象的解构赋值

和数组到解构赋值类似,但数组中到数组成员是有顺序的,而对象中的属性则是无序的。所以对象的解构赋值简单理解是等号的左边和右边的结构相同

  1. 对象的解构赋值是根据key进行匹配的。
  2. 当key对应的value为undefined时,使用默认值。