ECMAScript——ES6--ES11笔记1

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();
iterator1.next();       // 1
iterator1.next();       // 2
iterator1.next();       // 不再有内容输出，因为只有两个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.log(fn.next());    
console.log(fn.next('222'));    
console.log(fn.next('3333'));   

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

// 步骤一: 先分别将每个函数写出来
function One(){
    setTimeout(()=>{
        console.log('1111');
        iterator_print.next();
    }, 1000);
}

function Two(){
    setTimeout(()=>{
        console.log('2222');
        iterator_print.next();
    }, 1000);
}

function Three(){
    setTimeout(()=>{
        console.log('3333');
        iterator_print.next();
    }, 1000);
}

// 步骤二:使用生成器函数 封装起来
function * printTime(){
    yield One();
    yield Two();
    yield Three();
}
let iterator_print = printTime();
// 方式一:可以在输出界面重复输出三次，也可以将操作封装到每个函数内部
iterator_print.next();      
// iterator_print.next();
// iterator_print.next();