es6基础(1)


2019-3-21 es6 javascript

es6 的类型

数据类型

symbol 类型

// symbol 数据类型 是基本数据类型是又一个 symbol 函数产生的
const s1 = Symbol()
const s2 = Symbol()
//sumbol  每次产生的值都是唯一的  即使每次传入的数据是一样的   产生的值看起来也是一样的  但是是不一样的  在===的时候为false
console.log(s1 === s2) //false
const s3 = Symbol('hahaha')
const s4 = Symbol('hahaha')
console.log(s3 === s4) //false
//使用的地方  作为  属性私有化  数据保护

class Persion {
  constructor(name, gender) {
    this.name = name
    this.gender = gender
  }
}
const p1 = new Persion('momo', 'man')
console.log(p1)
//这个人的有些属性是可以变的  有些属性是不可以变的   如性别  一直保存到down  也就是收保护的私有属性   类似于java  中的private
class Persion {
  constructor(name, gender) {
    const _gender = Symbol('gender')
    this.name = name
    this[_gender] = gender
  }
}
const p2 = new Persion('nana', 'man')
console.log(p2)
//但是要注意 这个私有属性不可比较 他和任何值都不同
//Persion {name: "nana", Symbol(gender): "man"}
//name: "nana"
//Symbol(gender): "man"
//这个属性外部是不可以调用的 ,只能在内部调用和使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

es6 的 变量声明 var let const

es6 的作用域,全局作用域 --- 非函数 函数作用域 函数包含的 快级作用域 一个大括号

var 是不支持块作用域支持变量与解析 ,而 let 和 const 是支持快级作用域的,现在用 let 和 const 替代 var

let const 不润许重复声明 let 声明的变量后面可以被更改值 const 声明的是常量是不可以被再次更改的。 const 定义的是不可以被更改内存地址 但是可以被改动 例如数组可以被 push 如果不想对象的值被改变 可以使用 freeze 冻结 const arr1 = Object.freeze([1,2,3]) 这个时候就不可以被扩展了 冻结对象只能冻结一层 也就是说如果数组中还有数组那么内部数组是可以被修改的

变量的解构赋值,可以用于数组和对象

let arr =[1,2,3]
let[a,b,c]=arr //数组里面的值会意义对应的赋值到abc  上
#数据的解构是一一对应的
#对象的解构赋值
let{bar , foo} = {foo:"aaa",bar:"hahaha"}
# 如果变量名是一样的 这个时候的顺序是无关的  否则必须按照原来的顺序
变量的而别名
let{bar :b,foo:f}={foo:"aaa",bar:"hahaha"}
多重解构
let{foo:[a,b]}={foo:[10,20]}
let {left:l,top:t,right:r,bottom:b}=document.getElementByID('haha')
1
2
3
4
5
6
7
8
9
10
11

扩展运算符 就是 ... 就是把数组或者对象转换成参数序列

const arr = [123, 2, 1, 4, 2, 5]
const arr1 = [111, 23, 42, 1, ...arr] //合并
console.log(Math.max(...[arr1])) //省去遍历
//对象的序列化
let obj1 = { a: 1, n: 2 }
let obj2 = { c: 1, d: 2 }
let obj3 = { ...obj1, ...obj2 }
1
2
3
4
5
6
7

字符串的扩展

  • uincode

    
    console.log('u4e20')//这个可以输出
    #通过{} 把超长的unicode  变成一个  比如 表情包
    console.log('u{1f602}')
    
    1
    2
    3
    4
  • 模板字符串

    #保持字符内容可以写空格 和换行  还可以引入变量表达式解析用${}
    #在两个反引号中间
    let in = 1
    `asdasfsadfa${in}
    asd
    `
    可以写 函数调用 变量名  变量  数据  不支持语句
    
    1
    2
    3
    4
    5
    6
    7

数值扩展

以前的浏览器只支持 8 进制和 10 进制的 现在浏览器支持的更多了 又 2 8 10 16

对象扩展

对象的简写表示法当对象的 key 对象的 value 的变量相同的时候 可以只写一个 动态对象的 key

const x='kakaka'
var obje1 = {
[x]:1
}
1
2
3
4

这个时候 x 是一个变量 只要他是一个字符串就可以做为 KEY 也就是动态 KEY

迭代

for in 以原始插入的顺序迭代对象的可枚举属性 迭代出来的是 KEY,可以迭代对象

for await of 迭代异步操作

for of 根绝迭代对象的迭代器具体实现迭代对象的数据 迭代出来的是每一项的数据,只能迭代可迭代不能迭代对象类型 迭代器生成方法

obj1[Symbol.iterator] = function() {
  let keys = Object.keys(obj1)
  let len = keys.length
  let n = 0
  return {
    next: function() {
      if (n < len) {
        return {
          value: keys[n++], //{k:keys[n],v:obj1[n++]}
          done: false //false 会继续迭代
        }
      } else {
        return {
          done: true
        }
      }
    }
  }
}
for (const { k, v } of obj1) {
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

函数拓展

函数默认值的处理可以通过参数值传递过程直接定义

function fn2(x=0,y=0){
    1 这样就可以了 如果不传递就是02 如果形参中不是所有的参数都有默认值,那么有默认值的通常写在形参的后面
}
1
2
3
4

函数的剩余参数

function arrayPush(arr,...newData){
    第一个参数赋值给了arr
    从第二个参数开始后面所有的参数都赋值给了newData
    而newData 是一个数组,要放在最后面,所有后面的参数都会被他接受到
}
1
2
3
4
5

箭头函数(参数列表)=>{函数体}

```javascript
let fn1 =()=>{console.log('111')} #箭头函数的命名和赋值
如果这个函数只有一个参数 可不用写小括号,如果只有一行代码且俄日返回值  可以省略大括号
let fn2 = ctx=>{console.log(ctx.request.params.name)}

let fn3 =ctx=>ctx.request.params.name
如果返回值是一个对象 用大括号定义的 这个时候大括号不能省略

```

函数中的 this 指向 问题

一般函数的 this 指向是在函数的执行器绑定的 确定的 也就是谁调用的 this 指向谁,自己调用的指向 window,如果绑定在事件上就指向触发该事件的对象。

而箭头函数的 this 对象在函数的创建期间就已经绑定好了,也就是说在函数的声明处就已经执行名,箭头函数的 this 指向了创见该函数的作用域。也就是说箭头函数所在的作用的 this 指向谁 那么箭头函数的额作用域就指向谁。箭头函数的指向不会改变。

要在箭头函数的声明处!!

一般事件函数不会绑定箭头函数。

箭头函数不能作为构造函数,不能作为 new,没有 arguments,不能作为生成器函数。