es6

ES6   ->  ECMA  标准


js


ES7  ES8.....


ES5.x


ECMA-262       ->   ES1.0
--------------------------------------------
ES2015


ES6  ->   2015年6月    ES6.0


每年6月份，发布一个版本


2016年6月    ES6.1 ES7 ES2016
2017年6月    ES6.2(async await) ES8 ES2017


ESnext
---------------------------------------------
ESnext '下一代 js'语言
----------------------------------------------
任何人都可以向 标准委员会 (TC39), 要求更改语言标准


提案变成标准，经历5个阶段
Stage 0 展示阶段
Stage 1 征求意见阶段
Stage 2 草案阶段
Stage 3 候选阶段
Stage 4 定案阶段(标准)


babel
----------------------------------------------
https://github.com/tc39/ecma262


----------------------------------------------


react， vue, angularJs， angular


chrome,    对新的语法支持，速度还挺猛
----------------------------------------------
ES6环境:
webpack3.x


Traceur
----------------------------------------------
关于定义(声明)变量:
之前:     var a=12;
let a=12


作用域:
全局
函数作用域


let 相当于之前的 var
const 常量， 定义好了不能改变


let注意:
1. 没有预解析，不存在变量提升
在代码块内，只要let定义变量，在之前使用，都是报错
先定义完，在使用
2.  同一个作用域里， 不能重复定义变量   let a=1  let a=12;
3.  for循环，for循环里面是父级作用域，里面又一个
            

块级作用域:
{
//块级作用域
}

{{{{let a = 12}}}}


if(){xx}
for(){}
while(){}




const: 特性和let一样
const定义变量不能修改


const定义完变量，必须有值，不能后赋值，不能修改

                

                    //这种情况可以被修改  赋值为对象
      const arr=['a','b','c'];
      arr.push('d');
      console.log(arr)//abcd
 
      //确实不想改
      const arr=Object.freeze(['a','b','c'])//冻结

Object.freeze(对象)


const config={
host:
username:
password:
version:
}



{
//TODO
}


IIFE
(function(){
//TODO
})()


建议:
以后 就用 let  不要在使用var

const http = require('http');
======================================
解构赋值:
*  非常有用，特别在做数据交互  ajax


let [a,b,c] =[12,5, 6];


注意: 左右两边，结构格式要保持一致


 let {name,age,job}={name:'wj',age:'12',job:'sj'}  //== let name='wj'
  console.log(name,age,job) //wj 12 sj
 
  let {age,name,job}={name:'wj',age:'12',job:'sj'} //顺序颠倒也可以对上

  console.log(name,age,job) //wj 12 sj

         let {name:n,age:a,job:j}={name:'wj',age:'12',job:'sj'}  //== let n='wj'
   console.log(n,a,j) //wj 12 sj

解构时候可以给默认值：
  let [a,b, c="默认值"] = ['aaa','bbb'];

console.log(a,b,c) // aaa bbb '默认值'

  //交换值
  let a=12;
  let b=5;
  [a,b]=[b,a]
  console.log(a,b)  // 5 12

import {a,b,c} from './mod'  //解值  export={a:1,b:2,c:3}

  function show({a,b="默认"}){
  console.log(a,b) //1,默认
  }
 
  show({a:1})

======================================
字符串模板:
``  字符串模板：
优点: 可以随意换行
`  ${变量名字}`
字符串连接，要死人的。

let name ='Strive';
        let age = 18;
        let str = `这个人叫${name}, 年龄是 ${age}岁`;
        
关于字符串一些东西:
字符串查找:
str.indexOf(要找的东西)   返回索引(位置) ，没找到返回-1
str.includes(要找的东西)   返回值  true/false

判断浏览器:  includes

字符串是否以谁开头:
str.startsWith(检测东西)
                var str='https://www.baidu.com';
console.log(str.startsWith('https')) //true

检测地址
字符串是否以谁结尾:
str.endsWith(检测东西)
                 //true
重复字符串:
str.repeat(次数);
                var str='wj'
        console.log(str.repeat(3)) //wjwjwj

填充字符串:
str.padStart(整个字符串长度, 填充东西)   往前填充
str.padEnd(整个字符串长度, 填充东西)    往后填充
                var str='wj'

console.log(str.padStart(4,'aa') ) //aawj

============================================
函数变化:
1. 函数默认参数
function show({x=0,y=0}={}){
    console.log(x,y);
}

show()；

        

2. 函数参数默认已经定义了，不能再使用let，const声明
function show(a=18){  >>>>//相当于 let a=18
    let a = 101;  //错误
    console.log(a);
}
show()
                

扩展运算符、Rest运算符:
...

展开数组


... :

[1,2,3,4]  -> ... [1,2,3,4]  ->  1,2,3,4,5   

     //  apple banana orange

...:
1,2,3,4,5  -> ...1,2,3,4,5  ->  [1,2,3,4,5]
function show(...a){
console.log(a)//[1, 2, 3, 4, 5]
}
          show(1,2,3,4,5);

剩余参数: 必须放到最后

            

            

箭头函数:
=>
        
let show = () => 1;
        
        
              

() => return东西


() =>{
语句
return
}
          //[ 1,2,3,4,5]

注意:
1. this问题, 定义函数所在的对象，不在是运行时所在的对象
2. 箭头函数里面没有arguments, 用  ‘...’
3. 箭头函数不能当构造函数

        

数组:
ES5里面新增一些东西


循环:
1. for
for(let i=0; i<arr.length; i++)
2. while


arr.forEach()  //  代替普通for
arr.forEach(function(val, index, arr){
    console.log(val, index, arr);
});  //第二个this指向
arr.map()  //  非常有用，做数据交互  "映射"
正常情况下，需要配合return，返回是一个新的数组
若是没有return，相当于forEach    返回值【undefined,undefined,undefined】
                

注意：平时只要用map，一定是要有return

重新整理数据结构:
[{title:'aaa'}]   ->  [{t:'aaaa'}]

                 

                 

arr.filter():  过滤，过滤一些不合格“元素”， 如果回调函数返回true，就留下来

                

arr.some(): 类似查找,  数组里面某一个元素符合条件，返回true

                

arr.every(): 数组里面所有的元素都要符合条件，才返回true
         

其实他们可以接收两个参数:
arr.forEach/map...(循环回调函数, this指向谁);
------------------------------------------------------------
arr.reduce()   //从左往右
求数组的和、阶乘

                

arr.reduceRight()  //从右往左
------------------------------------------------------------

 
ES2017新增一个运算符:
幂
Math.pow(2,3) //2的3次方
2 ** 3   //2的3次方
======================================================
for....of....：
arr.keys() 数组下标
arr.entries() 数组某一项

        

======================================================
扩展运算符:

         
let arr2 = Array.from(arr);  //也是复制一份


Array.from:
作用: 把类数组(获取一组元素、arguments...) 对象转成数组

        

        

        
个人观点： 具备 length这个东西，就靠谱
        

Array.of():  把一组值，转成数组
let arr = Array.of('apple','banana','orange');
console.log(arr);


arr.find():  查找，找出第一个符合条件的数组成员，如果没有找到，返回undefined
// 101

arr.findIndex(): 找的是位置， 没找到返回-1
//-1

arr.fill() 填充
arr.fill(填充的东西, 开始位置, 结束位置);
//['','默认值，默认值，默认值，，，，，，，]

在ES2016里面新增:

arr.indexOf()

arr.includes()

        //true

str.includes()
============================================
对象:
json

对象简介语法(相当有用):

let json ={
a:1,
b:2,
showA:function(){
return this.a;
}
showB:function(){
return this.b;
}
}


let json ={
a,
b,
showA(){  //个人建议: 一定注意，不要用箭头函数
},
showB(){
}
}


new Vuex.Store({
state,
mutation,
types,
actions
});


new Vue({
router,
App,
vuex
})


Object.is(): 用来比较两个值是否相等


Object.is('a','a');


比较两个东西相等:
==
===
Object.is(NaN, NaN); //true

Object.is(+0, -0);//false

Object.assign():   用来合并对象
let 新的对象 = Object.assign(目标对象, source1, srouce2....)

        

         

         

function ajax(options){  //用户传
let defaults={
type:'get',
header:
data:{}
....
};


let json = Object.assign({}, defaults, options);  //后面覆盖前面的
.....
}

用途:
1. 复制一个对象
2. 合并参数

               

ES2017引入:

Object.keys()

         //a b c

        let {keys, values, entries} = Object;

        

        Object.values();

// 1 2 3

Object.entries();

        

对象身上:   计划在ES2018引入
...


let json = {a:3, b:4};
        let json2 = {...json};


==================================================
Promise:    承诺，许诺


作用:  解决异步回调问题


传统方式，大部分用回调函数，事件


ajax(url,{  //获取token
ajax(url,()=>{  //获取用户信息
ajax(url, ()=>{
//获取用户相关新闻
})
})
})


语法:
let promise = new Promise(function(resolve, reject){
    //resolve,   成功调用
    //reject     失败调用
});


promise.then(res=>{


}, err=>{

})




promise.catch(err=>{})
        

本人用法:
new Promise().then(res=>{


}).catch(err=>{

})
                
         //aaa
Promise.resolve('aa') :  将现有的东西，转成一个promise对象， resolve状态，成功状态
等价于:
new Promise(resolve =>{
    resolve('aaa')
});
Promise.reject('aaa'):   将现有的东西，转成一个promise对象，reject状态，失败状态
等价于:
new Promise((resolve, reject) =>{
    reject('aaa')
});


√ Promise.all([p1, p2, p3]):  把promise打包，扔到一个数组里面，打包完还是一个promise对象

必须确保>>>>>所有的promise对象，都是resolve状态，都是成功状态

        

        

        

Promise.race([p1, p2, p3]): 只要有一个成功，就返回
         //aaa

用户登录  ->  用户信息

        

=========================================
模块化:
js不支持模块化
ruby   require
python  import

在ES6之前，社区制定一套模块规范:
Commonjs 主要服务端  nodeJs    require('http')
AMD requireJs, curlJs
CMD seaJs


ES6出来，同意服务端和客户端模块规范:
import {xx} ddd

Math.pow()
Math.abs()


import {pow, abs} from 'Math' 我自己瞎想




模块化：
注意： 需要放到服务器环境
a). 如何定义模块？
export  东西
export const a =12;
export{
a as aaa,
b as banana
}
b). 如何使用?
import
import './modules/1.js'; 
import {a as a, banana, c} from './modules/2.js'
import * as modTwo from './modules/2.js';
使用模块:
<script type="module"></script>




import:  特点
a). import 可以是相对路径，也可以是绝对路径

import 'https://code.jquery.com/jquery-3.3.1.js';                       

b). import模块只会导入一次，无论你引入多少次
c). import './modules/1.js';  如果这么用，相当于引入文件
d). 有提升效果，import会自动提升到顶部，首先执行
e). 导出去模块内容，如果里面有定时器更改，外面也会改动，不想Common规范缓存


  * import()  类似node里面require， 可以动态引入, 默认import语法不能写到if之类里面
返回值，是个promise对象
                
import('./modules/1.js').then(res=>{
console.log(res.a+res.b);
});

优点:
1. 按需加载
2. 可以写if中
3. 路径也可以动态

Promise.all([])

                

=============================================
ES2017加  async  await:
=============================================

'use strict' 以后默认es6就是严格模式

-------------------------------------------------------------------------------------------------------------

程序中的类

下面这种写法也可以   首字母 小写亦可以    只是遵守规范

 

undefined

解决办法：

react 里面

------------------------------------------------------

es6 新增数据 类型 symbol   

Symbol(aaa)

  syl 为空   出不来

私有 唯一

-----------------------------------------------------------------------------------------

generator 函数   生成器  目的：解决异步问题   深度嵌套  类promise

 done是否全部已完成

但是return 后面没遍历出来

generator 配合 axios

------------------------------------------------------------------------------------------------------------------------------

--------------------generator  方式

-----------------------------------------------------------------------------------------

async

   //fn返回值    promise

---------------------------------------------------------------------------------------------------

set 里面不能有重复的

set里面添加

set 删除

是否有

// ture

长度 属性

 // 1

清楚所有

for of

    

key

values

entries

建议 循环

链式

数组去重

//set 数据 乘以2

//过滤奇数

set注意的地方：：

set 可以放 json   {}  {}

new weakSet();   weakSet 没什么卵用 没有size  clear()   还是用 Set

-----------------------------------------------------------------------------------

 map   

 

设置json属性

获取

删除

有没有

清楚所有

编辑 map  for of

自己去试

// map forEach 可以

weakMap   key只能是对象   大致了解一下即可   语法真是多  没什么卵用 bitch

--------------------------------------------------------------------------------------------------------

Number.isNaN()

Number.isFinite()  //是不是数字

Number.isInteger()  //是不是整数   parseInt parseFloat  也是挂到 Number

------------------------------------------------------------------------------------------------------------------------------    

--------------------------------------------------------------------------------------------

  截断，去除小数点后面的

          

--------------------------------------------------------------------------------------------------------------------------------

ES9  ES2018

--------------------------------------------------------------------------------------------------------------------------