Skip to content

定义

作用:存储一组变量
取值:数组名[下标]
元素:数组中保存的每个数据都叫数组元素
下标:数组中数据的编号
长度:数组中数据的个数,通过数组的length属性获得

1.创建数组

使用new Array() 创建数组

javascript
// 元素值类型为字符型
var area = new Array('Beijing', 'Shanghai', 'Shenzhen');
// 元素值类型为数值型
var score = new Array(56, 68, 98, 44);
// 元素值类型为混合型
var mix = new Array(123, 'abc', null, true, undefined);
// 空数组
var arr1 = new Array();  // 或 var arr2 = new Array;

使用 [ ] 创建数组

javascript
var weather = ['wind', 'fine',];      // 相当于:new Array('wind', 'fine',)
var empty = [];                       // 相当于:new Array
var mood = ['sad', , , ,'happy'];     // 控制台输出mood:(5) ["sad", empty × 3, "happy"]

2.操作数组

获取数组长度

使用.length

javascript
var arr1 = [78, 88, 98];
var arr2 = ['a', , , , 'b', 'c'];
console.log(arr1.length);   // 输出结果为:3
console.log(arr2.length);   // 输出结果为:6

设置数组长度

使用.length并初始化
大于留空
小于删除

javascript
var arr1 = [];
arr1.length = 5;
console.log(arr1);      // 输出结果:(5) [empty × 5]
var arr2 = [1, 2, 3];
arr2.length = 4; 
console.log(arr2);      // 输出结果:(4) [1, 2, 3, empty]
var arr3 = ['a', 'b'];
arr3.length = 2; 
console.log(arr3);      // 输出结果:(2) ["a", "b"]
var arr4 = ['hehe', 'xixi', 'gugu', 'jiujiu'];
arr4.length = 3; 
console.log(arr4);      // 输出结果:(3) ["hehe", "xixi", "gugu"]

遍历数组

for in 循环

javascript
var navlistArr = ['首页','新闻','关于'];
var str = '<ul>';
for(var i in navlistArr){
    str += '<li><a>'+ navlistArr[i] +'</a></li>';
}
str += '</ul>';
document.getElementById('navlist').innerHTML = str;

3.操作元素

使用 数组名[下标]的方式

增加元素

javascript
// 为空数组添加元素
var height = [];
height[5] =  183;
height[0] =  175;
height[3] =  150;
console.log(height);      // 输出结果:(6) [175, empty × 2, 150, empty, 183]

// 为非空数组添加元素
var arr = ['Asa', 'Taylor'];
arr[2] = 'Tom';
arr[3] =  'Jack';
console.log(arr);         // 输出结果:(4) ["Asa", "Taylor", "Tom", "Jack"]

删除元素

delete 数组名[下标]
删除后依旧占用空间

javascript
var stu = ['Tom', 'Jimmy', 'Lucy'];
console.log(stu);     // 输出结果:(3) ["Tom", "Jimmy", "Lucy"]
delete stu[1];        // 删除数组中第2个元素
console.log(stu);     // 输出结果:(3) ["Tom", empty, "Lucy"]

修改元素

javascript
var arr = ['a', 'b', 'c', 'd'];
arr[2] = 123;
arr[3] = 456;
console.log(arr);         // 输出结果:(4) ["a", "b", 123, 456]

解构赋值

javascript
// 传统方式
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];
javascript
// ES6解构赋值
var arr = [1, 2, 3];
[a, b] = arr;
console.log(a + ' - ' + b);     // 输出结果:1 - 2
var n1 = 4, n2 = 8;
[n1, n2] = [n2, n1];
console.log(n1 + ' - ' + n2);   // 输出结果:8 - 4

查找数组

javascript
var arr = ['hello', 'JavaScript', 22.48, true];
console.log(arr[0]);
console.log(arr[2]);
console.log(arr);

4.数组属性与方法

方法功能
push()向数组尾部添加元素
pop()删除数组尾部元素
shift()删除数组头部元素
unshift()向数组头部添加元素
方法功能
reverse()反转数组
sort()对数组元素进行排序
join()将数组元素连接成字符串
concat()连接两个数组
slice()截取数组
splice()删除数组元素
indexOf()查找数组元素位置
forEach()遍历数组
map()映射数组
filter()过滤数组
every()判断数组元素是否满足条件
some()判断数组元素是否满足条件
reduce()数组元素累加
reduceRight()数组元素累加
find()查找数组元素
findIndex()查找数组元素位置
fill()填充数组
entries()返回数组元素键值对
keys()返回数组元素键名
values()返回数组元素键值
Symbol.iterator()返回数组迭代器
includes()判断数组是否包含某个元素
Array.isArray()判断是否为数组
Array.from()将类数组对象转换为数组
Array.of()将一组值转换为数组
indexOf()查找数组元素位置
lastIndexOf()查找数组元素位置

5.MAP集合

6.set集合

7.迭代器

一、基本操作

1.数组定义

作用:存储一组变量
取值:数组名[下标]
元素:数组中保存的每个数据都叫数组元素
下标:数组中数据的编号
长度:数组中数据的个数,通过数组的length属性获得

2.创建数组

javascript
var 数组名 = new Array()
var 数组名 = [ ]
javascript
  var arr = new Array(123, 'abc', null, ,true, undefined)
  var arr = [123, 'abc', null, ,true, undefined]

3.获取长度

javascript
.length
javascript
var arr1 = [78, 88, 98];
console.log(arr1.length);   // 输出结果为:3

4.遍历数组

for in 循环

javascript
var navlistArr = ['首页','新闻','关于'];
var str = '<ul>';
for(var i in navlistArr){
    str += '<li><a>'+ navlistArr[i] +'</a></li>';
}
str += '</ul>';
document.getElementById('navlist').innerHTML = str;

5.增加元素

javascript
// 为空数组添加元素
var height = [];
height[5] =  183;
height[0] =  175;
height[3] =  150;
console.log(height);      // 输出结果:(6) [175, empty × 2, 150, empty, 183]

// 为非空数组添加元素
var arr = ['Asa', 'Taylor'];
arr[2] = 'Tom';
arr[3] =  'Jack';
console.log(arr);         // 输出结果:(4) ["Asa", "Taylor", "Tom", "Jack"]

6.删除元素

删除后依旧占用空间

javascript
var stu = ['Tom', 'Jimmy', 'Lucy'];
console.log(stu);     // 输出结果:(3) ["Tom", "Jimmy", "Lucy"]
delete stu[1];        // 删除数组中第2个元素
console.log(stu);     // 输出结果:(3) ["Tom", empty, "Lucy"]

7.修改元素

javascript
var arr = ['a', 'b', 'c', 'd'];
arr[2] = 123;
arr[3] = 456;
console.log(arr);         // 输出结果:(4) ["a", "b", 123, 456]

解构赋值

javascript
// 传统方式
var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];
javascript
// ES6解构赋值
var n1 = 4
var n2 = 8;
[n1, n2] = [n2, n1];

8.查找数组

javascript
var arr = ['hello', 'JavaScript', 22.48, true];
console.log(arr[0]);
console.log(arr[2]);
console.log(arr);

二、二维数组

1.创建数组

javascript
var 数组名 = new Array(new Array(),new Array())
var 数组名 = [[],[]]
javascript
var arr = new Array(new Array(12,59,66),new Array(212,32))
var arr = [[12,59,66],[212,32]]

2.遍历数组

javascript
var arr = [[12,59,66],[212,32]]
var sum = 0
for(let i in arr){
    for(let j in arr[i]){
        sum += arr[i][j]
    }
}
console.log(sum) // 381

3.数组转置

javascript
var arr = [[1,2,3],[4,5,6],[7,8,9],[10,11,12]]
console.log("转置前",arr)
/*
[
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [10,11,12]
]
*/
//定义空数组存放转置后的值
var res = []
for(i=0;i<arr[i].length;i++){
    //获取层数
    res[i] = []
    for(j=0;j<arr.length;j++){
        //交换位置
        res[i][j]=arr[j][i]
    }
}
console.log("转置后",res)
/*
[
    [1, 4, 7, 10]
    [2, 5, 8, 11]
    [3, 6, 9, 12]
]
*/

三、数组排序

1.冒泡排序

javascript
var arr = [12,56,2,11,23,101,64]
for(i=1;i<arr.length;i++){
    for(j=0;j<arr.length-i;j++){
        if(arr[j]>arr[j+1]){
            var temp = arr[j]
            arr[j] = arr[j+1]
            arr[j+1] = temp
        }
    }
}
console.log(arr) // [2, 11, 12, 23, 56, 64, 101]

2.插入排序

3.快速排序

4.选择排序

5.希尔排序

6.归并排序

7.堆排序

8.桶排序

10.计数排序

四、数组方法

1.栈和队列

方法功能
push()向数组尾部添加元素
pop()删除数组尾部元素
shift()删除数组头部元素
unshift()向数组头部添加元素

2.检索方法

方法功能
includes()判断数组是否包含某个元素
Array.isArray()判断是否为数组
indexOf()查找数组中第一个该元素位置
lastIndexOf()查找数组中最后一个该元素位置

3.数组转字符串

方法功能
join()将数组元素连接成字符串
toString()返回一个字符串

4.数据过滤

方法功能
filter()过滤数组

直接修改数组

javascript
//筛选出偶数
const arr = [3,4,5,6,7,8]
const arr2 = arr.filter(number => number %2 == 0)
console.log(arr2) // [4,6,8]

数据筛选

javascript
//筛选高价值客户
//过去一年内消费总额超过10000元或订单数量超过10个的高价值客户
/*
customers:客人数组
id:唯一id
name:客人名称
orders:订单数组
amount:金额
date:日期
*/
const customers = [
  { id: 1, name: '张三', orders: [
    { amount: 1200, date: '2023-05-15' },
    { amount: 2500, date: '2023-07-22' },
    { amount: 1800, date: '2023-08-05' }
  ]},
  { id: 2, name: '李四', orders: [
    { amount: 9000, date: '2023-03-01' },
    { amount: 2200, date: '2023-09-12' }
  ]},
  { id: 3, name: '王五', orders: [
    { amount: 750, date: '2023-02-17' },
    { amount: 1100, date: '2023-04-03' },
    { amount: 1500, date: '2023-05-09' },
    { amount: 1300, date: '2023-06-21' }
  ]},
  { id: 4, name: '赵六', orders: [
    { amount: 2000, date: '2023-01-05' },
    { amount: 1700, date: '2023-02-20' },
    { amount: 2300, date: '2023-03-18' }
  ]},
  { id: 5, name: '孙七', orders: [
    { amount: 3500, date: '2023-04-08' },
    { amount: 4200, date: '2023-05-22' }
  ]},
  { id: 6, name: '老八', orders: [
    { amount: 550, date: '2023-03-02' },
    { amount: 850, date: '2023-08-16' }
  ]},
];

const highCustomer = customers.filter(people => { //从customers数组中筛选具体的对象
    const cost =people.orders.reduce((sum,times) => { //将上述对象中的orders中的amount累加
        const orderDate = new Date(times.date) //获取订单时间
        const currentDate = new Date() //获取当前日期 2025-1-6
        currentDate.setFullYear(currentDate.getFullYear() -2) 
        // getFullYear()获取当前时间 2025,setFullYear()设置当前时间 2025
        return sum + (orderDate >= currentDate ? times.amount : 0)
    },0) // 初始值为0,从0开始相加
    return cost >= 10000 || people.orders.length >10
})
 
console.log(highCustomer); 
/*
{ id: 2, name: '李四', orders: [
    { amount: 9000, date: '2023-03-01' },
    { amount: 2200, date: '2023-09-12' }
  ]}
*/

数据清洗

数据过滤

5.其他方法

方法功能
reverse()反转数组
sort()对数组元素进行排序
concat()连接两个数组
slice()截取数组
splice()删除数组元素
forEach()遍历数组
map()映射数组
every()判断数组元素是否满足条件
some()判断数组元素是否满足条件
reduce()数组元素累加
reduceRight()数组元素累加
find()查找数组元素
findIndex()查找数组元素位置
fill()填充数组
entries()返回数组元素键值对
keys()返回数组元素键名
values()返回数组元素键值
Symbol.iterator()返回数组迭代器
Array.from()将类数组对象转换为数组
Array.of()将一组值转换为数组

标签匹配

修改原数组

  • push:末尾添加
  • pop:末尾删除
  • unshift:开头添加
  • shift:开头删除
  • splice:增删改
  • reverse:反转
  • sort:排序

不修改原数组

  • concat:合并
  • slice:提取
  • map:挨个执行函数
  • filter:过滤
  • flat:拉平数组
  • flatMap:先map再flat

迭代与遍历

  • forEach:挨个执行函数,不返回
  • reduce:累加器
  • every:检查全部满足
  • some:检查部分满足

查找与判断

  • find:找第一个元素
  • findIndex:找第一个元素索引
  • includes:判断是否包含
  • indexOf:找首次出现元素索引
  • lastindexOf:找最后出现元素索引

转换与拼接

  • join:添加连接符号
  • toString:转字符串
  • toLocalString:转本地化字符串