JS数组相关知识

目录

一、常见的数组方法有哪些？

二、创建数组的方法

三、判断数组的三种方法和他们的区别

---

一、常见的数组方法有哪些？

答：push（），pop（），unshift（），shift（），splice、toString、join、concat，slice、reverse，sort（）（sort里面传一个函数作为参数）

**上述方法中不会改变数组的方法有：**concat（连接两个或者多个数组），slice（截取数组的某一部分）、join（）、toString（）、

补充：toString方法会将一个数组拼接成一个字符串，中间使用“，”分割。
join方法也会将一个数组拼接成一个字符串，中间的分割方式根据join()方法中传入的内容来分割
join的适用范围大于toString，可以替代后者

**上述方法中会改变的数组的方法有：**push、pop、unshift、shift、splice（删除/添加元素）、reverse、sort

1、push（）：向数组的末尾添加一个或多个元素，**并返回新数组的长度。**该方法会改变原数组。

const array=['one','two','three','four'];
const pushResult = array.push('new1','new2');
console.log(pushResult);// 6
console.log(array); //['one','two','three','four','new1','new2']

2、pop（）：把数组的最后一个元素从其中删除，并返回最后一个元素的值。该方法会改变原数组。

const array=['one','two','three','four'];
const popResult = array.pop();
console.log(popResult);// four
console.log(array);// ['one','two','three']

3、unshift（）：向数组的开头添加一个或更多元素，**并返回新数组的长度。**该方法会改变原数组。

const array=['one','two','three','four'];
const unshiftResult = array.unshift('new1','new2');
console.log(unshiftResult);//6
console.log(array); //['new1','new2','one','two','three','four']

4、shift（）：把数组的第一个元素从其中删除，并返回第一个元素的值。该方法会改变原数组。

const array=['one','two','three','four'];
const shiftResult=array.shift();
console.log(shiftResult); //one
console.log(array);  // ['two','three','four']

5、splice(index,howmany,item1, ..., itemX)： 向/从数组中添加（在index后添加）/删除项目，然后返回被删除的数组。该方法会改变原始数组。

//向原数组某个位置添加一个元素
const array=['one','two','three','four'];
array.splice(2,0,'new1');
console.log('array:', array);//['one','two','three','new1','four']
//删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素
 const array=['one','two','three','four'];
 array.splice(2,1,'new1');
 console.log('array:', array);//['one','two',new1','four']

6、toString():可把一个逻辑值转换为字符串，并返回结果。

const array=['one','two','three','four'];
const toStringResult = array.toString();
console.log('array:', toStringResult);//'one,two,three,four'

7、join(separator)：把数组中的所有元素放入一个字符串。

const array=['one','two','three','four'];
const joinResult = array.join();
const joinResult1 = array.join('/');
console.log(joinResult);//"one,two,three,four"
console.log(joinResult1);//"one/two/three/four"

8、concat()：用于连接两个或多个数组。**该方法不会改变现有的数组，**而仅仅会返回被连接数组的一个副本。

const array=['one','two','three','four'];
const arrar1=['new3','new4'];
const arrar2 = ['new5', 'new6'];
const concatResult1 = array.concat('new1','new2');
const concatResult2 = array.concat(arrar1);
const concatResult3 = array.concat(arrar1, arrar2);
console.log(concatResult1);//['one','two','three','four','new1','new2']
console.log(concatResult2);//['one','two','three','four','new3','new4']
console.log(concatResult3);//['one','two','three','four','new1','new2','new3','new4']
console.log(array);//['one','two','three','four']

9、slice(start，end):截取数组的某一部分，该方法并不会修改数组，而是返回一个子数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

const array=['one','two','three','four','five','six','seven'];
const sliceResult1 = array.slice(-4,-2);
const sliceResult2 = array.slice(-2);
const sliceResult3 = array.slice(2,6);
const sliceResult4 = array.slice(2);
console.log(sliceResult1); //['four','five'];
console.log(sliceResult2);//['six','seven'];
console.log(sliceResult3);//['three','four','five','six'];
console.log(sliceResult4);//['three','four','five','six','seven'];
console.log(array);//['one','two','three','four','five','six','seven'];

10、reverse()：使数组元素翻转，会改变原来的数组

const newArray = array.reverse();
console.log(newArray);//[ 'four', 'three', 'two', 'one' ]
console.log(array);//[ 'four', 'three', 'two', 'one' ]

11、sort()：数组排序方法，会改变原来的数组

const arr = [2, 4, 1, 6, 9, 5];
const newarr = arr.sort();//默认是升序
const newarr1 = arr.sort((a, b) => b - a);//降序
console.log(newarr);//[ 1, 2, 4, 5, 6, 9 ]
console.log(newarr1);//[ 9, 6, 5, 4, 2, 1 ]
console.log(arr);//[ 9, 6, 5, 4, 2, 1 ]

二、创建数组的方法

1. 利用new创建数组

   var arr=new Array();//创建了一个空数组
   var arr1=new Array("1" , 2 , {a:1,b:3})//创建了一个不为空的数组["1",2,{a:1,b:3}]
   

2. 利用数组字面量创建数组（即只用中括号（[]）的形式）

   var arr3=[];//创建一个空数组
   var arr4=["1" , 2 , {a:1,b:3}]创建了一个不为空的数组["1",2,{a:1,b:3}]

三、判断数组的三种方法和他们的区别

1. 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(Symbol(1)) // "[object Symbol]"
Object.prototype.toString.call(null) // "[object Null]"
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() 常用于判断浏览器内置对象时。

更多实现可见 谈谈 Object.prototype.toString

2. instanceof

instanceof 的内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。

使用 instanceof判断一个对象是否为数组，instanceof 会判断这个对象的原型链上是否会找到对应的 Array 的原型，找到返回 true，否则返回 false。

[]  instanceof Array; // true

但 instanceof 只能用来判断对象类型，原始类型不可以。并且所有对象类型 instanceof Object 都是 true。

[]  instanceof Object; // true

补充：实现一个instanceof

// instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。
// 实现：

function myInstanceof(left, right) {
  let proto = Object.getPrototypeOf(left), // 获取对象的原型
    prototype = right.prototype; // 获取构造函数的 prototype 对象

  // 判断构造函数的 prototype 对象是否在对象的原型链上
  while (true) {
    if (!proto) return false;
    if (proto === prototype) return true;

    proto = Object.getPrototypeOf(proto);
  }
}

3、Array.isArray()

• 功能：用来判断对象是否为数组

• Array.isArray() 与 Object.prototype.toString.call()

  Array.isArray()是ES5新增的方法，当不存在 Array.isArray() ，可以用 Object.prototype.toString.call() 实现。

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

四、如何判断数组是不是空

根据数组的长度来判断数组是否为空；数组是否等于false