ES6-ES11笔记(1)

关于这个视频的笔记
(https://www.bilibili.com/video/BV1uK411H7on?p=29&vd_source=3cf72bb393b8cc11b96c6d4bfbcbd890)

1.ES6

1.1let的一些注意点

let a;
let b,c,d;
let e = 100;
let f="你好",g=101;// 变量名不能重复声明
// let testDepulicate = 123456
// let testDepulicate = 789;// var是可以重复声明的
// var testDepulicate = 123456
// var testDepulicate = 789;// let 是块级作用域  var是全局作用域
/*
{let test01 = 123
}
console.log(test01); //报错test01 is not defined
*/
/*
{var test01 = 123
}
console.log(test01);  //正常运行*/// 不允许变量提升, 简单来说,声明之前不能使用, var是可以的
console.log(test02);
let test02 = 'adfa'  //Cannot access 'test02' before initialization

1.2const 常量的一些注意点

1.3 变量的解构赋值

数组的解构赋值
个人理解:对数组里面的值单独定义一个变量名

对象的解构赋值
个人理解:对象里面的值单独定义一个变量名

1.4 模板字符串

// 用反引号 定义
let str = `我是模板字符串`
console.log(str);//可以出现换行符
let str2 = `我是模板
123字符串`
console.log(str2);// 变量拼接
let test01 = '123haod'
let test02 = `${test01}拼接了`
console.log(test02);

1.5对象的简化写法

let name1 = '米粒'
let show = function(){console.log("show time");
}let user = {name1,show,//简化方法声明learn(){console.log("学习");}
}
console.log(user);
console.log(user.show());
console.log(user.learn());

1.6箭头函数

<script>let testf1 = function(name){console.log(`my name is ${name}`);
}let testf2 = (name)=>{console.log(`my name2 is ${name}`);
}testf1('a')
testf2('好人')// 1.this 是静态的,this始终指向函数声明的所在作用域下的this的值let testf3 = function(){console.log(this.name);
}let testf4 = ()=>{console.log(this.name);
}
window.name='全局的name'
const school={name:'学校名字'}//直接调用
testf3()
testf4()//call 调用
testf3.call(school) //学校的名字  js原本的this,谁调用,this就指向谁
testf4.call(school) //this 函数声明时候 所在的作用域// 2. 不能作为构造实例化对象
let Person = (name,age)=>{this.name = name,this.age = age
}
// let me = new Person('Ray',18)
// console.log(me); //报错Person is not a constructor//3. 不能使用arguments变量let testf5 = function(){console.log(arguments);
}let testf6 = ()=>{console.log(arguments);
}
testf5('1',2,3)
// testf6('1',2,3)  //报错,箭头函数不能使用arguments//4.箭头函数的简写,只有一个参数括号可以简写,
//当代码体只有一句话时候,可以省略花括号{},而且return也要省略,默认作为return的返回值let testf7 = n=> console.log(n);
testf7(11)
</script>

箭头函数的应用场景

setTimeout() 函数的this指向的是window,但是使用箭头函数可以让this指向箭头函数声明的时候的作用域

setTimeout(()=>{
this.xxxx
})

1.6.1箭头函数箭头函数的注意点

箭头函数适合与this无关的回调,定时器,数组的方法回调
箭头函数不适合this有关的回调, 比如事件回调,对象的方法

1.7函数默认值

function f (a,b,c=10){console.log(a+b+c);
}
f(1,2,3)
f(1,2)//与解构赋值结合
function connect({host='127.0.0.1',name,port}){console.log(host);console.log(name);console.log(port);
}connect({// host:"1.2.3.4",name:"rott",port:"3306"
})

1.8 rest参数

// es5的用法
function test01(){console.log(arguments); //arguments是一个对象console.log(typeof arguments);
}test01('参数1','参数2','参数3')//用es6 rest参数方式,需要放到最后一个参数
// function test02(a,...args,b){} //args需要放到最后一个参数
function test02(...args){console.log(args); //是一个数组console.log(typeof args); //数组也是返回object,而复杂数据类型里，除了函数返回了"function"其他均返回“object”console.log(args.constructor===Array); //判断是否是数组
}test02('参数1','参数2','参数3')

1.9拓展运算符

拓展运算符,能将数组转为逗号分隔的参数序列

const tfBoys=['boy01','boy02','boy03']
console.log(tfBoys);
console.log(...tfBoys);function showBoys(){console.log(arguments);
}showBoys(tfBoys) //[Arguments] { '0': [ 'boy01', 'boy02', 'boy03' ] }
showBoys(...tfBoys)//[Arguments] { '0': 'boy01', '1': 'boy02', '2': 'boy03' }

1.9.1拓展运算符的运用

<body><div></div><div></div><div></div>
</body>
<script>// 1. 数组的合并
const array01=['a1','a2','a3']
const array02=['a4','a5','a6']// es5的做法
const array04=array01.concat(array02)
console.log(array04);//es6的做法
const array03=[...array01,...array02]
console.log(array03);//2.数组的克隆
const array05= ['a','b','c']
const array06= [...array05]  //如果有引用,那么是浅拷贝
console.log(array06);//3.将伪数组转为真的数组
const object01=document.querySelectorAll('div')
console.log(object01);
const array07 = [...object01]
console.log(array07);
</script>

1.10Symbo的基本使用

let s = Symbol();
console.log(s,typeof s);// 参数只是一个标志,值是不一样的,所以是false
let s2 = Symbol('张三');
let s3 = Symbol('张三');
console.log(s2===s3);//false//用for创建,那么相当于描述字符串指定一个值,那么对比值就是true
let s4 = Symbol.for('李四')
let s5 = Symbol.for('李四')
console.log(s4===s5);//true//symbol不能进行数据运算,比较,计算//js数据类型
//USONB you are so niubility 记忆
//U undefined
//S String,Symbol
//O object
//N number,null
//B boolean

1.10.1Symbol创建对象属性

<script>
// 1.防止对象里的属性重名
let game={up:function(){console.log('game up');},down:function(){console.log('game down');}
}
let methods={up:Symbol(),down:Symbol()
}
game[methods.up]=function(){console.log("methods - up");
}game[methods.down]=function(){console.log("methods - down");
}
//这样就实现了对象里面添加其他方法,又不会重名console.log(game);
console.log(game.up);console.log('---------------');
let game2={//第二种定义方法[Symbol('up')]:function(){console.log("up---------");}
}
console.log(game2);
</script>

1.10.2Symbol常用的内置属性

1.10.2.1 Symbol.hsInstance

1.10.2.1 Symbol.isConcatSpreadable

1.11迭代器

1.11自定义对象迭代器

let myClass={name:"super man class",stu:['超人','钢铁侠','绿巨人'],[Symbol.iterator](){let index=0;let _this = this;return {next: function(){if(index<_this.stu.length){return {value:_this.stu[index++],done:false}}else{return {value:undefined,done:true}}}}}
}// for (let item of myClass.stu) {//     console.log(item);
// }//[Symbol.iterator]()自定义这个之后,就可以了遍历自定义的遍历
for (let item of myClass) {console.log(item);
}

1.12生成器

生成器是一个特殊的函数
异步编程新的解决方案

1.12.1生成器初步使用

function * gen(){console.log("hello generator");
}function * gen2(){console.log("hello generator2");
}// 加入yeild "暂停点"
function * gen3(){console.log("111");yield "第一个暂停点"console.log("222");yield "第一个暂停点"console.log("333");yield "第一个暂停点"console.log("444");
}let r1 = gen();
r1.next(); //用next才能执行let r2 = gen2();
r2.next();//用next才能执行// let r3 = gen3();
// r3.next();//用next才能执行
// r3.next();//用next才能执行
// r3.next();//用next才能执行
// r3.next();//用next才能执行
// r3.next();// 空的没执行,因为已经全部执行完了let r3 = gen3();
console.log(r3.next());//输出yield
console.log(r3.next());//输出yield
console.log(r3.next());//输出yield
console.log(r3.next());//输出yield
console.log(r3.next());//输出yield//遍历
// for (const v of gen3()) {//     console.log(v); //输出yield内容
// }
for (const v of r3) {console.log(v);
}

1.12.2生成器参数使用

function * gen(args){console.log(args);let one = yield 111;console.log(one)let two = yield 222;console.log(two);yield 333;
}let iterator = gen('AAA');
console.log(iterator.next()) //第一次参数,调用next() args
console.log(iterator.next('BBB'))//第二次调用next,会作为第一个业务代码整体返回的结果
console.log(iterator.next('CCC'))//第三次调用next,会作为第二个业务代码整体的返回结果
console.log(iterator.next())
console.log(iterator.next())

1.12.3生成器和异步编程

//需求,一秒后输出111,然后两秒后输出222,三秒后输出333
//传统的异步编程,当足够多时候,会出现"回调地狱"现象
// setTimeout(() => {//     console.log(111);//     setTimeout(() => {//         console.log(222);//         setTimeout(() => {//             console.log(333);
//         }, 3000);//     }, 2000);// }, 1000);//用iterator
function f1(){setTimeout(() => {console.log(111);iterator.next()}, 1000);
}
function f2(){setTimeout(() => {console.log(222);iterator.next()}, 2000);
}
function f3(){setTimeout(() => {console.log(333);}, 3000);
}function * f(){yield f1()yield f2()yield f3()
}
let iterator = f();
iterator.next()

//需求,查询用户,根据用户查询订单,查询商品
//这个案例是有参数作为返回值//用iterator
function getUser(){setTimeout(() => {let user = '张三'iterator.next(user)}, 1000);
}
function getOrder(){setTimeout(() => {let order = '订单10'iterator.next(order)}, 1000);
}
function getGoods(){setTimeout(() => {let good = '商品:芭比娃娃'iterator.next(good)}, 1000);
}function * f(){let user = yield getUser()console.log(user);let order = yield getOrder()console.log(order);let goods = yield getGoods()console.log(goods);
}
let iterator = f();
iterator.next()

1.13 Promise

let p = new Promise(function(resolve,reject){setTimeout(() => {// let data = '成功的数据'// resolve(data) //调用then第一个参数的方法let data = '失败的数据'reject(data) //调用then第二个参数的方法}, 1000);
})
p.then((res)=>{console.log(res);
},(err)=>{console.error(err);
})

读取文件的一个promise实践

// 读取文件
let fs = require('fs');
//1. 用fs传统方法
// fs.readFile('./测试文件.txt',(err,data)=>{//     if(err) throw err
//     console.log(data.toString());
// })//2.用promise改进
let p = new Promise((resolve,reject)=>{fs.readFile('./测试文件.txt',(err,data)=>{if(err) reject(err)resolve(data)})
})
p.then(res=>{console.log(res.toString());
},err=>{console.log(err);
})

1.13.1Promise封装AJAX请求

<script>
/*//1.创建对象
const xhr = new XMLHttpRequest();
const url = 'https://api.apiopen.top/api/sentences'
// const url = 'https://api.apiopen.top/api/sentences22'//错误
//2.初始化
xhr.open('get',url)
//3.发送
xhr.send()
//4.绑定事件
xhr.onreadystatechange = function(){if(xhr.readyState===4){if(xhr.status>=200&&xhr.status<=299){console.log(xhr.response);}else{console.error(xhr.status);}}
}*/
// ----------------------------------
// 用promise改造
const p = new Promise((resolve,reject)=>{//1.创建对象const xhr = new XMLHttpRequest();const url = 'https://api.apiopen.top/api/sentences'// const url = 'https://api.apiopen.top/api/sentences22'//错误//2.初始化xhr.open('get',url)//3.发送xhr.send()//4.绑定事件xhr.onreadystatechange = function(){if(xhr.readyState===4){if(xhr.status>=200&&xhr.status<=299){resolve(xhr.response)}else{reject(xhr.status);}}}
})
p.then(res=>{console.log(res);
},err=>{console.log(err);
})
</script>

1.13.3Promise.prototype.then方法

<script>const p = new Promise((resolve,reject)=>{resolve('成功了')// reject('失败了')})/*这里then的返回值有三种1.非promise return '123'; //这个就是非promise2.promise类型,而且返回值就是返回的promise里面的值*/let result = p.then(res=>{console.log(res);// return '123'; //这个就是非promise//默认没有return 是默认promise//下面就是返回promise类型return new Promise((resolve,reject)=>{resolve('ok')//这个是成功的promose// reject('error')//这个是失败的promise// throw 'error'})},err=>{console.error(err);})console.log(result);// ----------------// 链式调用// p.then(res=>{//     console.log(res);// },err=>{//     console.error(err);// }).then(res=>{//     console.log(res);// },err=>{//     console.error(err);// }).then(res=>{//     console.log(res);// },err=>{//     console.error(err);// })
</script>

1.13.4Promise对象catch方法

catch来处理错误的回调

<script>const p = new Promise((resolve,reject)=>{// resolve('成功了')reject('失败了')})// p.then(res=>{// },err=>{//     console.error(err);// })p.catch(err=>{console.warn(err);})
</script>

ES6-ES11笔记(1)相关推荐

ES6语法笔记(ES6~ES11)
相关代码和笔记已经同步到gitee,需要自取链接地址:ES6学习笔记 1.let // let声明变量let a;let b,c,d;let e = 100;let f = 110,g = 'qwe ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
ES6学习笔记（五）：轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
ES6入门笔记（一）
ES6入门笔记(一) 安装babel 由于浏览器对ES6的支持还不是很好,编写ES6代码前我们要安装一个babel工具将ES6代码编译成ES5代码,用如下命令安装babel: npm install ...
ES6学习笔记04：Set与Map
ES6学习笔记04:Set与Map JS原有两种数据结构:Array与Object,ES6新增两种数据结构:Set与Map 一.Set数据结构 Set类似于数组,但是成员值不允许重复,因此主要用于数据 ...
ES6学习笔记03：变量的解构赋值
ES6学习笔记03:变量的解构赋值如果想从复杂数据结构(数组.对象)中获取某一个数据,可能需要大量的遍历操作才能完成.通过解构赋值,这一过程可以得到简化. 1.字符串的解构赋值其实,Python也 ...
ES6学习笔记02：let 与 const
ES6学习笔记02:let 与 const 用var声明的变量会造成全局污染,于是就产生了新的声明方式. 1.let 用let声明变量,必须先声明后使用. 在for循环头里用let定义循环变量i,那么 ...
ES6学习笔记01：Symbol数据类型
ES6学习笔记01:Symbol数据类型 1.Symbol定义浏览demo01.html: 2.Symbol作对象属性名 Symbol函数可以接收一个字符串作为参数,表示对Symbol实例的描述,输 ...
es6学习笔记-顶层对象_v1.0_byKL
es6学习笔记-顶层对象_v1.0 (虽然是笔记,但是基本是抄了一次ruan大师的文章了) 顶层对象顶层对象,在浏览器环境指的是window对象,在Node指的是global对象. ES5之中,顶层 ...

ES6-ES11笔记(1)

1.ES6

1.1let的一些注意点

1.2const 常量的一些注意点

1.3 变量的解构赋值

1.4 模板字符串

1.5对象的简化写法

1.6箭头函数

1.6.1箭头函数箭头函数的注意点

1.7函数默认值

1.8 rest参数

1.9拓展运算符

1.9.1拓展运算符的运用

1.10Symbo的基本使用

1.10.1Symbol创建对象属性

1.10.2Symbol常用的内置属性

1.11迭代器

1.11自定义对象迭代器

1.12生成器

1.12.1生成器初步使用

1.12.2生成器参数使用

1.12.3生成器和异步编程

1.13 Promise

1.13.1Promise封装AJAX请求

1.13.3Promise.prototype.then方法

1.13.4Promise对象catch方法

ES6-ES11笔记(1)相关推荐

最新文章

热门文章

ES6-ES11笔记(1)

1.ES6

1.1let的一些注意点

1.2const 常量的一些注意点

1.3 变量的解构赋值

1.4 模板字符串

1.5对象的简化写法

1.6箭头函数

1.6.1箭头函数 箭头函数的注意点

1.7函数默认值

1.8 rest参数

1.9拓展运算符

1.9.1拓展运算符的运用

1.10Symbo的基本使用

1.10.1Symbol创建对象属性

1.10.2Symbol常用的内置属性

1.11迭代器

1.11自定义对象迭代器

1.12生成器

1.12.1生成器初步使用

1.12.2生成器参数使用

1.12.3生成器和异步编程

1.13 Promise

1.13.1Promise封装AJAX请求

1.13.3Promise.prototype.then方法

1.13.4Promise对象catch方法

ES6-ES11笔记(1)相关推荐

最新文章

热门文章

1.6.1箭头函数箭头函数的注意点