ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

在线编译器：babel、github

在nongjs中使用

'use strict'
let a = 12;

运行node ：

node --harmony_destructuring  xxx.js
代码块：

    用{}包起来的代码块，比如 if for while

    特点：只能在代码块里面使用

    var 只有函数作用域，可以重复声明，

    let const 有块级作用域，不可重复声明

    封闭空间

    ES5:

(function() {
var a = 12;
})();

    ES6:

{
let a = 12;
}

总结：块级作用域，其实就匿名函数立即调用
const：用来定义常量，一旦赋值，再也修改不了；const 定义常量，声明的时候必须有初始值。
【字符串】

定义字符串： const str = `剧情再美，终究是戏`;

字符串的拼接： 

    ES5：

    'abc'+变量+'def'

    ES6：

    `abc${变量}def`
【解构赋值】：左边和右边的解构是一样的

var [a,b,c] = [12,5,8];
alert(b);  // => 5

var {a,b,c} = {b:5,a:12,c:8}
alert(a);  // =>12   json和顺序无关，json是无序的

let [a,[b,c],d] = [1,[2,3],4];
console.log(a,b,c,d);     // 模式匹配  ==》左侧和右侧格式相同

  解构赋值可以给默认值：

    ES5:

var a = json.a || 12;

    ES6:

let {time = 12, id = 0} = {};
function getPos() {
return {left: 100, top:200};
}
let {left, top} = getPos();
console.log(left, top);

【数组的复制】    
1》

var arr = [1,2,3];
var arr2 = [];
for(var i=0; i<arr.length;i++) {
arr2[i] = arr[i]
}
arr2.pop();  // arr不会改变
console.log(arr, arr2)

2》

let arr = [1,2,3];
let arr2 = Array.from(arr);

3》Es6：

let arr = [1,2,3];
let arr2 = [...arr];
arr.pop();
console.log(arr2,arr);

4》argument 

function show(){
console.log(arguments);  // =>arguments是不定参数的数组，只有数组的长度和下标，没有数组的方法，在这里执行数组的arguments.push(5) 会报错
}
function show(...args) {
console.log(args);   // 使用超级复制...可以在新数组中使用数组的方法
}
show(1,2,3,4);

【map对象】

var map = new Map();
//设置  map.set(name,value);
map.set('a','apple');
map.set('b','banana');
console.log(map);  // =>  {a => apple, b => banana}
//获取  map.get(name);
alert(map.get('a'));  // => apple
//删除  map.delelte(name)
map.delelte(a);
console.log(map);

【循环】
    ES6中新增： for of 循环，遍历(迭代，循环)，整个对象，表现类似于for in，

    区别： 可以循环数组，不可以循环json，真正的目的是为了循环map对象    

let arr = ['a','b','c','d'];
for(var i in arr) {
console.log(i);   // 遍历的是数组的索引
}
for(let i of arr) {
console.log(i);   // 遍历的是数组的每一项
}

   ---------------------------------------------------

var map = new Map();
map.set('a','apple');
map.set('b','banana');
map.set('c','ccc');
map.set('d','ddd');
// map函数不能使用for in循环
for(let name of map) {
console.log(name);   //  name代表整个键值对  a,apple  本质是循环了map.entries()
}
// 如果想循环出key 和 value
for(let [key,value] of map) {
console.log(key, value);    // a apple
}
// 只循环key   也可以循环数组
for(let key of may.key()) {
console.log(key);
}
// 只循环value
for(let val of map.values()) {
console.log(val)
}

【函数】    

    ES5：

function show(a) {
return a;
}
show(12);

    ES56:

        箭头函数：

            1.箭头函数中this的指向：this的指向指向window

var a = 100;
var json = {
a: 1,
b: 2,
show: () => {
return this.a;
}
}
alert(json.show());   // => 100,因为箭头函数中的this指向了window

            2.箭头函数中arguments不能使用了
        对象：对象语法简洁化

            单体模式

var  person = {
name: 'abc',
age: 16,
showName: function() {
alert(this.name);
},
showAge: function() {
alert(this.age);
}
}
// 解决this的指向window的问题
var name = 'abc';
var age = 100;
var person ={
name,
age,
showName() {
return this.name;
},
showAge() {
return this.age;
}
}

            面向对象：

                ES5：

function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototye.showName = function() {
return this.name;
}
Person.prototype.showAge = function() {
return this.age;
}
var p1 = new Person('json',18);
alert(p1.showAge());

            ES6:有类class，有构造函数 constructor()

class Person {   // 类
constructor(name = 'default' , age =0 ) {   //  函数的默认值
this.name = name;
this.age = age;
}
showName() {
return this.name;
}
showAge() {
return this.age;
}
}
let p1 = new Person('json',18);
let p2 = new Person('lison',99);
alert(p1.showName == p2.showName);  // => true
alert(p1.constructor == p2.constructor);  // => true

            函数的默认值

function move(obj = '对象必须要填写', json= {}, {time:500,easiong='ease-out'} = {}) {
console.log(json);
}
move();

            面向对象的继承：

                ES5:  

子类.prototype = new 父类();
function Worker(name,age) {
Person.apply(this, arguments);
}
Worker.prototype = new Person();
var p1 = new Person('jason',10,'要饭的')               

                ES6:  使用super() 来继承父级的构造函数，constructor表示自己独有的，会覆盖父级过来的属性

class Person {   // 类
constructor(name = 'default' , age =0 ) {   //  函数的默认值
this.name = name;
this.age = age;
}
showName() {
return this.name;
}
showAge() {
return this.age;
}
}
class Worker extends Person {
constructor(name, age, job = '前端') {
surper(name, age);
this.job = job;
}
showJob() {
return this.job;
}
}
let p1 = new Person('aaa',11);
let w1 = new Worker('json',28);
alert(w1.showJob());   // => 前端

                    面向对象选项卡

<style>
#box div{
width:4rem;
height:4rem;
background:#ccc;
border:0.01rem solid #000;
display:none;
}
#box .on{
background: #f60;
color: aqua
}
</style>

<div id="box">
<input type="button" value="aaa"  class="on">
<input type="button" value="bbb">
<input type="button" value="ccc">
<div style="display:block;">1111</div>
<div>2222</div>
<div>3333</div>
</div>         

JS: <script>
//面向对象的选项卡
class Tab {
constructor(id) {
this.oBox = document.getElementById(id);
this.aBtn = this.oBox.getElementsByTagName('input');
this.aDiv = this.oBox.getElementsByTagName('div');
this.init();
}
init(){
for(let i=0; i<this.aBtn.length; i++){
this.aBtn[i].onclick = function(){
this.hide();
this.show(i);
}.bind(this);
}
}
hide() {
for(let i=0; i<this.aBtn.length; i++) {
this.aBtn[i].className = '';
this.aDiv[i].style.display = 'none';
}
}
show(index) {
this.aBtn[index].className = 'on';
this.aDiv[index].style.display = 'block';
}
}
new Tab('box');
// 继承（自动播放选项卡）
// 继承
class AutoTab extends Tab {
constructor(id) {
super(id);
setInterval(this.next.bind(this),1000);
}
next() {
this.iNow++;
if(this.iNow == this.aBtn.length) {
this.iNow = 0;
}
this.hide();
this.show(this.iNow);
}
}
new Tab('box');
new AutoTab('autoBox');
</script>

【模块化】---也可以解决变量冲突，定义加载顺序

导出：a.js: 

    const a = 12;

    export default a;

    // export default function sum() {  // 导出函数的返回值

    //     return a+b;

    // }

 引用：

import modA from './a.js';

导出多个模块：

const a = 12;
const b = 5;
export default {  // 相当于导出一个json
a,
b
}

【Promise】协议、承诺  是一个对象，用来异步操作数据（消息）

状态：

    pending(等待、处理中) => Resolve(完成、fullFilled) 

                          => Rejected(拒绝、失败)

let p1 = new Promise(function(resolve,reject) {

});
p1.then(成功(resolve),失败(reject));
Promise.catch();   // 捕获错误
let p1 = new Promise( (resolve, reject) => {
resolve('成功了');
});
p1.then(function(value) {
console.log(value);  // => 成功了
throw '发生错误了';
}).catch( function(err) {
console.log(err);   // => 发生错误了
})
Promise.all([p1,p2,p3..])   // 全部，将多个promise对象组合，包装成一个实例
let p1 = Promise.resolve(12);
let p2 = Promise.reject(5);
Promise.all([p1,p2]).then(function(res) {
console.log('错误了'+res);
},function(res) {
console.log('错误了'+res);
});
//  => 错误了5    只要一个失败就返回失败信息，全部成功才会返回成功信息
Promise.race([p1,p2,p3...])   // 返回一个promise对象，返回的最先执行的promise
let p1 = Promise( (resolve, reject) => {
setTimeout(resolve,500,'先执行');
});
let p2 = Promise( (resolve, reject) => {
setTimeout(resolve,1000,'后执行');
});
Promise.race( [ p1, p2] ).then(function(res) {
console.log(res);    // => 先执行
});
Promise.reject()    //  生成一个错误的Promise
Promise.resolve(value/promise)   //  生成一个成功的Promise ，value:成功的值; promise:成功后的promise;

------------------------------------------------------------

// 定义一个最简单的ajax
function ajax(url,fnSucc,fnFail) {
var oAjax = new XMLHttpRequest();
oAjax.open('GET',url,true);
oAjax.send();
oAjax.onload = function() {
if(oAjax.readyState == 4 && oAjax.status == 200) {
fnSucc(oAjax.responseText);
}else{
fnFail(oAjax.status);
}
};
}
// 点击按钮从a.txt获取数据，如果成功展示到div中，如果失败，在div中显示错误码
let oBtn = document.getElementById('btn1');
let oDiv = document.getElementById('div1');
oBtn.onclick = function() {
let pro = new Promise( (resolve, reject) => {
ajax('a.txt', function(str) {
resolve(str);
},function(str) {
reject(str);
});
});
pro.then(function(value) {
oDiv.innerHTML = value;
},function(value) {
oDiv.innerHTML = reject;
})
}

【Generrator】 生成器，是一个函数，可以遍历，函数名前面有*，函数内部使用的yield语句，for of函数可以遍历Generrator函数

    语法：

function* show() {   // generrator 函数
yield 'hello';
yield 'world';
yield 'ES6';
}
let res = show();
console.log(res.next());    // => Object   {value:'Hello',done:false}
// done 表示还没有结束,执行一次出现一次返回值   如果没有return，最后一次循环会出现
// {value:undefined, done:true}，如果有return，遇到return显示return的值和done：true

     Generrator 函数每次返回一个value和一个done

    yield语句本身没有返回值，或者每次返回undefined

    next 可以带参数，给上一个yield

function* fn() {
yield 1;
yield 2;
yield 3;
yield 4;
yield 5;
yield 6;
return 7
}
for(let v of fn()) {
document.write(v);   // => 123456
}