ES6常用语法（上）

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

• this关键字

this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this都有一个共同点：它总是返回一个对象

简单说，this就是属性或方法“当前”所在的对象。

 

var person = {

  name: '张三',

  describe: function () {

    return '姓名：'+ this.name;

  }};

 

person.describe()// "姓名：张三"

上面代码中，this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用，而describe方法所在的当前对象是person，因此this指向person，this.name就是person.name。

 

     this主要有以下几个使用场合

（1）全局环境

全局环境使用this，它指的就是顶层对象window。

 

this === window // true

 

function f() {

  console.log(this === window);

}

f() // true

//注：严格模式下 普通函数内部 this 等于 undefined

 

 

（2）构造函数

构造函数中的this，指的是实例对象

 

function Person(p) {

  this.p = p;

};

var obj = new Person()

 

（3）对象的方法

如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。

 

var obj ={

  foo: function () {

    console.log(this);

  }};

 

obj.foo() // obj 

 

 

---

 

• bind方法

bind方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。

              var dog ={

                   name:'wangcai',

                   age:18,

                   wang:function(){

                        console.log(this)

                   }

              }

              var person = {name:'小明'}

              var func = dog.wang.bind(person)

              func();

//上面代码将person绑定到了func函数内部

 

 

 

---

 

• let/const

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

 

for循环的计数器，就很合适使用let命令。

 

var oLis = document.getElementsByTagName('li')

for (let i = 0; i < oLis.length; i++) {

// ...

     oLis[i].onclick = function(){

          console.log(i)// 0 1 2 3 4

     }

}

console.log(i);

// ReferenceError: i is not defined

//上面代码相当与产生了几个块级作用域

{

     var i=0;

     oLis[i].onclick = function(){

          console.log(i)

     }

}

 

{

     var i=1;

     oLis[i].onclick = function(){

          console.log(i)

     }

}

 

 

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

 

 

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景，let实际上为 JavaScript 新增了块级作用域。

 

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

 

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。

 

• const命令

 

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值

 

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

 

---

 

• 变量解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

 

以前，为变量赋值，只能直接指定值。

 

let a = 1;

let b = 2;

let c = 3;

ES6 允许写成下面这样。

 

let [a, b, c] = [1, 2, 3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值

 

解构不仅可以用于数组，还可以用于对象

 

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

 

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"

bar // "bbb"

 

let { foo} = { foo: "aaa", bar: "bbb" };

foo // "aaa"

 

---

 

• 字符串扩展

模板字符串（template string）是增强版的字符串

 

传统的 JavaScript 语言，输出模板通常是这样写的。

 

var a = 1

var b = 2;

var sum = a + b;

var res = a + '+' + b + '的和是<b>' + c+'</b>';

console.log(res)

 

box.innerHTML = res;

 

var obj=  {name:'zhangsan',age:18};

 

var str = '<b>姓名</b>：'+obj.name+'<b>年龄</b>:'+obj.age;

 

div.innerHTML = str;

 

上面这种写法(拼字符串)相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，可以在字符串中嵌入变量， 模板字符串中嵌入变量，需要将变量名写在${}之中。

 

var a = 1

var b = 2;

var sum = a + b;

var res = `a+b的和是<b>${c}</b>`;

console.log(res)

 

box.innerHTML = res;

 

var obj=  {name:'zhangsan',age:18};

 

var str =`<b>姓名</b>：${obj.name}<b>年龄</b>:${obj.age}`

 

div.innerHTML = str;

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义

 

let greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中

 

oDiv.innerHTML = `

<ul>

  <li>first</li>

  <li>second</li>

</ul>

`

 

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

 

et x = 1;let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
let obj = {x: 1, y: 2};
`${obj.x + obj.y}`

模板字符串之中还能调用函数

 

function fn() {
  return "Hello World";}

`foo ${fn()} bar`
// foo Hello World bar

 

 

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

 

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

 

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

repeat方法返回一个新字符串，表示将原字符串重复n次

 

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

• 数组新增方法

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（ES6 新增的数据结构 Set 和 Map）

下面是一个类似数组的对象，Array.from将它转为真正的数组

 

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',

    length: 3};

 

let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组

 

---

 

• 扩展运算符三个点（...）

 

扩展运算符（ spread ）是三个点（...）。将一个数组转为用逗号分隔的参数序列。

 

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

// 1 2 3 

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

// 1 2 3 4 5 

[...document.querySelectorAll('div')] 

// [<div>, <div>, <div>]

//该运算符将一个数组，变为参数序列

 

 

function add(x, y) { 

return x + y; 

} 

var numbers = [4, 38]; 

add(...numbers) //

 

//该运算符将一个数组，变为参数序列

 

 var arr1 = ['a', 'b'];

 

 var arr2 = ['c'];

 

 var arr3 = ['d', 'e'];

// 合并数组

 

 [...arr1, ...arr2, ...arr3]

• 箭头函数 =>

 

 

ES6 允许使用“箭头”（=>）定义函数。

 

var f = v => v;
// 等同于
var f = function (v) {
  return v;};

 

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

 

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;};

 

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

 

var sum = (num1, num2) => { return num1 + num2; }

箭头函数使得表达更加简洁。

const isEven = n => n % 2 == 0;

const square = n => n * n;

 

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。

 

箭头函数的一个用处是简化回调函数。

 

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;});
// 箭头函数写法

[1,2,3].map(x => x * x);

 

// 正常函数写法
var result = values.sort(function (a, b) {
  return a - b;});
// 箭头函数写法
var result = values.sort((a, b) => a - b);

 

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。

 

 

var handler = {
  id: '123456',

  init: function() {

     //在事件执行函数内部，this本该是document本身，现在变成了 handler对象

    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }};

上面代码的init方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象

 

---

 

 

• 函数参数默认值

 

ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

 

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

log('Hello') // Hello World

log('Hello', 'China') // Hello China

 

 //这种写法的缺点在于，如果参数y赋值了，但是对应的布尔值为false，则该赋值不起作用。

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

 

 

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

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

可以看到，ES6 的写法比 ES5 简洁许多，而且非常自然。