<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6day02练习</title>
<script type="text/javascript">
// 六. 函数
// 1.函数参数的扩展
//基本用法
// function fn(name,age){
// console.log(name+","+age);
// }fn("Amy",18); // Amy,18
// fn("Amy",""); // Amy,
// 参数默认值
// 示例一
// function log(x, y = 'World') {
// console.log(x, y);
// }
// log('Hello') // Hello World
// log('Hello', 'China') // Hello China
// log('Hello', '') // Hello
// 示例二
// function Point(x = 0, y = 0) {
// this.x = x; this.y = y;
// }
// let p = new Point();
// console.log(p);// Point {x: 0, y: 0}
// p = new Point(1,2);
// console.log(p); //Point {x: 1, y: 2}
// 参数是一组有序的值，array 解构赋值
// function f([x, y, z]) { ... }
// f([1, 2, 3]);
// 参数是一组无序的值，object 解构赋值
// function f({x, y, z}) { ... }
// f({z: 3, y: 2, x: 1});
// 2.不定参数（rest参数）
// ES6引入rest参数（形式为“...变量名”），用于获取函数的多个参数。
// rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
// function f01(...values) {
// let sum = 0;
// for (var val of values) {
// sum += val;
// }
// return sum;
// }
// let result = f01(2, 5, 8)
// console.log(result);//15
// 注意：rest参数只能放在参数组的最后，并且有且只有一个 不定参数。
//function f(a, ...b, c) { // ... }
// 函数的length属性代表函数的参数个数。
// length属性，不包括已指定默认值的参数
// length属性，不包括rest参数。
// let len = (function(a) {}).length; // 1
// console.log(len);
// len = (function (a = 5) {}).length; // 0
// console.log(len);
// len =(function (a, b, c = 5) {}).length; // 2
// console.log(len);
// len =(function(...a) {}).length; // 0
// console.log(len);
// len = (function(a, ...b) {}).length ; // 1
// console.log(len);
// 3.箭头函数
// ES6允许使用“箭头”（=>）定义函数。
// 参数 => 函数体
// v => v;
// let f = v => v;
// 该函数等同于：
// let f = function(v) {
// return v;
// };
// f(1); //1
// 通过对比发现，上述定义的箭头函数是拥有一个参数、一个返回语句的函数
// 箭头函数是函数式编程的一种体现，将更多的关注点放在输入和输出的关系，省去过程中的一些因素。
// 箭头函数相当于匿名函数。
// 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
// let f = () => 5;
// // 等同于
// let f = function () { return 5 };
// let sum = (num1, num2) => num1 + num2;
// // 等同于
// let sum = function(num1, num2) {return num1 + num2; };
// 如果箭头函数的代码块不仅只有return语句，就要使用语句 块将它们括起来。
// let sum = (num1, num2) => {
// console.log(num1 + num2);
// return num1 + num2;
// };
// 由于大括号在箭头函数中被解释为代码块，
// 所以如果箭头函数返回一个对象，必须在对象外面加上括号。
// let getTempItem = id => ({ id: id, name: "Temp" });
// // 等同于
// let getTempItem = function (id) {
// return { id: id, name: "Temp" }
// };
// // 箭头函数可以与解构赋值结合使用。
// const full = ({ first, last }) => first + ' ' + last;
// // 等同于
// function full(person) {
// return person.first + ' ' + person.last;
// }
// 箭头函数中的 this
// 普通函数中this对象的指向是可变的，但是在箭头函数中， 它是固定的。
// 如果是普通函数，执行时this应该指向全局对象。
// var Person = {
// 'age': 18,
// 'sayHello': function() {
// setTimeout(function() {
// console.log(this.age);
// });
// } };
// var age = 20;
// Person.sayHello(); // 20
//箭头函数内的this对象，就是定义时所在的对象。
// var Person1 = {
// 'age': 18,
// 'sayHello': function() {
// setTimeout(() => {
// console.log(this.age);
// }); } };
// var age = 20;
// Person1.sayHello(); // 18
// 箭头函数的使用场景（了解）
// 箭头函数使得表达更加简洁。
// const isEven = n => n % 2 == 0;
// const square = n => n * n;
// 上面代码只用了两行，就定义了两个简单的工具函数。
// 如果不用箭头函数，可能就要占用多行，而且还不如现在这样 写醒目。
// 箭头函数简化回调函数。
// 正常函数写法
// [1,2,3].map(function (x) {
// return x * x;//[1,4,9]
// });
// 箭头函数写法
// [1,2,3].map(x => x * x);
// rest参数、扩展运算符、箭头函数结合。
// const numbers = (...nums) => nums;
// let result = numbers(1, 2, 3, 4, 5);
// console.log(result); // [1,2,3,4,5]
// result = numbers(...[6, 7, 8, 9, 0]);
// console.log(result); // [6, 7, 8, 9, 0]
// const headAndTail = (head, ...tail) => [head, tail];
// result = headAndTail(1, 2, 3, 4, 5);
// console.log(result); // [1,[2,3,4,5]]
// 七. 字符串模板
// 传统的JavaScript语言，输出模板通常是这样写的。
// $('#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! `
// );
// 模板字符串（template string）是增强版的字符串，
// 用反引号（`）标识。
// 它可以当作普通字符串使用，也可以用来定义多行字
// 符串，或者在字符串中嵌入变量。
// 普通字符串
//`In JavaScript '\n' is a line-feed.`
// 多行字符串
// `In JavaScript this is not legal.`
// console.log(`string text line 1 string text line 2`);
// 字符串中嵌入变量
// var name = "Bob",
// time = "today";
// `Hello ${name}, how are you ${time}?`
// 如果在模板字符串中需要使用反引号，则前面要用反斜杠转 义。
//var greeting = `\`Yo\` World!`;
// 八. 扩展运算符
// 扩展运算符（spread）是三个点（...）。
// 它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。
// console.log(...[1, 2, 3]);// 1 2 3
// console.log(1, ...[2, 3, 4], 5);// 1 2 3 4 5
// console.log([...document.querySelectorAll('body ')]);// [<body>]
// 该运算符主要用于向函数传递实际参数。
// （rest参数定义函数的形式参数;扩展运算符提供实际参数）
// function f02(...values) {
// let sum = 0;
// for (var val of values) {
// sum += val;
// }
// return sum;
// }
//普通参数
// let result = f02(2, 5, 8) // 15
// console.log(result);
//扩展运算符参数
// result = f02(...[3,6,9]) // 18
// console.log(result);
//普通参数与扩展运算符参数结合使用
// result = f02(666, ...[1,4,7]) // 678
// console.log(result);
// 1. 复制数组
// const a1 = [1, 2];
// const a2 = [...a1]; // 写法一
// const [...a3] = a1;// 写法二
// 2. 合并数组
// 扩展运算符提供了数组合并的新写法。
// let arr1 = ['a', 'b'];
// let arr2 = ['c'];
// let arr3 = ['d', 'e'];
// ES5的合并数组
// let result = arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
// result = [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]
// 3. 解构赋值结合
// 扩展运算符可以与解构赋值结合起来，用于生成数组。
// const [first, ...rest] = [1, 2, 3, 4, 5];
// console.log([first, ...rest]); //[1, 2, 3, 4, 5]
// 扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
// const [...first, last] = [1, 2, 3, 4, 5];
// console.log([...first, last]); //Rest element must be last element
// const [first, ...middle, last] = [1, 2, 3, 4, 5];
// console.log([first, ...middle, last]);//Rest element must be last element
// 4. 字符串
// 扩展运算符还可以将字符串转为真正的数组。
// let arr = [...'hello']
// console.log(arr); // [ "h", "e", "l", "l", "o" ]
//5. 转为真正的数组
// 任何Iterator接口的对象，都可以用扩展运算符转为真正数组。
// 下面代码中，querySelectorAll方法返回的是一个 nodeList对象。
// 它不是数组，而是一个类似数组的对象。
// var nodeList = document.querySelectorAll('body');
// var array = [...nodeList];
// console.log(array);//[]
// 这时，扩展运算符可以将其转为真正的数组，原因就在于 NodeList对象实现了Iterator接口。
// 对于那些没有部署Iterator接口的类似数组的对象，扩展运 算符就无法将其转为真正的数组。
// let arrayLike = {
// '0': 'a', '1': 'b', '2': 'c',
// length: 3 ,
// };
// let array = [...arrayLike]; // object is not iterable (cannot read property Symbol(Symbol.iterator))
// console.log(array);
// 上面代码中，arrayLike是一个类似数组的对象，但是没有部署Iterator接口，扩展运算符就会报错。
// 这时，可以改为使用Array.from方法将arrayLike转为真的数组。
// 6. Map和Set结构
// 扩展运算符内部调用的是数据结构的Iterator接口，
// 因此只要具有Iterator接口的对象，都可以使用扩展运算符
// Map结构：
// let map = new Map(
// [ [1, 'one'],
// [2, 'two'],
// [3, 'three'],
// ]);
// let keyArray = [...map.keys()];
// console.log(keyArray);//(3)[1, 2, 3]
// let valueArray = [...map.values()];
// console.log(valueArray);//(3) ["one", "two", "three"]
// 九. Iterator和for...of循环
//Iterator（遍历器）的概念
// JavaScript原有的表示“集合”的数据结构，
// 主要是数组（Array）和对象（Object），
// ES6又添加了Map和Set。这样就有了四种数据集合，
// 用户还可以组合使用它们，定义自己的数据结构，比如数组
// 的成员是Map，Map的成员是对象。
// 这样就需要一种统一的接口机制，来处理所有不同的数据结
// 构。
// 遍历器（Iterator）就是这样一种机制。它是一种接口，为各
// 种不同的数据结构提供统一的访问机制。任何数据结构只要
// 部署Iterator接口，就可以完成遍历操作（即依次处理该数据
// 结构的所有成员）。
// 有些数据结构原生具备Iterator接口（比如数组），即不
// 用任何处理，就可以被for...of循环遍历，有些就不行（比如
// 对象）。原因在于，这些数据结构原生部署了
// Symbol.iterator属性，另外一些数据结构没有。凡是部署了
// Symbol.iterator属性的数据结构，就称为部署了遍历器接
// 口。调用这个接口，就会返回一个遍历器对象。
// console.log(Array.prototype); //Array(0) //含有Symbol(Symbol.iterator): ƒ values()
//console.log(Object.prototype);//object
// console.log(Map.prototype); //Map //含有Symbol(Symbol.iterator): ƒ values()
// console.log(Set.prototype);//set //含有Symbol(Symbol.iterator): ƒ values()
// ES6规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性，
// 或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。
// 调用Symbol.iterator方法，就会得到当前数据结构默认的遍历器生成函数。
// Symbol.iterator本身是一个表达式，返回Symbol对象的 iterator属性，
//这是一个预定义好的、类型为Symbol的特殊值，所以要放在方括号内。
// const arr = ['red', 'green', 'blue'];
// let iterator = arr[Symbol.iterator]();
// for...of循环
// ES6借鉴C++、Java、C#和Python语言，引入了for...of 循环，作为遍历所有数据结构的统一的方法。
// 一个数据结构只要部署了Symbol.iterator属性，就被视为 具有iterator接口，就可以用for...of循环遍历它的成员。
// 也就是说，for...of循环内部调用的是数据结构的 Symbol.iterator方法。
// for...of循环可以使用的范围包括数组、Set和Map结构、 某些类似数组的对象（
//比如arguments对象、DOM NodeList对 象）、Generator对象，以及字符串。
// 数组原生具备iterator接口，for...of循环本质上就是调 用这个接口产生的遍历器
// const arr = ['red', 'green', 'blue'];
// let iterator = arr[Symbol.iterator]();
// for (let v of iterator) {
// console.log(v);
// }
// for (let v of arr) {
// console.log(v);
// }
// JavaScript原有的for...in循环，遍历获得对象的键名。 {name:123,pass:456}
// ES6提供for...of循环，遍历获得键值。
// var arr = ['a', 'b', 'c', 'd'];
// for (let a in arr) {
// console.log(a);
// }
// for (let a of arr) {
// console.log(a);
// }
// 类似数组的对象
// 类似数组的对象包括好几类。
// 下面是for...of循环用于字符串、DOM NodeList对象、 arguments对象的例子。
// 字符串
// let str = "hello";
// for (let s of str) {
// console.log(s);
// }
// DOM NodeList对象
//let container = document.querySelector(".parent");// Cannot read property 'querySelectorAll' of null
// 获取tabs
// let tabs = container.querySelectorAll(".tab");
// for (let tab of tabs) {
// tab.style.color = "blue";
// }
// arguments对象
// function printArgs() {
// for (let x of arguments) {
// console.log(x);
// }
// }
// printArgs('a', 'b');//a b
// 十. Promise对象
// Promise的含义
// Promise是异步编程的一种解决方案，比传统的解决方案
// ——回调函数和事件——更合理和更强大。
// 它由社区最早提出和实现，ES6将其写进了语言标准，统一了
// 用法，原生提供了Promise对象。
// 所谓Promise，
// 简单说就是一个容器，里面保存着某个未来才会结束的事件
// （通常是一个异步操作）的结果。
// 从语法上说，Promise是一个对象，从它可以获取异步操作的
// 消息。
// // DOM NodeList对象 let container = document.querySelector(".parent"); // 获取tabs let tabs = container.querySelectorAll(".tab"); for (let tab of tabs) { tab.style.color = "blue"; }// arguments对象 function printArgs() { for (let x of arguments) { console.log(x); } }printArgs('a', 'b');
// Promise对象有以下两个特点。
// （1）对象的状态不受外界影响，由异步操作的状态决定。
// Promise对象代表一个异步操作，有三种状态：Pending（进
// 行中）、Resolved（已完成）和Rejected（已失败）。
// 只有异步操作的结果，可以决定当前是哪一种状态，任何其
// 他操作都无法改变这个状态。
// 这也是Promise这个名字的由来，它的英语意思就是“承诺”，
// 表示其他手段无法改变。
// （2）一旦状态改变，就不会再变，任何时候都可以得到
// 这个结果。
// Promise对象的状态改变，只有两种可能：从Pending变为
// Resolved和从Pending变为Rejected。
// 只要这两种情况发生，状态就凝固了，不会再变了，会一直
// 保持这个结果。
// 就算改变已经发生了，你再对Promise对象添加回调函数，也
// 会立即得到这个结果。
// 这与事件（Event）完全不同，事件的特点是，如果你错过了
// 它，再去监听，是得不到结果的。
// 基本用法 // ES6规定，Promise对象是一个构造函数，用来生成 Promise实例。
// let promise = new Promise(function (resolve, reject) {
// // ... some code
// if (/*异步操作成功*/ ) {
// resolve(value);
// } else { reject(error);
// }
// });
// Promise构造函数接受一个函数作为参数，该函数的两个参 数分别是resolve和reject。
// 它们是两个函数，由JavaScript引擎提供，不用自己部署。
// resolve函数的作用是，将Promise对象的状态从“未完 成”变为“成功”（即从Pending变为Resolved），
// 在异步操作成 功时调用，并将异步操作的结果，作为参数传递出去；
// reject函数的作用是，将Promise对象的状态从“未完成”变 为“失败”（即从Pending变为Rejected），
// 在异步操作失败时 调用，并将异步操作报出的错误，作为参数传递出去。
// Promise实例生成以后，可以用then方法分别指定 Resolved状态和Reject状态的回调函数。
// promise.then( function(value) {
// // success code
// },
// function(error) {
// // failure code
// });
// then方法可以接受两个回调函数作为参数。
// 第一个回调函数是Promise对象的状态变为Resolved时调 用，
// 第二个回调函数是Promise对象的状态变为Reject时调用。
// 其中，第二个函数是可选的，不一定要提供。这两个函数都接 受Promise对象传出的值作为参数。
// 一般来说，不要在then方法里面定义Reject状态的回调函数 （即then的第二个参数），
// 而是使用catch方法来捕获异常。
// promise.then( function(value) {
// // success code
// }).catch(
// function(error) {
// // failure code
// } );
// 实例：加载图片文件显示到页面上
// 加载图片
// return promise function imgLoad(src) {
// return new Promise(function(resolve, reject) {
// let img = document.createElement('img');
// img.className = 'm-img';
// img.src = src;
// img.onload = function(){
// resolve(img);
// }
// img.onerror = function(err){
// reject(err);
// }
// });
// }
// // 将单个图片添加到界面上
// function showImg(img){
// let p = document.createElement('p');
// p.appendChild(img);
// document.body.appendChild(p);
// }
// // 调用，使用then处理结果（应该还使用catch捕获异常，这 里省略）
// imgLoad('http://qpzo4o916.hn- bkt.clouddn.com/dog.jpg').then(showImg);
// imgLoad('http://qpzo4o916.hn- bkt.clouddn.com/ha.jpg').then(showImg);
// imgLoad('http://qpzo4o916.hn- bkt.clouddn.com/panda.jpg').then(showImg);
// 扩展：
// 1. Promise.all()
// 以上面的实例为基础，了解Promise.all()的用法
// 添加多个图片到文件
// function showImgs(imgs){
// imgs.forEach(img=>{
// document.body.appendChild(img);
// })
// }
// // 所有图片加载完成后再添加到界面
// Promise.all([ imgLoad('http://qpzo4o916.hn- bkt.clouddn.com/dog.jpg'),
// imgLoad('http://qpzo4o916.hn- bkt.clouddn.com/ha.jpg'),
// imgLoad('http://qpzo4o916.hn- bkt.clouddn.com/panda.jpg') ]).then(showImgs);
// 2. Promise.race()
// 以上面的实例为基础，了解Promise.race()的用法
// 一个图片加载完成后就添加到界面
// Promise.race([ imgLoad('http://qpzo4o916.hn- bkt.clouddn.com/dog.jpg'),
// imgLoad('http://qpzo4o916.hn- bkt.clouddn.com/ha.jpg'),
// imgLoad('http://qpzo4o916.hn- bkt.clouddn.com/panda.jpg') ]).then(showImg);
// 十一. Module
// 在 ES6 之前，社区制定了一些模块加载方案，最主要的
// 有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏
// 览器。ES6 在语言标准的层面上，实现了模块功能，而且实现
// 得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为
// 浏览器和服务器通用的模块解决方案。ES6 模块不是对象，而
// 是通过export命令显式指定输出的代码，再通过import命
// 令输入。
// 模块功能主要由两个命令构成：export和import。 export命令用于规定模块的对外接口，import命令用于输
// 入其他模块提供的功能。
// 在HTML网页中，ES5 脚本的常规用法
<!-- 页面内嵌JavaScript脚本 -->
// <script type="application/javascript"/>
<!--引入外部JavaScript脚本 -->
<!-- <script type="application/javascript" src="path/myModule.js"></scrip> -->
<!-- export命令&import命令 -->
// // 1.导出变量
// export let A = 123;
// // 2.导出方法
// export let test = function(){
// console.log('test');
// };
// // 3.导出对象
// export const student = { name: 'Megan', age: 18 };
// // or 先命名变量、方法、对象，再导出
// let A = 123;
// let test = function(){
// console.log('test')
// };
// const student = { name: 'magan', age: 18 }
// export {A,test,student};
// export {A as x, test as y, student as c};
// ES6模块不是对象，而是通过export命令显式指定输出的代 码，输入时也采用静态命令的形式。
// 页面内嵌ES6模块
// // 引入变量，方法，对象
// import {A,test,student} from '../xxx.js'
// // 引入 的名称和导出的名称要一致
// // 引入部分(按需引入)
// import {A} from '../xxx.js'
// // 引入全部
// import * as Test from '../xxx.js'
// 从前面的例子可以看出，使用import命令的时候，用户需要知道 所要加载的变量名或函数名，否则无法加载。
// 如果用户希望快速上手，不愿意阅读文档，去了解模块有哪些属 性和方法。 为了给用户提供方便，让他们不
// 用阅读文档就能加载模块，就要 用到export default命令，为模块指定默认输出。
// 本质上，export default就是输出一个叫做default的变量或 方法，然后系统允许你为它取任意名字
// 例一
// let A = 123;
// let test = function(){
// console.log('test')
// };
// const student = { name: 'Megan', age: 18 }
// export default{ A,test, student }
// 这种写法，引入的时候不需要跟导出的名称一样，它将导出的 对象命名的权力交给了引入方
// import Test1 from '../xxx.js';
// console.log(Test1.A);
// console.log(Test1.test);
// console.log(Test1.Hello);
// 例二
// export default function foo03() {
// console.log(" foo03() ");
// }
// import x from '../xxx.js'
// x();
// 注意：
// 1. export语句，要写在最顶层，不可写在函数或者代码块内部
// function foo() {
// console.log(" -- foo() -- ");
// // export {foo}; // -- Error Unexpected token export
// }
// export {foo};
// 2. 在一个文件或模块中，export、import 可以有多个，
// export default 仅有一个。通过 export 向外暴露的成
// 员，在导入时需要对应的变量名，并且必需要加{ }，
// 通过 export default 向外暴露的成员，在导入时可以
// 使用任意变量来接收，不能加{ }
// let a = 123;
// export a; // --Error
// // 正确写法
// export {a};
// export default function foo03() {
// console.log(" foo03() ");
// }
// import {x} from '../xxx.js' // -- Error 会去模块 中查找名称为x的变量
// // 正确写法
// import x from '../xxx.js'
// 3. import语句可以与export语句写在一起
// export {foo01, foo02} from '../xxx.js';
/* 约等于下面两段语句， 不过上面的导入导出复合写法，模块中没有导入 foo01 与 foo02上面代码中，export和import语句结合在一起，写成一 行。 但是从可读性考虑，不建议采用这种写法，而应该采用标 准写法。 */
// import {foo01, foo02} from "./xxx.js";
// export {foo01, foo02}; export * from '../xxx.js';
// 这里会忽略xxx.js中的default方法
</script>
</head>
<body>
</body>
</html>
