第八章 数组

一、数组

1、含义：数组是一个数据的集合；

2、数组也是数据类型的一种；

3、语法分两种：字面量和new Arry()

    //  第一种：字面量
    //语法：var 变量名=[]
    var ageArr=[12,14,15,16]
    var nameArr=['xiaoming','tiechui']
    var studentArr=[对象名1,对象名2]

    // 内置构造函数
    //语法: var 变量名 = new Array()
    var arr1=new Array(12,13,14)
    console.log(arr1);

    // 创建一个长度为 10 的数组
    //注意: 只能书写一个数字 , 这个数字表示的就是这个数组的长度
    // 没有内容 使用empty填充
    var arr2 = new Array(10)

注意：（1）如果仅给一个参数，并且这个参数是小数或者负数则会报错 ，因为当为小数或者是负数的时候，数组是对象创建的，就会把小数或者负数作为对象key使用，这种情况下不会增加length；

（2）元素可以是任意类型，包括数组类型，当数组的元素是数组时，就会形成二维数组或者多维数组 ；

二、length 表示数组的长度，常用于清空数组

     // 创建一个数组
    var arr = [1, 2, 3]
    console.log(arr.length) // 3



    //当设置下标变量时，下标值大于数组原长度时，就会将数组的长度扩充到当前下标+1
    arr[5]=1; 
    
    //给数组的尾部添加一个新元素1
    arr[arr.length]=1; 

    //修改数组的最后一个元素的值
    arr[arr.length-1]=2;  

 注意：（1）数组长度永远大于最大下标，是数组最大下标+1；

（2）当设置数组的长度时,有以下三种情况；

• 如果你设置的值比length长度大 , 为了保证长度 , 没有的数据使用 empty 补齐;
• 如果值和数组的length长度一样, 没有变化
• 如果你设置的值比length长度小 , 从后面删除对应的数据

（3） arr.length=0; 清空数组；这个是用的比较多的；

（4）arr.length-- 删除数组的最后一个元素；

 三、数组的索引

1、索引，也叫做下标，是指一个数据在数组里面排在第几个的位置，是从0开始的；

2、获取方式：数组[索引]

//语法: 数组[索引(下标)]
var arr = ['hello', 'world']

console.log(arr[0]) // hello
console.log(arr[1]) // world

 注意：如果该索引(下标)存在 , 就是该索引对应的值，如果该索引不存在 , 获取到的就是 undefined;

3、索引写（设置）方式

语法：数组[索引] = 值

• 如果之前该索引有值 , 就是修改；
• 如果之前该索引没有值(该索引不存在) , 就是在该索引对的位置添加一个值；
• 没有的地方使用 empty 填充；
• 保证最后一位一定是 length - 1；

4、遍历数组

for (var i = 0; i <= arr.length - 1; i++) {
            console.log(i,'---------',arr[i]);
        }

四、基本数据类型和复杂数据类型的存储对比

1、基本数据类型是直接在栈空间存储一个数据；

2、复杂数据类型是在堆空间中开辟一个存储空间==把数据存储到空间内==把存储空间的地址赋值给栈里面的变量 

五、数据类型之间的比较：

//基本数据类型是 值 之间的比较
var num = 1
var str = '1'

console.log(num == str) // true

//复杂数据类型是 地址 之间的比较
var obj = { name: 'Jack' }
var obj2 = { name: 'Jack' }

console.log(obj == obj2) // false

解析：因为我们创建了两个对象，所以在堆内容里面开辟了两个空间地址，

            虽然存储的内容是一样的，但是是两个空间，两个地址；

             复杂数据类型之间其实是地址的比较，所以obj1和obj2两个变量的地址不一样，我们得到的就是false;

延伸：1、栈和堆

栈：数值、字符、布尔值、undefined、null、symbol存储在栈中；

堆：除此以上的其他，比如对象、数组、函数 等内容都会被存储在堆中，并且得到一个引用地址；

注意：栈中定义时开辟空间名就是变量，空间中存储的值如果是数值、字符、布尔、undefined、null、symbol时直接存储在栈中，除此之外都获取堆中存储的引用地址 ；

2、引用地址

对象、数组、函数等内容存储在堆中时会有一个地址，这个地址被赋值到栈中的变量里，当调用变量时，就会根据这个引用地址在堆中找到对应结果，并且使用

3、内存泄露

当将一个引用地址赋值给栈中变量空间后，又一次将另一个引用地址重新赋值给栈中同一个变量空间，这时候原来那个引用地址的对象并不会被销毁，会保留在堆中，并且不会被销毁，长期大量的遗留这些内容，叫做内存泄漏

4、强引用

当一个引用地址同时赋值给两个变量，也就是说两个变量使用的是同一个引用地址 ；

5、垃圾回收制

当引用类型被赋值给栈中时，这个引用类型会产生一个引用列表，这个列表中包含了该引用地址被谁调用，当垃圾回收车开过时，对于该列表中已经有被谁调用赋值的，不会清理，需要清理的方式，就是在变量引用地址改变时，先赋值为null，再做改变，这时候引用列表会清除该变量的引用关系，当这个引用地址的引用列表中没有引用关系时，垃圾回收车开过后就会清除 ；

6、关于打印引用类型

如果需要打印整个引用类型，需要先转换为JSON字符串，然后打印这个字符串就可以了 ；

六、数组方法

 以下7种是影响原数组的方法：

1、push

var arr=[1,2,3]

//  push  后面添加一个元素
//返回值 数组追加完之后的长度
var res=arr.push(5)
console.log(arr); //[1,2,3,5]
console.log("返回值",res); //4

 2、pop

//pop 后面删除元素
//返回值是数组删除的元素
var respop=arr.pop()
console.log(arr); //[1,2,3]
console.log("返回值",respop); //5

3、unshift

//unshift 前面添加元素
//返回值是长度
var resunshift=arr.unshift(5)
console.log(arr); //[5,1,2,3]
console.log("返回值",resunshift); //4

4、shift

//shift 前面删除元素
//返回值是删除的元素
var resshift=arr.push(5)
console.log(arr); //[1,2,3]
console.log("返回值",resshifts); //5

5、splice：截取数据

//splice删除
//返回值是删除的元素
var resplice=arr.splice(1,1) //第一个位置删除开始位置的下标 第二个位置要删除的个数
console.log(arr); //[1]
console.log("返回值",resplice); //[1,3]


//splice 添加
//语法：数组.splice(开始索引，多少个，插入数据)
//若想要不删除直接添加可以修改为：arr.splice(1,0,"cat")，返回值就是[]空数组
//这个含义为：下标为1的地方，不删除 ==[1,"cat",2,3]
var resplice=arr.splice(1,2,"cat") //删除两个元素之后，直接在这个后面添加需要添加的值
console.log(arr); //[1,"cat"]
console.log("返回值",resplice); //[2,3]

6、reverse

//resver 倒序
//返回值：一个反转后的数组
arr.reverse()
console.log(arr); //[3,2,1]

7、sort

// sort 排序 接受一个回调函数
//返回的是排序之后的数组，在没有传递参数的时候是按照位进行排序的
var arr2=[11,21,56,7,3]
//里面的a、b可以随便更换
arr.sort(function(a,b){
    //从小往大排，正序
    return a-b
    //从大往小排，倒序
    return b-a
})

以下几种是不影响原数组的方法

1、concat

//concat 是把多个数组进行拼接
//返回值是拼接之后的数组
//注意：前后位置不同也会影响拼接
var arr = [1, 2, 3]
var arr2 = arr.concat([4, 5, 6])
console.log(arr2) // [1, 2, 3]
console.log(arr2) // [1, 2, 3, 4, 5, 6]

延伸：若有简单的数组复制可以用此办法,这是不传参数的情况下快速复制

var arr3 =arr.concat()

console.log(arr3); //[1,2,3]

2、 join

// join是把数组里面的每一项内容链接起来，变成一个字符串，且不会改变原数组
// 语法：join(内容)
//返回值就是一个字符串
var str = arr.join('-')
console.log(str) // 1-2-3

3、slice

// slice 截取字符串 不会影响原数组
//返回值就是一个新的数组，就是截取出来的内容
//slice(开始索引，结束索引) 包前不包后
var arr = [1, 2, 3,4,5]
var arr2=arr.slice(0,2)
console.log(arr2); //[1]

// 只有一个数值代表 从下角标2开始至结束
var arr3=arr.slice(2)
console.log(arr3); //[3,4,5]

延伸：不传参数的时候也可以实现数组的复制，还不影响原数组

var arr4=arr.slice()

console.log(arr4); // [1, 2, 3,4,5]

4、 indexOf

// indexOf  查找结果  如果返回-1 代表找不到，如果有返回改数对应的索引
//若有相同数据，则是返回第一次出现的索引
//如果是arr.indexOf('aa',2)代表是从第二个下标位置开始查找，则返回的就是
//那个索引开始的第一个遇见的索引
var res=arr.indexOf('aa')
console.log(res);  //-1

5、lastIndexOf

// lastIndexOf 从后往前查找结果  如果返回-1 代表找不到
// 也可以写上数字，表示是从第几个下标位置开始查找
var res=arr.lastIndexOf('aa')
console.log(res);  //-1

 数组中较为复杂的方法:一下的方法都是和循环遍历相关的

1、forEach

// forEach 遍历
//语法：arr.forEach(function (item, index, arr) {})
//没有返回值，如果真的要说有就是undefined
var arr = [1, 2, 3]
arr.forEach(function (item, index, arr) {
  // item 就是数组中的每一项
  // index 就是数组的索引
  // arr 就是原始数组 
  console.log('数组的第 ' + index + ' 项的值是 ' + item + '，原始数组是', arr)
})

2、 map

// map 映射   不会影响原数组
//语法：数组.map(function (item, index, arr) {})
//返回值：一个映射后的数组，需要以return书写返回条件
var arr2=arr.map(function(item){
    return item*item
})

 例子：假设后端给了一串数据，我们需要li进行展示

var arr=['aa','bb','cc']

var arr2=arr.map(function(item){

    return '<li>'+item+'</li>'

})

document.write(arr2.join(''))

 展示效果：

3、 filter

// filter 过滤数组的
//语法：数组.filter(function (item, index, arr) {})
//以return返回,返回我们符合要求的数组

var arr=[100,200,300]
var arr2=arr.filter(function(item){
    return item>200
console.log(arr2); //[300]
}) 

4、 every

// every 每一个  用来检测数组中有没有符合条件的数据
//语法：数组.every(function (item, index, arr) {})
//以return形式返回，返回值是布尔值，true/false
// 每一个都是满足条件的时候是true,只要有一个不满足的时候返回false
var arr=[80,90,92,99]
var arr2=arr.every(function(item){
    return item>=90
})
console.log(arr2);//false

5、 some

//用来检测有没有符合条件的数据
//语法：数组.some(function (item, index, arr) {})
// some 只要有一个满足条件就是true
//返回值就是布尔值，true/false
var arr=[80,90,92,99]
var arr2=arr.every(function(item){
    return item>=90
})
console.log(arr2); //true

6、find(了解即可)

// find  用来查找满足条件的数据，如果有多项，也只有一项
// 语法：数组.find(function (item, index, arr) {})
//返回值还是以return返回，返回值是第一个符合条件的值，没有则返回undefined
var arr=[{
    name:'语文',
    grade:90
},{
    name:'数学',
    grade:80
}]
var arr2=arr.find(function(item){
    return grade>=90
})
console.log(arr2);  

7、 reduce

// reduce 叠加
//语法：数组.reduce(function (prev,item, index, arr) {},初始值)
//这个和其他的不一样，其他的是只有一个参数==函数，但是这个是有两个==函数和初始值
//返回值：以return返回
//
var arr = [1, 2, 3]
// 上一次参数的结果==prev存放的位置

var arr2=arr.reduce(function(prev,item){
    return prev+item  //这里进行了累加

},0) //初始值是0，可以根据自己需求定；如果要乘积，这里需要给1，不然任何值都是0；

console.log(arr2);   //6

七、数组去重

// 方法1
var arr=[1,2,3,4,1,2,5,1,2,3]
var arr2=[]
for(var i=0;i<arr.length;i++){
    if(arr2.indexOf(arr[i]) === -1){
        arr2.push(arr[i])
    }
}
console.log(arr2);


// 方法2 利用对象
var arr=[1,2,3,4,1,2,5,1,2,3]
var obj={}
for(var i=0;i<arr.length;i++){
    obj[arr[i]]='可以随便填写'
}
console.log(obj);
 
var arr2=[]
for(var k in obj){
    // 这里因为是字符串所以需要转数值
    arr2.push(i-0)
}

// 方法3 new Set
// 这里转化呈set类型
var set1=new Set(arr)
console.log(set1);

// 这里把set转换为之前的数组类型
var arr1=Array.from(set1)
console.log(arr1);

八、数组塌陷

1、含义： 当我们对数组中的数据进行删除操作的时候，索引会进行前移，就不能把数组中所有的数据都删除掉，这个现象我们称之为数组塌陷；

2、解决办法：

方式一：倒着循环；

方式二：在执行完删除操作之后，执行一个--(减减操作)；

    //  方法一      
    var arr = [1,2,3,4]        
    for(var i = arr.length-1; i >= 0; i--){
        arr.splice(i,1)
    }        


    // 方法二：        
    for(var i = 0;i < arr.length;i++){
        arr.splice(i,1)
        i--
    }
    console.log(arr);