ECMAScript——ES6

ECMAScript——ES6

ES6–ES11笔记1：

/*
1、定义变量的方式多了两种，由var 变成了 let const(定义数组、对象、常量) var
2、数组和对象(多用于方法，而且方法需同名)可以解构赋值
3、对象有简化写法(先定义好方法和属性，然后直接写方法名和属性名就可以了)
4、箭头函数,配合rest参数(形参列表上的 …args)使用。形参列表可以赋初始值，用来作为默认值(配合解构赋值更佳)
5、扩展运算符 … 是针对数组使用的，使数组转化为使用 逗号 分割的参数序列, 可以用来做数组的合并，复制数组，将伪数组变成数组
6、Symbol是第七种数据类型， USONB, 现在JS一共有8种数据类型, symbol是基本数据类型，所以不能使用new来创建,而且作用是创建独一无二的属性
7、Symbol有内置属性，也有迭代器(Symbol.iterator), 有迭代器的可以使用for…of遍历数值
8、生成器函数(用来解决异步编程的) function * 函数名(){yield} yield是分隔符

*/

// 数组的解构赋值

const arr = ['王者荣耀', '和平精英', '旅行青蛙', '光遇'];
const [one, two, three, four] = arr;
console.log(one);

// 对象的简化写法

let name = 10;
function setName(name){this.name = name;
}
const Obj = {name,setName,sayHello(){console.log('说了你好~');},sayBye(per){console.log(`向${per}说了再见...`);}
};
Obj.setName("小白狗");

// 对象的解构赋值

let {sayBye} = Obj;
console.log(Obj.name);
sayBye("王某文");

// 箭头函数

let singSong = (song, ...args)=>{console.log(`唱了${song}和${args}`);
};
let power = n => n*n;   // 只有一个形参的时候可以省略小括号。只有一条语句的时候可以省略大括号和return(return必须省略)
singSong('《云烟成雨》', "《美好事物》", "《夜曲》");       // 唱了《云烟成雨》和《美好事物》,《夜曲》

// 函数形参赋初始值并且配合函数解构使用

function connect({localhost = '127.0.0.1', username, port}){console.log(localhost, username, port);
}
connect({username: "三三两两",port: 3306
});     // 127.0.0.1 三三两两 3306

// 扩展运算符 … 使用对象是数组

const arr1 = ['王者', '和平', '光遇'];
const arr2 = ['旅行青蛙', '大话西游'];
console.log([...arr1, ...arr2]);       // [ '王者', '和平', '光遇', '旅行青蛙', '大话西游' ]

// Symbol() 符号函数

let sym1 = Symbol();
let sym2 = Symbol('老怀表');
console.log(sym1, sym2);
let sym3 = Symbol.for('旧皮鞋');
console.log(sym3);

// 迭代器的定义方式, 也就是说可以使用 for…of来遍历数据 使用了迭代器iterator定义的，就可以使用for…of遍历数值

const arr3 = ['例无虚发', '弹无虚发', '前所未有'];
for(let a of arr3){console.log(a);
}
let iterator = arr3[Symbol.iterator]();         // Object [Array Iterator] {}
console.log(iterator);

// 定义迭代器对象的方式 Symbol.iterator{} 它就像是一个函数

const obj1 = {arr: ['小一', '小二', '小三', '小四'],[Symbol.iterator](){let index = 0;let _this = this;return {next: function(){if( index < _this.arr.length ){const result = {value: _this.arr[index], done: false};index++;return result;}else{return {value: undefined, done: true};}}}}
};
for(let c of obj1){console.log(c);
}

// 生成器函数 function * 函数名(yield);

function * fun(){console.log('1');yield '什么是生成器函数: 用来解决异步编程的特殊函数';console.log('2');yield '生成器函数应该怎么使用?';
}
fun();
// fun().next();    输出的值是1,再调用一次输出的值还是1
let iterator1 = fun();
();       // 1
();       // 2
();       // 不再有内容输出，因为只有两个yield(分隔符)

// 这个 生成器函数 fun()的结果就是 一个迭代器, 可以使用for…of循环

for(let value of iterator1){console.log(value);         // 1  2
}

// 生成器函数 的 参数

function * fun1(arg){console.log(arg);               // 函数的参数 '再传'    调用第一个next()时才出现的let one = yield '第一个分割符';  // { value: '第一个分割符', done: false }      调用第一个next()时才出现的         console.log(one);               // '222', 调用第二个next()方法,的返回值let two = yield '第二个';       // { value: '第二个', done: false }console.log(two);              // '3333', 第三个next()方法的参数// { value: undefined, done: true }}
fun1('传参');               // 没反应
let fn = fun1('再传');      // Object [Generator] {}
console.log(fn);        
console.());    
console.('222'));    
console.('3333'));   

// 需求一: 需要有一个函数可以做到 1s后输出1111,2s后输出2222,3s后输出3332

// 步骤一: 先分别将每个函数写出来
function One(){setTimeout(()=>{console.log('1111');();}, 1000);
}function Two(){setTimeout(()=>{console.log('2222');();}, 1000);
}function Three(){setTimeout(()=>{console.log('3333');();}, 1000);
}// 步骤二:使用生成器函数 封装起来
function * printTime(){yield One();yield Two();yield Three();
}
let iterator_print = printTime();
// 方式一:可以在输出界面重复输出三次，也可以将操作封装到每个函数内部
();      
// ();
// ();