ES6常用方法

1.object新增加常用方法

1、Object.is()

传入两个要比较的值，判断是否相同，全等的话返回true，不全等返回false。

三等号既要判断值的类型是否相等，还要判断引用地址是否相等。所以Object.is()也是，在判断对象和数组这些引用类型的数据是不相等的。
object.is只能判断基本类型等同于===运算符但有两处不同,
不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

NaN==NaN;                //false
Number.isNaN(NaN);       //treu
Object.is(NaN,NaN);      //true 
Object.is(+0,-0)   //false

2.object.create(function())
参数为原型创建一个原型的实例
3.object.keys(obj);
输出obj的所有属性键值

4.Object.assign(target,source1,source2,…)

把source1和source2等等对象的属性拷贝到target对象里

但只能实现浅拷贝基本类型是深拷贝

第一级属性深拷贝，以后级别属性浅拷贝

let s ={name: {asd: '123'}}
let d = Object.assign({}, s)
d.name.asd = '123456789'
console.log(d, s)
运行结果 
{name:{asd: "123456789"}}
{name:{asd: "123456789"}}

let s ={name: {asd: '123'}}
let d = Object.assign({}, s)
d.name= '123456789'
console.log(d, s)
运行结果 
{name:'123456789'}
{name:{asd: "123456789"}}

5.Object.keys()、Object.values()、Object.entries()

let obj = {name:"winne",age:22};
let objKeys = Object.keys(obj);
let objValues = Object.values(obj);
let objItem = Object.entries(obj);

console.log(objKeys);   //["name","age"]
console.log(objValues); //["winne",22]
console.log(objItem);   //[["name","winne"],["age",22]]

2.es6 array数组新增方法

1.Array.find(arr,function)
2.Array.findIndex(arr,function)
在某个数组按照给定的筛选函数中查找一个值，查找不到返回undefined

var test=[1,2,3,4,5];
var result1=test.find(function(item)=>{
    return item>3;
});
var result2=test.findIndex(function(item)=>{
    return item>3;
});
console.log(result1);//打印出4
console.log(result2);//打印出3

• result1 打印结果为4 只返回符合条件的第一个元素

• result2 打印结果为3 只返回符合条件的第一个元素的索引0开始

2.Array.includes()

语法arr1.includes(‘11’)查询11再没arr1数组中 返回一个boolean类型

和array1.indexof()的不同是该函数判断数组如果存在查询数据返回索引

var arr1=['zhangsan','lisi','wangwu']
var result1=arr1.includes('张三');
var result2=arr.includes('zhangsan')
console.log(result1);
console.log(result2);
//

result1输出false因为arr1里面没有包含“张三”

result2输出true 因为arr1里面包含“zhangsan”

3.Array.of()

通过,号分割参数转为数组

Array.of(1,2,3,4)

输出[1,2,3,4]

4.Array.from

Array.from()

将一个伪数组转为真实数组
类似于es6中 Array.prototype.slice.call(伪数组);

返回真数组

//p节点的textContent
<p>1<p>
<p>2<p>
<p>3<p>
//
let p=document.querySelectorAll('p');

let pArr=Array.from(p);

pArr.forEach(function(item){ console.log(item.textContent);

//这是js的一个获取dom节点的一个方法
});

输出为1,2,3

映射：将数组里的数字都遍历，*2再输出

console.log(Array.from([1,2,3],function(item){ return item*2; }))

var handler={
    toString(v){
        return v+'';
    }
}
console.log(Array.from([1,2,3],function(item){ 
    return this.toString(item);
}))

Array.from第三个参数是第二个参数函数的this的指向

常见伪数组

1.(document查询获得的dom数组是一个伪数组)

2.(window.argument是一个函数实参伪数组)

target={
    0:'aaa',
    1:'bbb',
    2:'ccc',
    length:3
}
有索引有length属性的为伪数组
可以用Array.from(target)转
或者用Array.prototype.slice.call(target)

5.Array.float(array)

数组扁平化 可以将多维度数组转为一维数组

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

这种方式是拉平一层数组 拉平多层数组需要传递参数

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数

Array.prototype.flatMap
每次遍历都要返回一个数组 最后拉平输出 不会改变原来的数组

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

3.ES6新增加proxy

简介：es6中新增proxy类似于defineProperty();

var proxy = new Proxy(target, handler);

参数1 : target是要代理的对象

参数2 ： handler是所代理对象里的拦截处理器
一般有

get()

set()

// 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。
handler.getPrototypeOf()

// 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。
handler.setPrototypeOf()

 
// 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。
handler.isExtensible()

 
// 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。
handler.preventExtensions()

// 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
handler.getOwnPropertyDescriptor()

 
// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
andler.defineProperty()

 
// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。
handler.has()

// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。
handler.get()

 
// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。
handler.set()

// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。
handler.deleteProperty()

// 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。
handler.ownKeys()

// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。
handler.apply()

 
// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。
handler.construct()

var target = {
   name: 'poetries'
 };
 var logHandler = {
   get: function(target, key) {
     console.log(`${key} 被读取`);
     return target[key];
   },
   set: function(target, key, value) {
     console.log(`${key} 被设置为 ${value}`);
     target[key] = value;
   }
 }
 var targetWithLog = new Proxy(target, logHandler);
 
 targetWithLog.name; // 控制台输出：name 被读取
 targetWithLog.name = 'others'; // 控制台输出：name 被设置为 others
 
 console.log(target.name); // 控制台输出: others

get 和 set Hander参数
get(target,key) target为所要代理的那个对象在demo中 就是new proxy(target)传入的target这个对象,
key为访问属性的名字
按照demo中访问了name那么key为“name”
set(target,key,value) target和key为同上 value是设置的那个值也就是others
targetWithLog.name = ‘others’;

proxy深度代理方式

proxy深度代理需要递归循环
let obj = {
  name: 'crap',
  age:{
    n: 1
  }
}
let arr = [1, 2, 3]

function update() {
  console.log('update');
}
let handler = {
  get(target, key) {
    if(typeof target[key] === 'object'){
      return new Proxy(target[key], handler);
    }
    return Reflect.get(target, key);
  },
  set(target, key, val) {
    if (key === 'length') return true;
    update();
    return Reflect.set(target, key, val);
  }
}
// let proxy = new Proxy(arr, handler)

// proxy.push(111); //definProperty不能监控后来增加的属性 vm.$set()
// console.log(arr);

let proxy = new Proxy(obj, handler);
proxy.age.n = 100;
console.log(obj);

** proxy函数还可以监听数组的添加和删除

4.ES6中的Reflect使用

简介：使用Reflect可以通过函数的调用的方式来解决变量赋值
,属性值获取,实例创建，属性是否在没在对象里的判断

1.Reflect.defineProperty使用方式

原来的写法

try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

es6使用Reflect的写法

if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

2.Reflect.has用法

原来的写法

var object={name:'xiang'};
if('name' in object){
    //存在name属性
}

Relect.has用法

var object={name:'xiang'};
if(Reflect.has(object,'xiang')){

}

3.Reflect.get(target,property,receiver)用法

参数描述:

第一个参数是要操作访问问的那个对象

第二个参数是要操作访问的那个对象的属性

第三个参数如果访问的那个属性如果有set拦截器get拦截器之类函数,函数中this的指向就是第三个参数

原来的写法，对象访问属性

var testObj={
    name:'zhangsan'
}
var name=testObject.name;

Reflect中的写法

• 例子1

var testObj={
    name:'zhangsan'
    
}
Reflect.get(testObj,'name');

• 例子2（利用Reflect.get改变get set拦截器中的this指向）

var testObject={

    get fullname(){
         return this.name+this.lastName;
    }
}
var handler={
    name:'zhangsan',
    lastName:'chen
    
}
Reflect.get(testObject,'fullname',handler);

4.Reflect.construct()的使用：

construct和new的使用是一样的

var Fn = function(arg) {
    this.args = [arg]
};
console.log( new Fn(1), Reflect.construct(Fn,[1]) ); // 输出是一样的

var d = Reflect.construct(Date, [1776, 6, 4]);
d instanceof Date; // true
d.getFullYear(); // 1776
//所以Reflect.consturct和new 构

5.Reflect.getPrototypeOf(obj)

用于读取对象的proto属性，对应Object.getPrototypeOf(obj)

6.Reflect.setPrototypeof(obj)

给Obj设置prototype指向 对应Object.setPrototypeOf(obj, newProto)方法

7）Reflect.apply(func, thisArg, args)

绑定this指向

类似于obj.apply(this,arguments);

用法
Reflect.apply(obj,this,argument);

4.Promise用法

一句话解决了回调嵌套和执行顺序问题

function loadImg(url) {
            let img = new Image()
            img.src = url
            return new Promise((resolve, reject) => {
                img.onload = () => {
                    console.log(url)
                    resolve(参数)
                }
                img.onerror = (e) => {
                    reject(e)
                }
            })
        }


        loadImg(url1).then((参数) => {
            return loadImg(url2)
        }).then(() => {
            return loadImg(url3)
        })

Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})