JS数组API总结(上)

110 阅读3分钟

这是我参与8月更文挑战的第14天,活动详情查看:8月更文挑战

JavaScript数组API

截至 ES7 规范,数组共包含 33 个标准的 API 方法和一个非标准的 API 方法

Array 的构造器

通常创建数组会使用对象字面量的方式来创建, 也就是var a = [] , 但是这有局限性, 也就是你没有办法用这种方式来创建一个定长的数组.

// 使用 Array 构造器,可以自定义长度
var a = Array(6); // [empty × 6]
// 使用对象字面量
var b = [];
b.length = 6; // [undefined × 6]

Array构造器根据参数长度不同, 有两种处理方式

  • new Array(arg1, arg2,…) 传入的参数将按照顺序依次成为新数组的第 0 至第 N 项(参数长度为 0 时,返回空数组);
  • new Array(len) len不是数值的时候, 返回一个只包含 len 元素一项的数组;len为数值的时候, 就是返回对应长度的空数组.

ES6新增构造方法

  1. Array.of

Array.of 用于将参数依次转化为数组中的一项,然后返回这个新数组,而不管这个参数是数字还是其他。它基本上与 Array 构造器功能一致,唯一的区别就在单个数字参数的处理上。

Array构造器是没办法直接创建一个单数字的数组. 而Array.of可以

Array(2) //[empty × 2]
Array.of(2) //[2]
  1. Array.from

设计初衷是基于对象创建新数组. 只要一个对象有迭代器,Array.from 就能把它变成一个数组(注意:是返回新的数组,不改变原对象)

Array.from 拥有 3 个参数: 第一个必选,后两个可选, 而且必须要有返回值

  1. 类似数组的对象,必选;
  2. 加工函数,新生成的数组会经过该函数的加工再返回;
  3. this 指向,表示加工函数执行时 this 的值。
var obj = {0: 'a', 1: 'b', 2:'c', length: 3};
Array.from(obj, function(value, index){
  console.log(value, index, this, arguments.length);
  return value.repeat(3);   //必须指定返回值,否则返回 undefined
}, obj);

Image.png

除了上述 obj 对象以外,拥有迭代器的对象还包括 String、Set、Map , Array.from都可以进行处理

Array的判断

var a = [];
// 1.基于instanceof a的原型链上有没有Array
a instanceof Array;
// 2.基于constructor a的构造函数是不是Array
a.constructor === Array;
// 3.基于Object.prototype.isPrototypeOf 就是看a的原型链上有没有Array
Array.prototype.isPrototypeOf(a);
// 4.基于getPrototypeOf getPrototype就是获取a的原型对象 也就是a.__proto__
Object.getPrototypeOf(a) === Array.prototype;
// 5.基于Object.prototype.toString 
Object.prototype.toString.apply(a) === '[object Array]';

改变数组自身的方法

一共有9个

pop || push || reverse || shift || sort || splice || unshift 以及两个ES6新添的copyWithin和fill

// pop方法
var array = ["cat", "dog", "cow", "chicken", "mouse"];
var item = array.pop();
console.log(array); // ["cat", "dog", "cow", "chicken"]
console.log(item); // mouse

array.pop()方法可以删除掉数组尾部元素, 返回值是删除掉的元素

// push方法
var array = ["football", "basketball",  "badminton"];
var i = array.push("golfball");
console.log(array); // ["football", "basketball", "badminton", "golfball"]
console.log(i); // 4

array.push(<添加的对象>)用来给数组从尾部添加对象, 返回值是当前数组的长度

// reverse方法
var array = [1,2,3,4,5];
var array2 = array.reverse();
console.log(array); // [5,4,3,2,1]
console.log(array2===array); // true

array.reverse()改变了原数组array , 同时返回值就是改变后的原数组

// shift方法
var array = [1,2,3,4,5];
var item = array.shift();
console.log(array); // [2,3,4,5]
console.log(item); // 1

array.shift()删除数组头部元素, 返回删除掉的元素

// unshift方法
var array = ["red", "green", "blue"];
var length = array.unshift("yellow");
console.log(array); // ["yellow", "red", "green", "blue"]
console.log(length); // 4

array.unshift()删除数组尾部元素, 返回数组的长度

// sort方法
var array = ["apple","Boy","Cat","dog"];
var array2 = array.sort();
console.log(array); // ["Boy", "Cat", "apple", "dog"]
console.log(array2 == array); // true

array.sort()给数组排序, 返回值就是排序后的原数组

// splice方法
var array = ["apple","boy"];
var splices = array.splice(1,1);
console.log(array); // ["apple"]
console.log(splices); // ["boy"]

array.splice(args) 用来切割数组,返回值是被splice切掉的数组

// copyWithin方法
var array = [1,2,3,4,5]; 
var array2 = array.copyWithin(0,3);
console.log(array===array2,array2);  // true [4, 5, 3, 4, 5]

array.copyWithin(0,3)方法 从索引3到末尾, 全部复制到索引0的位置

// fill方法
var array = [1,2,3,4,5];
var array2 = array.fill(10,0,3);
console.log(array===array2,array2); 
// true [10, 10, 10, 4, 5], 可见数组区间[0,3]的元素全部替换为10

array.fill(<元素>, <前区间>, <后区间>)方法, 用一个元素替换掉对应区间的元素