# ES6新特性列表

// var声明的变量整个函数作用域内都可以访问
function varTest() {
  var x = 1;
  {
    var x = 2;  // 同样的变量!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

// let声明的变量只能在所在的块区域内访问
function letTest() {
  let x = 1;
  {
    let x = 2;  // 不同的变量
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

// 位于函数或代码顶部的var声明会给全局对象新增属性, 而let不会。例如:
var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined

function do_something () {
    console.log(bar); // undefined
    // console.log(foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization
    console.log(typeof foo); // Uncaught ReferenceError: Cannot access 'foo' before initialization
    var bar = 1;
    let foo = 2;
}
do_something()

function multiply(a, b = 1) {
  return a * b;
}
console.log(multiply(5, 2)); // 10
console.log(multiply(5)); // 5

// 这个规则对于函数和变量也是适用的
function callSomething(thing = something()) {
 return thing;
}
let numberOfTimesCalled = 0;
function something() {
  numberOfTimesCalled += 1;
  return numberOfTimesCalled;
}
callSomething(); // 1
callSomething(); // 2

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => { return previous + current; });
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4)); // 10

// 可以解构剩余参数
function f(...[a, b, c]) { return a + b + c;}
f(1)          // NaN (b and c are undefined)
f(1, 2, 3)    // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)

function sum(x, y, z) { return x + y + z; }
const numbers = [1, 2, 3];
// 使用apply形式
console.log(sum.apply(null, numbers)); // 6
// 使用扩展运算符
console.log(sum(...numbers)); // 6
// 扩展运算符在 new中应用
new Date(...[1970, 0, 1])

// 数组拷贝，是浅拷贝，多维数组无法使用扩展运算符拷贝
var arr1 = [1, 2, 3];
var arr2 = [...arr1]; // 类似arr.slice()
arr2.push(4);  // arr2 此时变成 [1, 2, 3, 4], arr 不受影响
// 扩展运算符还可以用来连接多个数组
var arr3 = [...arr1, ...arr2] // [1, 2, 3, 1, 2, 3, 4]

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
// 克隆对象
var clonedObj = { ...obj1 }; // { foo: "bar", x: 42 }
// 合并对象
var mergedObj = { ...obj1, ...obj2 }; // { foo: "baz", x: 42, y: 13 }

`string text`
// 多行
`string text line 1
 string text line 2`
// 字符串拼接参数
`string text ${expression} string text`

console.log('string text line 1\n' +
'string text line 2');
// "string text line 1
// string text line 2"

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

var a = 5;
var b = 10;
console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
// "Fifteen is 15 and
// not 20."

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

function myTag(strings, personExp, ageExp) {
  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "
  // 其实还有一个表达式，但是他是空的，所以忽略
  // var str2 = strings[2];
  var ageStr;
  if (ageExp > 99){ ageStr = 'centenarian'; }
  else { ageStr = 'youngster'; }
  return str0 + personExp + str1 + ageStr;
}
var person = 'Mike';
var age = 28;
var output = myTag`that ${ person } is a ${ age }`;
console.log(output);

function tag(strings) { console.log(strings.raw[0]); }
tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" , 输出了需要特殊处理的字符'\' and 'n'
tag`hello ${2222} 你好`; // hello , 遇到插值就结束输出了

var str = String.raw`Hi\n${2+3}!`;
// "Hi\n5!"

str.length;
// 6

str.split('').join(',');
// "H,i,\,n,5,!"

// 解构数组
let a, b, rest;
[a, b] = [10, 20]; // a === 10, b === 20
[a, b, ...rest] = [10, 20, 30, 40, 50]; // 将剩余数组赋值给一个变量
console.log(rest);  //  [30, 40, 50]
// 默认值：为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值。
[a=5, b=7] = [1]; // a === 1, b === 7
// 解析一个从函数返回的数组, 还可以忽略某些返回值
function f() { return [1, 2, 3]; }
var [a, , b] = f();

// 解构对象
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
// 可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42 
// 默认值：变量可以先赋予默认值。当要提取的对象没有对应的属性，变量就被赋予默认值。
var {a = 10, b = 5} = {a: 3};
console.log(b); // 5
// 给新的变量命名并提供默认值
var {a:aa = 10, b:bb = 5} = {a: 3};
console.log(bb); // 5

// 函数参数
// 从作为函数实参的对象中提取数据
function whois({id, name: showName, fullName: {firstName: name}}){
  console.log('id: ', id, showName + " is " + name);
}
var user = { id: 42, name: "jdoe", fullName: { firstName: "John",} };
whois(user)
// 函数参数默认值
function f({size='big', radius=25} = {}) { console.log(size, radius); }
f({radius: 30})

// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}
// 导出列表
export { name1, name2, …, nameN };
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
// 解构导出并重命名
export const { name1, name2: bar } = o;
// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 使用命名导出 
// module "my-module.js"
function cube(x) { return x * x * x; }
const foo = Math.PI + Math.SQRT2;
export { cube, foo };
// 在其他的文件中导入：
import { cube, foo, graph } from 'my-module.js';

// 使用默认导出
// module "my-module.js"
export default function cube(x) { return x * x * x; }
// 在其他的文件中导入：
import cube from 'my-module.js';

// 导出文件：/modules/my-module.js文件
export function cube(x) { return x * x * x; }
export const foo = Math.PI + Math.SQRT2;
const name = 'export'
export { name };
export default '我是默认导出的'

// 导入文件写法
// 导入整个模块的内容，这将myModule插入当前作用域，其中包含来自位于/modules/my-module.js文件中导出的所有接口。
import * as myModule from '/modules/my-module.js';
console.log(myModule)
// {cube: [Function: cube], default: '我是默认导出的', foo: 4.555, name: 'export'}
myModule.cube(5)
// 导入单个、多个
import {cube} from '/modules/my-module.js';
import {cube, foo} from '/modules/my-module.js';
// 导入时重命名接口
import {cube as cc , foo as ff} from '/modules/my-module.js';
console.log(ff) // 4.55580
// 为了执行模块文件，不导入模块任何接口：这将运行模块中的全局代码, 但实际上不导入任何值。
import '/modules/my-module.js';

// 导入默认，
// 单独导入默认，名字可以任意命名
import tt from '/modules/my-module.js';
console.log(tt) // '我是默认导出的'
// 默认和命名空间导入或命名导入一起使用
import tt, * as myModule from './b.mjs'
// 或者
import tt, {cube, foo} from './b.mjs'

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

let module = await import('/modules/my-module.js');