es6简单小复习

Ecmascript 6

• ECMAScript 6.0（如下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。
• Ecmascript 是 JavaScript 语言的标注规范
• JavaScript 是 Ecmascript 规范的具体实现
  • 具体实现取决于各大浏览器厂商的支持进度
• Ecmascript 6 也被称做 Ecmascript 2015
• 各大浏览器厂商对于最新的 Ecmascript 6 标准支持能够参照：
  • http://kangax.github.io/compat-table/es6/
• 对于不支持 ES6 的环境，可使用一些编译转码工具作转换处理再使用
  • 例如 babel

let 和 const

let：

• let 相似于 var，用来声明变量
• 经过 let 声明的变量不一样于 var，只在 let 命令所在的代码块内有效（块级做用域）
• let 声明的变量不存在变量提高
• let不容许在相同做用域内，重复声明同一个变量

const：

• const声明一个只读的常量。一旦声明，常量的值就不能改变
• const 声明必须初始化
• const的做用域与let命令相同：只在声明所在的块级做用域内有效
• const命令声明的常量也是不提高，必须先声明后使用
• const声明的常量，也与let同样不可重复声明

解构赋值

ES6 容许按照必定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

数组解构：

let [a, b, c] = [123, 456, 789]
console.log(a, b, c) 123 456 789

对象解构：

let { name, age } = { name: 'Jack', age: 18 }
console.log(name, age) Jack 18

函数参数解构：

function f (p1, { p2 = 'aa', p3 = 'bb' }) {
  console.log(p1, p2, p3)
}

f('p1', { p2: 'p2' }) p1 p2 bb

字符串解构：

let [a, b, c, d, e] = 'hello'
console.log(a, b, c, d, e) h e l l o

字符串

实用方法：

includes(String)：返回布尔值，表示是否找到了参数字符串。
startsWith(String)：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith(String)：返回布尔值，表示参数字符串是否在源字符串的尾部。
repeat(Number)：repeat方法须要指定一个数值，而后返回一个新字符串，表示将原字符串重复Number次。

模板字符串：

let basket = { count: 5, onSale: true }
$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

• 模板字符串（template string）是加强版的字符串，用反引号（`）标识
• 它能够看成普通字符串使用，也能够用来定义多行字符串，或者在字符串中嵌入变量
• 若是使用模板字符串表示多行字符串，全部的空格和缩进都会被保留在输出之中
• 模板字符串中嵌入变量，须要将变量名写在 ${} 之中
  • 大括号内部能够放入任意的JavaScript表达式，能够进行运算，以及引用对象属性
  • 大括号内部还能够调用函数

数组

方法：

Array.from() 将一个伪数组转为一个真正的数组
              实际应用中，常见的相似数组的对象是DOM操做返回的NodeList集合，
              以及函数内部的arguments对象。Array.from均可以将它们转为真正的数组。
Array.of() Array.of方法用于将一组值，转换为数组
           这个方法的主要目的，是弥补数组构造函数Array()的不足。
           由于参数个数的不一样，会致使Array()的行为有差别。
find() 查找数组中某个元素
findIndex() 查找数组中某个元素的索引下标
includes() 返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法相似

实例方法：

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组.
能够用 for...of 循环进行遍历，惟一的区别是 keys() 是对键名的遍历、
values() 是对键值的遍历，entries() 是对键值对的遍历。

entries() 
keys()
values()

函数的扩展

函数参数的默认值：

ES6 容许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') Hello World
log('Hello', 'China') Hello China
log('Hello', '') Hello

• 一般状况下，定义了默认值的参数，应该是函数的尾参数
  • 由于这样比较容易看出来，到底省略了哪些参数
  • 若是非尾部的参数设置默认值，实际上这个参数是无法省略的。
• 指定了默认值之后，函数的length属性，将返回没有指定默认值的参数个数
  • 也就是说，指定了默认值后，length属性将失真

rest 参数：

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) 10

扩展运算符：

console.log(...[1, 2, 3]) 1 2 3
console.log(1, ...[2, 3, 4], 5) 1 2 3 4 5

箭头函数：

var f = v => v

上面的箭头函数等同于：

var f = function(v) {
  return v
}

• 箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
• 箭头函数不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误
• 箭头函数内部不可使用arguments对象，该对象在函数体内不存在
  • 若是要用，能够用Rest参数代替

对象

属性的简洁表示法：

var foo = 'bar';
var baz = {foo};
baz {foo: "bar"}

等同于
var baz = {foo: foo}

除了属性简写，方法也能够简写:
var o = {
  method() {
    return "Hello!"
  }
}

等同于

var o = {
  method: function() {
    return "Hello!"
  }
}