JS — 数组API备忘录

464 阅读7分钟

一. 数组

创建数组的方式

  • 字面量方式 const arr = [1, 2, 3, 4, 5]
  • 使用Array构造方法 const arr = new Array() ; 若传入一个参数代表该数组的长度 ; 若传入一个非数值的参数1个以上参数则代表该数组的元素
  • Array.of方法创建数组 const arr = Array.of(1) 该方法传入的值就代表数组的元素

1. 数组的插入

  • arr.push(item1,item2,...,itemN) ; 向数组的末尾添加一个或多个元素,并返回新的长度
  • arr.unshift(item1,item2,...,itemN) ; 向数组的开头添加一个或更多元素,并返回新的长度
  • arr.splice(索引,要删除的项目数量,item1,.....,itemN) ; item为要增加的元素,返回被删除的元素
  • 展开运算符; const arr2 = [...arr1,'name']

2. 数组的删除

  • arr.pop() ; 删除最后一个元素,并返回删除的元素
  • arr.shift() ; 删除数组的第一个元素,并返回删除的元素
  • arr.splice(索引,要删除的项目数量,item1,.....,itemN) ; item为要增加的元素,返回被删除的元素
  • 可通过展开运算符和arrayObject.slice(start,end)配合使用来指定进行删除元素 const arr1= [...arr2.slice(1,2)]

3. 数组的查找

  • arr.includes(要查找的元素,开始查询的索引) ; 索引为可选参数,默认为0,若包含返回值为true,否则为false; includes使用===运算符来进行值比较,仅有一个例外:NaN被认为与自身相等
  • arr.indexOf(要查找的元素,开始查询的索引) ; 返回数组中第一个指定的元素索引位置,如果在数组中没找到指定元素则返回 -1
  • arr.lastIndexOf(要查找的元素,开始查询的索引) ; 返回数组中最后一个指定的元素索引位置
  • arr.find(function(currentValue, index, arr){ return 操作 }) ; 方法返回通过测试(函数内判断)的数组的第一个元素的值
  • array.findIndex(function(currentValue, index, arr){ return 操作 }) ; 返回符合测试条件的第一个数组元素索引,如果没有符合条件的则返回 -1

4. 数组的排序

  • array.sort(fun(a,b){return a-b}) 对数组中的元素进行排序,这种方法会改变原始数组
  • array.reverse() 返回值为颠倒顺序后的数组 const arr1 = arr2.reverse()

5. 数组的筛选

  • array.filter(function(currentValue,index,arr){ return 操作 }) ; 返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
  • array.every(function(currentValue,index,arr){ return 操作 }); 布尔值。如果所有元素都通过检测返回 true,否则返回 false。
  • array.some(function(currentValue,index,arr){ return 操作 }) ; 布尔值。如果数组中有任意一个元素满足条件返回 true,否则返回 false
  • array.map(function(currentValue,index,arr)) ; 返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

6. 累加器

  • array.reduce(function(初始值或者计算结束后的返回值, currentValue, currentIndex, arr), 传递给函数的初始值) ; 返回计算结果
  • array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue) ; 从数组的末尾向前将数组中的数组项做累加,返回计算结果

7. 将伪数组转换为真数组

  • 常见的伪数组有哪些 : arguments、通过document.getElements..获取到的内容
  • 伪数组有什么特点 : 具有length属性,也是一个一个的元素组成的,但是构造器不是Array,不能使用数组的方法
  • Array.prototype.slice.call(arr)
  • Array.from(arr)

8. 数组的填充

  • arr.fill(value, start, end) ;将一个固定值替换数组的元素, 返回数组

9. 数组的截取

  • array.slice(start, end) ; 从已有的数组中返回选定的元素 ,返回一个新的数组,包含从 start 到 end (不包括该元素)的 array 中的元素

10. 数组的连接

  • array1.concat(array2,array3,...,arrayX) ;该参数可以是具体的值,也可以是数组对象。可以是任意多个, 用于连接两个或多个数组,返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组

11. 数组与字符串的相互转换

  • arr.join(separator) ; 返回一个字符串。该字符串是通过把 arr 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成
  • str.split(separator) ; 返回一个数组。

12. 对数组的判断

  • Array.isArray(obj);用于判断一个对象是否为数组。 如果对象是数组返回 true,否则返回 false。

13. 清空数组

  • arr.length = 0
  • arr..splice(0); 若只有一个参数, 此方法将删除此索引位开始数组中的所有元素

14.遍历数组

  • for循环 for(let i; i < array.length; i++){} 代表的是索引
  • for..of 循环 for(const item of items) items代表是值
  • array.forEach(function(currentValue, index, arr))
  • for(var index in arr){} ; index 为arr的索引
  • Object.keys(arr) 返回数组形式的index 值
  • Object.getOwnPropertyNames(arr) ; 返回为为数组对象的index 值和数组长度的属性值,例 [0,1,2,"length"]

15. 其他判断方法

  • instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。object instanceof class
  • Object.prototype.toString.call(arr) 准确判断一个数据的类型

二. 对象

对象的创建

  • 字面量 : var obj = {}
  • 构造形式 : var obj = new Object()
  • 构造形式和字面形式的结果是完全同种类的对象

1. 属性描述符

  • Object.defineProperty(obj, prop, descriptor)

      var person = {};     
      Object.defineProperty(person, 'legs', {
          value: 2,               //属性值
          writable: true,         //该属性是否可写
          configurable: true,     //该属性是否可被删除
          enumerable: true        //该属性在for in中是否可被枚举
      });
    
  • 在定义了set()和get()之后,描述符会认为存取操作已被定义了,其中再定义value和writable会引起错误。

     var person2 = {};
     Object.defineProperty(person2, 'legs', {
         set:function(v) {                   //该属性的更新操作所调用的函数
             return this.value = v;
         },              
         get: function() {                  //获取属性值时所调用的函数
             return this.value;
         },
         configurable: false,
         enumerable: true
     });
    
  • Object.defineProperties(obj, props) 定义多个属性

      var class = Object.defineProperties({}, {
          'name1': {
              value: 'transparent',
              writable: true
          },
          'name2': {
              value: 'half',
              writable: false
          }
      });
    

2. in操作符

  • "prop" in obj 判断属性是否属于此对象 ; 属于返回true,否则为false

3. 循环遍历对象

  • for(var prop in obj){} ; prop 为obj的属性名; 可遍历对象的可枚举属性,包括自有属性和继承自原型的属性
  • Object.keys(obj) ; 遍历对象自有的可枚举属性,不包括继承自原型的属性和不可枚举的属性 ,返回一个数组
  • Object.getOwnPropertyNames(obj) ; 用于返回对象的自有属性,包括可枚举和不可枚举的属性,不包括继承自原型的属性。返回一个数组

获取该对象的原型

  • Object.getPrototypeOf(obj)

比较两个值是否严格相等

  • Object.is(value1, value2) ; 若相等返回true,否则为false;
  • 其与严格比较运算符(===)的行为基本一致。 不同之处只有两个:一是+0不等于-0,二是NaN等于自身

Object中的其他属性方法

  • Object.assign(target, ...sources)
  • Object.values(obj) 返回一个给定对象自己的所有可枚举属性值的数组
  • Object.entries(obj) 返回一个给定对象自己的可枚举属性[key,value]对的数组; 例 [['a',1],['b',2],['c',3]]
  • obj.hasOwnProperty('prop') ; 法会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)

Es6构造函数

  • constructor 方法,是构造方法,this 关键字则代表实例对象。 一个类必须要有 constructor 方法,如果没有显示定义,一个空的 constructor 方法会被默认添加

     // 传统写法
     function Animal(type, name) {
         this.type = type;
         this.name = name;
     }
    
     Animal.prototype.toString = function () {
         return '(' + this.type + ',' + this.name + ')';
     };
     var m = new Animal('monkey', 'yuan');
     
     // class 写法
     class Animal {
         constructor (type, name) {
             this.type = type;
             this.name = name;
         }
         toString() {
             return '(' + this.type + ',' + this.name + ')';
         }
     }
     var m = new Animal('monkey', 'yuan');
    
  • 如果在一个方法钱加上 static 关键字,就表示该方法不会被实例继承,而是通过类调用,成为静态方法。

      class Foo {
          static calssMethod() {
          return 'hello';
          }
      }
      Foo.classMethod(); // hello
    
      var foo = new Foo();
      foo.classMethod();  // TypeError: foo.calssMethod is not function
      
      class Bar extends Foo { }   //父类的静态方法可以被子类继承
      Bar.classMethod(); // hello, too
      
      class Bar extends Foo {
          static classMethod() {
          return super.classMethod() + ', too';  //静态方法也可以从 super 对象上调用
          }
      }
      Bar.classMethod(); // hello, too
    
  • extends 关键字

      class Monkeyi extends Animal {
          constructor(type, name) {
              super(type, name);
          }
          toString() {
              return  "monkey is" `${this.type}` ",name is "`{ this.name}`;
          }
      }
    
  • super 关键字 当你想在子类中调用父类 的函数时,super 关键字就很有作用了,并且使用 super 关键字的时候,必须显示指定是作为函数还是作为对象使用,否则会报错

  •   //super 作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类 
     
      class Parent {
          static myMethod(msg) {
              console.log('static');
          }
    
          myMethod(msg) {
              console.log('instance');
          }
      }
    
      class Child extends Parent {
          static myMethod() {
              super.myMethod();
          }
    
          myMethod(msg) {
              super.myMethod();
          }
      }
      Child.myMethod(); // static 
      var child = new Child();
      child.myMethod(); // instance
    
  • //通过 super 调用父类的方法时,super 会绑定子类的 this 
    class A {
          constructor() {
              this.x = 1;
          }
          print() {
              console.log(this.x);
          }
      }
    
      class B extends A {
          constructor() {
              super();
              this.x = 2;
          }
          m() {
              super.print();
          }
      }
    
      let b = new B();
      b.m() // 2