//lterator和for...of循環
//不同的數據結構通過for...of來實現不同的目標
//遍歷數據結構
{
let arr=['hello','world'];
//數組調用了Symbol.iterator接口 調用方式()
let map=arr[Symbol.iterator]();
//map的方法map.next 執行三次
console.log(map.next());
console.log(map.next());
console.log(map.next());
//done如果是false就表示循環并沒有結束，如果是true就表示循環已經結束了
}

//自定義lterator接口
{
let obj={
start:[1,3,2],
end:[7,9,8],
//聲明一個iterator接口方法
[Symbol.iterator](){
let self=this;
let index=0;
//合并成一個數組，保證132798數組一起輸出
let arr=self.start.concat(self.end);
//記住數組的長度
let len=arr.length;
return {
//返回的時候一定要有next方法
//包含value和done
next(){
if(index<len){
return {
//保證下一步不是重復的
value:arr[index++],
done:false
}
}else{
return {
value:arr[index++],
//遍歷結束
done:true
}
}
}
}
}
}
for(let key of obj){
console.log(key);
}
}

//for...of
{
let arr=['hello','world'];
for(let value of arr){
console.log('value',value);
}
}

?

//Generator也是解決異步編程的方法
//比Promise更高級
//next函數的用法 調用next進行下一步
//怎么說呢 核心就是調用一次next()就會找到一次yield然后以此類推直到return
//以上來實現異步編程
//yield*的語法 遇到yield return就停止了

{
// genertaor基本定義
let tell=function* (){
yield 'a';
yield 'b';
return 'c'
};

let k=tell();

console.log(k.next());
console.log(k.next());
console.log(k.next());
console.log(k.next());
}

//使用genertaor遍歷器的返回值
{
let obj={};
obj[Symbol.iterator]=function* (){
yield 1;
yield 2;
yield 3;
}

for(let value of obj){
console.log('value',value);
}
}

//genertaor狀態機

{
let state=function* (){
//while(1)不斷循環
while(1){
yield 'A';
yield 'B';
yield 'C';
}
}
let status=state();
console.log(status.next());
console.log(status.next());
console.log(status.next());
console.log(status.next());
console.log(status.next());
}
//genertaor實例場景應用——抽獎
{
let draw=function(count){
//具體抽獎邏輯
console.info(`剩余${count}次`)
}
let residue=function*(count){
while(count>0){
count--;
//執行抽獎的具體邏輯
yield draw(count);
}
}
//將genertaor實例化
//執行抽獎環節
let star=residue(5);
let btn=document.createElement("button");
btn.id="start";
btn.textContent="抽獎";
document.body.appendChild(btn);
document.getElementById("start").addEventListener("click", function(){
star.next();
//next就是抽獎
},false)
}

?

?

//修飾器
//修飾器是一個函數
//修改行為
//修改類的行為
//Decorator

{
let readonly=function(target,name,descriptor){
descriptor.writable=false;
return descriptor
};

class Test{
//名稱要一致
@readonly
time(){
return '2017-03-11'
}
}

let test=new Test();

//修改對象的time屬性 不能修改 因為是只讀屬性
// test.time=function(){
// console.log('reset time');
// };

console.log(test.time());
}

{
let typename=function(target,name,descriptor){
target.myname='qwq';
}
//typename在花括號外面
@typename
class Test{

}

console.log('類修飾符',Test.myname);
// 第三方庫修飾器的js庫：core-decorators; npm install core-decorators
}

?

?

//模塊化

//導出
// export let A=123;
// //導出一個函數
// export function test(){
// console.log('test');
// }
// //導出一個類
// export class Hello{
// test(){
// console.log('class');
// }
// }

let A=123;
let test=function(){
console.log('test');
}
class Hello{
test(){
console.log('class');
}
}

//default把取名字的權利交給引入方
//方便第三方引用
export default {
A,
test,
Hello
}

轉載于:https://www.cnblogs.com/yishichangan925/p/7745969.html

總結

以上是生活随笔為你收集整理的es6(四)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。