JS数组

2323232323
114 阅读10分钟

数组介绍

JS数组的概念

数组的字面意思就是一组数据，js的数组的成员可以是任意类型,可以动态扩容。

数组的作用

使用单独的变量名来存储一系列的值, 数组是特殊的变量，它可以同时保存一个以上的值。

数组的定义和使用

数组的定义

方式一 构造函数定义

new Array（参数，参数,...）

  • 如果Array里有一个参数,并且是数值类型,表示数组的初始值长度
  • 如果有两个及以上参数,那就是数组的成员有多个
  • new可以省略,但一般尽量写上
var arr = new Array();   //定义一个空数组 
var arr = new Array(10);  //创建一个包含 10 个元素的数组，没有赋值
var arr = new Array("文本",30);  //创建一个数组有两个元素

方式二 字面量定义

var arr = [1,2,3,4,5]; //推荐语法

数组元素的获取

数组可以通过下标取值与赋值，下标（又叫做索引）,数组的下标是从0开始的，所以数组的最后一个元素的下标为： arr.length – 1。

注意: 下标可以是变量或表达式

var arr = [11, 22, 33, 44];
console.log(arr[1]);//22  取值
arr[1]=222;//赋值
console.log(arr[1]);//222

length属性

数组长度(数组元素的个数) : arr.length
length属性, 不仅是只读的，也可以设置

var arr = [11, 22, 33, 44];
console.log(arr);//[11,22,33,44]  length的值为4
arr.length = 1;
console.log(arr);//[11]  length的值为1
arr.length = 4;
console.log(arr);//[11,空属性X3]  length的值为4

数组遍历

for 循环遍历

通过索引遍历数组元素，遍历稀疏数组时会打印出undefined,根据数组的length长度,来决定遍历的次数。

var arr = [11, 22, , 44,,,77];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
//控制台输出:
//  11
//  22
//  undefined
//  44
//  undefined
//  undefined
//  77

for...in 循环遍历

通过索引遍历数组元素，遍历稀疏数组时不会打印出undefined，根据内容来决定遍历的次数。

var arr = [11, 22, , 44,,,77];
for(var key in arr){
    console.log(arr[key]);
}
//控制台输出:
//  11
//  22
//  44
//  77

for...of(ES6) 循环遍历

直接遍历数组元素，遍历稀疏数组时会打印出undefined，根据数组的length长度,来决定遍历的次数。

var arr = [11, 22, , 44,,,77];
for(var value of arr){
    console.log(value);
}
//控制台输出:
//  11
//  22
//  undefined
//  44
//  undefined
//  undefined
//  77

for 和 for...in 和 for...of 的区别?

  1. for和for..of是根据数组的length长度,来决定遍历的次数;for...in是根据内容来决定遍历次数。
  2. for和for..of遍历遍历稀疏数组时会打印出undefined;for...in遍历稀疏数组时不会打印出undefined。
  3. for和for..of只能遍历下标为数值的值;for...in能遍历下标不是数值的值。

示例代码：

var arr = [11, 22, 33];
arr["aa"] = 88;
arr["bb"] = 99;
console.log(arr);
console.log("-----------------------------------------");

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

for (var key in arr) {
    console.log("for...in", key, arr[key]);
}

for (var value of arr) {
    console.log("for..of", value);
}

控制台输出：

image.png

数组函数

基本函数（ES3）

pop()

删除数组的最后一位,返回被删除的元素,它会改变原来的数组。

var arr = [11, 22, 33, 44]
var res = arr.pop();
console.log(res);//44
console.log(arr);//(3)[11, 22, 33]

push()

往数组最后位置添加元素（1个或多个）,返回数组的新长度。

var arr = [11, 22, 33, 44]
var res = arr.push(55, "aa");
console.log(res);//6
console.log(arr);//(6) [11, 22, 33, 44, 55, 'aa']

shift()

删除数组的第一位成员，返回被删除的成员

var arr = [11, 22, 33, 44]
        var res = arr.shift();
        console.log(res);//11
        console.log(arr);//(3) [22, 33, 44]

unshift()

往数组的第一个位置，添加一个或多个成员，返回数组长度

 var arr = [11, 22, 33, 44];
var res = arr.unshift("aa", "bb");
console.log(res);//6
console.log(arr);//(6) ['aa', 'bb', 11, 22, 33, 44]

sort()

排序，它默认根据ASCII码，进行比较

常见的ASCII码值

  • 0-9 48-57
  • A-Z 65-90
  • a-z 97-122
var arr = [1, 45, 23, 7, 9, 10, 25]
arr.sort(function (a, b) {
    return a-b; //升序
    //return b - a;//降序
})
console.log(arr);//(7) [1, 7, 9, 10, 23, 25, 45]

reverse()

颠倒数组中元素的顺序

var arr = [11, 22, 33, 44]
arr.reverse();
console.log(arr);//(4) [44, 33, 22, 11]

slice()

截取数组，根据数组的下标截取返回一个新的数组，会改变原数组。它包含开始位置，不包含结束位置。

var arr = [11, 22, 33, 44]
var newArr = arr.slice(1, 3);
console.log(newArr);//(2) [22, 33]
console.log(arr);//(4) [11, 22, 33, 44]

splice()

  1. 有两个参数时表示删除，返回被删除的元素组成的数组，改变原数组
var arr = [11, 22, 33, 44]
var res = arr.splice(3, 1)
console.log(res);//[44]
console.log(arr);//(3) [11, 22, 33]
  1. 有三个参数第二个参数是0时表示插入，返回一个空数组，改变原数组
var arr = [11, 22, 33, 44];
var res = arr.splice(3, 0, 55, "aa");
console.log(res);//[]
console.log(arr);//(6) [11, 22, 33, 55, 'aa', 44]
  1. 有三个参数第二个参数是1或以上的值时表示替换，返回被替换的元素组成的数组，改变原数组
var arr = [11, 22, 33, 44];
var res = arr.splice(2, 2, 55, "aa");
console.log(res);//[33, 44]
console.log(arr);//(4) [11, 22, 55, 'aa']

concat()

连接两个或更多的数组，并返回一个新数组

var arr1 = [11, 22, 33, 44]
var arr2 = [55, 66, 77]
var res = arr1.concat(arr2, "新元素", 12)
console.log(res);//(9) [11, 22, 33, 44, 55, 66, 77, '新元素', 12]

join()

把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔，默认用","分隔。

var date = [2023, 9, 8]
console.log(date.join());//2023,9,8
console.log(date.join("-"));//2023-9-8
console.log(date.join("/"));//2023/9/8

总结：会改变原来数组的方法有哪些？
会改变：pop()、push()、shift()、unshift()、sort()、reverse()、splice()
不改变：slice()、concat()、join()

小练习：实现数组拷贝的方法（浅拷贝）

//实现数组拷贝的方法（浅拷贝）
var arr = [11, 22, 33, 44]
//方法一 concat()
var arr1 = arr.concat();
console.log(arr1);//(4) [11, 22, 33, 44]
console.log(arr);//(4) [11, 22, 33, 44]

//方法2 slice()
var arr2 = arr.slice(0)
console.log(arr2);//(4) [11, 22, 33, 44]
console.log(arr);//(4) [11, 22, 33, 44]

高阶函数（ES5）

forEach()

循环遍历数组，只能做遍历，没有返回值，不能被中断。

var arr = [11, 22, 33, 44]
//item表示的是元素,index表示的是下标,arr表示的是当前的数组
arr.forEach(function (item, index, arr) {
    console.log(item, index, arr);
})

控制台输出

image.png

如果一定要中断循环遍历的话，可以制造异常，然后结合try...catch使用，代码如下

try {
   arr.forEach(function (item, index, arr) {
       console.log(item, index, arr);
       if (index == 2) {//中断条件
           throw new Error("制造异常");
       }
   })
} catch (error) {

}

map()

循环遍历数组，会返回一个新的数组，新数组的内容由回调函数决定。

var arr = [11, 22, 33, 44]
//item表示的是元素,index表示的是下标,arr表示的是当前的数组
var res = arr.map(function (item, index, arr) {
    return item * 10;
})
console.log(res);//(4) [110, 220, 330, 440]
console.log(arr);//(4) [11, 22, 33, 44]

some()

只要有一个满足条件循环就会结束，且返回true。如果循环结束都没有满足条件，就返回false。

var arr = [11, 22, 33, 44]
//item表示的是元素,index表示的是下标,arr表示的是当前的数组
var res = arr.some(function (item, index, arr) {
    return item > 40;
})
console.log(res);//true

var arr = [11, 22, 33, 44]
//item表示的是元素,index表示的是下标,arr表示的是当前的数组
var res = arr.some(function (item, index, arr) {
    return item > 50;
})
console.log(res);//false

every()

只要有一个不满足条件循环就会结束，且返回false。如果循环结束所有元素都满足条件，就返回true。

var arr = [11, 22, 33, 44]
//item表示的是元素,index表示的是下标,arr表示的是当前的数组
var res = arr.every(function (item, index, arr) {
    return item > 40;
})
console.log(res);//false

var arr = [11, 22, 33, 44]
//item表示的是元素,index表示的是下标,arr表示的是当前的数组
var res = arr.every(function (item, index, arr) {
    return item > 10;
})
console.log(res);//true

filter()

过滤，返回新的数组，不会改变原数组，数组的内容由回调函数的条件决定。

var arr = [11, 22, 33, 44]
//item表示的是元素,index表示的是下标,arr表示的是当前的数组
var res = arr.filter(function (item, index, arr) {
    return item > 20;
})
console.log(res);//(3) [22, 33, 44]

reduce()

归并，有两个参数，第一个参数是回调函数，第二个参数是给pre的初始值。

var arr = [11, 22, 34, 44, 55];
//pre:就是上一次回调函数的返回值，没有返回值就是undefined。
//没有给pre初始值时，就会占用arr中的第一个数组项，cur也就从为1的下标项开始。
//cur:当前的元素值
//index:下标
//arr:当前的数组
var res = arr.reduce(function (pre, cur, index, arr) {
    //pre 11  cur 22  --> 33
    //pre 33  cur 34  --> 67
    //pre 67  cur 44  --> 111
    //pre 111 cur 55  --> 166
    return pre + cur; //这个return决定了下一轮循环pre的值
})
console.log(res);//166
var res = arr.reduce(function (pre, cur, index, arr) {
    return pre + cur;
}, 100)//给了pre初始值
console.log(res);//266

indexOf()

通过元素查找元素第一次出现的下标值，元素存在返回下标值，元素不存在返回-1。 有两个参数，第一个参数是查找的值，第二个参数是开始查找的位置，第二个参数可以省略不写。

var arr = [11, 22, 33, 44];
console.log(arr.indexOf(22));//1
console.log(arr.indexOf(22, 2));//-1 第二个参数表示从下标为2的位置从前往后查询，查找到的第一个22的下标，这里没有找到

lastIndexOf()

通过元素查找元素最后一次出现的下标值，元素存在返回下标值，元素不存在返回-1。
有两个参数，第一个参数是查找的值，第二个参数是开始查找的位置，第二个参数可以省略不写。

var arr = [11, 22, 33, 44, 22, 11, 45, 66, 22];
console.log(arr.lastIndexOf(22));//8
console.log(arr.lastIndexOf(22, 4));//4 第二个参数表示从下标为4的位置从后往前查询，查找到的第一个22的下标，这里找到了在下标为4的这个位置

高阶函数（ES6）

find()

通过条件查找，如果存在返回满足条件的这一项，如果不存在就返回undefined。

var arr = [
    { id: "1", name: "刘亦菲", age: "18" },
    { id: "2", name: "刘诗诗", age: "18" },
    { id: "3", name: "杨幂", age: "18" },
    { id: "4", name: "唐嫣", age: "18" }
]
var res = arr.find(function (item, index) {
    return item.id == 4;
})
console.log(res);//{id: '4', name: '唐嫣', age: '18'}

findIndex()

通过条件查找，如果存在返回满足条件的这一项的下标，如果不存在就返回-1。

var arr = [
    { id: "1", name: "刘亦菲", age: "18" },
    { id: "2", name: "刘诗诗", age: "18" },
    { id: "3", name: "杨幂", age: "18" },
    { id: "4", name: "唐嫣", age: "18" }
]
var index = arr.findIndex(function (item, index) {
    return item.id == 3;
})
console.log(index);//2

includes()

检查一个数组是否包含一个特定的元素，如果有则返回true。如果没有返回false。

var arr = [11, 22, 33, 44, 22, 11, 45, 66, 22];
console.log(arr.includes(22));//true
console.log(arr.includes(100));//false

小练习：去除数组中重复的数，返回一个新数组。

var arr = [11, 21, 1, 5, 11, 3, 5, 11, 5, 74, 51, 11];
function notRepeatArr(arr) {
    var newArr = []
    for (var i = 0; i < arr.length; i++) {
        // if(newArr.indexOf(arr[i])==-1){ //方法一
        //     newArr.push(arr[i])
        // }
        if (!newArr.includes(arr[i])) {//方法二
            newArr.push(arr[i])
        }
    }
    return newArr;
}
console.log(notRepeatArr(arr));//(7) [11, 21, 1, 5, 3, 74, 51]
avatar
文章
阅读
粉丝