Es6记录

1、定义方式：

let：块级；const：定义常量

用const定义数组时可以push

冻结：（const定义时静止push）

const arr = Object.freeze(['a','b'])

2、解构赋值

let [a,b] = ["1","2"] //a=1;b=2
let {a,b} = {a:1,b:2} //a=1;b=2
交换值：
[a,b] = [b,a]

function test({a,b}){}
test({a:1,b:2})

3、默认参数

function test(a=1,b=2){}
//调用时，不传a和b，则实用默认值

4、字符串值（两撇``）

let test = "你好"
console.log(`这个世界${test}`)//这个世界你好

5、字符串查找

str.includes("test")//查找str字符串中是否含有test

6、扩展运算符（...）

...1,2,3 = [1,2,3]
...[1,2] = 1,2
例子
function addNum(...num){
    //num会是一个数组[1,2,3]
}
addNum(1,2,3)


let obj1 = {name:xxx}
let objs = {...obj1,age:18}//{name:xxx,age:18}
... 用于对象时只有第一层是深度拷贝，其他层级都是浅拷贝
... obj1  这样的写法错误，一定要{}包含着才行

7、数组复制

let arr = [1,2]
let arr2 = [...arr]
或  arr2 = Array.from(arr)

8、箭头函数

function test(a,b){
    return a+b
}
test(a,b)=>{
    return a+b
}

箭头函数this指向声明时的this，而不是声明时的this
即父作用域中的this （即父函数的作用域，注意对象{ }没有作用域，函数的{ }才算）           

var obj ={
 name:"xxx",
 say:function(){
    setTimeout(()=>{
       console.log(this)  //指向obj  如果非箭头函数指向window
    },1000)
 }
}
obj.say()

箭头函数的this指向定义的对象本身，setTimeout调用则this不再指向window

9、数组循环

let arr = [1,2,3]
arr.forEach((val,index,arr)={})//相当于for循环

arr.map((val,index,arr)=>{  //映射；结合return使用，修改每一行的值（返回新数组）
    retutn val=2
})

arr.filter((val,index,arr)=>{ //过滤，返回符合条件的新数组
    return val>2     //[3]
})

arr.find((val,index,arr)=>{ //返回第一个符合条件的行，第二个和之后的不返回
    return val>2
})

arr.some((val,index,arr)=>{ //查找是否有符合条件的，有则返回true
    return val==2 
})

arr.every((val,index,arr)=>{ //每一行都满足则返回true
    return val>4
})

arr.reduce((pre,cur)=>{ 
//将数组里的每一行相加，返回新数值,pre是上一次返回的值，默认是0，cur是当前值
    return pre+cur
},0)


let obj = {a:1,b:2}
for(let key of keys(obj)){
    console.log(key) //输出每一行的key
}
for(let value of values(obj)){
    console.log(value)//输出每一行的值
}
for(let [key,value] of entres(obj)){
    console.log(value)//输出每一行的key和值
}

10、类数组（一组元素，arguments、有length属性）

Array.from(1,2,3) //[1,2,3]
Array.from("msg") // [m,s,g]

Array.of("1,"2")//[1,2]

11、新增api

Object.is(NaN,NaN) //true
NaN==NaN //false

Object.assign([],arr1,arr2) //返回合并的数组
Object.assign({},obj1,obj2) //返回很并的对象，重复则覆盖

12、Promise

什么是promise
就是将异步操作以同步操作的流程来表达，避免出现层层嵌套的函数（地狱回调）

let p = new Promise(function(resolve,reject){
        if(true){
            resolve("成功啦")
        }else{
            reject("出错")
        }

})

p.then(res=>{
    console.log(res) //成功啦
    return new Promise(function(reolve,reject){
        if(true){
            resolve("成功啦2")
        }
    })
})
.then(res=>{

})
.catch(err=>{
    console.log(err) //出错
})

promise实现原理
1、promise有三种状态，pending(进行中)、fulfilled(已成功)、rejected(已失败)

原型：
class myPromise {
	const ststus = 'padding'
	const result = undefined
	const reason = undefined
	construstor(excution){
		const reselove = (result)=>{
			if(this.status === 'padding'){
				this.ststus = 'fulfilled'
				this.result = res
			}
		}
		const reject = (reason)=>{
			if(this.status === 'padding'){
				this.ststus = 'rejected'
				this.reason = reason
			}
		}
		excution(reselove,reject)
	}
	then(onreselove,onreject){
		if(this.status=='fulfilled'){
			onreselove(this.result)
		}
		if(this.status=='rejected'){
			onreject(this.reason)
		}
	}
}

应用：
conset pro = new myPromise((reselove,reject)=>{
	 reselove('这是啥啊')
})
pro.then((res)=>{},err=>{}

13、promise.all或promise.race

Promise.all([p1,p2]).then(res=>{})//p1,p2全部成功才返回
Promise.all：
成功返回成功数组,一但失败就不会继续往下走

promise.race
哪个返回快就返回哪个结果，不管成功或失败

14、新增数据类型symbol

let sym = Symbol("aaa")
//不能new，返回唯一值；常用作key；是一个基本类型，for...of循环不出来

15、generator函数

function * test(){
    yield "你好" //或函数
    yield "世界" //或函数
}
test().next() //你好
test().next() //世界

16、async（解决异步）

async function test(){
    try{
        await axios.get(xxx,{})
        await axios.get(xxx2,{})    
    }catch(e){
    
    }
}

test() //先执行第一个wait再执行第二个await

async返回的是一个promise对象，所以test().then(()=>{})

18、模块化

export {test}
//immport {test} '../xxx.js'
export default test
//import test from '../xxx.js'

19、类

之前写法：
function Person(name){
    this.name = name //实例属性，挂载在原型链上__proto__
}
//定义实例方法
Person.prototype.showname = function(){ 
    return `我叫${this.name}`
}
let p = new Person("小明")
console.log(p.shoename()) //小明
//定义静态方法,挂载在构造函数上
Person.test = function(){}
//定义静态属性
Person.age = 18


es6写法:

class Person{
    consructor(name){
        this.name = name
    }
    shownaem(){
        return `我叫${this.name}`
    }
    static showAge(){ //静态方法，通过类名.访问

    }

}
let p = new Person("小红")
console.log(p.showname())

20、继承

多个类都有相同的操作方法时，可以把这些方法放到父类，然后继承拿到并调用

之前写法

function Person(name){
    this.name = name
}
Person.prototype.showname = function(){
    return `我叫${this.name}`
}
function Son(name,skill){
    Person.call(this,name)  //继承属性
}
Son.prototype = new Person() //继承方法
let son = new Son("小明")
console.log(son.showname) // 小明

es6写法

class Person{
    consructor(){
        this.name = name
    }
    showname(){
        return `我叫${this.name}`
    }
}
class Son extends Person{
    constrctor(name,skill){
        super(name) //继承属性
        this.skill= skill //私有
    }
    showkill(){

    } 

}
let son = new Son("小明","打球")
console.log(son.showname())//小明

21、新增数据结构Set、Map

Set:类似于数组，里面没有重复值，没有key
用处-：使用add()时候，如果Set里面已经存在则不会添加这个重复的元素

let setArry = new Set([1,2,2])  
setArry.add("3"); //{1,2,3}
setArry.delete("2")   
.has("2")  //true
.clear()
let newarr = [...serArry ] //[1,2]

可用for of 或forEach循环


Map:类似于json，是对json功能增强，key可以是任意类型
let map = new Map()
map.set(key,value) // 设置一个值
map.get(key) //获取一个值

可用for of 或forEach循环

22、数值的变化

二进制：let a = 0b010101
八进制：let a = 0o666
十六进制：ket a = #ccc

23、安全整数

范围：-(2**53-1)~(2**53-1)  //2的53次方

Number.idSafeInteger(456546) //判断是否为安全整数
Number.isFinite("2") //判断是否为数字
Number.isInteget(2) // 是否为整数

24、命名捕获

25、标签函数

function test(arg){
    return arg[0]
}
test `你好`

26、proxy 代理

例：
let obj ={name:"小明"}
let newobj = new Proxy(obj,{
    get(target,property){       //target是obj，property是使用的属性
        return target[property]
    }

})
console.log(newobj.name)

27:Reflect  反射

28、判断对象中是否含有某属性

(test in obj)  // 返回true则存在

29、拿取对象key值，返回数组

let obj = {"name":"ll","age":18}
console.log(Object.keys(obj)) //["name","age"]

30、使用扩展运算符组合两个对象

const name = { id: '1234', name: 'Charuka'};
const university = { id: '1234', university: 'Harvard'};
const PersonalDetails = Object.assign({}, name, university);
//或 const PersonalDetails = { ...name, ...university };
console.log(PersonalDetails); // { id: '1234', name: 'Charuka', university: 'Harvard' }

31、从对象获取键和值的列表

const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
//获取键
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]
//获取值
console.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]

32、检查属性

const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
for (var item in vehicle) {  
    if (vehicle.hasOwnProperty(item)) { 
        console.log(item);                 
    };  
};
// brand
// year
// type

33、克隆对象

const initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};
const secondaryVehicle = Object.assign({}, initialVehicle);
//或： var secondaryVehicle = JSON.parse(JSON.stringify(initialVehicle));
console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};

34、从对象中选择特定数据

const selectObj = (obj, items) => { 
  return items.reduce((result, item) => {
    result[item] = obj[item]; 
    return result;
  }, {});
};
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
const selected = selectObj(vehicle, ['brand', 'type']);
console.log(selected); // { brand: 'BWM', type: 'suv' }

35、从对象中删除键

const remove = (object, removeList = []) => {
  const result = { ...object };
  removeList.forEach((item) => {
    delete result[item];
  });
  return result;
}

const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}

const itemRemoved = remove(vehicle, ['year']);
console.log(itemRemoved); // Result { brand: 'BWM', type: 'suv' }

36、将对象数据拉入数组

const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
console.log(Object.entries(vehicle)); 
// [ [ 'brand', 'BWM' ], [ 'year', 2022 ], [ 'type', 'suv' ] ]

37、用Object.entries循环访问 JavaScript 对象

const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
Object.entries(vehicle).forEach(
    ([key, value]) => console.log(key, value)
);
// brand BWM
// year 2022
// type suv

法二：
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
for (const [key, value] of Object.entries(vehicle)) {
    console.log(key, value);
}
// brand BWM
// year 2022
// type suv

38、有条件地向对象添加属性

const type = { type: 'suv' };
const vehicle = {
  brand: 'BMW',
  year: 2022,
  ...(!type ? {} : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }