ES6知识点

一、let 和 const

1.var的缺点：可以重复声明，无法限制修改，没有块级作用域  所以es6新增了 let 和 const
 let：不能重复声明，变量可以修改，块级作用域  块级作用域可以直接解决闭包的问题        
 const： 不能重复声明，常量不可以修改，块级作用域

二、箭头函数：

1.如果只有一个参数，()可以去掉 如果只有一个return，可以去掉{} 原始函数：function(){}
2. 箭头函数：()=>{} 箭头函数的this问题:
3. 箭头函数没有自己this，它的this是继承而来默认指向在定义它时所处的对象
4. 例如： let arr = [99,10,2,4,89,34,11] 让这个数组从小到大排序

arr.sort(function(n1,n2){
            return n1 - n2; })
        
        箭头函数： arr.sort((n1,n2)=>n1-n2);

三、函数的参数：

1.参数的扩展/展开，收集剩余的参数 function show(a,b,...args){    ... 三个点后面的名字随便取 当实参多于形参的时候多于的全部放到那里  ...只能放在最后
    alert(a + b); } show(1,2,3,4,5,6)   

2.展开数组： let arr1 = [1,2,3] let arr2 = [4,5,6] let arr = [...arr1,...arr2]; alert(arr)   //输出为123456；

四、新增基本数据类型：symbol、bigInt（ES10新增）

Symbol 指的是独一无二的值。每个通过 Symbol() 生成的值都是唯一的。

let symbol1 = Symbol();
let symbol2 = Symbol();
console.log(symbol1 === symbol2);
// false
console.log(typeof symbol1);
// symbol
console.log(symbol1.constructor === Symbol)
// true

如何使用 Symbol 创建两个可以相等的变量呢？

let symbol1 = Symbol.for('symbol');
let symbol2 = Symbol.for('symbol');
console.log(symbol1 === symbol2) //true
//Symbol.for(key) 方法会根据给定的键 key(字符串)，来从运行时的 symbol 注册表中找到对应的 symbol，如果找到了，则返回它，否则，新建一个与该键关联的 symbol，并放入全局 symbol 注册表中。
//和 Symbol() 不同的是，用 Symbol.for() 方法创建的的 symbol 会被放入一个全局 symbol 注册表中。Symbol.for() 并不是每次都会创建一个新的 symbol，它会首先检查给定的 key 是否已经在注册表中了。假如是，则会直接返回上次存储的那个。否则，它会再新建一个。

BigInt 是一种数字类型的数据，它可以表示任意精度格式的整数。
JavaScript 所有数字都保存成 64 位浮点数，这给数值的表示带来了两大限制。一是数值的精度只能到 53 个二进制位（相当于 16 个十进制位），大于这个范围的整数，JavaScript 是无法精确表示的，这使得 JavaScript 不适合进行科学和金融方面的精确计算。二是大于或等于2的1024次方的数值，JavaScript 无法表示，会返回Infinity。

// 超过 53 个二进制位的数值，无法保持精度
Math.pow(2, 53) === Math.pow(2, 53) + 1 // true

// 超过 2 的 1024 次方的数值，无法表示
Math.pow(2, 1024) // Infinity

为了与 Number 类型进行区分，BigInt 类型的数据必须添加后缀n。

12 	// 普通Number
12n // BigInt

// BigInt 的运算
1n + 2n // 3n
// 类型
typeof 12n // 'bigint'

//另外，当你创建一个 BigInt 的时候，参数必须为整数，否则或报错
BigInt(1.2) 
// Uncaught RangeError: The number 1.2 cannot be converted to a BigInt because it is not an integer

由于 BigInt 与 Number 完全属于两种类型,并且不会进行隐式转换，所以没有办法进行混合运算。想要运算的话，必须将两种数据类型转换为同一张后，方可进行计算：

BigInt(number) // 将一个 Number 转换为 BigInt
Number(bigint) // 将一个 BigInt 转换为 Number

五、解构赋值：

1.左右结构必须一样
2.右边必须是个东西
3.声明和赋值不能分开(必须在一句话里完成) 

  let [a,b,c] = [1,2,3];
   console.log(a,b,c)   // 1 2 3 
   //json格式也行 
   let {a,b,c} = {a:12,b:23,c:44}
   // 复杂一点的：
    let[{a,b},[n1,n2,n3],num,str] = [{4,2},[23,45,67],88,'asd'] 
    console.log(a,b,n1,n2,n3,num,str);

六、新的数据结构Set、Map

1.Set
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用
Set的操作方法：
add(value)：添加某个值，返回Set结构本身。
delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
has(value)：返回一个布尔值，表示该值是否为Set的成员。
clear()：清除所有成员，没有返回值
可以用Set的特性进行数组去重
将set对象转换为数组的方法：[…set对象]或者Array.from(set对象)

2.Map
传统的对象只能使用字符串当键，而Map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串。Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适
实例属性操作方法：
size：获取成员的数量
set：获取成员的key和value
get：获取成员属性值
has：判断成员是否存在
delete：删除成员
clear：清空所有

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
])
map.set(4, 'four')
map.get(2) // two
map.keys()  // [Map Iterator] { 1, 2, 3, 4 }
map.values() //[Map Iterator] { 'one', 'two', 'three','four'}

七、数组方法：

map（）
例如：

 let arr = [23,33,45];
  let result = arr.map(function(item){    
  //实际上arr上的每一个数都会在这个函数里面走一遍, 这个函数必须有一个参数，参数名随便取
  
      return item*2;     //这样数组里的每一个数都乘以2了 
  }) 
  alert(result);  //用箭头函数可以简写成： var result=arr.map(item=>item*2)
    let score = [99,88,45,59,60]; 
    let result =score.map(lx=>lx>=60?'及格':'不及格')  //让数组里的每一个数如果大于等于60输出及格，否则输出不及格lx为参数，随便取 
    alert(result);

2.reduce() 汇总 （一堆进去输出几个）

 let arr = [23,455,56,67] ;
 arr.reduce(function(a,b,c){  
    //a是中间件结果，上一次算好的结果赋值给第一个参数，第二次算是又让这个数去加第二个参数， 
   //第二个参数是上一次没有计算的item，
   //第三个参数是index第几次执行
    return a + b   //输出为所有值的总和 })

3.filter() 过滤 （留一部分，去掉一部分）

 var result = let arr = [33,45,67,79,63];
  arr.filter(item=>{    
  //过滤出能让3整除的数
    if(item%3==0){
        return true;
    }else{
        return false;
    }
     }); 
    alert(result);

4.forEach() 循环(迭代)

 let arr =  [23,455,56,67];
  arr.forEach((item,index)=>{
        alert(index+':'+item)
     })
    

八、字符串 startsWith():返回的是布尔值 以什么开头

endsWith() 返回的数布尔值 以什么结尾

字符串模板： 字符串连接 ：`` ${东西} 可以把东西塞到字符串里面 可以折行

九、面向对象新的用法

1.class关键字，构造器和类分开了

2.class里面直接加方法

 老版的面向对象写法： function Obj(name,password){
        this.name = name;
        this.password = password; };
        Obj.prototype.showName = function(){
        alert(this.name); };
        Obj.prototype.showPass = function(){
        alert(this.password);
       }

ES6新增的写法

例：

  class Obj {  //类
        constructor(name,password){    //构造函数，构造器
            this.name = name;
            this.password = password;
        }
    
        showName(){
            alert(this.name);
        }
    
        showPass(){
            alert(this.password);
        }
     }
    
    var u1 = new Obj('AX','12345'); 
    u1.showName();
    u1.password();

继承:

之前的写法： function vipObj(name,password,level){
        Obj.call(this,name,password);    //继承父籍的属性
        this.level =level; };
        vipObj.prototype = new obj(); 
        vipObj.prototype.constructor = vipObj;
        vipObj.prototype.showLevel =function(){
        alert(level);
         }

继承： ES6新增的写法 extends：扩展    super： 超类（父类）  例如：
 class.vipObj.extends.Obj{
       //继承obj的
    constructor(name,password,level){
        super(name,password);   //继承父籍的属性
        this.level = level;
    }
     showLevel(){
        alert(this.level)

         }  
    } 
    var v1 = new vipObj('LX','1234',3);
    v1.showLevel();

十、JSON的标准写法： 只能用双引号， 所有名字都必须用双引号包起来

json.stringify();
json.parse();
JSON的简写：
1.名字和值一样的时候，只写一个就好
2.json里面的函数省略 :function 例如 show(){}

十一、promise

同步： 代码简单，卡页面，性能高
异步：代码复杂，性能高
要想实现异步的性能又想同步的简单，进而出现了promise
原理： 简单来说就是一个对象,用来传递异步操作的消息,是解决异步编程的一种方案,promise原理说起来并不难,他的内部有三个状态,分别是pending , fulfilled 和 rejected 。pending是对象创建后的初始状态，当对象resolve（成功）时变为fulfilled， 当对象reject（失败）时变为rejected。且只能从pengding变为fulfilled或rejected ， 而不能逆向或从fulfilled变为rejected 、从rejected变为fulfilled
promise----消除异步操作，用同步一样的方式，来书写异步代码、解决回调地狱
应用------------

  let p = new Promise(function(resolve,reject){
        //异步代码
        //resolve-----成功了
        //reject----失败了
    
        $.ajax({
            url:'index.php',
            datatype:'json',
            success(data){
                resolve(data);   //成功了调用函数
            },
            error(err){
                reject(err);  //失败了调用函数
            }
        })
        p.then(function(){
            alert('成功')
        },function(){
            alert('失败')
        })         //then()里面有两个函数，第一个对应的是resolve成功的，第二个对应的是reject失败的
    
    })

如果有多个p1,p2,p3

Promise.all([p1,p2,p3]).then(function(data){  
     //只有全部都传输成功了才会执行
    //data 里面的就是p1,p2,p3对应的三个值 
    let [res1,res2,res3] = arr;     //解构赋值         
    alert('都成功了')

},function(){
    alert('至少有一个失败了') })

jquery中的promise用法----- 完美的写法

Promise.all([$.ajax(),$.ajax(),$.ajax()]).then(result=>{},err=>{})
Promise.all([
    $.ajax({url:robot.json,datatype:'json'}),
    $.ajax({url:arr.json,datatype:'json'}) ]).then(function(result){
    alert('成功了');
    let [arr1,arr2]=result;
    console.log(arr1);
    console.log(arr2); },function(){
    alert('失败了'); })

Promise的另一个用法：

promise.race() ------哪个服务器资源先加载到就用哪个，用法和all一样

十二、generator：

与普通函数的区别，普通函数不能停，一路到底，而generator函数能停，想让他哪停就哪停
写法：

  function *show(){
        alert('a');
        yield;           //相当于切割符，把show函数切分成了两个函数，一个执行alert('a'),一个alert('b')
        alert('b'); 
     };
        let obj = show();
        obj.next(); //执行a
        obj.next();  //执行a,b

十三、generator中的yield：

yield可以传参 :
在next()里面传参，第一个next传参无意义，必须的第二个next后传参
可以let c = yield； yield有一个中间值：

 //把它比喻成 洗菜-->切菜-->炒菜
 function *炒菜(菜市场买回来的){
        洗菜-->洗好的菜;
    
        let 干净的菜=yield 洗好的菜;
    
        干净的菜-->切->丝;
    
        let 切好的菜=yield 丝;
    
        切好的菜->炒->熟的菜
    
        return 熟的菜;
    
    
    } 
    yield可以返回值