JS集合引用类型-Array数组

目录

1.Array数组定义

2.. 创建数组

 3.数组空位

4.数组索引（length）

5.检测数组

1.instanceof操作符

2.Array.isArray（）方法

 6.常用方法

1.fill(arr,start,end)

2.push（）

3.pop（）

 4.unshift（）

5.shift（）

 6.reverse（）

 7.sort（）

8.concat（）

 9.slice（a,b）

 10.splice（）

 11.indexOf（a,b）

 12.lastIndecOf（a,b）

13.includes（）

 14.join（）

15.from（）

---

1.Array数组定义

一组可以保存任何数据类型的有序数据

2.. 创建数组

//使用构造函数创建 
       let arr=new Array();

//使用数组字面量创建
        let arr2=[]

注意：使用构造函数创建时可以省略new关键字，但是不推荐这么用，比如下面

       let arr=Array(5);

在使用构造函数创建数组时候，可以给其传入length或者数组参数，同时这也造成了一个问题，比如：我现在想创建一个数组，如果我想创建一个只包含5的数组

let arr=new Array(5)；//事实上创建了一个长度为5的数组

 3.数组空位

使用数组字面量初始化数组时，可以使用一串逗号来创建空位，ES6新增的方法普遍将这些空位当成存在的元素，并且值为undefined

let arr=[1,,,,2];
console.log(arr.length);//5
for(const a of arr){
    console.log(a);
}
//运行结果：1 undefined undefined undefined 2

4.数组索引（length）

数组长度是可读可写的，这意味着可以通过length控制我们的数组。

• 查看数组的长度
• 通过length查看数组的指定元素
• 通过length修改数组的指定元素
• 通过length在数组末尾删除元素
• 通过length在数组末尾添加元素

且length是动态的，在不干预情况下，超出会自动更新值

let arr=[];
console.log(arr.length);//0
arr[0]=1;
arr[1]=2;
console.log(arr.length);//2

5.检测数组

1.instanceof操作符

检测对象是不是指定的对象【只能在网页中只有一个全局执行上下文中使用】

let arr=[]
if(arr instanceof Array){//判断arr是不是Array
    arr.length=100;
    console.log(arr.length);//100
}

//instanceof也可以用于其他对象，在前面第六章我们提到过这个操作符

 如果网页中有多个框架，则可能涉及到两个全局执行上下文，因此就会有两个不同版本的Array构造函数，如果要把数组从第一个框架传给另一个框架，则这个数组的构造函数将有别于在第二个框架内本地创建的数组，为了解决这个问题，ECMAScript提供了Array.isArray（）方法

2.Array.isArray（）方法

检测一个值是不是数组

let arr=[];
if(Array.isArray(arr)){
  console.log('arr是一个数组');//arr是一个数组
}

 6.常用方法

1.fill(arr,start,end)

填充数组。arr表示填充内容，start表示开始填充位置，end表示结束填充位置,后两个不是必须的，不写默认填充整个字符串，填充后将改变原来字符串内容

let arr=[0,0,0,0,0,0,];
arr.fill(5);
console.log(arr);//(6) [5, 5, 5, 5, 5, 5]
arr.fill(1,0,1);
console.log(arr);//(6) [1, 5, 5, 5, 5, 5]

踩坑： 

 Array的fill（）方法常用于初始化数组，如果我们初始化的值为原始值这是可以的，但是如果我们的初始化值为引用类型，则fill之后，数组里面的值指向的是同一个地址。如果改变了其中一个，则其它的都会改变。

var arr = new Array(3);
var obj = {name: 'qqq'};
arr.fill(obj);
//这时arr的值为[ { name: 'qqq' }, { name: 'qqq' }, { name: 'qqq' } ]
arr[1].name = 'zzz';
console.log(arr);
//输出的结果为[{ name: 'zzz' }, { name: 'zzz' }, { name: 'zzz' }]

//所以建议最好采用for循环初始化数组,代码多了点，但是不容易出错

2.push（）

在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开 返回添加之后的数组长度

    let arr=[1,2,3,4,5];
    let arr2=arr.push(8);
    console.log(arr2);//6

3.pop（）

移除末尾元素 返回被移除的元素

    let arr=[1,2,3,4,5];
    let arr2=arr.pop();
    console.log(arr2);//5

 4.unshift（）

在数组的头部添加一个或多个元素 返回添加之后的数组长度

    let arr=[1,2,3,4,5];
    let arr2=arr.unshift(0);
    console.log(arr2);//6

5.shift（）

 移除数组的第一个元素 返回被移除的元素

    let arr=[1,2,3,4,5];
    let arr2=arr.shift();
    console.log(arr2);//1

 6.reverse（）

将数组元素反向排序，会改变原数组

    let arr=[1,20,3,56,21,15,89,46];
    let arr2=arr.reverse();
    console.log(arr2);//(8) [46, 89, 15, 21, 56, 3, 20, 1]

 7.sort（）

 对数组进行升序排序，可传入比较函数进行升序降序的控制，改变原数组

默认情况下，sort（）会按照升序排列，sort（）调用时会在数组的每一项上调用String（）转型函数，然会比较字符串来决定顺序，但是这会造成很多问题，比如下面

    let arr=[1,20,3,56,51,15,89,46];
    let arr2=arr.sort();
    console.log(arr2);//(8) [1, 15, 20, 3, 46, 51, 56, 89]

 显然这个结果不是我们想要的结果，所以就有了我们比较函数的概念，通过给sort（）传入比较函数就可以正确的排序数组

  //自定义升序
  function sortASC(a,b){
    return a-b;
  }

  //自定义降序
  function sortDESC(a,b){
    return b-a;
  }
  //如果返回值>0,交换元素的值,b-a表示降序排列


    let arr=[1,20,3,56,51,15,89,46];
    let arr2=arr.sort(sortASC);
    console.log(arr2);//(8) [1, 3, 15, 20, 46, 51, 56, 89]

当然大家也可以自己定义比较函数，这里我给大家定义了好了，如果你不想自己定义，直接复制上面的两个比较函数直接传入sort（）即可

8.concat（）

在现有数组全部元素的基础上创建一个新数组【多个数组的拼接、合并】，它会首先创建一个当前数组的副本，然后再把他的参数添加到数组副本的末尾，最后返回这个新构建的数组。如果传入一个或多个数组，则concat（）会把这些数组每一项都添加到结果数组，如果参数不是数组，则直接把他们添加到结果数组的末尾

    let arr=[1,20,3,56];
    let arr2=arr.concat(99，[66,36]);
    console.log(arr2)//(5) [1, 20, 3, 56, 99,66,36]

 9.slice（a,b）

创建一个包含原数组中一个或多个元素的新数组,a表示开始的索引，b表示结束的索引,如果不指定b，将返回a元素后的所有元素

    let arr=[1,20,3,56,66,35];
    let arr2=arr.slice(1,3);
    console.log(arr2);//(2) [20, 3]

 10.splice（）

强大的数组方法，包括删除、插入、替换

删除：传入两个参数，第一个参数为要删除第一个元素的位置，第二个为要删除元素的数量

插入：传入三个参数，第一个为插入的位置，第二个为0（要删除元素的数量），第三个为要插入的元素【插入的元素可以是多个】

替换：传入三个参数，第一个为开始位置，第二个为数值（要删除元素的数量），第三个为要插入的元素【删除的同时替换】

注意：这三种都会改变原数组，返回是各自对应删除、插入、替换的值

//删除第一个
arr.splice(0,1);
console.log(arr);//(5) [20, 3, 56, 66, 35]

//在数组最后面插入36
arr.splice(5,0,36);
console.log(arr);//(6) [20, 3, 56, 66, 35, 36]

//替换66为99
arr.splice(3,1,99);
console.log(arr)//(6) [20, 3, 56, 99, 35, 36]

 11.indexOf（a,b）

指定元素返回元素的索引，a表示开始查找位置，b表示要查找的元素，省略a表示从第一个开始查找【从头到尾】

let arr=[1,20,3,56,66,35];
let  arr2=arr.indexOf(56);
console.log(arr2);//3

 12.lastIndecOf（a,b）

指定元素返回元素的索引，a表示开始查找位置，b表示要查找的元素，省略a表示从第一个开始查找 【从尾到头】

let arr=[1,20,3,56,66,35];
let  arr2=arr.lastIndexOf(35);
console.log(arr2);//5

 indexOf（）与lastIndexOf（）的配合使用可以有效查找数组中多个重复的数组

13.includes（）

判断一个数组中是否至少有一个指定的元素，有返回true，反之返回false

let arr=[1,20,3,56,66,35];
let arr2=arr.includes(66);
consle.log(arr2);//true
let arr3=arr.includes('a');
console.log(arr3);//false

 14.join（）

指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。

var a = [1, 2, 3, 4];

a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

15.from（）

将字符串分解为数组

let arr2=Array.from('hello');
console.log(arr2);//(5) ['h', 'e', 'l', 'l', 'o']