JavaScript12—ES6基础简介

ES6

历史

ECMAScript 和 JavaScript 到底是什么关系？

• 96年网景公司提交ECMA标准1.0
• 因此，现有JS，后有ECMA标准

ES6 与 ECMAScript 2015 的关系

• 先提出了ECMAScript 6定为ECMA5.1的下一个标准
• 实际ES6出了很多版本，最后在2015年确定了ECMAScript 2015
• 因此ES6是泛指

严格模式

模块化开发，自动严格模式

“use strict”

-变量必须声明后再使用

- 函数的参数不能有同名属性，否则报错（str.length）

• writeable:true/false 是否可写

- 不能使用with语句

- 不能对只读属性赋值，否则报错

- 不能使用前缀 0 表示八进制数，否则报错

• 严格模式八进制不能使用

- 不能删除不可删除的属性，否则报错

• configurable:false

- 不能删除变量delete prop，会报错，只能删除属性delete global[prop]

- eval不会在它的外层作用域引入变量

- eval和arguments不能被重新赋值

- arguments不会自动反映函数参数的变化

- 不能使用arguments.callee

- 不能使用arguments.callee.caller

- 禁止this指向全局对象；顶层的this指向undefined，即不应该在顶层代码使用this。

- 不能使用fn.caller和fn.arguments获取函数调用的堆栈

- 增加了保留字（比如protected、static和interface）

let和const

let

• let定义的变量仅属于当前语句块（let定义的变量仅在当前{}作用域内使用）

• var和let可以混用

• 不存在变量提升

• 暂时性死区

  • var tmp = 123;
    if (true) {
    tmp = ‘abc’; // ReferenceError
    let tmp;
    }

const

• 常量声明

  • 常量不可以修改值
  • 常量定义时不能只定义，不赋值

• const obj 可以防止obj的引用地址发生改变

• 注意obj=null不能使用，意味着 会一直存在堆中，无法销毁

箭头函数

var f=v=>v

• 等同于 var f=function(v){
  return v
  ｝

如果函数中仅有一句话，并且这句话是return返回，可以省略{}和return

箭头函数中如果仅有一个参数，可以省略小括号

如果没有参数，或者有一个以上的参数，不能省略小括号

箭头函数 主要可以作为 更改this指向

• 当函数换为箭头函数时，this将会被换为指向当前函数外this的指向
• 可通过e.currentTarget 知道点击的是谁

拓：对象中，函数的各种方式

• var obj={
  a:function(){
  // ES5的方法
  console.log(“a”)
  },
  b(){
  // ES6的方法
  console.log(“b”);
  },
  c:()=>{
  // ES6箭头函数
  console.log(“c”);
  }
  }

解构赋值

数组解构赋值

• let a=1,b=2,c=3
• let [a,b,c]=[1,2,3]
• 数组解析最重要的是按位解析

对象解析

• let {a,b}={a:5,b:6}
• let obj = {
  p: [
  ‘Hello’,
  { y: ‘World’ }
  ]
  };

let { p: [x, { y }] } = obj;

• 对象是按照属性名解析
• 当有重复名称时，另起一个名字

作用

• 函数返回多个解析值
• 可以让参数赋初值
• 提取 JSON 数据

注：

• 参数解构赋值后，可以跳位，不需要按照顺序写
• 将加载进来的对象中方法解构出来形成全局的函数
• 解构赋值尽量不要使用小括号

字符串扩展方法

字符的 Unicode 表示法

• “\u0061”

includes()

• 判断字符在字符串中是否存在

startsWith()

• 表示参数字符串是否在原字符串的头部
• 两个参数时 第二个表示位置，判断第几位是不是某个开始

endsWith()

• 表示参数字符串是否在原字符串的尾部
• 两个参数时参照startsWith()

repeat()

• 表示将原字符串重复几次，返回新的字符串

padStart()

• “F”.padStat(2,“0”)

  • 如果不够指定长度，在前面补足长度，例如这里F长度是1，需要补足2位，就在前面加了0

padEnd()

• “F”.padEnd(2,“0”)

模板字符串

• let n=3;
  console.log(“a”+n+“b”)
  这种写法很不方便，我们使用下面的写法
• let n=3;
  console.log(a${n}b)
  注意这里的字符串使用``将里面引住

标签模板

• alert123
  // 等同于
  alert(123)

Symbol

唯一，创建的永远没有相同的

普通变量的Symbol

• let a=Symbol(“a”);
  let b=Symbol(“a”);
  console.log(a===b);//false

该类型主要用于常量定义

• const EVENT_ID=Symbol()

  • 这个过程叫消除魔术字符串

对象键值对中键可以是字符型也可以是symbol型

Symbol的键名不会被覆盖

Set和Map

Set

• 特点

  • 无重复列表类型
  • 没有下标，不是按照下标存储
  • 有序，不可控（不能使用下标循环遍历）
  • 插入和删除速度非常快
  • 没有重复元素（任何元素存在唯一性），遍历查找速度也非常快，但是略低于键值对类型

• 新建set

  • let a=new Set()

• add(value)

  • 添加元素

• delete(value)

  • 删除元素

• has(value)

  • 判断是否是成员

• clear()

  • 清除所有数据

• size()

  • 长度，没有length

• 数组去重

  • let arr=[1,2,3,1,2,3,1,2,3];
    let sets=new Set(arr);
    arr=Array.from(sets);
    console.log(arr);

Map

• 特点

  • 另类的hashMap 键值对的数据类型
  • map是一种有长度的键值对数据结构
  • 具备数组的长度紧密型，又具备对象的键值对方法
  • 它的获取，删除，查询，遍历速度很快

• set(key,value)

  • 添加元素

• delete(“name”)

  • 删除键名

• get(key)

  • 获取元素

• values()

  • 获取所有值的列表

• keys()

  • 获取所有键的列表

• size

  • 获取map的成员数

• has(value)

  • 判断是否是成员

• clear()

  • 清除所有数据

• 遍历

  • 遍历对象

    • for(let obj of maps){
      console.log(obj);
      }

  • 遍历属性名

    • for(let str of a2.keys()){
      console.log(str);
      }

  • 遍历值

    • for(let value of a2.values()){
      console.log(value);
      }

  • 返回所有成员的遍历器

    • for(let item of a2.entries()){
      console.log(item);
      }

  • forEach

    • 遍历map

      • a2.forEach((v,k,list)=>{console.log(v,k,list)})

弱类型

• WeakSet WeakMap
• 弱引用，就是如果其中的强引用的类型地址设置为null，弱引用的关系会自动解除
• 弱引用的类型不可以遍历
• WeakMap中存储的key必须是对象，存的是对象类型
• 弱引用关系 一个对象删除另一个对象会被释放

Generators生成器函数

写法

• function *abc(a,b){
  yield a;
  yield b;
  a++;
  yield a;
  b+=10;
  yield b;
  return a+b;
  }
  var a=abc(3,5);
  var obj=a.next();//{value:3,done:false};

value就是yield返回的结果

done就是是否函数允许完成

生成器函数可以用while和for let of循环

XMind: ZEN - Trial Version