阅读量

“ES6-尚硅谷”

笔记

—.变量

1.let

1.变量不能重复声明。

2.块级作用域。

3.不存在变量提升。

4.不影响作用域链。

举例：div换色案例，用var i=0遍历div绑定点击换色函数不可，用let成功。（或用this.style.color）

原因：遍历数组越界（执行后为i=3，而数组序号最大为2），由于点击事件为异步任务，当遍历函数定义时实现回调函数未执行，而当点击触发回调函数时i已经为3，由于找不到序号为3的数组元素，此时向函数外层作用域寻找，最后找到window.i，无法修改div元素。

2.const

1.一定要赋初值。

2.一般常量使用大写（潜规则）。

3.常量的值不可修改。

4.块级作用域。

5.对于数组和对象的元素修改，不算做对常量的修改，不会报错。

3.变量的解构赋值

定义：ES允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。

1.数组的解构：

1
2
3
4
5
const F3 = ['浩男学长'，'富春老大','猴佬']；
let['quan','boss','monkeyhbd'] = F3;
console.log(quan);
console.log(boss);
console.log(monkey);

结果：

1
2
3
浩男学长
富春老大
猴佬
  1. 对象的解构:
1
2
3
4
5
6
7
8
9
10
11
const hou ={
 name:'monkeyhbd',
 age:'88888888',
 handsome: function(){
 console.log("我可以全栈") ;
 }//类同结构体
}；
let{name，age,handsome}=hou;
 console.log(name) ;
  console.log(age) ;
   console.log(handsome) ;//就是新定义变量一一对应了

结果：

1
2
3
monkeyhbd
88888888
f(){...}

作用：避免了例如hou.handsome等通过hou来实现调用，每次都有hou.，解构后就可以单独使用，简化了代码。

4.模板字符串

是什么：ES6 引入新的字符串的方式 `` ,’’, “”

1.声明

1
2
let str=`yuanshen`;
console(str,type str);

2.内容中可以直接出现换行符 (不用 ``将报错)

1
2
3
4
let str =`<ul>
          <li>a</li>
          <li>b</li>
          </ul>`

3.变量拼接

1
2
3
4
let joker='lllry';
let out = `${joker}是我心中最搞笑的人`;
console.log(out);
直接输出: lllry是我心中最搞笑的人

5.对象的简化写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法，这样的书写更加简洁。

1
2
3
4
5
6
7
8
9
10
11
12
let name ='aaa';
let change = function(){
console.log('bbb');
}

const school={
name,
change,
imporve(){
console("ccc");
}
}

二.函数

1.箭头函数以及声明特点

ES6允许使用箭头（=>）定义函数

1
2
3
4
5
6
7
8
9
原：
let fn = function(a,b){
   return a+b;
}

ES6:
let fn = (a,b) =>{
    return a+b;
}

调用:

1
let result = fn(1,2);

注意：

1.this是静态的（不因call，apply，bind改变），this始终指向函数声明时所在作用域下的this的值。

2.不能作为构造实例化对象（一个函数，通过传参来创造对象）

1
2
3
4
5
let Person = (name,age) =>{
this.name = name
this.age=age;
}
let me = new Person('luo',18);

以上代码会报错Person不是一个构造体；

3.不能使用arguments变量。

4.箭头函数的简写：

（1）省略小括号：当形参有且只有一个的时候。

（2）省略花括号：当代码体只有一条语句的时候，此时return语句必须省略，而且语句的执行结果就是函数的返回值。

2.箭头函数实践

例子1：点击div俩秒后切换颜色：

第一种方法：

1
2
3
4
5
6
7
let ad = document.getELementById('ad');// 获取元素 
ad.addEventListener("click",function(){
setTimeOut(() => {
this.style.background = 'pink';
},2000);
})
注意：如果不使用箭头函数则会报错，具体原因见下

第二种方法：

1
2
3
4
5
6
7
let ad = document.getELementById('ad');// 获取元素 
ad.addEventListener("click",function(){
let _this=this;
setTimeOut(function(){
_this.style.background = 'pink';
},2000);
})

对于俩个解决方法的理解：

1.为什么对于方法一不使用箭头函数则会报错：因为this默认指向当前作用域最近的量，setTimeOut是window对象下的方法，所以this会指向window而不是事件监听的ad；对于第一种方法，由于使用了箭头函数，箭头函数的this是静态的（不因call，apply，bind改变），this始终指向函数声明时所在作用域下的this的值，即指向了ad，所以能实现切换颜色的操作。

2.对于方法二，先使用let定义 _this在外围保存了this的值,这个this指向ad，当setTimeOut函数内部找不到 _this时就会向函数外围寻找，最后就能得到保存的指向ad的this。

3.function是谁调用了函数那么this就指向谁（window），而箭头函数this始终指向作用域的this（ad）。

例子2：从数组中返回偶数的元素

首先对filter做一个解释：即创建一个新的数组，数组中的元素是通过检查指定数组中符合条件的所有元素；

方法一(老方法）：

1
2
3
4
5
6
7
8
const arr['1','6','9','10','100','25'];
const result = arr.filter(function(item){
if(item % 2 === 0){
return true;
}else{
return false;
} 
})

方法二（新方法）：

1
2
const arr['1','6','9','10','100','25'];
const result = arr.filter(item => item % 2 ===0);

 总结：箭头函数适合与this无关的回调，定时器，数组的方法回调；箭头函数不适合与this有关的回调，是事件回调，对象的方法。

3.函数参数的默认值设置

1.设置原则及使用方法同c++，不赘述；

2.重点：与解构赋值结合：

1
2
3
4
5
6
7
8
9
10
11
12
13
function connect({host='127.0.0.1',username,password,port}){
console.log(host);
console.log(username);
console.log(password);
console.log(port);
}

connect({
host: 'atguigu.com',
username: 'root',
password:'root',
port:3306
})

4.rest参数

ES6引入rest参数，用于获取参数的实参，用来代替 arguments。

先看看arguments是如何获取实参：

1
2
3
4
5
function date(){
 console.log(arguments);
}
date('a','b','c');//结果是对象
最后会输出a，b，c，即arguments获取了实参；

rest获取实参：…args其实就等同于用不完的参数都给它了

1
2
3
4
function date(...args){
 console.log(args);
}
date('a','b','c');//结果是数组，可以使用数组的API，例如filter some every map

注意rest参数必须放在参数最后：

1
2
3
4
5
6
function date(a,b,...args){
 console.log(a);
  console.log(b);
 console.log(args);
}
date(1，2，3，4，5，6);//结果是数组，可以使用数组的API，例如filter some every map

三 .ES6扩展运算符

1.扩展运算符的介绍

…扩展运算符能将数组转化为逗号分隔的参数序列

1
2
3
4
5
const F3 = ['浩男学长'，'富春老大','猴佬']；
function linghang(){
console.log(arguments);
}
linghang(...F3);//等同linghang（'浩男学长'，'富春老大','猴佬'）;

与rest参数相对比：rest参数声明放在函数声明形参的位置，扩展运算符放在函数调用的参数的位置。

2.扩展运算符的运用

1.数组的合并：

1
2
3
4
const kuaizi = ['wangtaili','xiaoyang'];
const fenghuang = ['linghua','zengyi'];
const zuixuanpingguo = kuaizi.concat(fenghuang);//ES5
const zuixuanpingguo = [...kuaizi,...fenghuang];//ES6扩展运算符

  1. 数组的克隆

    1
    2
    const kuaizi = ['wangtaili','xiaoyang'];
    const xiongdi = [...kuaizi];

3.将伪数组转为真正数组

对伪数组做一个介绍：详情见伪数组是什么？伪数组与数组的区别，将伪数组变成真数组。

伪数组我们可以理解为类似数组的一个集合，我们常见的有俩个，一个是arguments还有一个是DOM的children属性，获取回来的子节点集合。他们与数组一样，具有索引(下标)和length属性。可以通过for循环写循环语句去循环遍历。

伪数组与数组的区别：
伪数组与数组的区别就是它们的_proto_区别，
普通数组有很多数组的方法，比如说push，shift，map等等

转换：

1
2
const divs = document.querySelectorAll('div');
const divarr = [...divs];//arguments

四.Symbol 详见详解Symbol（自定义值，内置值）——-小小的Symbol，大大的学问

1.Symbol的介绍与创建

ES6引入了一种新的数据原始数据类型 Symbol，表示独一无二的值。它是Js语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol特点：

1）Symbol的值是唯一的，用来解决命名冲突的问题

2）Symbol 值不能与其他数据进行运算

3）Symbol定义的对象属性不能用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

创建Symbol

1
2
3
let s = Symbol('lllry');
let s2 = Symbol('lllry');//每次都会创建一个新Symbol
let s3 = Symbol.for('lllry');//Symbol.for并不是每次都会创建一个Symbol，它会首先检查给定的key是否已经在注册表注册了，如果没有再创建。

2.给对象添加Symbol 类型的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
第一种方法：（up down）
let game{...}//内含一连串代码
//声明一个对象
let methods = {
up: Symbol();
down: Symbol();
};

game[methods.up] = function(){
console.log("我可以改变形状")；
}

game[methods.up] = function{
console.log("我可以快速下降")；

  第二种方法：
  let youxi = {
name: 'wolfkill';
[Symbol('say')]: function(){
 console.log('killmyself');
}
}
注意：这里Symbol（）一定要用括号括起来，因为它是动态的，如果只写say：则可以因为它是静态的。

3.Symbol的内置属性

除了定义自己使用的Symbol值以外，ES6还提供的11个内置的Symbol值，指向语言内部使用

内置Symbol的值 调用时机
Symbol.hasInstance 当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadable 对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array.prototype.concat()时，是否可以展开。
Symbol.species 创建衍生对象时，会使用该属性
Symbol.match 当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。
Symbol.replace 当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。
Symbol.split 当该对象被 str. split (myObject)方法调用时，会返回该方法的返回值。
Symbol.iterator 对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
Symbol.toPrimitive 该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
Symbol. toStringTag 在该对象上面调用 toString 方法时，返回该方法的返回值
Symbol. unscopables 该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。
Symbol.search 当该对象被 str. search (myObject)方法调用时，会返回该方法的返回值。

尚硅谷有举例使用方法，见ES6第17节,或见标题链接

五 .迭代器

1.迭代器介绍

迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。

1）ES6创造了一种新的遍历命令for…of循环，Iteartor接口主要提供for…of消费

2）原生具备iteator接口的数据（可用for…of遍历）

a） Array

b） Arguments

c） Set

d） Map

e） String

f）TypedArray

g） NodeList

3）工作原理

a） 创建一个指针对象，指向当前数据结构的起始位置

b） 第一次调用对象的next方法，指针自动指向数据结构的第一个成员

c） 接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员

d） 每调用next方法返回一个包含value和done属性的对象

注意：需要自定义遍历数据时，要想到迭代器

这里还涉及到for…in 返回键名

for …of返回键值

2.迭代器应用-自定义遍历数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//声明一个对象
const banji = {
name："zhongjiyiban",
stus:[
'xiaoming',
'xiaoning',
'xiaotian'
]
}
//遍历这个对象
for(let v of banji){
console.log(v);
}
发现报错，Uncaught TypeError：banji is not iterator

修改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//声明一个对象
const banji = {
name："zhongjiyiban",
stus:[
'xiaoming',
'xiaoning',
'xiaotian'
],
[Symbol.iterator](){
//索引变量
let index=0;
let _this=this;
return{
   next:function(){
        if(index<this.stus.length){
        const result = {value:_this.stus[index],done:false};
        index++;
        return result;
        }esle{
        return{value:undefined,done:ture};
        }
}
};
};
//遍历这个对象
for(let v of banji){
console.log(v);
}

六.生成器

1.生成器函数声明与调用

生成器函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。

1
2
3
4
5
6
7
8
9
10
1.
function* gen(){
console.log('hahaha');
}
let iterator = gen();
console.log(iterator);
发现上述并不能输出iterator

添加：iterator.next();
发现调用next方法后可以执行；
1
2
3
4
5
6
7
8
9
10
2.//yield 函数代码的分隔符，每个yield和它上面全部代码构成一块，可以通过逐步next方法来逐步输出。
function* gen(){
yield 'hahaha'；
yield 'xixixi'；
yield 'heiheihie'；
}
let iterator = gen();
iterator.next();
iterator.next();
iterator.next();
1
2
3
4
3.遍历
for(let v of gen()){
console.log(v);
}

2.生成器函数的参数传递

1
2
3
4
5
6
7
8
9
10
11
12
function* gen(){
yield 'hahaha'；
yield 'xixixi'；
yield 'heiheihie'；
}
let iterator = gen();
console.log(iterator.next());
console.log(iterator.next('aaa'));//例子
console.log(iterator.next());
console.log(iterator.next());会返回value 和done

当加入参数时，参数将作为上一个yield语句的整体返回结果

3.生成器函数实例

实例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//异步编程 文件操作 网络操作（Ajax，request）数据库操作
//1s后控制台输出111，2s后输出222 ，3s后输出333
//回调地狱
setTimeout(()=>{
   console.log(111);
   setTimeout(()=>{
       console.log(222);
       setTimeout(()=>{
          console.log(333);
       },3000);
    },2000);
},1000);它会一直缩进，回调，形成回调地狱，不利于代码的阅读。
//更好的方法：
function one(){
   setTimeout(()=>{
      console.log(111);
         iterator.next();
   },1000);
}

function two(){
   setTimeout(()=>{
      console.log(222);
         iterator.next();
   },2000);
}

function three(){
   setTimeout(()=>{
      console.log(333);
         iterator.next();
   },3000);
}

function* gen(){
yield one();
yield two();
yield three();
}
let iterator = gen();
iterator.next();

实例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//模拟获取 用户数据 订单数据 商品数据
function getUsers(){
    setTimeout(()=>{
       let data = '用户数据';
        iterator.next(date);
    },1000);
}
function getOrders(){
    setTimeout(()=>{
       let data = '订单数据';
       //调用next方法，并将数据传入，能实现修改
       iterator.next(date);
    },1000);
}
function getGoods(){
    setTimeout(()=>{
       let data = '商品数据';
        iterator.next(date);
    },1000);
}
//不能：
getUsers()；
getOrders()；
getGoods()；因为他们之间有顺序关系，先后
正确：
function* gen(){
let users = yield getUsers();
let orders = yield getOrders();
let goods = yield getGoods();
}

//调用生成器函数
let iterator = gen();
iterator.next();

七.Promise

1.Promise介绍与基本使用

Promise是ES6引入的异步编程的新解决方案;语法上 Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

1）Promise构造函数: Promise (excutor){}

2）Promise.prototype.then方法

3）Promise.prototype.catch方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//实例化promise对象，resolve和reject是函数
const p = new Promise（function（resolve，reject）{
setTimeout(function(){
//
let data = 'shuju';
//resolve
resolve(data);
},2000);
)};//成功就把实参给resolve函数，失败就给reject

//调用promise对象then方法，异步执行，前面执行完后执行该函数，第一个参数是成功后执行的函数，第二个参数是失败后执行的函数
p.then(function(value){
console.log(value);
},function(reason){
console.error(reason);
})

通过这种promise完成异步函数的封装

2.Promise封装读取文件

1）可以使用fs模块来进行文件的读取

2）使用promise来读取

屏幕截图 2023-07-11 094746

使用promise可以防止一直缩进

3.对then方法进行介绍

异步执行，前面执行完后执行该函数，第一个参数是成功后执行的函数，第二个参数是失败后执行的函数

then 方法的返回结果实际Promise对象，对象状态由回调函数的执行结果决定；

1.返回值不是Promise类型

2.返回值是Promise对象，then结果由其返回值决定

3.抛出error

4.链式调用

屏幕截图 2023-07-11 113206

5.promise的catch

用于指定Promise对象失败的回调

屏幕截图 2023-07-11 113449

本文作者： lllry
本文链接： http://wusterlllry.xyz/2023/04/21/%E2%80%9CES6%E2%80%9D/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一个普普通通的我，慢慢吞吞的学习着