第一次学习ES6的笔记
第一次学习ES6的笔记
JunsES6-11
一些链接
ES6
let 和 const
let
特性
变量不能重复声明
let star = '罗志祥'
let star = '小猪' //errorlet 有块级作用域
{
let girl = '周扬青'
}
console.log(girl) //error不仅仅针对花括号，例如 if（）里面
不存在变量提前
console.log(song) //error
let song = '恋爱达人'不影响作用域链
let school = 'abc'
function fn() {
console.log(school) //abc
}
const
特性
声明常量
const A = 'abc'
一定要赋初始值
一般常量使用大写（潜规则）
常量的值不能修改
也具有块级作用域
{
const pyaler = 'uzi'
}
console.log(player) //error对于数组和对象的元素修改，不算作对常量的修改
const team = ['uzi', 'MXLG', 'Ming', 'Letme']
team.push('Meiko') //不报错，常量地址没有发生变化
解构赋值
介绍
ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。
数组的解构：
const F4 = ['小沈阳'，'刘能','赵四','宋小宝']
let [xiao,liu,zhao,song] = F4;
console.log(xiao)//F4[0]的值
console.log(liu)
console.log(zhao)
console.log(song)对象的解构
const zhao = {
name : '赵本山'，
age: '不详',
xiaopin: function(){
console.log("我可以演小品")
}
};
let {name,age,xiaopin} = zhao;
console.log(name);
console.log(age);
console.log(xiaopin);
模板字符串
特性
ES6 引入的``，之前是' '和" "
声明
let str = `我也是一个字符串`
console.log(str, typeof str)内容中可以直接出现换行符
let str = `<ul>
<li>RHF</li>
<li>RHF</li>
</ul>`；变量拼接
let lovest = 'RHF'
let out = `${lovest}是最帅的`
console.log(out) //RHF是最帅的
对象的简化写法
介绍
ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法,这样的书写更加简洁
特性
let name = 'aaa' |
箭头函数
介绍
ES6 允许使用箭头（=>）定义函数
let fn = function () {} |
特性
this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值
function A() {
console.log(this.name)
}
let B = () => {
console.log(this.name)
}
window.name = '尚硅谷'
const school = {
name: 'ATGUIGU',
}
//直接调用
A() //尚硅谷
B() //尚硅谷
//call
A.call(school) //ATGUIGU
B.cal(school) //尚硅谷不能作为构造实例化对象
let A(name,age) => {
this.name=name;
this.age=age;
}
let me = new A('xiao',123);
console.me //error不能使用 arguments 变量
let fn = () => {
console.log(arguments)；
}
fn(1,2,3) //error简写
省略小括号，当形参有且只有一个的时候
let add = n => {
return n + 1
}省略花括号，当代码体只有一条语句的时候，此时 return 也必须省略
let add = n => n + 1
函数参数默认值
介绍
ES6 允许给函数参数赋值初始值
特性
可以给形参赋初始值，一般位置要靠后（潜规则）
function add(a, b, c = 12) {
return a + b + c
}
let result = add(1, 2)
console.log(result) // 15与解构赋值结合
function A({ host = '127.0.0.1', username, password, port }) {
console.log(host + username + password + port)
}
A({
username: 'ran',
password: '123456',
port: 3306,
})
rest 参数
介绍
ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
特性
function date(){ |
拓展运算符
介绍
扩展运算符是能将数组转换为逗号分隔的参数序列
特性
const tfboys = ['AA', 'BB', 'CC'] |
应用
数组的合并
const A = ['aa', 'bb']
const B = ['cc', 'dd']
const C = [...A, ...B]
console.log(C) //[aa,bb,cc,dd]数组的克隆
const A = ['a', 'b', 'c']
const B = [...A]
console.log(B) //[a,b,c]将伪数组转换为真正的数组
const A = documents.querySelectorAll('div')
const B = [...A]
console.log(B) // [div,div,div]
Symbol
介绍
ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol 特点：
- Symbol 的值是唯一的，用来解决命名冲突的问题
- Symbol 值不能与其他数据进行运算
- Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名
特性
创建
let s = Symbol('aa')
let s2 = Symbol('aa') // 字符串只是标志，返回结果不一样
console.log(s === s2) //false
// 也是创建
let s3 = Symbol.for('bb')
let s4 = Symbol.for('bb')
comsole.log(s3 === s4) ///true不能与其他数据进行运算
let result = s + 100 //error
let result = s > 100 //error
let result = s + s //errorSymbol 内置值
class Person {
static [Symbol.hasInstance](param){
console.log(param);
console.log("我被用来检测了")；
return false;
}
}
let o = {};
console.log(o instanceof Person); //我被用来检测了，false
应用
给对象添加方法方式一：
let game = {
name : 'ran'
}
let methods = {
up:Symbol()
down:Symbol()
}
game[methods.up]=function(){
console.log('aaa');
}
game[methods.down]=function(){
console.log('bbb');
}
console.log(game) // name: 'ran',Symbol(),Symbol()给对象添加方法方式二
let youxi = {
name: '狼人杀'，
[Symbol('say')]:function(){
console.log('阿萨德')
}
}
console.log(youxi) // name:'狼人杀',Symbol(say)
迭代器*
介绍
- 迭代器(lterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 lterator 接口，就可以完成遍历操作。
- 原理：创建一个指针对象，指向数据结构的起始位置，第一次调用==next（）==方法，指针自动指向数据结构第一个成员，接下来不断调用 next（），指针一直往后移动，直到指向最后一个成员，没调用 next（）返回一个包含 value 和 done 属性的对象
特性
const xiyou = ['AA', 'BB', 'CC', 'DD'] |
应用
const banji = { |
生成器*
介绍
生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同，是一种特殊的函数
特性
function * gen (){ //函数名和function中间有一个 * |
应用
生成器函数的参数传递
function* gen(args) {
console.log(args)
let one = yield 111
console.log(one)
let two = yield 222
console.log(two)
let three = yield 333
console.log(three)
}
let iterator = gen('AAA')
console.log(iterator.next())
console.log(iterator.next('BBB')) //next中传入的BBB将作为yield 111的返回结果
console.log(iterator.next('CCC')) //next中传入的CCC将作为yield 222的返回结果
console.log(iterator.next('DDD')) //next中传入的DDD将作为yield 333的返回结果实例 1：用生成器函数的方式解决回调地狱问题
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：模拟异步获取数据
function one() {
setTimeout(() => {
let data = '用户数据'
iterator.next(data)
}, 1000)
}
function two() {
setTimeout(() => {
let data = '订单数据'
iterator.next(data)
}, 2000)
}
function three() {
setTimeout(() => {
let data = '商品数据'
iterator.next(data)
}, 3000)
}
function* gen() {
let users = yield one()
console.log(users)
let orders = yield two()
console.log(orders)
let goods = yield three()
console.log(goods)
}
let iterator = gen()
iterator.next()
Promise
介绍
Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。
特性
基本特性
<script>
const p =new Promise((resolve, reject)=>
{setTimeout(() => {
let data = '数据库数据'
// resolve(data);
reject(data)
})}) p.then(function (value)
{
//成功则执行第一个回调函数，失败则执行第二个
console.log(value)
}
,function (reason){console.error(reason)})
</script>Promise.then（）方法
<script>
const p =new Promise((resolve, reject) =>{
setTimeout(()=>{
resolve('用户数据');
})
});
//then（）函数返回的实际也是一个Promise对象
//1.当回调后，返回的是非Promise类型的属性时，状态为fulfilled，then（）函数的返回值为对象的成功值，如reutnr 123，返回的Promise对象值为123，如果没有返回值，是undefined
//2.当回调后，返回的是Promise类型的对象时，then（）函数的返回值为这个Promise对象的状态值
//3.当回调后，如果抛出的异常，则then（）函数的返回值状态也是rejected
let result = p.then(value => {
console.log(value)
// return 123;
// return new Promise((resolve, reject) => {
// resolve('ok')
// })
throw 123
},reason => {
console.log(reason)
})
console.log(result);
</script>Promise.catch（）方法
//catch（）函数只有一个回调函数，意味着如果Promise对象状态为失败就会调用catch（）方法并且调用回调函数
<script>
const p = new Promise((resolve, reject) =>{' '}
{setTimeout(() => {
reject('出错啦')
}, 1000)}
) p.catch(reason => {console.log(reason)})
</script>
应用：发送 AJAX 请求
<script> |
==集合==
Set
介绍
ES6 提供了新的数据结构 set(集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用「扩展运算符』和「 for…of…』进行遍历，集合的属性和方法:
- size 返回集合的元素个数
- add 增加一个新元素，返回当前集合
- delete 删除元素，返回 boolean 值 has 检测集合中是否包含某个元素，返回 boolean 值
特性
<script> |
应用
<script> |
Map
介绍
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用『扩展运算符』和「for…of…』进行遍历。Map 的属性和方法。
特性
<script> |
Map 对象
构造
[1, 'one'],
[2, 'two'],
[3, 'three'],
[1, 'four'],
])
let myMap2 = new Map()size 属性
- 获取元素个数 由于 map 的 key 不能相同，相同则会取后面的那个，所以 myMap1 的 size 为 3
console.log(myMap2.size) //0get 方法
- 获取 value
has 方法
- 判断是否有对应的 key
keys
- 返回按照顺序插入的每个元素的 key 值
for (let key of test) {
console.log(key)
}values 方法
- 返回按照顺序插入的每个元素的 value 值得迭代器对象
for (let value of test2) {
console.log(value)
}
// four two three
//注意上面的打印顺序，可以看到构造方法里先出现的key在迭代对象里也先出现，而不是有重复的话先删除再添加，而是重复的话直接覆盖对应的valueset 方法
- 往 map 里插入或者覆盖对应的 key 和 value
entries 方法
- 返回包含[key,value]的迭代器对象
for (const item of iterator1) {
console.log(typeof item, Array.isArray(item), item)
}delete 方法
- 删除对应的 key 同时返回删除之前是否包含该元素
map1.set('bar', 'foo')
console.log(map1.delete('bar'))
// expected result: trueclear 方法
- 清空 map 对象
Class
初体验
介绍
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
特性
<script> |
静态成员
<script> |
构造函数继承
<script> |
Class 类的继承
<script> |
子类对父类方法的重写
<script> |
get 和 set 设置
<script> |
数值拓展
<script> |
对象方法拓展
<script> |
模块化
基本介绍
介绍
模块化是指将一个大的程序文件,拆分成许多小的文件，然后将小文件组合起来。
模块化的好处：
- 防止命名冲突
- 代码复用
- 高维护性
模块化规范产品
ES6 之前的模块化规范有：
- CommonJS ====> NodeJS、Browserify
- AMD ====> requireJS
- CMD ====> seaJS
语法
模块功能主要有两个命令构成：export 和 inport
- export 命令用于规定模块的对外接口
- inport 命令用于输入其他模块提供的功能
export let school = '尚硅谷' |
暴露语法汇总
统一暴露
//统一暴露
let school = '尚硅谷'
function findjob() {
console.log('找工作吧')
}
//export {school,findjob}默认暴露
//默认暴露
export default {
school: 'ATGUIGU',
change: function () {
console.log('我们可以改变你')
},
}
引入语法汇总
通用导入方式
import * as m1 from './src/js/m1.js'
import * as m2 from './src/js/m2.js'
import * as m3 from './src/js/m3.js'解构赋值方式
import { school, teach } from './src/js/m1.js'
import { school as guigu, findJob } from './src/js/m2.js'
import { default as m3 } from './src/js/m3.js'简便形式（只针对默认暴露）
import m3 from "./src/js/m3.js"
ES7
介绍
- Array.prototype.includes：用来检测数组中是否包含某个元素，返回布尔类型值
- 在 ES7 中引入指数操作符**，用来实现幂运算，功能与 Math.pow 结果相同
应用
<script> |
ES8
async 函数
介绍
async 和 await 两种语法结合可以让异步代码像同步代码一样
async 函数：
- async 函数的返回值为 promise 对象
- async 返回的 promise 对象的结果值由 async 函数执行的返回值决定
特性
async function fn() { |
await 表达式
介绍
- await 必须放在 async 函数中
- await 右侧的表达式一般为 promise 对象
- await 可以返回的是右侧 promise 成功的值
- await 右侧的 promise 如果失败了，就会抛出异常，需要通过 try…catch 捕获处理
特性
<script> |
应用：发送 AJAX 请求
<script> |
ES8 对象方法拓展
<script> |
ES9
###运算扩展符与 rest 参数
<script> |
ES10
对象拓展方法
<script> |
字符串扩展方法
<script> |
flat 与 flatMap
<script> |
Symbol 的 description
介绍
用来获取 Symbol 的字符串描述
实例
let s = Symbol('尚硅谷') |
私有属性
<script> |
Promise
<script> |
可选链操作符
//相当于一个判断符，如果前面的有，就进入下一层级 |
动态 import
btn.onclick = function () { |
BigInt 类型
//大整型 |
绝对全局对象 globalThis
浏览器为 window， node 中为 global
console.log(globalThis) //window //适用于复杂环境下直接操作window |
