JavaScript 中的数组是一种特殊的对象。它的工作原理与普通对象类似(以数字为属性名,但只能通过 [ ] 来访问),但数组还有一个特殊的属性——length(长度)属性。这个属性的值通常比数组最大索引大 1。

MDN

1、判断数组的方法:

判断一个对象是不是数组对象一共有 3 种方法:

①、方法一:Object.prototype.toString.call()

每一个继承 Object 的对象都有 toString 方法,如果 toString 方法没有重写的话,会返回 [Object type],其中type为对象的类型,但当除了 Object 类型的对象外,其他类型直接使用 toString 方法时,会直接返回都是内容的字符串,所以我们需要使用 call 或者 apply 方法来改变 toString 方法的执行上下文。

const an = ['Hello','An'];
an.toString(); // "Hello,An"
Object.prototype.toString.call(an); // "[object Array]"
// 这种方法对于所有基本的数据类型都能进行判断,即使是 null 和 undefined。
Object.prototype.toString.call('An'); // "[object String]"
Object.prototype.toString.call(1); // "[object Number]"
Object.prototype.toString.call(null); // "[object Null]"
Object.prototype.toString.call(Symbol(1)); // "[object Symbol]"
Object.prototype.toString.call(undefined); // "[object Undefined]"
Object.prototype.toString.call(function(){}); // "[object Function]"
Object.prototype.toString.call({name: 'An'}); // "[object Object]"
// Object.prototype.toString.call() 常用于判断浏览器内置对象时。

②、方法二:instanceof

// instanceof 的内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
[] instanceof Array; // true
// 但 instanceof 只能用来判断对象类型,原始类型不可以。并且所有对象类型 instanceof Object 都是 true。
[] instanceof Object; // true

③、方法三:Array.isArray()

  • 功能:用来判断对象是否为数组。
  • Array.isArray() 与 Object.prototype.toString.call() 比较:Array.isArray() 是ES5 新增的方法(2009年),当不存在 Array.isArray(),可以用 Object.prototype.toString.call() 实现。
if (!Array.isArray) {
	Array.isArray = function(arg) {
		return Object.prototype.toString.call(arg) === '[object Array]';
	}
}

2、Array方法使用归纳

"use strict";
const arr = [1,2,3,100000000,'hello','world'];

/**
 * @ toString()
 * @input => null
 * @output => String
 * 返回一个包含数组中所有元素的字符串,每个元素通过逗号分隔。
 */
const str = arr.toString(); // "1,2,3,100000000,hello,world"
str instanceof String;  // false
Object.prototype.toString.call(str);  // [object String]

/**
 * @ toLocaleString()
 * @input => null
 * @output => String
 * * toString()和toLocaleString()两点区别:
 * * 1.当数字是四位数及以上时,有区别。
 * * 2.当目标是标准时间格式时,有区别。
 * 根据宿主环境的区域设置,返回一个包含数组中所有元素的字符串,每个元素通过逗号分隔。
 */
const localeStr = arr.toLocaleString();  // "1,2,3,100,000,000,hello,world"
const today = new Date(); // 2020-12-15T07:51:28.990Z : [object Date]
const toDate = today.toString();  // "Tue Dec 15 2020 15:53:08 GMT+0800 (GMT+08:00)"
const locale = today.toLocaleString();  // "2020-12-15 3:51:28 ├F10: PM┤" // "2020/12/15 下午3:51:28"
// toLocaleString() 拆分为两段
const localeDate = today.toLocaleDateString();  // "2020-12-15"
const localeTime = today.toLocaleTimeString();  // "4:04:20 ├F10: PM┤"  // 下午4:04:20

/**
 * @ concat()
 * @input => Array
 * @output => Array
 * * concat(item1[, item2[, ...[, itemN]]])
 * 返回一个数组,这个数组包含原先数组和 item1、item2、……、itemN 中的所有元素,在原数组尾部插入,不改变原数组,解构输入的第一层数组。
 */
const concatArr = arr.concat(999,[1,2,545,[888,999,["abcdef",567]]])  // [1,2,3,100000000,'hello','world',999,1,2,545,[888,999,['abcdef',567]]]

/**
 * @ join()
 * @input => 分隔标志(可以是符号、数字、字符串)
 * @output => String
 * * join(sep)
 * 返回一个包含数组中所有元素的字符串,每个元素通过指定的 sep 分隔,默认为逗号。
 */
const joinArr = arr.join('\\'); // "1\2\3\100000000\hello\world"

/**
 * @ pop()
 * @input => null
 * @output => String | Number
 * 删除并返回数组中的最后一个元素(会更改原数组)
 */
const popArr = arr.pop(); // "world"

/**
 * @ push()
 * @input => Array | Object | Number | String
 * @output => Number => arr.length
 * * push(item1, ..., itemN)
 * 将 item1、item2、……、itemN 追加至原数组(会更改原数组)
 */
const pushArr = arr.push('world'); // 6

/**
 * @reverse()
 * @input => null
 * @output => Array
 * 根据索引 index 进行数组逆序(会更改原数组)
 */
// arr: [ 1, 2, 3, 100000000, 'hello', 'world' ]
const reverseArr = arr.reverse(); // [ 'world', 'hello', 100000000, 3, 2, 1 ]

/**
 * @ shift()
 * @input => null
 * @output => String | Number
 * 删除并返回数组中第一个元素(会更改原数组)
 */
// arr: [ 'world', 'hello', 100000000, 3, 2, 1 ]
const shiftArr = arr.shift(); // "world"

/**
 * @ slice()
 * @input => Number
 * @output => Array
 * * slice(start, end)
 * 返回子数组,以 arr[start] 开头,以 arr[end] 前一个元素结尾。
 */
// arr: [ 'hello', 100000000, 3, 2, 1 ]
const sliceArr1 = arr.slice(2);  // [ 3, 2, 1 ]
const sliceArr2 = arr.slice(2, 4);  // [ 3, 2 ]

/**
 * @ sort()
 * @input => null | Function
 * @output => Array
 * * sort([cmpfn])
 * 依据可选的比较函数 cmpfn 进行排序,如果未指定比较函数,则按字符顺序比较(即使被比较元素是数字,会更改原数组)。
 */
// arr: [ 'hello', 100000000, 3, 2, 1 ]
const sortArr1 = arr.sort();  // [ 1, 100000000, 2, 3, 'hello' ]
// 数字大小比较
function sortNumber(a, b) {
  return a - b;
}
const sortArr2 = arr.sort(sortNumber);  // [ 1, 2, 3, 100000000, 'hello' ]

/**
 * @ splice()
 * @input => Number | Array
 * @output => Array
 * * splice(start, delcount[, item1[, ...[, itemN]]])
 * 从 start 开始,删除 delcount 个元素,然后插入所有的 item,会更改原数组。
 */
// arr: [ 1, 2, 3, 100000000, 'hello' ]
const spliceArr = arr.splice(1,2,3,[7,8,9]); // [ 2, 3 ]
// arr: [ 1, 3, [ 7, 8, 9 ], 100000000, 'hello' ]

/**
 * @ unshift()
 * @input => Array | Number | String
 * @output => Number
 * * unshift(item1[, item2[, ...[, itemN]]])
 * 将 item 插入数组头部,返回数组新长度(考虑 undefined),不会像concat一样解构第一层数组,会更改原数组。
 */
// arr: [ 1, 3, [ 7, 8, 9 ], 100000000, 'hello' ]
const unshiftArr = arr.unshift(7,8,9,[1,2,3,4,5,[7,8,9]]);  // 9 => arr.length
// arr: [ 7, 8, 9, [ 1, 2, 3, 4, 5, [ 7, 8, 9 ] ], 1, 3, [ 7, 8, 9 ], 100000000, 'hello' ]

发表评论

邮箱地址不会被公开。 必填项已用*标注