回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

ES6新特性总结 #131

Anuluca Date : 2021-03-11 Tags : 2

§ let声明变量

无法重复声明
块级作用域，只有在代码块里有效
不存在变量提升

§ const声明常量

拥有let的所有特性
必须有初始值
无法被修改
如果是数组或者对象，就可以修改
一般常量名用大写

§ 对象解构

const LUCARIO = {
  English: 'Lucario',
  Chinese: '路卡利欧',
  Japanese: 'ルカリオ'
}
let {EnglishName, ChineseName, JapaneseName} = LUCARIO
console.log('EnglishName',EnglishName)  // 'EnglishName', Lucario
console.log('ChineseName',ChineseName)  // 'ChineseName', 路卡利欧
console.log('JapaneseName',JapaneseName)  // 'JapaneseName', ルカリオ

§ 模版字符串

let temp = 'temp'
let str = `<ul>
            <li>${temp}</li>
          </ul>`

直接在字段内换行
直接拼接字段

§ 对象简化写法

通常写法：

let name = 'lucario'
let move = function(){
  console.log("close attack")
}

const pokemon = {
  name:name,
  move:move,
  run:function(){
      console.log('')
    }
  }
}

简化写法：

let name = 'lucario'
let move = function(){
  console.log("close attack")
}

const pokemon = {
  name,
  move,
  run(){
    console.log('')
  }
}

§ 箭头函数

1
2
3

let fn = function(){
  return 'fn'
}

1
2
3

let fn = () => {
  return 'fn'
}

进一步简写：

1
2
3

let fn = function(a){
  return a + a
}

1	let fn = a => a

this是静态的，始终指向函数所在的作用域
不能当作构造函数构造对象
不能使用arguments变量

§ 函数参数赋初始值

1
2
3

function(a=3){
  return a + a
}

§ rest参数

用于获取参数的实惨，代替arguments

function date(...args){
  console.log(args)
}
date('火','水','草') // 输出：["火","水","草"]

…args必须放到所有参数的最后

§ 【…】扩展运算符

const shinjin = ["火","水","草"]

//声明一个函数
function all(){
  console.log(arguments)
}

all(shinjin)  // "火","水","草" (一个参数变为三个参数)

用于合并两个数组：

const shinjin = ["火","水","草"]
const eliteFour = ["超","毒","斗","龙"]

const shinjinAndElitefour = [...shinjin,...eliteFour]
console.log(shinjinAndEliteFour) // 输出：["火","水","草","超","毒","斗","龙"]

用于深拷贝

1
2
3

const shinjin = ["火","水","草"]

const new_shinjin = [...shinjin] //深拷贝实现完成。

§ 新的数据类型：Symbol

一种新的数据类型，表示独一无二的值。

特点：

值是唯一的，避免命名冲突问题
不能和其他数据进行运算
不能使用for…in遍历，如果要遍历需要使用Reflect.ownKeys
扩展对象属性

唯一性：

const a1 = Symbol('a')
const a2 = Symbol('a')

// 唯一性
console.log(a1 === a2) //输出： false

//使用Symbol.for()获得Symbol注册表中的key
const a1_key = Symbol.for('a')
const a2_key = Symbol.for('a')
console.log(a1_key === a2_key) //输出： true

给对象添加属性

let game = {
  name = "XY",
  [Symbol('evolution')]:function(){
    console.log("Mega Evolution")
  }
  [Symbol('artStyle')]:function(){
    console.log("3D")
  }


}

console.log(game)
//输出：
//    name: "XY"
//    Symbol(evolution): f()
//    down(artStyle): f()

Symbol内置值(用于控制对象在特定情况下的表现)

1.Symbol.hansInstance

class Person{
  static [Symbol.hasInstance](){
    console.log("我被用来检测类型")
  }
}

let o = {}

console.log(o instanceOf Person)
// 输出： 我被用来检测类型
//       false

2.Symbol.isConcatSpreadable

const arr = [1,2,3]
const arr2 = [4,5,6]

arr.[Symbol.isConcatSpreadable] = false
console.log(arr.concat(arr2)) // 输出：[1,2,3,Array(3)]

等等用法

§ 迭代器

for of和for in

for of遍历元素，for in遍历下标
for of不能在ie使用

工作原理

创建一个指针对象，指向当前数据结构的起始位置。
第一次调用next()方法，指针自动指向数据结构的第一个成员
接下来不断调用next()方法，指针一直向后移动，直到最后一个成员
每调用一次next()方法，返回一个包含value和donw属性的对象。
示例：

const 3dMario = ['64','Sunshine','Galaxy','Galaxy2','Odessy']

let iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // 输出：{value: "64", done: false}
console.log(iterator.next()); // 输出：{value: "Sunshine", done: false}
console.log(iterator.next()); // 输出：{value: "Galaxy", done: false}
console.log(iterator.next()); // 输出：{value: "Galaxy2", done: false}
console.log(iterator.next()); // 输出：{value: "Odessy", done: false}
console.log(iterator.next()); // 输出：{value: undefined, done: true}

§ Promise

解决了异步操作中回调地狱的问题

如果数据获取成功

const p = new Promise(function(resolve,reject){
  // 如果执行了resolve，则为成功，执行then回调
  setTimeout(function(){
    let data = "从数据库中取得的数据"
    resolve(data)
  },1000)


  // 如果执行了resolve，则为失败，执行then回调
  setTimeout(function(){
    let err = "数据获取失败"
    reject(data)
  },1000)

})

//执行then回调
p.then(
  //成功的回调
  function(value){
    console.log(value)
    // 输出： 从数据库中取得的数据
  },
  //失败的回调
  function(reason){
    console.log(reason)
    // 输出： 数据获取失败
  }
)

§ 新的数据结构：Set

集合
ie不完全支持set

自动去重

1
2
3

let mainSeries = new Set (['Gen1','Gen2','Gen3','Gen4','Gen5','Gen6','Gen7','Gen1'])

console.log(mainSeries) // 输出：Set(7) {'Gen1','Gen2','Gen3','Gen4','Gen5','Gen6','Gen7'}

获取长度：size

1	console.log(mainSeries.size) //输出：7

添加新的元素：add

1 2	mainSeries.add('Gen8') console.log(mainSeries) // 输出：Set(8) {'Gen1','Gen2','Gen3','Gen4','Gen5','Gen6','Gen7','Gen8'}

删除元素：delete

1 2	mainSeries.delete('Gen8') console.log(mainSeries) // 输出：Set(7) {'Gen1','Gen2','Gen3','Gen4','Gen5','Gen6','Gen7'}

检测是否包含某元素：has

1	console.log(mainSeries.has('Gen5')) // 输出：true

清空：clear

1 2	mainSeries.clear() console.log(mainSeries) // 输出：Set(0) {}

转数组

1 2	mainSeries = [...mainSeries] console.log(mainSeries) // 输出：['Gen1','Gen2','Gen3','Gen4','Gen5','Gen6','Gen7']

§ 新的数据结构：Map

类似对象，也是键值对的集合，但键可以不为String类型，也实现了iterator接口，可以遍历。

声明：new；添加元素：set

// 声明一个Map
let m = new Map()

//添加元素
m.set('name','Lucas')
console.log(m)  //输出：Map(1){"name" => "Lucas"}
//ps：添加对象
m.set({'name','Lucas'},'Dawn')
console.log(m)  //输出：Map(2){"name" => "Lucas", Object => "Dawn"}

删除元素：delete

1
2
3

//填入键名
m.delete(name)
console.log(m)  //输出：Map(1){Object => "Dawn"}

获取：get

1	console.log(m.get({'name','Lucas'})) //输出："Dawn"

清空：clear

1 2	m.clear() console.log(m) //输出：Map(0) {}

§ Class

由于某些原因，博客图床于5月26日惨遭爆破，目前正在整理需要的图片并迁移存活的图片到新图床,预计6月10日重新上线网站

THE END

讨论

Anuluca

Update:2021-03-11

JS web前端

...

推特 ( 𝕏 )

Bilibili

微博

Github

裏

表

笔记

Javascript/CSS

Vue/React

其它

杂物室

杂谈

工具

影像