ES6拓展API

1.对象API拓展

  is

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

// 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对象

// 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

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

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

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

/**
 * 设置原型对象 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

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

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  返回得都是迭代器对象 

/**
 * 静态方法拓展 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创建类 

/**
 * 类看成构造函数得另一种写法 使用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(){

      }

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 = '静态方法'

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

相关推荐

  1. ES6拓展API

    2023-12-07 04:38:03       35 阅读
  2. ES6 Fetch API的基础使用

    2023-12-07 04:38:03       19 阅读
  3. ES6

    2023-12-07 04:38:03       23 阅读
  4. <span style='color:red;'>ES</span><span style='color:red;'>6</span>知识

    ES6知识

    2023-12-07 04:38:03      36 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-07 04:38:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-07 04:38:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-07 04:38:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-07 04:38:03       20 阅读

热门阅读

  1. Socket.D 网络应用协议,首版发布!

    2023-12-07 04:38:03       39 阅读
  2. 字符指针变量

    2023-12-07 04:38:03       38 阅读
  3. 数据结构-基数排序

    2023-12-07 04:38:03       43 阅读
  4. 利用 Python 进行数据分析实验(二)

    2023-12-07 04:38:03       43 阅读
  5. linux系统调用介绍

    2023-12-07 04:38:03       42 阅读
  6. Vue的methods中定时器的变量报错问题

    2023-12-07 04:38:03       43 阅读
  7. C++ day50 买卖股票最佳时机

    2023-12-07 04:38:03       41 阅读
  8. linux优化-平均负载率

    2023-12-07 04:38:03       39 阅读
  9. 数据结构 / 队列 / 循环队列 / 结构体定义和创建

    2023-12-07 04:38:03       46 阅读
  10. vue的模板语法

    2023-12-07 04:38:03       43 阅读
  11. 使用右值常量进行测试的boost::foreach模块

    2023-12-07 04:38:03       43 阅读
  12. Vue经典面试题源码级分析【一】

    2023-12-07 04:38:03       44 阅读
  13. C#学习相关系列之数组---常用方法使用(二)

    2023-12-07 04:38:03       42 阅读