ES6简书

1.变量声明const和let

在ES6语法中我们通常用let和const来声明，let 表示变量、const 表示常量。let 和 const 都是块级作用域。

• 在一个函数内部
• 在一个代码块内部

说白了只要在{}花括号内的代码块即可以认为 let 和 const 的作用域

let声明变量：

• let声明的变量不会挂在window中，不会造成全局变量的污染
• 新增了一个块级作用域{}，以前只有函数作用域，全局作用域
• let是不允许重复声明
• let不会有声明提前
  （只是人为看到的效果，实际上是有声明提前，提前临时性的死区中：Cannot access ‘num’ before initialization）

临时性的死区：

	{
        console.log(value) // 报错
        let value = 'lala'
    }

JS引擎扫描代码时，如果发现变量声明，会将let和const声明的变量关进一个小黑屋也是临时性死区，只有执行到变量声明这句语句时，变量才会从小黑屋被放出来，才能安全使用这个变量。

看下面代码：

function aa() {
    if(flag) {
       let test = 'hello man'
    } else {
        //test 在此处访问不到
        console.log(test)
    }
  }

}
let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。

const声明常量：

• 跟let完全相同 增加几个点
• 不允许被修改(不允许改变内存空间的地址)
• const声明和赋值必须一次性完成，并且后期不允许改变存储空间的地址

const name = 'lux'
	  name = 'joe' // 再次赋值此时会报错

2.字符串

字符串模板：
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定

//ES5 
    var name = 'lux'
    console.log('hello' + name) //hellolux
//es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。

// ES5
    var msg = "Hi \
    man!"
// ES6
    const template = `<div>
        <span>hello world</span>
    </div>`

一些常用的API：

// 1.includes：判断是否包含然后直接返回布尔值
    const str = 'hahay'
    console.log(str.includes('y')) // true

// 2.repeat: 获取字符串重复n次
    const str = 'he'
    console.log(str.repeat(3)) // 'hehehe'
    //如果你带入小数, Math.floor(num) 来处理
    // s.repeat(3.1) 或者 s.repeat(3.9) 都当做成 s.repeat(3) 来处理

// 3. startsWith 和 endsWith 判断是否以 给定文本 开始或者结束
    const str =  'hello world!'
    console.log(str.startsWith('hello')) // true
    console.log(str.endsWith('!')) // true
    
// 4. padStart 和 padEnd 填充字符串，应用场景：时分秒
    setInterval(() => {
        const now = new Date()
        const hours = now.getHours().toString()
        const minutes = now.getMinutes().toString()
        const seconds = now.getSeconds().toString()
        console.log(`${hours.padStart(2, 0)}:${minutes.padStart(2, 0)}:${seconds.padStart(2, 0)}`)
    }, 1000)

3.函数

函数默认参数

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

function action(num = 200) {
        console.log(num)
    }
    action(0) // 0
    action() //200
    action(300) //300

箭头函数

箭头函数最直观的三个特点:

不需要 function 关键字来创建函数
省略 return 关键字
继承当前上下文的 this 关键字

//例如：
    [1,2,3].map(x => x + 1)
    
//等同于：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))

小细节：

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return

4.对象功能

4.拓展的对象功能

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：

    function people(name, age) {
        return {
            name: name,
            age: age
        };
    }

键值对重名，ES6可以简写如下：

    function people(name, age) {
        return {
            name,
            age
        };
    }

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：

   const people = {
        name: 'lux',
        getName: function() {
            console.log(this.name)
        }
    }

ES6通过省略冒号与 function 关键字，将这个语法变得更简洁

   const people = {
        name: 'lux',
        getName () {
            console.log(this.name)
        }
    }

ES6对象提供了 Object.assign() 这个方法来实现浅复制。
Object.assign() 可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

 const objA = { name: 'cc', age: 18 }
    const objB = { address: 'beijing' }
    const objC = {} // 这个为目标对象
    const obj = Object.assign(objC, objA, objB)

    // 我们将 objA objB objC obj 分别输出看看
    console.log(objA)   // { name: 'cc', age: 18 }
    console.log(objB) // { address: 'beijing' }
    console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
    console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }

    // 是的，目标对象ObjC的值被改变了。
    // so，如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}
    Object.assign({}, objC, objA, objB)