Es 6 汇总

ES 6

js 编写 - 运行

其它语言 编写 - 编译 - 运行

babal 编译工具

作用域

​ ES5 中 作用域

全局作用域
var a  = 5 
函数作用域
function fn(){
var b = 5
}

​ ES6 中 作用域 新增（块级作用域）

声明块级作用域只能用let

但是let 不仅声明块级作用域 还可以声明全局作用域和函数作用域

定义 let

{
块级作用域：
let v = ture
}

let 与 var 区别

let - 提供了块级,全局,函数

​ 不存在声明提前 （暂时性死区）

​ 不能重复声明单允许重新赋值

var - 函数 和全局

​ 声明提前

console.log(a)
var a = 10 
===========================
var a
console.log(a)
a = 10

var arr = []
for(let i =0 ；i<10;i++){
arr[i] = function(){
return i
}
}
console.log(arr[9]()) //9
console.log(arr[8]()) //8

解藕 赋值

变量解藕赋值：

一定模式从数组或对象中提取值，对变量进行赋值

//es6 
let [a,b,c] = [1,2,3]
console.log(a,b,c)
//es5 
var a =1 ,b =2 ;
console.log(a,b)

从写 默认值 必须是全等 值和类型都相同

let[a=ture] = []
console.log(a) //ture
let[m,n] = [{name:'张'} ,function(){return 10;}]

对象的解藕赋值：

变量名称必须与对象的属性名称 一 一 对应

let {a,b} = {
a :10
b： 10
}

字符串

变量与字符对应

let [a,b,c] = 'xyz'

数值和布尔值

先将数字值或布尔值转换成为对象类型

*函数的参数b

function f([a,b]){
console.log(a，b)
}
f([a,b])

小括号问题

lat [(a)] = [1] 
报错

用途

	1. 变化和交换变量的值

// 特别版
var a = 1 , b = 2;
[a,b] = [b,a]
console.log(a,b)

// 设置第三方变量

2. 函数的返回值多个

   一般 解决放到数组和对象中

   function fn (){
       return [1,2,3]
   }
   let [a,b,c] = fn()
   console.log(a,b,c)
   

3. 函数的参数定义

function fn ([a,b,c = null]){
    console.log(a,b,c)
}
fn([1,2])

4. 提取 json 数据

let json = {
    name:'ni',
    add:'五四',
    data:[2,3]
}
let{name,add,data} = json
console.log(name,add,data)

判断字符串是否包含

es5

indexof（返回第一个） lastIndexof (返回最后一个)

let str = 'wert'
console.log(str.indexof('w'))

es6

includes( )

startswith( )

searchString( )

区分大小写

重复字符串

repeat

将原有的字符串重复 n 次 返回新的字符串

不会改变原有字符串的内容

重复次数不能有负数

模板字符串

用 反引 （``）

let str1 = 'this is \n string'
console.log(str1)
// 换行
//模板换行
let str2 = `this is 
string`
console.log(str2)
//引入变量
var name = 'ni'
let str2 = `this is${name}string`
console.log(str2)

代表签的模板字符串

// 不是模板字符串用法，而是函数调用的一种特殊形式

var name = 'ni'
console.log `this is ${str}` //[ 'this is', 'string' ] ni

数组的扩展

扩展运算符(…)

必须与可迭代(遍历）的对象配合使用

表示运算符可以在原地展开

var a = [1,2,3,4]
console.log(...a)
// 1 2 3 4

用来代替 apply(this 指向 )

复制数组

属于深拷贝 拷贝的是值

var a = [1,2,3,4]
var b = [...a]
b[2] = 6
console.log(a,b)
// [ 1, 2, 3, 4 ] [ 1, 2, 6, 4 ]
var a = [1,2,3,4]
var [...b] = a
b[2] = 6
console.log(a,b)
//[ 1, 2, 3, 4 ] [ 1, 2, 6, 4 ]

合并数组

es5

concat

es6

a = [1,2,3]
b = [2,3,4]
([...a,...b])

提取数组一段组成新数组

es5:

slice

es6

扩展运算符只能放在后面

var a = [1,2,3,4]
var [v,...list] = [1,2,3,4]
console.log(v,list)
// 1 [ 2, 3, 4 ]

深浅复制

深复制 复制的是值

var a = [1,2,3,4]
var b  = []
for (let i = 0; i < a.length; i++) {
    b[i] = a[i]
    
}
b[2] = 8
console.log(b,a)
// [ 1, 2, 8, 4 ] 
//[ 1, 2, 3, 4 ]

浅复制 复制的是地址

var a = [1,2,3,4]
var b = a 
b[2] = 4 
console.log(b,a)
//[ 1, 2, 4, 4 ]
//[ 1, 2, 4, 4 ]

Array

array.from () 类数组（例如：nodelist htmlcollection）和可迭代(遍历)对象中创建一个新数组

// 构建类数组 有效length/可迭代
var obj = {
    0:'ni',
    1:'hao',
    length:4
}
for(var i =0; i<obj.length; i++){
    console.log(obj[i])
}
es6
console.log(Array.from(obj))
es5
[].slice.call(obj)

array.of 具有可变参数数量的新数组

如果不传递参数返回一个空数组

array.of(1,2,3)

copyWithun 拷贝元素 不能改变数组长度

find() 返回满足测试函数的第一个函数

findIndex() 返回满足条件的第一个索引值

fill 填充

includes （） 方法判断是否包含

设置函数形参的默认参数

function fn(a,b=0){
}
fn(1)

参数的声明位置问题

function fn(arg){
    var arg = 1000
    console.log(arg)
}
fn(10) // 1000
就近原则
============
    形参会声明一个独立作用域
function fn(arg){
    console.log(arg)
    var arg = 1000
}
fn(10) // 10
=========
变量提升
function fn(){
    console.log(arg) // undefined
    var arg = 1000 等同与 var arg // arg =1000
}
fn(10)

结果是100

rest 参数 获取多余的参数

用来接收多余的参数 返回的数组 // es5 用argument

=======
    方法一： es5
function fm(a,b){
 console.log(a,b,arguments[2])
}
fm(1,2,3)
========
    方法2 ：es6
function fm(a,b,...argus){
 console.log(a,b,...argus)
}
fm(1,2,3,4,6)

箭头函数

相比函数表达式 更加简短 以此法方式绑定this

一般是匿名函数

箭头函数不能作为构造函数 不能用new

箭头函数可以用作对象的方法属性

箭头函数不能使用arguments ==> 必须使用args 转化一下

定义函数的方式
======================
function fn(){}
===================
var a = function(){}
===========================
var a = new Function()
=============================
var f = () => 5
// 等同于 
var f = function(){
    return 5
}

es5/es6 this 指向

=====
    谁调用指向谁
function fn(){
    console.log(this)
}
let obj = {
    sayMe : fn
}
obj.sayMe() //{ sayMe: [Function: fn] }
=====
    箭头函数:
    谁定义指向谁
    es6
var n =() =>{
    console.log(this) //{}
}

尾调用

function fn(x){
    return x + 2
}
function fs(x){
    return fn(x) // 尾调用
    // return fn(x) + 6 // 不是尾调用 最后调用
}
console.log(fs(5))

对象

属性表示法

var a = 1
function fn(){
    console.log('nihao')
}
// =======
// es5 属性表示法
var obj = {
    a:a,
    fn:fn
}
// ======
// es6
var obj = {
    a,
    fn
}
console.log(obj.a)

is 方法

来对同值相等算法

+0 不等于 -0

assign 方法

将可枚举属性的值从一个或多个源对象复制到目标对象

深复制

super 关键字

指向当前对象的原型对象

对象的扩展运算符(…)

键值对集合

set :

值的集合可以按照插入的顺序迭代它的元素

元素是唯一的

应用

只能用 for of 来循环

用set 元素给数组去重

NaN 在set 中是相等的

undefined/null 也是一样的

空数组和空对象

​ 表示多个值

set 与 array 对比

数组用于判断是否存在indexof() 函数低下

set 根据值删除元素 数组必须使用下下标的splice() 方法

数组 indexof 无法找到 NaN 值

set 对象存储不重复的值

操作 set

set.add(val)

set.delete()

set.has() 包含

遍历 set

只能用 for of 来循环

set keys

set values

entries

forEach

weakset:

set 和 weakset 的区别

map：

存的是是键值对模式

map 和 object 对比

object 键是 string map 键是 任意类型

object 手动计算尺寸 map 尺寸容易获取 size

map 遍历遵循元素插入顺序

object 有原型 所以映射中有一些缺省的键

weakmap：

Promise 对象

主要解决 回调陷阱

Promise 是构造函数

异步编程

该对象 允许对延迟和异步操作流程进行控制

一个promise 的几种状态

​ pending 初始化 既不成功 也不失败

​ fulfilled 操作成功完成

​ rejected 操作失败

// promise 的初始化状态 - 既不成功,也不失败
let promise = new Promise(function(resolve,reject){
    setTimeout(function(){
        reject('测试成功')
    },200)
})
// 将Promise 状态改变 - 要么成功，要么失败
promise.then(function(value){
    console.log(value)
})

约定：

在 js 事件队列的当前运行完成之前,回调函数永远不会被调用

通过 .then 形式添加的回调函数 甚至都是在异步操作完成之后才被添加的函数

通过多次调用 .then 可以添加多个回调函数 它们会按照插入顺序并且独立运行

原型方法：

then( ) 方法

改变 promise 状态

catch( )

返回Promise 对象 并且处理拒绝的情况

finally

返回promise 对象 在执行 then() 和 catch () 后

对象方法：

all 方法

可迭代的对象

以所以promise 对象状态都改变时表示整合后的promise 对象成功或者失败

race 方法

成功或者失败 返回 Promise

表示整合后执行

应用

图片加载：

通过ajax 加载图片

异步函数 async

在普通函数前加async 关键字

async function as(){

}
异步函数

也返回一个Primise 对象

await 表达式

[return_value] = await expression

等待一个 Promise 对象 它只能在异步函数中使用

错误处理

迭代器 与 生成器

symbol 符号类型 是唯一的不可修改的

symbol.for() 方法

从symbol 从指定类型中查找指定的key

​ 如果有key 返回

​ 如果不存在这个key 的话创建

迭代器 ：

为各种不同的数据结果提供统一的访问机制

使的数据结构的成员能够按某种次序排列

用 for … of 循环语句用于遍历迭代器

数组 对象 类数组

iteratro 接口：

next 方法

该对象提供 next 方法用来返回序列中的下一项

该方法返回 包含 done 和 value 两个属性的对象

// 迭代器对象
function fn(arr){
    var index = 0
    return {
        next:function(){
            return index< arr.length?{
                done: false,
                value: arr[index]
        }:{
            done:true
        }
    }
    }
}
var arr = ['in']
var obj = fn(arr)
console.log(obj.next())