ES6中 常用使用方法

1、解构赋值

• 数组解构
  以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

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

解构默认值

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

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

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

• 多重对象连续解构

let obj = {a:{b:{c:1}}}
const {a:{b:{c}}} = obj
console.log(c) // 1

• 多重对象连续解构并重命名

let obj = {a:{b:{c:1}}}
const {a:{b:{c:date}}} = obj
console.log(date) // 1

如果变量名与属性名不一致，必须写成下面这样。

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

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

函数的参数也可以使用解构赋值。

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

2、模板字符串

传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

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

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

字符串模版的优点

• 允许换行
• 可以使用插值 ${}

字符串方法：

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

数组方法：

3、find

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

// 获取第一个大于10的数
var array1 = [5, 12, 8, 130, 44];

var found = array1.find(function(element) {
  return element > 10;
});
console.log(found);

4、findIndex

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

// 获取第一个大于10的下标
var array1 = [5, 12, 8, 130, 44];

function findFirstLargeNumber(element) {
  return element > 13;
}

console.log(array1.findIndex(findFirstLargeNumber));

函数

5、箭头函数

基本使用：

var fn = function(x, y) {
    console.log(x + y);
}

相当于
//语法： (参数列表) => {函数体}
var fn = (x, y) => {
    console.log(x + y);
}

参数详解

• 如果没有参数列表，使用()表示参数列表

var sum = () => {
    console.log('哈哈')
};
// 等同于：
var sum = function() {    
    console.log('哈哈')
};

• 如果只有一个参数，可以省略()

// 等同于：
var sum = function(n1) {    
    console.log('哈哈')
};

var sum = n1 => {
    console.log('哈哈')
};

• 如果有多个参数，需要使用()把参数列表括起来

var sum = function(n1, n2) {    
    console.log('哈哈')
};

var sum = (n1, n2) => {
    console.log('哈哈')
};

返回值详解

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

var sum = function(n1) {    
    console.log('哈哈')
};

var sum = n1 => {
    console.log('哈哈')
};

• 如果函数体只有一行一句，那么可以省略{}和return

var fn = function(n1, n2) {
    return n1 + n2;
}

var fn = (n1, n2) => n1 + n2;

箭头函数的注意点：

箭头函数内部没有this，因此箭头函数内部的this指向了外部的this

箭头函数不能作为构造函数，因为箭头函数没有this

6、 默认参数

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

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

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

7、rest参数

function add(...values) {

}

add(2, 5, 3) // 10