ES6

const let

变量不能重复声明
块级作用域
不存在变量提升
不影响作用域链

解构赋值

let obj = {a: {b: 1}}
const {a: {b: newb}} = obj

模板字符串

对象简写方法

const person = {
  name: 'zhao',
  //函数简写
  improve() {
    //..
  }
}

箭头函数

this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值

function getName() {
  console.log(this.name)
}
let getName2 = () => {
  console.log(this.name)
}
//设置 window 对象的 name 属性
window.name = 'xiaoxiao'
const school = {
    name: 'yanan'
}

//call 方法调用
getName.call(school) //yanan
getName2.call(school) //xiaoxiao

不能作为构造实例化对象
不能使用 arguments（伪数组）
小括号和花括号简写
注：箭头函数适合与 this 无关的回调，定时器数的方法回调
箭头函数不合适与 this 有关的回调，事件回调对的方法

允许给函数参数赋初始值

rest 参数(数组)

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

数组的合并
数组的克隆
将伪数组转为真正的数组

Symbol 表示独一无二的值

Symbol 的值是唯一的，用来解决命名冲突的问题
Symbol 值不能与其他数据进行运算

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

//创建
let s = Symbol()

let s2 = Symbol('xiaoxiao')
let s3 = Symbol('xiaoxiao')
console.log(s2 === s3) //false

let s4 = Symbol.for('xiaoxiao')
let s5 = Symbol.for('xiaoxiao')
console.log(s4 === s5) //true

创建对象属性

let game = {
  name: '俄罗斯方块',
  up: function() {},
  down: function() {}
}
//向对象中添加方法
let methods = {
  up: Symbol(),
  down: Symbol()
}
game[methods.up] = function(){}
game[methods.down] = function(){}

let youxi = {
  name: '狼人杀',
  [Symbol('say')]: function(){},
  [Symbol('zibao')]: function(){},
}

内置属性

迭代器

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

ES6 创造遍历命令 for...of 循环，Iterator 接口主要供 for...of 消费

原生具备 iterator 接口的数据（可用 for...of 遍历）
Array Arguments Set Map String TypedArray NodeList

const xiyou = ['唐僧','孙悟空','猪八戒','沙僧']
let iterator = xiyou[Symbol.iterator]()
//调用对象的next方法
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())

生成器

生成器函数是 ES6 提供的一种异步编程解决方案

生成器其实就是一个特殊的函数 yield 是函数代码的分隔符

function *gen() {
  yield '1'
  yield '2'
  yield '3'
}
let iterator = gen()
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())

生成器函数参数

function *gen(arg) {
  console.log(arg)
  let one = yield '1'
  console.log(one)
  yield '2'
  yield '3'
}
let iterator = gen('a')
console.log(iterator.next())
//next 方法可以传入实参 做为第一个 yield 语句的返回结果
console.log(iterator.next('b'))
iterator.next()

生成器实例

//异步编程
function getUsers(){
  setTimeout(() => {
    console.log('1')
    let data = '用户数据'
    iterator.next(data) //往下执行
  }, 1000)
}
function getOrders(){
  setTimeout(() => {
    let data = '订单数据'
    iterator.next(data)
  }, 2000)
}
function getGoods(){
  setTimeout(() => {
    let data = '货物数据'
    iterator.next(data)
  }, 3000)
}

function *gen(){
  let users = yield getUsers()
  console.log(users)
  let orders = yield getOrders()
  let goods = yield getGoods()
}
//调用生成器函数
let iterator = gen()
iterator.next()

Promise

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

如果回调函数中返回的是非 promise 类型的值，状态为成功，返回值为对象的成功的值
如果回调函数中返回的是 promise 对象，状态为成功，then方法返回的对象也为成功，状态为失败，then 方法返回的对象也为失败
如果回调函数中抛出异常，then 方法返回的对象状态为失败

Set

类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用扩展运算符和 for...of 进行遍历

let s = new Set(['大事','小事','好事','坏事','小事'])

console.log(s.size) //元素个数
s.add('喜事')
s.delete('坏事')
console.log(s.has('好事')) //检测
s.clear() //清空

Map

类似于对象，也是键值对的集合，但键的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 实现了 iterator 接口，所以可以使用扩展运算符和 for...of 进行遍历

let m = new Map()

//添加元素
m.set('name', '尚硅谷')
m.set('change', function(){
    console.log('---')
})
let key = {
  school:'aaa'
}
m.set(key, ['b','s'])

//size
console.log(m.size)
//delete
m.delete('name')
//获取
console.log(m.get('change'))
console.log(m.get(key))
//清空
m.clear()
//遍历
for(let v of m) {
    console.log(v) //键值对数组
}

class 类

ES6 的 class 可以看做只是一个语法糖，它的绝大部分功能 ES5 都可以做到

1.创建静态属性继承方法重写

//以 abstract 开头的类是抽象类
//抽象类就是专门用来被继承的类 不能用来创建对象
abstract class Phone{
  //构造方法
  constructor(brand, price) {
    this.brand = brand
    this.price = price
  }
  // 静态属性
  // 属性只属于类，实例对象上没有
  // 相当于ES5 
  // Phone.name = ''
  // Phone.change = function(){}
  static name = 'phone'
  static change() {
    console.log('..')
  }

  // 抽象方法 
  call() {
    console.log('...')
  }
}
let one = new Phone('1+', 1999)

//继承
class SmartPhone extends Phone {
  constructor(brand, price, color, size) {
    super(brand, price)
    this.color = color
    this.size = size
  }
  // 相当于ES5 SmartPhone.prototype.playGame = function() {}
  playGame() {
    console.log('...')
  }
  //方法重写
  // call() {
  //   console.log('视频通话')
  // }
}
let xiaomi = new SmartPhone('xiaomi', 1499, 'black', 5.59)

2.getter setter 类似与对象中的

class Phone() {
  get price() {
    console.log('...')
    return '默认价格'
  }
  set price(p) {
    console.log('...')
  }
}
let phone = new Phone()
console.log(phone.price)
s.price = 'free'

数值扩展

Number.EPSILON 是 js 表示的最小精度

二进制和八进制

let b =0b1010
let o =0o777
let d =100
let x =0xff

Number.isFinite 检测一个数值是否为有限数
Number.isNaN 检测一个数值是否为NaN
isNaN() 函数用来确定一个值是否为 NaN，若有必要，则首先将值转换为数字。由于 isNaN() 函数内部的强制类型转换可能令人迷惑，因此你可能更想要使用 Number.isNaN()。
Number.parseInt Number.parseFloat字符串转整数
Number.isInteger 判断一个数是否为整数
Math.trunc 将数字的小数部分抹掉
Math.sign 判断一个数到底是正数负数还是零

对象方法扩展

Object.is 判断两个值是否完全相等

console.log(Object.is(100, 100)) //true
console.log(Object.is(NaN, NaN)) //true
console.log(NaN === NaN) //false

Object.assign 对象的合并

const config1 = {
  host: 'loaclhost'
}

const config2 = {
  port: 3306
}
console.log(Object.assign(config1,config2)) //后面覆盖前面的

Object.setPrototypeOf Object.getPrototypeOf

const school ={
    name:'shang'
}
const cities={
    xiaoqu:['beijing','shanghai']
}
Object.setPrototypeOf(school, cities) //设置 school 对象原型
console.log(Object.getPrototypeOf(school))
console.log(school)

模块化

export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能

1.暴露语法汇总

// 分别暴露
export let school = ''
export function teach() {}

//统一暴露
let school = ''
function teach() {}
export {school, teach}

//默认暴露 可以任意类型数据
export default {
  school: '',
  teach: function() {}
}

2.引入语法汇总

<script type='module'>
  // 通用引入
  import * as m1 from './src/js/m1(2/3).js'
  // 解构赋值
  import { school, teach} from './src/js/m1(2).js'
  import { default as m3} from './src/js/m3.js'
  // 简便形式 只针对默认暴露
  import m3 from './src/js/m3.js'
</script>

babel

开发依赖 npx babel ...
全局依赖 babel ...

fetch

fetch('http://localhost:8000/getInfo',{
  method: 'get',
  mode: 'xx'
}).then(res=>{
  console.log(res);
  return res.json()
})
.then(res2=>{
  console.log(res2)
})
.catch(error=>{
  console.log(error);
})

ES7

includes 检测数组中是否包含某个元素，返回布尔类型值

const ming= ['xi','dong','nan','bei']
console.log(ming.includes('xi'))

** 幂运算 `Math.pow(2, 10)`

ES8

async await

async 函数的返回值为 promise 对象
promise 对象的结果由 async 函数执行的返回值决定

await 必须写在 async 函数中
await 右侧的表达式一般为 promise 对象
await 返回的是 promise 成功的值
await 的 promise 失败了，就会抛出异常，需要通过 try...catch 捕获处理

ES8

对象方法扩展

1.Object.keys() 方法返回一个给定对象的所有可枚举属性的数组
2.Object.values() 方法返回一个给定对象的所有可枚举属性值的数组
3.Object.entries() 方法返回一个给定对象自身可遍历属性 [key, value] 的数组

Object.entries(school)

//创建 Map
const m = new Map(Object.entries(school))
console.log(m.get('cities'))

4.Object.getOwnPropertyDescriptors 方法返回指定对象所有自身属性的描述对象

const obj = Object.create(null, {
  name: {
    //设置
    value: '..',
    //属性特性
    writable: true,
    configurable: true,
    enumerable: true
  }
})

ES9

1.Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6中只针对与数组

在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

2.正则扩展-命名捕获分组

let str = '<a href="http://www.atguigu.com>尚硅谷</a>'
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/
const result = reg.exec(str)

console.log(result.group.url)
console.log(result.group.text)

3.正则扩展-反向断言

let str ='JS5211314你知道555啦啦啦'
//正向断言
// const reg = /d+(?=啦)/
// const result = reg.exec(str)

//反向断言
const reg = /(?<=么)d+/
const result = reg.exec(str)

4.正则扩展-dotAll 模式

ES10

1.Object.fromEntries() 二维数组、Map -> object对象

2.str.trimStart str.trimEnd

3.arr.flat 将多维数组转化为低维数组

const arr = [1,2,3,4,[5,6,[7,8]]]
console.log(arr.flat(2)) //参数为深度

arr.flatMap map 循环后再扁平化

const arr1 = [1,2,3,4]
const result = arr.flatMap(item => [item*10])
console.log(result)

4.Symbol.prototype.description 获取Symbol描述字符串

ES11

1.私有属性

class Person {
  //公有属性
  name;
  //私有属性
  #age;

  constructor(name, age) {
    this.name = name;
    this.#age = age;
  }

  intro() {
    console.log(gril.name);
    console.log(gril.#age);
  }
}
const gril = new Person("xx", 18, "45kg");
console.log(gril.name);
// console.log(gril.#age) //报错
gril.intro();

2.Promise.allSettled()

传入一个 promise 数组返回一个成功的 promise 对象，值是传入数组的 promise 值的数组

3.String.prototype.matchAll

4.可选链操作符

const dbHost = config?.db?.host

5.动态引入

// 静态引入
// import * as m1 from './hello.js'

btn.onclick = function() {
  import('./hello.js').then(module => {
    module.hello()
  })
}

6.BigInt

//大整型
let n = 521n
console.log(n, typeof n) //bigint

//函数
let n1 = 12
console.log(BigInt(n1))

//运算
let max = Number.MAX_SAFE_INTEGER
console.log(BigInt(max) + BigInt(1)) //只能和大整型运算

7.globalThis 指向全局对象

posted @ 2023-05-09 09:12 提莫一米五呀阅读(33) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· javascript

· jsHigh

· ES6-11语法笔记

· ES6~ES9

· 学习ES6

公告

昵称：提莫一米五呀
园龄： 6年3个月
粉丝： 1
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

notes(27)

提莫一米五呀

ES6

ES6

const let

解构赋值

模板字符串

对象简写方法

箭头函数

允许给函数参数赋初始值

rest 参数(数组)

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

Symbol 表示独一无二的值

迭代器

生成器

Promise

Set

Map

class 类

1.创建 静态属性 继承 方法重写

2.getter setter 类似与对象中的

数值扩展

对象方法扩展

模块化

1.暴露语法汇总

2.引入语法汇总

babel

fetch

ES7

includes 检测数组中是否包含某个元素，返回布尔类型值

** 幂运算 Math.pow(2, 10)

ES8

async await

ES8

对象方法扩展

ES9

1.Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6中只针对与数组

2.正则扩展-命名捕获分组

3.正则扩展-反向断言

4.正则扩展-dotAll 模式

ES10

1.Object.fromEntries() 二维数组、Map -> object对象

2.str.trimStart str.trimEnd

3.arr.flat 将多维数组转化为低维数组

4.Symbol.prototype.description 获取Symbol描述字符串

ES11

1.私有属性

2.Promise.allSettled()

3.String.prototype.matchAll

4.可选链操作符

5.动态引入

6.BigInt

7.globalThis 指向全局对象

公告

搜索

常用链接

随笔分类

随笔档案

notes

阅读排行榜

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

1.创建静态属性继承方法重写

** 幂运算 `Math.pow(2, 10)`