一、let & const

ES6 之前声明变量时使用的是 var，它有几个特点

  • 变量声明提升
  • 计数是容易泄露成全局变量

因为在 ES6 以前，只有两种作用域，全局作用域和函数作用域，如果在声明变量的时候不想让它变成全局变量，就要声明一个函数，放入函数中

ES6 以后变量声明就方便了，变量声明更推荐使用 let 和 const，特点如下

  • 先声明再使用
  • 声明的变量在块级作用域中
  • 不能重复声明
  • const 声明时必须赋值，且不能更改

let 有一个用法，JS 帮我偷偷加了一些东西

  1. for(let i=0;i<6;i++){
  2.   console.log(i)
  3. }
  4. // 0 1 2 3 4 5
  5. // JS 悄悄在块级作用域里又声明了一个变量
  6. for(let i=0;i<6;i++){
  7.   let j=i;
  8.   console.log(j)
  9. }

var、let、const 原理

  • var
    会直接在栈内存里预分配内存空间，然后等到实际语句执行的时候，再存储对应的变量，如果传的是引用类型，那么会在堆内存里开辟一个内存空间存储实际内容，栈内存会存储一个指向堆内存的指针。
  • let
    是不会在栈内存里预分配内存空间，而且在栈内存分配变量时，做一个检查，如果已经有相同变量名存在就会报错。

  • const
    也不会预分配内存空间，在栈内存分配变量时也会做同样的检查。不过const存储的变量是不可修改的，对于基本类型来说你无法修改定义的值，对于引用类型来说你无法修改栈内存里分配的指针，但是你可以修改指针指向的对象里面的属性。

  • var 把“声明”和“初始化”提升到前面

  • let、const 只是把“初始化”提升到前面，没有做“初始化”操作
  1. console.log(a)
  2. var a = 1
  3. // undefined
  5. console.log(b)
  6. let b = 2
  7. // Uncaught ReferenceError: Cannot access 'b' before initialization
  9. console.log(c)
  10. const c = 3
  11. // Uncaught ReferenceError: Cannot access 'c' before initialization
  13. console.log(d)
  14. // Uncaught ReferenceError: d is not defined

参考：https://www.jianshu.com/p/12c186deb6fe

二、箭头函数

箭头函数的特点就是不接受 this 参数，弱化了 this 的用法

三、三个点语法

默认参数和剩余参数

  1. // 默认参数
  2. function sum(a=0,b=0){
  3.   return a+b
  4. }
  6. // 剩余参数
  7. function sum(message,...numbers){
  8.   let result = 0
  9.   for (let i=0;i<numbers.length;i++){
  10.     result += numbers[i]
  11.   }
  12.   return message + result
  13. }
  14. sum('结果是',1,2,3,4,5,6,7,8,9)

伪数组变数组

  1. // 用 ES6 的 ...
  2. let arguments = [...arguments]
  4. // ES6 提供的 API
  5. let arguments = Array.from(arguments)

展开操作符

  1. let array1 = [1,2,3,4,5,6]
  2. let [a,b,c,...array2] = array1
  3. console.log(array2)  // [4,5,6]
  5. let array1 = [1,2,3,4,5,6]
  6. let array2 = [0,...array1,7]
  7. console.log(array2)

解构赋值

  1. let a = 1
  2. let b = 2
  4. [a,b] = [b,a]  // JS 不能括号开头
  5. console.log(a,b)
  6. // 2 1

对象的解构赋值

  1. let {name,age,gender} = {name:'zhangsan',age: 18,gender: 'male'}
  3. let {name:xingming} = {name:'zhangsan',age: 18,gender: 'male'}
  4. // 把结构赋值后的内容重命名

解构赋值 + 默认参数

  1. let [a=7,b=8] = [1]

浅拷贝

  1. // 浅拷贝，把对象中的属性一一拷贝
  2. let objA = {name:'a'}
  3. let objB = Object.assign({},objA)
  5. // ... 语法
  6. let objB= {...objA}

对象合并

  1. let objA = {p1:1,p2:2}
  2. let bojC = {p1:111,p3:3}
  3. let objB = Object.assign({},objA,objC)
  4. console.log(objB)
  6. // ... 语法
  7. let objB = {...objA,...objC}

变量作为对象的 key

  1. let key = 'x'
  2. let value = 'y'
  4. let obj = {}
  5. obj[key] = value
  7. // ES6 的变量变成 key
  8. let obj = {
  9.   [key]: value
  10. }

四、新版字符串

  1. const a = "Hello"
  2. const b = "World"
  3. const string = `${a} ${b}`
  1. let name = 'Eddie'
  2. let person = '人'
  3. let fn = function(){
  4.   console.log(arguments)
  5. }
  7. fn`${name}是一个${person}`
  8. // ["","是一个"，"好人"]

「@浪里淘沙的小法师」