ES6 笔记

关于 ... 语法

1. 参数：ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

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

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

  return sum;
}

add(2, 5, 3) // 10

2. 对象属性赋值，合并

let bar = {a: 1, b: 2, c:3};
let baz = {...bar, ...{a:2, b: 4}}
console.log(baz)  // {a: 2, b: 4, c: 3}

  

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;
};

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

export default :用于指定模块的默认输出，记住：输出的是默认对象，如果没有default，输出的是对象列表，需import时处理

# 用法示例
// models/User.js
export default class User {
	name = 'no name';
	id = 0;
	openid = '';
	union_id = '';

	constructor() {}
}

// index.js
import User from '@/models/User';
let user= new User();

读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在。比如，读取message.body.user.firstName这个属性，安全的写法

// 正确的写法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

// 用 ?. 语法
// 本质上，?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。
const firstName = message?.body?.user?.firstName || 'default';

// 用 ?? 语法
// 只有运算符左侧的值为null或undefined时，才会返回右侧的值。
let response = undefined
let headerText = response?.settings?.headerText ?? 'default';
console.log(headerText)

参考:

- ES6 入门教程