ECMAScript——ES6--ES11笔记1

75 阅读 0 评论 50 点赞

我是靠谱客的博主粗犷超短裙，最近开发中收集的这篇文章主要介绍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();