ES6拓展API - 技术栈

1.对象API拓展

is

判断两个值是否相等 is(+0,-0);false is(NaN,NaN) true (NaN === NaN) false

javascript 复制代码

// 1.is 判断两个值是否相等
console.log(Object.is(1,1));
console.log(Object.is(+0,-0));//返回false
console.log(+0 === -0);
console.log(Object.is(NaN,NaN));
console.log(NaN === NaN);

assign

1.两个参数对象得复制

Object.assign(o,obj);将第二个参数得内容复制给第一个参数返回第一个参数

针对于基本数据类型实现的是深拷贝针对于引用数据类型实现得是浅拷贝

obj = {

name:"",

age:12,

clazz:{

no:'1001'

}

2.三个参数对象合并

Object.assign(o,obj,obj1);将后面两个对象合并到o对象中返回o对象

javascript 复制代码

// 2.assign方法 两个参数 代表的是复制对象 三个参数代表的是合并对象
/**
 * 两个参数 assign(目标对象,要复制的对象) 返回值返回也是目标对象
 * 
 */
let o = {};
let obj = {
  name:'zhangsan',
  age:12,
  //对基本数据类型实现深拷贝  (对引用数据类型实现浅拷贝--半深拷贝)
  clazz:{
    no:'2023'
  }
}
let res = Object.assign(o,obj);//将obj对象复制给o对象 同时返回o对象
console.log(res,res===o,res===obj);
o.clazz.no = '2024';
console.log(o,obj);


/**
 * 三个参数：合并对象 (o,obj1,obj2) 将后面对象进行合并合并到第一个对象中 返回第一个对象
 * 
 */
let o = {name:'zhangsan'};
let obj = {age:12};
let obj1 = {gender:'male'};
let res = Object.assign(o,obj,obj1);//返回第一个参数
console.log(res,res===o);

getPropertypeOf

(目标对象) 获取原型对象

javascript 复制代码

let obj = {
  name:"zhangsan",
  age:12
}
// 获取原型对象 getPrototypeOf 
console.log(obj.__proto__);
console.log(obj.constructor.prototype);
console.log(Object.getPrototypeOf(obj));

setPropertypeOf

(obj,新原型对象) 设置原型对象

javascript 复制代码

/**
 * 设置原型对象 setPropertypeOf
 */
let obj = {};
let obj1 = {name:'zhangsan',age:12};
Object.setPrototypeOf(obj,obj1);//将obj原型对象设置为obj1
console.log(obj.__proto__)
console.log(obj.constructor.prototype);//注意 获取不到新原型对象
console.log(Object.getPrototypeOf(obj));

keys

获取对象属性名组成数组

values

获取对象属性值组成数组

entries

获取对象属性名和属性值组成数组

fromEntries

将属性名和属性值组成数组转为对象

javascript 复制代码

let obj = {
  name:'zhangsan',
  age:12,
  gender:'male'
}
console.log(Object.keys(obj));//获取obj属性名组成数组
console.log(Object.values(obj));//获取obj属性值组成数组
console.log(Object.entries(obj));//获取obj属性名和属性值组成二维数组
console.log(Object.fromEntries(Object.entries(obj)));//将对象属性名和属性值组成二维数组转为对象

2.数组API拓展

静态方法：

Array.from 将类数组转为数组

Array.of 创建数组实例

实例方法：

find 查找数组元素参数:回调函数(item,index,arr) 返回值：返回符合条件得第一个数组元素或者undefined

findIndex 查找数组元素参数:回调函数(item,index,arr) 返回值：返回符合条件得第一个数组元素索引或者-1

includes 检测数组元素是否存在数组中存在返回true 不存在返回false NaN 返回true

flat 展开数组层级扁平化数组参数：n 或者 Infinity

fill 填充数组修改原数组

flatMap flat和map结合

keys 返回得都是迭代器对象

values 返回得都是迭代器对象

entries 返回得都是迭代器对象

javascript 复制代码

/**
 * 静态方法拓展 from of
 * 实例方法拓展 find findIndex flat keys values entries ....
 */
// 1.将类数组对象转为数组对象 from  
function foo(){
  console.log(arguments,'类数组对象');
  console.log(Array.from(arguments));
  console.log([...arguments]);
  console.log(Array.prototype.slice.call(arguments,0))
}
foo(1,2,3,4)

// 2.of 创建数组实例
let arr1 = new Array(10);
let arr = Array.of(10);
console.log(arr,arr1,arr instanceof Array);


// 3.find 返回第一个满足条件得数组元素或者undefined  参数:回调函数
let arr = [1,2,3,4,5];
let res = arr.find(function(item,index,arr){
  return item>3
});
console.log(res);

// 4.findIndex 返回第一个满足条件得数组元素索引或者-1  参数：回调函数
let arr = [1,2,3,4,5];
let res = arr.findIndex((item,index,arr)=>{
  console.log(item,index,arr);
  return item>5
});
console.log(res,arr);

// includes 检测数组元素是否存在数组中 存在返回true 不存在返回false
let arr = [1,2,3,4,('hello'/2)];
console.log(arr.includes('2'));//针对于NaN优化
console.log(arr.includes(('hello'/2)));
console.log(arr.indexOf(('hello'/2)));

// fill 填充数组  修改原数组
let arr = [1,2,3,4];
let res = arr.fill(8);
console.log(arr,res);

/**
 * keys values entries  返回得是实现了迭代器接口对象  iterator 
 */
let arr = [1,2,3,4,5];
console.log(arr.keys());
console.log(arr.values());
console.log(arr.entries());

// flat方法 扁平化数组 数组层级展开 
let arr = [1,2,[3,4,5,[6,7,8,[9,10,[11]]]]];
console.log(arr.flat(1));
console.log(arr.flat(Infinity));

// flatMap flat和map方法结合 需求 将数组展开 每个数组元素*2
let arr = [1,2,[3,4]];
let res = arr.flatMap((item,index,arr)=>{
  // console.log(item,index,arr)
  if(typeof item=='number'){
    return item * 2
  }else{
    return item.map((it)=>{return it*2})
  }
})
console.log(res);

3.类

构造函数另一种写法创建对象模板通过class创建类

javascript 复制代码

/**
 * 类看成构造函数得另一种写法 使用class关键字创建类 创建对象模板
 */
class Person{
  // 类体默认会提供一个空的构造器 
  constructor(name,age,gender){
    /**
     * new关键字作用:
     * 1.创建Person类实例对象
     * 2.将this指向Person类实例对象
     * 3.执行函数体
     * 4.返回Person类得实例对象
     */
    // 实例私有属性和私有方法
    this.name = name;
    this.age = age;
    this.gender =gender;
    this.say = function(){
      console.log(this,'查看this');
    }
  }
  // 写在类体中的方法就是实例公共方法 ---类似于写在原型对象中 Person.prototype
  sayName(){
    console.log(this.name)
  }
}
let p1 = new Person('zhangsan',12,'male');
let p2 = new Person();
console.log(p1);
p1.sayName();
console.log(p1.sayName === p2.sayName,'写在类体中 实例公共方法');
console.log(p1.say === p2.say,'实例私有方法--写在构造器中');
console.log(p1.constructor);

实例公共方法相当于写在Person.prototype

sayName(){

}

javascript 复制代码

class Person{
  // 使用static关键字声明类得方法和属性  静态方法和静态属性 只能由类本身访问
  static PersonAttr = 'Person静态属性';
  static PersonMethod = function(p){
    console.log('Person静态方法');
    return p instanceof Person
  }
  // 默认提供一个空的构造器 constructor(){}
}
let p1 = new Person();
// console.log(p1.PersonAttr);
// console.log(p1.PersonMethod(p1));
console.log(Person.PersonAttr,'静态属性');
console.log(Person.PersonMethod(p1),'静态方法');

写在类体中属性也是私有属性

test = 'hello';

firends = [];

静态属性只能由类本身去调用属性 Person.xxx = '' Person.method = function(){}

static attr = '静态属性'

static method = '静态方法'

javascript 复制代码

class Person {
  constructor(name, age, gender) {
    // 写在构造器中属性和方法是实例私有属性和方法
    this.name = name;
    this.age = age;
    this.gender = gender;
    // this.test = xxx
    // this.friends=xxx
  }
  // 写在类体中得方法是实例公共方法 相当于写在Person原型对象中
  sayName() {
    console.log(this.name)
  }
  // 写在类体中得属性是是实例私有属性
  test = 'hello';
  friends = [];
  static attr = 'Person类静态属性';
  static method = function(){
    console.log('Person类静态方法');
  }
}
let p1 = new Person('terry',18,'male');
let p2 = new Person('larry',20,'female');
p1.sayName();//terry
p2.sayName();//larry
console.log(p1.sayName === p2.sayName);//true
p1.friends.push('tom');
console.log(p1.friends === p2.friends);//false
p1.test='我被修改了';
console.log(p1.test === p2.test);//false