ECMAScript 6.0 笔记

person 匿名

发布日期: 2020-10-07 10:55:49 浏览量: 98
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

ES6

let、const

……

解构赋值

从对象/数组中提取值,按照对应位置,对变量赋值。对象也可以实现解构

  1. let [a,b,c]= [1,2,3]
  2. let person = {name:"xioaming",age:18}
  3. let {name,age} = person
  4. let {name:uname,age:uage}=person//左侧用于匹配,右侧用于赋值变量

参数赋值初始值

  1. function add(a,b,c=10){}//具有默认值的参数值,一般位置要靠后
  2. add(1,2)
  3. //与结构赋值结合
  4. function connect({host="127.0.0.1",username,password,port=3000}){
  5. }
  6. conncet({
  7. host:'localhost',
  8. username:"root",
  9. password:"root",
  10. port:3306
  11. })

箭头函数

……

this指是函数外最近的那个this,无法被bind/call/apply指定

剩余参数

将一个不定数量的参数表示为一个数组

  1. function sum(first,...args){
  2. //args为数组
  3. }
  4. sum(1,2,3,4,5)
  5. //剩余参数与解构配合使用
  6. let students=['xm','xw','xz']
  7. let [s1,...s2] = students
  8. console.log(s1)//'xm'
  9. console.log(s2)//['xw','xz']

扩展运算符(展开语法)

将数组或对象转为用逗号分隔的参数序列

  1. let arr = [1,2,3]
  2. console.log(...arr)
  3. //应用:合并数组
  4. let arr1=[1,2,3]
  5. let arr2=[4,5,6]
  6. let arr3=[...arr1,...arr2]//arr1.push(...arr2)
  7. //应用:将伪数组转为数组
  8. let arr = [...arguments]
  9. //拓展
  10. //构造函数方法Array.fron()转数组
  11. let arrayLike={
  12. '0':'a',
  13. '1':'b',
  14. length:2
  15. }
  16. let arr2=Array.from(arraylike,[function])
  17. //find()找出第一个符合条件的数组成员,如果没有找到返回undefined
  18. let arr =[
  19. {
  20. id:1,
  21. name:"xm"
  22. },
  23. {
  24. id:2,
  25. name:"xz"
  26. }
  27. ]
  28. let target = arr.find((item,index)=>item.id===2)//{id:1,name:"xm"}
  29. //findIndex()找出第一个符合条件的数组成员的位置,如果没找到返回-1
  30. let inex = arr.find((item,index)=>item.name==="xz")//1
  31. //includes()表示某个数组是否包含给定的值,返回布尔值
  32. [1,2,3].includes(2)//true
  33. [1,2,3].include(4)//false
  34. //startsWith()参数字符串是否在原字符串的头部,返回布尔
  35. let str = "hello world!"
  36. str.startsWith('hello')//true
  37. //endsWith()参数字符串是否在原字符串的尾部,返回布尔
  38. str.endsWith('!')//true
  39. //repeat() 将原字符串重复n次,返回一个新字符串
  40. x1'.repeat(3) //"x1x1x1"

symbol数据类型

表示独一无二的值

特点

  • 值是唯一的,用来解决命名冲突的问题
  • 不能与其他数据进行运算
  • 定义的对象属性不能使用for…in循环遍历。但可以使用Relect.ownkeys来获取对象的所有键名
  1. //创建symbol
  2. let s = Symbol()
  3. let s2 = Symbol("xiaoming")//传入的是一个描述字符串,与结果无关
  4. let s3 = Symbol("xiaoming")//与s2不一样
  5. s2 === s3 //false
  6. //Symbol.for创建
  7. let s4 = Symbol.for('xiaoming')
  8. let s5 = Symbol.for('xioaming')
  9. s4 === s5//true
  10. //不能运算
  11. //let result = s+100
  12. //let result = s>100
  13. //let result = s+s
  14. //向对象中添加方法up down
  15. let game={}
  16. //game.up=function(){}//会有风险,里面可能已经存在
  17. let methods={
  18. up:Symbol(),
  19. down:Symbol()
  20. }
  21. game[methods.up]=function(){
  22. console.log("up");
  23. }
  24. game[methods.down]=function(){
  25. console.log("down");
  26. }
  27. game[methods.up]()//调用
  28. let say = Symbol('say')
  29. let youxi = {
  30. name:"123",
  31. [say]:function(){
  32. console.log('say');
  33. },
  34. [Symbol('do')]:function(){
  35. console.log('do');
  36. },
  37. }
  38. youxi[say]()//调用
  39. /*--------内置Symbol值-------------*/
  40. //Symbol.hasInstance
  41. class Person{
  42. static [Symbol.hasInstance](param){
  43. console.log(param)//{a:1}
  44. console.log("我被用来检测类型了")
  45. return true//控制instanceof的结果
  46. }
  47. }
  48. let o={a:1}
  49. o instanceof Person
  50. //Symbol.isConcatSpreadable
  51. const arr=[1,2,3]
  52. const arr2=[4,5,6]
  53. console.log(arr.concat(arr2));//[1, 2, 3, 4, 5, 6]
  54. arr2[Symbol.isConcatSpreadable] = false
  55. console.log(arr.concat(arr2));//[1, 2, 3, Array(3)]

迭代器(Iterator)

ES6创造了一种新的遍历命令for…of循环,Iterator接口主要供for…of消费

是对象里的一个属性Symbol.iterator

原生具备iterator接口的数据(可以用for of遍历)

  • Array
  • Arguments
  • Set
  • Map
  • String
  • TypedArray
  • NodeList

工作原理

  1. 1. Symbol.iterator指向的函数创建一个指针对象,指向当前数据结构的起始位置
  2. 2. 第一次调用对象的next方法,指针自动指向数据结构的第一个成员
  3. 3. 接下来不断调用next方法,指针一直往后移动,直到指向最后一个成员
  4. 4. 每调用next方法会返回一个包含valuedone属性的对象

需要自定义遍历数据的时候,要想到迭代器

  1. const xiyou=['唐僧','孙悟空','猪八戒','沙僧']
  2. let iterator = xiyou[Symbol.iterator]()
  3. console.log(iterator.next());//{value: "唐僧", done: false}
  4. console.log(iterator.next());//{value: "孙悟空", done: false}
  5. console.log(iterator.next());//{value: "猪八戒", done: false}
  6. console.log(iterator.next());//{value: "沙僧", done: false}
  7. console.log(iterator.next());//{value: undefined, done: true}
  8. /*-----迭代器应用,for of遍历对象内数组-------*/
  9. const banji = {
  10. name: "一班",
  11. stus: [
  12. 'xiaoming',
  13. 'xiaowang',
  14. 'xiaozhang'
  15. ],
  16. [Symbol.iterator]() {
  17. //索引变量
  18. let index = 0
  19. let _this = this
  20. return {
  21. next() {
  22. if (index < _this.stus.length) {
  23. const result = {
  24. value: _this.stus[index],
  25. done: false
  26. }
  27. //下标自增
  28. index++
  29. return result
  30. } else {
  31. return { value: undefined, done: true }
  32. }
  33. }
  34. }
  35. }
  36. }
  37. for(s of banji){
  38. console.log(s);
  39. }

生成器

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

  1. //*的偏向无所谓
  2. function * gen(){
  3. //yield函数代码的分割符
  4. yield '一只没有耳朵'
  5. yield '一只没有尾巴'
  6. yield '真奇怪'
  7. }
  8. for(let v of gen()){
  9. console.log(v);
  10. }
  11. //一只没有耳朵
  12. // 一只没有尾巴
  13. // 真奇怪
  14. let iterator=gen()
  15. console.log(iterator.next());//{value: "一只没有耳朵", done: false}
  16. console.log(iterator.next());//{value: "一只没有尾巴", done: false}
  17. console.log(iterator.next());//{value: "真奇怪", done: false}
  18. console.log(iterator.next());//{value: undefined, done: true}
  19. //参数传递
  20. function* gen(arg) {
  21. console.log(arg);//AAA
  22. let one = yield 111
  23. console.log(one);//BBB
  24. yield 222
  25. yield 333
  26. }
  27. let iterator = gen('AAA')
  28. console.log(iterator.next());//{value: 111, done: false}
  29. //next()传入的实参将作为上一个yield语句的返回结果
  30. console.log(iterator.next('BBB'));//{value: 222, done: false}
  31. //实例
  32. //1
  33. //异步编程 文件操作 网络操作(ajax,request) 数据库操作
  34. //1s后控制台输出111 2s后输出222 3s后输出333
  35. function one(){
  36. setTimeout(()=>{
  37. console.log(111);
  38. console.log(iterator);
  39. iterator.next()
  40. },1000)
  41. }
  42. function two(){
  43. setTimeout(()=>{
  44. console.log(222);
  45. iterator.next()
  46. },2000)
  47. }
  48. function three(){
  49. setTimeout(()=>{
  50. console.log(333);
  51. iterator.next()
  52. },3000)
  53. }
  54. function* gen(){
  55. yield one()
  56. yield two()
  57. yield three()
  58. }
  59. let iterator = gen()
  60. iterator.next()
  61. //2
  62. //模拟获取 用户数据 订单数据 商品数据
  63. function getUsers(){
  64. setTimeout(()=>{
  65. let data = "用户数据"
  66. //调用next方法,并将数据传入
  67. iterator.next(data)
  68. },1000)
  69. }
  70. function getOrders(){
  71. setTimeout(()=>{
  72. let data = "订单数据"
  73. iterator.next(data)
  74. },1000)
  75. }
  76. function getGoods(){
  77. setTimeout(()=>{
  78. let data = "商品数据"
  79. iterator.next(data)
  80. },1000)
  81. }
  82. function* gen(){
  83. let users = yield getUsers()
  84. console.log(users);
  85. let orders = yield getOrders()
  86. console.log(orders);
  87. let goods = yield getGoods()
  88. console.log(goods);
  89. }
  90. let iterator = gen()
  91. iterator.next()

Promise

  1. const p = new Promise((resolve, reject) => {
  2. setTimeout(() => {
  3. resolve('用户数据')
  4. }, 1000)
  5. })
  6. const result = p.then(value => {
  7. console.log(value);//用户数据
  8. //return
  9. //1.非promise类型的属性
  10. // return '123'
  11. //2.是promise对象
  12. // return new Promise((resolve,reject)=>{
  13. // resolve('ok')
  14. // })
  15. //3.抛出错误
  16. //throw '出错啦!'
  17. })
  18. console.log(result);
  19. //return 非promise类型的属性
  20. // [[PromiseStatus]]: "resolved"
  21. // [[PromiseValue]]: "123"
  22. //return promise对象
  23. //[[PromiseStatus]]: "resolved"
  24. // [[PromiseValue]]: "ok"
  25. //return 抛出错误
  26. //[[PromiseStatus]]: "rejected"
  27. //[[PromiseValue]]: "出错啦!"
  28. //链式调用
  29. new Promise((resolve, reject) => {
  30. setTimeout(() => {
  31. resolve("111")
  32. }, 1000)
  33. }).then(str => {
  34. console.log(str);
  35. return new Promise((resolve, reject) => {
  36. setTimeout(() => {
  37. resolve("222")
  38. }, 2000)
  39. })
  40. }).then(str => {
  41. console.log(str);
  42. return new Promise((resolve, reject) => {
  43. setTimeout(() => {
  44. resolve("333")
  45. }, 3000)
  46. })
  47. }).then(str=>{
  48. console.log(str);
  49. })

Set数据结构

类似于数组,但是成员的值都是唯一的,没有重复的值

  1. const set = new Set([1,2,3,4])
  2. //数组去重
  3. let arr = [1,3,5,1,4,45,14,5]
  4. let newArr = [...new Set(arr)]
  5. console.log(newArr);//[1, 3, 5, 4, 45, 14]
  6. //实例方法
  7. //add(value) 添加某个值,返回Set结构本身
  8. //delete(value) 删除某个值,返回一个布尔值,表示删除成功
  9. //has(value) 返回一个布尔值,表示改制是否为Set成员
  10. //clear() 清除所有成员,无返回值
  11. //遍历 也有forEach方法
  12. const s = new Set([2,3,4,5,6,7])
  13. s.forEach(value=>{
  14. console.log(value);
  15. })

Map数据结构

类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当做键。Map也实现了iterator接口,所以可以使用拓展运算符和for…of进行遍历。

Map的属性和方法

​ size 返回Map元素个数

​ set 增加一个新的元素,返回当前Map

​ get 返回键名对象的键值

​ has 检测Map中是否包含某个元素,返回boolean值

​ clear 清空集合,返回undefined

上传的附件
eject