JavaScript数组对象及常用方法

1.1 array数组

array数组：是一个可以存储"一组或是一系列相关数据的"容器。为什么要使用数组。解决大量相关数据的存储和使用的问题。便于程序的开发和维护。

注意：javascript数组可以存储“任何类型的"值。

1.1 声明数组

声明(创建)数组array

1.隐形声明的方式创建数组  

变量=[ ];

 //1.隐形声明的方式
//先声明，后赋值
var arr=[];
arr[0]='小马';
arr[1]='小余';
console.log(arr);

预览：

2.通过对象来 创建数组  

new Array();  

1.直接赋值  var a=new Array(元素1,元素2,元素3..)  

2.声明以后再赋

//2.通过对象来 创建数组
var arr=new Array()
//先声明，后赋值
arr[0]='小马';
arr[1]='小余';
arr[3]=' ';
console.log(arr);

//直接声明并赋值
var arr2=['小许','小杨','小王']
console.log(arr2);


//3.ES6中Array.of
var arr=Array.of('100','200','300')
console.log(arr);

 预览：

1.2 访问(操作)数组

通过数组的(中括号)下标访问。数组下标从0开始，他的最大值，是数组的长度length属性减一。

数组长度length：数组的length属性表示数组的长度。

 // 访问数组（操作数组）
// 通过 下标 去访问数组。
// 1.下标是 从 0 开始的 正整数。 

let arr1=[100,200,300]
console.log(arr[1]);
//输出200


//向数组中压入内容
arr1[3]=400;
console.log(arr1);

//数组长度的获取
console.log(arr1.length);
//4

//数组中下标的最大值 ---length-1
let max=arr1.lenght-1;
console.log(max);
//3

 预览：

1.3 遍历数组

for遍历数组

{
let arr1=[100,200,300]
for(let i=0;i<=length-1;i++){
console.log(arr1[]);


}



}

 预览：

forEach遍历数组

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

语法：

array.forEach(function(currentValue, index, arr), thisValue)

 遍历一维数组

//2.forEach()遍历数组
let arr1=[100,200,300]
arr1.forEach((item,index)=>{
console.log(item,index);

})

预览：

遍历数组对象

//数组对象
var data = [
    {
        title:'墨迹天气',
        count:'下载5.6亿次'
    },
    {
        title:'最美天气',
        count:'下载2.6亿次'
    },
    {
        title:'滴滴出行',
        count:'下载11.2亿次'
    },
    {
        title:'T3',
        count:'下载2.4亿次'
    },                {
        title:'曹操出行',
        count:'下载1.2亿次'
    }
];
//遍历数组对象
data.forEach((item,index)=>{
    console.log(index);
    console.log(item.title,item.count);
   
   
})

 预览：

1.4 数组的维度

A.一维数组

// 一维数组
var a = [1,2,3]
console.log(a)
// 访问一维数组中的内容
var r1 = a[0]
console.log(r1)

 预览：

B.二维数组：数组中数组

注意：数组中只要有一个内容是一维数组，那么这个数组就是二维数组

  声明二维数组:

  let arr =[[1,2],50,[1,5,6,9],8,12];
            console.log(arr);
            //6
            console.log(arr[2][2]);
            //9
            console.log(arr[2][3]);

 预览：

C.多维数组：数组中数组中的数组

// 多维数组
        var c = [[1,2,[3,4]],'小红','小李',[100,200,[300,600],[400,200]]]
        //获取输出 小李
        console.log(c[2]);
        //获取输出 600
        console.log(c[3][2][1]);

 预览：

1.5 数组对象

var a = new Array(1, 2, 3, 4);
            var b = [100, 200, 300, 400, 500, 600, 700];
            console.log(a, b);
            console.log(typeof a, typeof b);

 预览：

获取 数组对象的属性，写法------ 对象名.属性

1.5.1 数组对象的属性

数组长度length

  var a=b.length;
  console.log(a);
  //输出7

 

1.5.2 数组对象的方法

获取 数组对象的方法，写法------ 对象名.方法名([实参1,实参2,...])

(1) 检索“值” 的索引值 - indexOf() 查找位置

(2) 数组的末尾添加新的元素 - push()  压入

(3) 在数组的开头添加新元素 - unshift()

(4) 删除数组的最后一个元素 - pop() 弹出

(5) 删除数组的第一个元素 - shift()

(6) 转换数组到字符串 -toString()  把数组 变成 字符串

(7) 用数组的元素组成字符串 - join() 串联

(8) 从一个数组中选择元素 - slice() 切片，划分

(9) 数组中万能的删除和添加 - splice()  铰接，粘接

(10) 将一个数组中的元素的顺序反转排序 - reverse()

(11) 合并数组 - concat() 连接

(12) 用于对数组的元素进行排序 - sort() 排序

1、indexOf() 检索“值” 的索引值(1). 检索的“值”，在数组中，返回 当前这个值所在位置的索引

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。

如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

var a=['晚上','上午','下午']
            //检索'上午'这个值的索引值
            var i=a.indexOf('上午')
            console.log(i);
            //输出1

(2). 检索的“值”，不在数组中， 返回 -1

 var index =a.indexOf('晌午');
           
            if(a.indexOf('晌午')==-1){
                console.log('你检索的内容不存在');
               
           
        }

预览：

2、push() 数组的末尾添加新的元素

(1).  向数组中一个一个添加元素

var a=['小马']
a.push('小余')
a.push('小天')
console.log(a);

 预览：

(2). 向数组中添加一组元素

var a=['小马','小余','小天']
var c=['小胡','小王','小红']
    //遍历把c数组中的内容压入到a数组中
 for(var i=0;i<=c.length-1;i++){
 a.push(c[i])
 }
 console.log(a);

 预览：

3、unshift()在数组的开头添加新元素

var a=['小马','小余','小天','小胡','小王','小红']
a.unshift('小孙')
console.log(a)

 预览：

4、pop()删除数组的最后一个元素

var a=['小孙','小马','小余','小天','小胡','小王','小红']
a.pop()
console.log(a)

 预览：

5、shift()删除数组的第一个元素

var a=['小孙','小马','小余','小天','小胡','小王','小红','小王']
a.shift();
console.log(a)

 预览：

6、toString()将数组 转 字符串

toString()转换数组到字符串(把数组 变成 字符串)

  var a = ['小杨','小王','小吴']
        var str=a.toString()
        console.log(str, typeof str);

 预览：

7、join() 将数组 转 字符串

join()用数组的元素 组成 字符串, 返回给我们一个字符串

 var b = ['小杨','小王','小吴']
        var s=b.join()
        console.log(s, typeof(s));

 预览：

8、slice() 提取元素

slice() 从一个数组中选择元素(提取元素、筛选元素)---从已有的数组中返回选定的元素。

slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。

start 参数字符串中第一个字符位置为 0, 第二个字符位置为 1, 

以此类推，

如果是负数表示从尾部截取多少个字符串，

slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

end 参数如果为负数，-1 指字符串的最后一个字符的位置，-2 指倒数第二个字符，以此类推。

(1). 如果写 1个参数，使用方法如下：

var a=[100, 200, 300, 400, 500, 600, 700]
console.log('原数组是：'+a)
var res=a.slice(2)
console.log('提取的元素是'+res)

 预览：

 (2). 如果写 2个参数，使用方法如下：

var a=[100, 200, 300, 400, 500, 600, 700]
console.log('原数组是：'+a)
 var res=a.slice(2,5)
 console.log('提取的元素是：'+res);

 预览：

 (3).slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素），使用方法如下：

 var a = [100, 200, 300, 400, 500, 600, 700];
        console.log('原数组是：'+a);
       
        var res=a.slice(-2)
        console.log('提取的元素是：'+res);

        var a = [100, 200, 300, 400, 500, 600, 700];
        console.log('原数组是：'+a);
       
        var res=a.slice(-2,-1)
        console.log('提取的元素是：'+res);

 预览：

9、splice() 数组中万能的删除和添加

语法：

array.splice(index, howmany, item1, ....., itemX)

 

注意： 主要看第二个参数，第二个参数是0表示添加，第二个参数 是非0，表示删除

(1). splice()数组中添加新元素

第一个参数 1 表示 从哪开始元素操作元素，

第二个参数 0 表示 添加元素（添加的元素是什么，紧跟着写出来即可）

 var a = ['小明','小红','小杨'];
    console.log('原数组是：'+a);
    a.splice(1,0,'小白')
    console.log('添加元素后的数组是：'+a);

 预览：

(2). 删除数组中的元素，删除几个第一个参数 0 表示 从哪开始删元素，第二个参数 2 表示 删除几个元素

 var a = ['小明','小红','小杨'];
        console.log('原数组是：'+a);
         a.splice(0,2)
        console.log('删除元素后的数组是：'+a);

 预览：

(3). 先 删除 项目 ，再执行 添加 新项目 的操作

var f = ["Banana", "Orange", "Apple", "Mango"];
        console.log('原数组：'+f)
        //     第一个参数 2 表示 从哪开始删元素，
        //     第二个参数 1 表示 删除几个元素
       
        f.splice(2,1,'小马','小余');
        console.log('操作之后的数组是：'+f);

 预览：

10、reverse() 反转排序

reverse() 将一个数组中的元素的"顺序反转"排序

var a = [100,200,300,'小红','小天',400,500,600]
        console.log('原数组：'+a);
        a.reverse();
        console.log('操作之后的数组是：'+a);

 预览：

11、concat()合并数组

concat()合并数组 (将一个或多个数组合并成一个大数组！)，返回给我们一个大数组

   var a = [1,2,3]
    var b = [100,200,300]
    var c = [800,900]
    console.log('原数组：'+c);
    var res=c.concat(a,b)
    console.log("合并后的数组："+res);

 预览：

12、sort()数组排序

（1）对字母排序

  //  （1）对字母排序
    var f=['B','O','A','M']
    console.log('原数组：'+f);
    f.sort()
    console.log('排序后的数组：'+f);

 预览：

（2）对数字排序,我们需要写一个回调函数

var a=[20,6,9]
console.log('原数组：'+a);
//升序
a.sort((m,n)=>{
return m-n

})
console.log('排序后的数组：'+a);

 预览：

var a=[20,6,9]
console.log('原数组：'+a);
a.sort((m,n)=>{
return n-m
})
console.log('排序后的数组：'+a)
}

 预览：