linchwei / blog

个人平常笔记
5 stars 0 forks source link

ES6、ES7工作中经常用到的特性 #24

Open linchwei opened 7 years ago

linchwei commented 7 years ago

1. let 、 const

描述:let 用于声明变量,类似于var,const用于声明常量(声明时必须赋初值,之后不可再改变)

特点:

2. 解构赋值

描述: 按照一定模式,从数组和对象中提取值,对变量进行赋值,成为解构。

2.1 数组解构赋值

只要等号两边的模式相同,左边的变量就会被赋予对应的值(一一对应)

let [a, b, c] = ['levy', 'lin', 'love']
a  //  "levy"
b  //  "lin"
c  //  "love"

若左边变量在右边没有匹配到一一对应的值,则解构不成功,值未undefined

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

若右边的值没有左边的变量与之匹配,则不完全解构,未匹配的值会丢弃

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

左边变量允许默认值(即当解构不成功时,使用默认值)

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

2.2 对象解构赋值

对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

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

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

其实,实际是,先找到同名属性,然后在赋值给对应的变量,真正被赋值的是后者

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined

上面例子,foo是匹配模式,baz才是变量

对象也可以有默认值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

3. 函数

描述: 函数新增了比较多有用的特性,如参数默认值、rest参数、箭头函数等...

3. 函数默认值

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

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

与解构赋值默认值配合使用

function fetch(url, { body = '', method = 'GET', headers = {} }) {
  console.log(method);
}

fetch('http://example.com', {})
// "GET"

fetch('http://example.com')
// 报错

3.2 rest 参数

rest 参数(形式为...变量名),用于获取函数的多余参数

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

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

  return sum;
}

add(2, 5, 3) // 10

3.3 箭头函数

ES6最酷的特性之一(=>)

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

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

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

// 正常函数写法
[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);

//  rest 参数与箭头函数结合的例子。
const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

注意点:

4. 数组、对象

4.1 数组扩展运算符

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

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 push(array, ...items) {
  array.push(...items);
}

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

var numbers = [4, 38];
add(...numbers) // 42

4.2 对象扩展运算符

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

var o = Object.create({ x: 1, y: 2 });
o.z = 3;

let { x, ...{ y, z } } = o;
x // 1
y // undefined
z // 3

4.3 属性简洁表示法

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

// 等同于
var baz = {foo: foo};