JS数组

crainyday

前端 / JS

发布于：2019年4月2日

字数：2.3k字

时长：9分钟

JS数组(内建对象), 之前都是说的自定义对象.

一.数组简介

数组也是一个对象
它和普通对象的功能类似, 也是用来存储一些值的
不同的是, 普通对象用字符串作为索引, 数组用数字(>=0的整数)作为索引
数组的存储性能比普通对象好, 我们往往常用它来存储一些数据

1.操作数组

①数组中添加元素, 语法: 变量名[数字索引] = 值;
②读取数组元素, 语法: 变量名[数字索引]; 若读取不存在的索引不会报错, 会返回undefined
③获取数组长度, 变量名.length; 对于连续的数组, 这样可以得到数组长度, 对于不连续的数组这样使用length的值为当前数组的最大索引+1, 尽量不要用不连续的数组.
④人为的设置length, 若设置的length大于原长度, 则多余部分会空出来; 若设置的length小于原长度, 则多余的元素会被删除
⑤向数组最后一个位置添加索引, 变量名[变量名.length] = 某值;

var arr = new Array();
console.log(typeof arr);//输出:object

arr[0] = "hello";
console.log(arr[0]);//输出:"hello"
console.log(arr.length);//输出:1

arr[5] = 123;
console.log(arr);//输出:hello,,,,,123
console.log(arr.length);//输出:6
console.log(arr[1]);//输出:undefined

arr.length = 1;
arr[arr.length] = "China";
arr[arr.length] = 521;
arr[arr.length] = true;
console.log(arr);//输出:"hello","China",521,true

2.数组字面量

数组字面量创建数组, 语法: [];
例: var arr = [1,2,3,4,10];//允许在创建时指定要添加的数组元素

使用数组的构造函数创建数组的同时, 也可以添加元素, 此时将要添加的元素作为参数传递
例: var arr = new Array(1,5,6,2,3);

使用数组的构造函数创建数组, 也可以指定数组的初始长度
例: var arr = new Array(10);

注意: 数组的元素可以是任意类型的数据

var arr1 = [5,9,8,4,3,1];//字面量创建数组
var arr2 = new Array(5,9,8,4,3,1);
console.log(arr1);//输出:5,9,8,4,3,1
console.log(arr2);//输出:5,9,8,4,3,1
var arr3 = new Array(10);
console.log(arr3);//输出:,,,,,,,,,

//数组的元素可以是任意类型的数据
var arr4 = ["hello",true,123,null,undefined];
console.log(arr4);//输出:"hello",true,123,null,undefined
//可以是对象
var obj = {name:"Bob"};
arr4[arr4.length] = obj;
console.log(arr4[5].name);//输出:Bob
//可以是函数
arr4[arr4.length] = function(){
    alert("我是数组中的函数");
};
arr4[6]();//调用函数

//也可以放数组, 我们叫这种数组为: 二维数组
var arr = [[1,2,3],[4,5,6],[7,8,9]];
console.log(arr);//输出:1,2,3,4,5,6,7,8,9
console.log(arr.length);//输出:3
console.log(arr[0].length);//输出:3

二.数组常用方法

pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素, 并返回新的长度
shift() 删除并返回数组的第一个元素
unshift() 向数组的开头添加一个或更多元素, 并返回新的长度

slice() 从某个已有的数组返回选定的元素
--------该方法不会改变原数组, 而是将指定的数组元素封装到新数组中返回, 两个参数:
--------①截取开始位置的索引, 包括开始位置, 可以为负数(-1表示倒数第一个元素)
--------②截取结束位置的索引, 不包括结束位置(该参数可省略, 表示截取之后所有元素), 可以为负数
splice() 删除元素, 并向数组添加新元素
--------该方法会改变原数组, 会将指定元素从原数组中删除, 并将删除的元素作为返回值返回
--------参数(前两个必需):①开始位置的索引, 可以为负数(-1表示倒数第一个元素)
--------②要删除元素的数量
--------③第三个参数及以后, 可以传递新元素, 这些元素会自动插入到第一个参数索引的前边

concat() 连接两个或更多的数组, 并返回结果.(不影响原数组)
join() 把数组的所有元素放入一个字符串, 元素通过指定的分隔符(默认为逗号)进行分隔.
reverse() 颠倒数组中元素的顺序.(影响原数组)
sort() 对数组的元素进行排序(影响原数组), 默认按Unicode编码排序

A.pop push shift unshift

var arr = ["孙悟空", "猪八戒", "唐僧", "沙和尚"];
var result = arr.pop();
console.log(result); //输出:沙和尚
result = arr.push("白骨精", "玉帝", "蝎子精");
console.log(result); //输出:6
console.log(arr);//输出:孙悟空,猪八戒,唐僧,白骨精,玉帝,蝎子精
result = arr.shift();
console.log(result);//输出:孙悟空
result = arr.unshift("牛魔王", "红孩儿", "铁扇公主");
console.log(result);//输出:8
console.log(arr);//输出:牛魔王,红孩儿,铁扇公主,猪八戒,唐僧,白骨精,玉帝,蝎子精

B.slice splice

var arr = ["孙悟空", "猪八戒", "唐僧", "沙和尚"];
var result = arr.slice(-3,-1);
console.log(result);//输出:猪八戒,唐僧
result = arr.slice(-3);
console.log(result);//输出:猪八戒,唐僧,沙和尚

result = arr.splice(1,0,"玉帝","佛祖");
console.log(result);//输出:""
console.log(arr);//输出:孙悟空,玉帝,佛祖,猪八戒,唐僧,沙和尚

例: 数组去重练习

var arr = [1,1,2,2,3,5,4,4,6,8,2,1,3,2];
for(var i = 0;i < arr.length;i ++){
    for(var j = i+1;j < arr.length;j ++){
        if(arr[i] == arr[j]){
            arr.splice(j,1);
            j--;
        }
    }
}
console.log(arr);//输出:1,2,3,5,4,6,8

C.concat join

var arr1 = ["孙悟空","猪八戒","沙和尚"];
var arr2 = ["白骨精","高玉兰","玉兔精"];
var result = arr1.concat(arr2,"牛魔王","红孩儿");
console.log(result);//输出:"孙悟空","猪八戒","沙和尚","白骨精","高玉兰","玉兔精","牛魔王","红孩儿"

var str = result.join();
console.log(str);//输出:"孙悟空,猪八戒,沙和尚,白骨精,高玉兰,玉兔精,牛魔王,红孩儿"
str = result.join("");//分隔符为""
console.log(str);//输出:"孙悟空猪八戒沙和尚白骨精高玉兰玉兔精牛魔王红孩儿"

D.reverse sort

①sort方法, 默认按照Unicode编码排序, 对于数字的排序往往不是我们想要的结果, 这时我们就需要按照我们自己想要的排序方式, 编写一个回调函数传递给sort().
②sort的回调函数有两个形参, 代表要比较的数组中的两个元素, 第一个形参代表的元素相对于第二个靠前
③sort方法根据回调函数的返回值排序.
④参数为回调函数的函数, 我们一般用匿名方式传递参数

var arr = [2,5,7,3,1,6,9,8,4];
arr.sort(function(a,b){
    //return a-b;//升序
    return b-a;//逆序
});
console.log(arr);

三.遍历数组

1.for循环遍历

//遍历数组, 就是将数组的元素取出来使用
function Person(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Person.prototype.toString = function (){
    return "Person[name:"+this.name+",age:"+this.age+",sex:"+this.sex+"]";
};

var nameArr = ["孙悟空","沙悟净","猪悟能","唐玄奘","白骨精","玉兔精","蜘蛛精"];
var ageArr = [18,28,38,17,16,15,14];
var sexArr = ["男","男","男","男","女","女","女"];
var personArr = new Array(7);
for(var i = 0;i < personArr.length;i ++){
    personArr[i] = new Person(nameArr[i],ageArr[i],sexArr[i]);
    console.log(personArr[i]);
}
/* 输出:
Person[name:孙悟空,age:18,sex:男]
Person[name:沙悟净,age:28,sex:男]
Person[name:猪悟能,age:38,sex:男]
Person[name:唐玄奘,age:17,sex:男]
Person[name:白骨精,age:16,sex:女]
Person[name:玉兔精,age:15,sex:女]
Person[name:蜘蛛精,age:14,sex:女]
*/

练习: 自定义一个函数, 将上述对象数组中person对象age属性大于等于18的对象放入一个新数组, 并将该新数组作为函数的返回值返回.

function getAdult(perArr){
    var arr = new Array();
    for(var i = 0;i < perArr.length;i ++){
        if(perArr[i].age>=18){
            arr.push(perArr[i]);
        }
    }
    return arr;
}

2.数组的for Each()方法遍历

①该方法适用于IE 8.0+
②该方法需要一个函数作为参数, 我们称此函数为回调函数, 这种函数由我们创建, 但是我们不负责调用
③我们写回调函数时一般都以匿名形式给出
④数组中有几个元素, 该方法会执行几次, 该方法的调用者会将在数组中遍历到的元素以实参形式传递进函数, 我们可以定义形参来接收它们
⑤该函数被调用时会传递三个参数: 第一个, 当前正在遍历的元素;第二个, 当前正在遍历元素的索引;第三个, 正在遍历的数组.

//接上上述代码
personArr.forEach(
    function (per,index,perArr){
        console.log(perArr[index] == per);//全是true
        console.log(per);
    }
);
/* 结果:
true
Person[name:孙悟空,age:18,sex:男]
true
Person[name:沙悟净,age:28,sex:男]
true
Person[name:猪悟能,age:38,sex:男]
true
Person[name:唐玄奘,age:17,sex:男]
true
Person[name:白骨精,age:16,sex:女]
true
Person[name:玉兔精,age:15,sex:女]
true
Person[name:蜘蛛精,age:14,sex:女]
*/