探索 JavaScript 数组的奇妙世界

一、数组是什么

1.1 引言

嘿，小伙伴们！欢迎来到 JavaScript 数组的奇妙世界🎈！数组就像是一个魔法口袋，里面可以装各种各样的数据，无论是数字、字符串、对象，还是其他数组，都能轻松收纳🤩。在编程中，数组可是非常重要的哦，它能让我们高效地管理和处理数据，就像是我们的得力助手一样💪！

1.2 数组的定义和重要性

数组（Array）是一种按顺序存储数据的数据类型。它可以将多个数据按照一定的顺序排列在一起，每个数据都有一个对应的索引，从 0 开始递增。数组的出现，让我们能够更加方便地存储和操作大量的数据，提高了程序的效率和可读性。

1.3 应用场景

想象一下，你正在开发一个购物网站，需要存储商品的信息；或者在编写一个游戏，需要记录玩家的得分。这时候，数组就会大显身手，帮你轻松搞定这些数据管理的任务😎！

二、数组的基本使用

2.1 声明数组

1. 使用方括号 [] 直接创建数组：

let numbers = [1, 2, 3, 4, 5];
let colors = ["red", "blue", "green"];
let mixedArray = [10, "hello", { name: "John" }, [20, 30]];

2. 使用 new Array() 构造函数创建数组：

let arr1 = new Array(10, 20, 30);
let arr2 = new Array("apple", "banana", "orange");

2.2 访问数组元素

通过索引来访问数组中的元素，索引从 0 开始：

let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]);  // 输出 "apple"
console.log(fruits[2]);  // 输出 "orange"

2.3 数组的长度和一些术语

1. 数组的长度可以通过 length 属性获取：

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.length);  // 输出 5

2. 一些术语：
   • 元素：数组中保存的每个数据都叫数组元素。
   • 下标：数组中数据的编号。
   • 长度：数组中数据的个数。

2.4 遍历数组

使用 for 循环遍历数组：

let fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

三、操作数组

3.1 新增元素

1. 使用 push() 方法在数组末尾添加元素：

let animals = ["dog", "cat"];
animals.push("rabbit");
console.log(animals);  // 输出 ["dog", "cat", "rabbit"]

2. 使用 unshift() 方法在数组开头添加元素：

let cities = ["Shanghai", "Beijing"];
cities.unshift("Guangzhou");
console.log(cities);  // 输出 ["Guangzhou", "Shanghai", "Beijing"]

3.2 删除元素

1. 使用 pop() 方法删除数组末尾的元素：

let fruits = ["apple", "banana", "orange"];
fruits.pop();
console.log(fruits);  // 输出 ["apple", "banana"]

2. 使用 shift() 方法删除数组开头的元素：

let numbers = [1, 2, 3];
numbers.shift();
console.log(numbers);  // 输出 [2, 3]

3. 使用 splice() 方法删除指定元素：

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2);  // 从索引 1 开始，删除 2 个元素
console.log(arr);  // 输出 [1, 4, 5]

3.3 修改元素

通过索引直接修改数组中的元素：

let colors = ["red", "blue", "green"];
colors[1] = "yellow";
console.log(colors);  // 输出 ["red", "yellow", "green"]

3.4 数组的拼接

使用 concat() 方法拼接两个数组：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let combined = arr1.concat(arr2);
console.log(combined);  // 输出 [1, 2, 3, 4, 5, 6]

四、数组案例

4.1 基础案例

1. 数组求和

let arr = [2, 6, 1, 7, 4];
let sum = 0;
for (let num of arr) {
    sum += num;
}
let average = sum / arr.length;
console.log('数组元素的和为：' + sum + '，平均值为：' + average);

2. 数组求最大值和最小值

let arr = [2, 6, 1, 77, 52, 25, 7];
let max = arr[0];
for (let i = 1; i < arr.length; i++) {
    if (arr[i] > max) {
        max = arr[i];
    }
}
console.log('数组中的最大值为：' + max);

let min = arr[0];
for (let i = 1; i < arr.length; i++) {
    if (arr[i] < min) {
        min = arr[i];
    }
}
console.log('数组中的最小值为：' + min);

4.2 进阶案例

1. 数组筛选

let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        newArr.push(arr[i]);
    }
}
console.log('大于等于 10 的元素：' + newArr);

2. 数组去 0 案例

let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
    if (arr[i]!== 0) {
        newArr.push(arr[i]);
    }
}
console.log('去除 0 后的数组：' + newArr);

3. 冒泡排序

let arr = [2, 3, 1, 4, 5];
for (let i = 0; i < arr.length - 1; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
            let temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
console.log('冒泡排序后的数组：' + arr);

4. 根据数据生成柱形图

* {
    margin: 0;
    padding: 0;
}

.box {
    display: flex;
    width: 700px;
    height: 300px;
    border-left: 1px solid pink;
    border-bottom: 1px solid pink;
    margin: 50px auto;
    justify-content: space-around;
    align-items: flex-end;
    text-align: center;
}

.box>div {
    display: flex;
    width: 50px;
    background-color: pink;
    flex-direction: column;
    justify-content: space-between;
}

.box div span {

    margin-top: -20px;
}

.box div h4 {
    margin-bottom: -35px;
    width: 70px;
    margin-left: -10px;
}

// 1. 四次弹框效果
// 声明一个新的数组
 let arr = []
 for (let i = 1; i <= 4; i++) {
     // let num = prompt(`请输入第${i}季度的数据:`)
     // arr.push(num)
     arr.push(prompt(`请输入第${i}季度的数据:`))
     // push记得加小括号，不是等号赋值的形式
 }
 // console.log(arr)  ['123','135','345','234']
 // 盒子开头
 document.write(` <div class="box">`)

 // 盒子中间 利用循环的形式  跟数组有关系
 for (let i = 0; i < arr.length; i++) {
     document.write(`
       <div style="height: ${arr[i]}px;">
         <span>${arr[i]}</span>
         <h4>第${i + 1}季度</h4>
       </div>          
     `)
 }
 // 盒子结尾
 document.write(` </div>`)

五、注意事项和最佳实践

5.1 常见问题

1. 注意数组的索引越界问题哦，访问不存在的索引会导致错误哒😜。
2. 在操作数组时，要注意方法的返回值，有些方法会改变原数组，有些方法会返回新的数组或其他值哦。

5.2 最佳实践

1. 对于大型数组的操作，要考虑性能问题，可以选择合适的算法和数据结构来优化呀😃。
2. 尽量使用简洁明了的代码来操作数组，这样可以提高代码的可读性和可维护性哦👍。

六、总结

哇哦！通过这篇文章，我们一起探索了 JavaScript 数组的奇妙世界！数组是一种非常强大的数据结构，它可以让我们轻松地存储和管理各种数据。在实际编程中，我们要熟练掌握数组的基本使用和操作方法，同时注意一些常见问题和最佳实践，这样才能写出高效、可靠的代码。希望大家都能在 JavaScript 的世界里玩得开心，创造出更多精彩的程序！💪