ES6新特性

---

---

ES概述

ES全程EcmaScript。 ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

---

为什么要学习新特性

1.语法简洁，功能丰富
2.框架开发应用
3.前端开发职位要求

---

一、let与块级作用域

(一)、let 声明的变量，具有如下几个特点：

1. let 声明的变量具有块作用域的特征。
2. 在同一个块级作用域，不能重复声明变量。
3. let 声明的变量不存在变量提升，换一种说法，就是 let 声明存在暂时性死区（TDZ）。

(二)、const声明方式，除了具有 let 的上述特点外，其还具备一个特点，即 const 定义的变量，一旦定义后，就不能修改，即 const 声明的为常量。

例如：

const a = 1;
console.log(a);//1
a = 2;
console.log(a);//Uncaught TypeError: Assignment to constant variable.

但是，并不是说 const 声明的变量其内部内容不可变，如：

const obj = {a:1,b:2};
console.log(obj.a);//1
obj.a = 3;
console.log(obj.a);//3

所以准确的说，是 const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。

二、数组的解构

// 例
const arr = [100, 200, 300]

// 1. 以前的数组存储方法
const foo = arr[0]
const bar = arr[1]
const baz = arr[2]
console.log(foo, bar, baz)
// 新的存储方法
const [foo, bar, baz] = arr

// 2. 如果只想获取第三个成员baz，可以参照下面写法，需要保留逗号
const [, , baz] = arr

// 3.获取第一个元素之外的所有元素
const [foo, ...rest] = arr

// 4.
const [foo] = arr
const [foo, bar, baz, more] = arr

// 5.设置默认值baz = 123
const [foo, bar, baz = 123, more = 'default value'] = arr

const path = '/foo/bar/baz'
// const tmp = path.split('/')
// const rootdir = tmp[1]

const [, rootdir] = path.split('/')
console.log(rootdir)

三、对象的解构

const gemstone = {
  type: 'quartz',
  color: 'rose',
  karat: 21.29
};
const {type, color, karat} = gemstone;
console.log(type, color, karat);

花括号 { } 表示被解构的对象，type、color 和 karat 表示要将对象中的属性存储到其中的变量

四、模板字符串

1.简化了字符串的拼接并支持换行
2.可以在``中使用${js表达式}
3.模板字符串会自动执行js表达式的结果,并拼接到最终生成的普通字符串中

// 反引号包裹
const str = `hello es2015, this is a string`
// 允许换行
const str = `hello es2015,
this is a \`string\``
console.log(str)
const name = 'tom'
// 可以通过 ${} 插入表达式，表达式的执行结果将会输出到对应位置
const msg = `hey, ${name} --- ${1 + 2} ---- ${Math.random()}`
console.log(msg)

五、带标签的模板字符串

// 模板字符串的标签就是一个特殊的函数，
// 使用这个标签就是调用这个函数
// const str = console.log`hello world`

const name = 'tom'
const gender = false

function myTagFunc (strings, name, gender) {
  // console.log(strings, name, gender)
  // return '123'
  const sex = gender ? 'man' : 'woman'
  return strings[0] + name + strings[1] + sex + strings[2]
}

const result = myTagFunc`hey, ${name} is a ${gender}.`

console.log(result) // 输出结果： hey, tom is a woman

六、字符串的扩展方法

1. includes()
用于判断字符串是否包含指定的子字符串。
如果找到匹配的字符串则返回 true，否则返回 false。
注意： includes() 方法区分大小写。
2. startsWith()
startsWith() 方法用于检测字符串是否以指定的子字符串开始。
如果是以指定的子字符串开头返回 true，否则 false。
startsWith() 方法对大小写敏感。
3. endsWith()
用于测试字符串是否以指定的后缀结束。
注意，如果参数是空字符串，或者等于此 String 对象（用 equals(Object) 方法确定），则结果为 true。

const message = 'Error: foo is not defined.'
console.log(
  message.startsWith('Error')
  message.endsWith('.')
  message.includes('foo')
)

七、参数默认值

function foo (enable) {
	// 短路运算很多情况下是不适合判断默认参数的，例如 0 '' false null
	// enable = enable || true
	enable = enable === undefined ? true : enable
	console.log('foo invoked - enable: ')
	console.log(enable)
}

// 默认参数一定是在形参列表的最后
function foo (enable = true) {
  console.log('foo invoked - enable: ')
  console.log(enable)
}

foo(false)

八、剩余参数

以前的写法

function foo () {
	console.log(arguments)
}
foo(1, 2, 3, 4)

ES6的新写法

function foo (first, ...args) {
  console.log(args)
}
foo(1, 2, 3, 4)

九、展开数组

const arr = ['foo', 'bar', 'baz']
console.log(
	arr[0],
	arr[1],
	arr[2],
)
console.log.apply(console, arr)
console.log(...arr)