JavaScript第五天数组

m0_74242675

已于 2024-02-07 11:14:20 修改

阅读量574

点赞数 8

分类专栏：前端 HTML css js 文章标签： javascript 开发语言 ecmascript

于 2024-02-07 10:45:23 首次发布

本文链接：https://blog.csdn.net/m0_74242675/article/details/136065035

版权

前端 HTML css js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

JavaScript中的对象和数组都是数据类型，用于存储和组织数据。

对象是一种复杂的数据类型，可以存储多个键值对。每个键值对由一个键（属性名）和一个值（属性值）组成。可以通过键来访问对象中的值。对象的属性可以是字符串、数字、布尔值、函数或其他对象。对象的属性是无序的，可以动态地添加、修改和删除。

例如，下面是一个表示一个人的对象的例子：

let person = {
  name: "John",
  age: 30,
  gender: "male",
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

console.log(person.name); // 输出 "John"
person.sayHello(); // 输出 "Hello, my name is John"

数组是一种有序的数据类型，可以存储多个值。每个值都有一个索引，可以通过索引来访问数组中的值。数组可以包含任意类型的值，包括字符串、数字、布尔值、函数、对象和其他数组。

例如，下面是一个表示一组数字的数组的例子：

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

numbers.push(6); // 在数组末尾添加一个值
console.log(numbers); // 输出 [1, 2, 3, 4, 5, 6]

numbers.pop(); // 移除数组末尾的值
console.log(numbers); // 输出 [1, 2, 3, 4, 5]

对象和数组是JavaScript中最常用的数据类型之一，它们在编程过程中经常被用来存储和操作数据。

1-对象数据类型

JavaScript中的对象（Object）是一种复杂数据类型，它可以存储多个键值对（key-value
pairs），每个键都是一个字符串，对应的值可以是任意类型。下面是一个简单的JavaScript对象示例：

// 创建一个表示用户信息的对象
let user = {
  // 键：属性名
  // 值：属性值
  name: "John Doe", // 字符串类型
  age: 30, // 数字类型
  isStudent: true, // 布尔类型
  hobbies: ["reading", "painting"], // 数组类型
  address: {
    street: "123 Main St.",
    city: "New York",
    country: "USA" // 内部嵌套另一个对象
  },
  greet: function() { // 函数作为对象的属性也是允许的
    console.log("Hello, my name is " + this.name);
  }
};

// 访问对象属性和调用函数
console.log(user.name); // 输出 "John Doe"
console.log(user.age); // 输出 30
console.log(user.hobbies); // 输出 ["reading", "painting"]
console.log(user.address.street); // 输出 "123 Main St."

user.greet(); // 调用对象上的函数，输出 "Hello, my name is John Doe"

在这个例子中，user 是一个JavaScript对象，它包含多个不同类型的属性，并且还有一个作为属性的方法（函数）。

2-对象的基本操作

JavaScript对象的基本操作包括创建、访问、修改和删除属性。下面是一个完整的示例：

// 创建一个对象
let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  address: {
    street: "123 Main St.",
    city: "New York"
  }
};

// 访问对象的属性
console.log(person.firstName); // 输出 "John"
console.log(person.address.street); // 输出 "123 Main St."

// 修改对象的属性值
person.age = 31;
person.address.city = "Los Angeles";
console.log(person.age); // 输出 31
console.log(person.address.city); // 输出 "Los Angeles"

// 添加新的属性
person.email = "john.doe@example.com";
console.log(person.email); // 输出 "john.doe@example.com"

// 删除对象的属性（使用 delete 关键字）
delete person.age;
console.log(person.age); // 输出 undefined，因为age属性已被删除

// 检查对象是否具有某个属性（使用 in 运算符）
if ("email" in person) {
  console.log("The person has an email address.");
} else {
  console.log("The person does not have an email address.");
} // 输出 "The person has an email address."

// 遍历对象的所有可枚举属性（使用 for...in 循环）
for (let key in person) {
  if (person.hasOwnProperty(key)) { // 确保是对象自身的属性而非继承自原型链的属性
    console.log(`Key: ${key}, Value: ${person[key]}`);
  }
}

这个例子展示了如何创建一个JavaScript对象，如何读取、修改和删除其属性，以及如何检查对象是否有特定属性和遍历所有属性。

3-对象的遍历

在JavaScript中，可以使用多种方法遍历对象的属性。以下是两种常见的遍历方式：

for…in 循环：用于遍历对象自身（不包括原型链上的）可枚举属性。

let obj = {
  name: "Alice",
  age: 25,
  city: "New York"
};

// 使用 for...in 遍历对象
for (let key in obj) {
  if (obj.hasOwnProperty(key)) { // 可选步骤，确保只遍历对象自身的属性而非继承自原型的属性
    console.log(`Key: ${key}, Value: ${obj[key]}`);
  }
}

Object.keys() 方法结合 forEach 或 for 循环：先获取对象的所有可枚举属性名，然后遍历这些属性名。

let obj = {
  name: "Bob",
  age: 30,
  city: "San Francisco"
};

// 使用 Object.keys 和 forEach 遍历对象
Object.keys(obj).forEach(key => {
  console.log(`Key: ${key}, Value: ${obj[key]}`);
});

// 或者使用普通的 for 循环
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
  let key = keys[i];
  console.log(`Key: ${key}, Value: ${obj[key]}`);
}

以上两种方法都能实现对对象属性的遍历，但需要注意的是它们都只能遍历到可枚举属性。对于不可枚举属性和从原型链继承来的属性，则需要额外的方法或操作来访问。

4-不同数据类型的存储

在JavaScript中，不同的数据类型会被存储在内存中的不同位置，以下是一个示例来说明不同数据类型的存储：

// 声明并初始化不同数据类型的变量
let stringType = "Hello, World!"; // 字符串类型
let numberType = 42; // 数字类型
let booleanType = true; // 布尔类型
let nullType = null; // Null 类型
let undefinedType; // Undefined 类型
let objectType = { name: "John", age: 30 }; // 对象类型
let arrayType = [1, 2, 3]; // 数组类型
let functionType = function() { console.log("I am a function!"); }; // 函数类型

// 不同数据类型的存储方式：
// 1. 基本类型（值类型）：存储的是实际的值，它们直接存放在栈内存中。
//    - 字符串、数字、布尔、Null、Undefined 类型属于基本类型。

// 2. 引用类型（对象类型）：存储的是指向堆内存中实际对象的引用地址，而不是对象本身。
//    - 对象、数组和函数都是引用类型，它们在栈内存中存储一个指向堆内存中实际数据的指针。

// 注意：虽然描述了“栈”与“堆”的概念，但JavaScript引擎的具体实现可能有所不同，
// 它们不一定严格遵循这种内存模型，这里仅作为抽象理解的一种方式。

在JavaScript虚拟机内部，尽管具体的实现细节可能因引擎而异，但基本思想是，简单数据类型（字符串、数字、布尔值、null 和 undefined）通常以值的形式直接存储在栈空间上，而复杂数据类型（如对象、数组和函数）由于其可变性和动态性，会在堆内存中分配空间存储实际内容，并在栈内存中保存指向堆内存中对象的引用。

5-数组数据类型

在JavaScript中，数组（Array）是一种数据类型，用于存储有序的元素集合。每个元素可以通过其索引（index）来访问。以下是一个创建和操作数组的例子：

// 创建一个包含数字的数组
let numbers = [1, 2, 3, 4, 5];

// 创建一个包含多种数据类型的数组
let mixedData = ["apple", true, 10.5, {name: "John"}];

// 访问数组元素
console.log(numbers[0]); // 输出：1
console.log(mixedData[2]); // 输出：10.5

// 修改数组元素
numbers[0] = 6;
console.log(numbers); // 输出：[6, 2, 3, 4, 5]

// 添加新元素到数组末尾
numbers.push(7);
console.log(numbers); // 输出：[6, 2, 3, 4, 5, 7]

// 删除并返回数组最后一个元素
let lastNumber = numbers.pop();
console.log(lastNumber); // 输出：7
console.log(numbers); // 输出：[6, 2, 3, 4, 5]

// 遍历数组
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

以上示例展示了如何创建数组、访问和修改数组元素、向数组添加或删除元素以及遍历数组的所有元素。

6-数组的基本操作

以下是一个展示JavaScript数组基本操作的例子：

// 创建一个数组
let fruits = ["Apple", "Banana", "Cherry", "Date"];

// 1. 访问元素：通过索引访问数组中的元素
console.log(fruits[0]); // 输出: "Apple"

// 2. 修改元素：改变指定索引位置的元素值
fruits[1] = "Mango";
console.log(fruits); // 输出: ["Apple", "Mango", "Cherry", "Date"]

// 3. 添加元素：
//   a) 使用push方法在数组末尾添加元素
fruits.push("Elderberry");
console.log(fruits); // 输出: ["Apple", "Mango", "Cherry", "Date", "Elderberry"]

//   b) 使用unshift方法在数组开头添加元素
fruits.unshift("Durian");
console.log(fruits); // 输出: ["Durian", "Apple", "Mango", "Cherry", "Date", "Elderberry"]

// 4. 删除元素：
//   a) 使用pop方法删除并返回数组最后一个元素
let lastFruit = fruits.pop();
console.log(lastFruit); // 输出: "Elderberry"
console.log(fruits); // 输出: ["Durian", "Apple", "Mango", "Cherry", "Date"]

//   b) 使用shift方法删除并返回数组第一个元素
let firstFruit = fruits.shift();
console.log(firstFruit); // 输出: "Durian"
console.log(fruits); // 输出: ["Apple", "Mango", "Cherry", "Date"]

// 5. 遍历数组：
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 或者使用forEach方法遍历数组
fruits.forEach(function(fruit, index) {
  console.log(`Index ${index}: ${fruit}`);
});

// 6. 获取数组长度
console.log(fruits.length); // 输出: 4

// 7. 查找元素：查找数组中是否存在某个元素，这里用indexOf方法举例
console.log(fruits.indexOf("Mango")); // 输出: 1

这个例子展示了创建数组、访问、修改、添加和删除元素、遍历数组、获取数组长度以及查找特定元素在数组中的位置等基本操作。

7-冒泡排序法

冒泡排序是一种简单的排序算法，它通过不断交换相邻的不正确顺序的元素来逐步把较大的元素“冒泡”到数组的末尾。以下是一个JavaScript实现冒泡排序的例子：

// 定义一个冒泡排序函数
function bubbleSort(arr) {
  let len = arr.length;
  for (let i = 0; i < len - 1; i++) { // 外层循环控制遍历轮数（n-1次）
    for (let j = 0; j < len - 1 - i; j++) { // 内层循环控制每轮比较和交换操作
      if (arr[j] > arr[j + 1]) { // 如果当前元素比下一个元素大，则交换它们的位置
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; // 使用解构赋值进行快速交换
      }
    }
  }
  return arr;
}

// 测试冒泡排序函数
let unsortedArray = [5, 3, 8, 4, 2];
console.log("Before sorting:", unsortedArray);
let sortedArray = bubbleSort(unsortedArray);
console.log("After sorting:", sortedArray);

上述代码首先定义了一个名为 bubbleSort 的函数，该函数接受一个数组作为参数。在函数内部，我们使用了两个嵌套的 for 循环来遍历数组并对其中的元素进行比较和交换。当内层循环结束后，最大的元素将会被排至数组的最后一位。随着外层循环的推进，每一趟都会有一个最大（或最小）的元素被移到正确的位置上。最后返回排序后的数组。

执行这段代码后，未排序的数组 [5, 3, 8, 4, 2] 将会被排序成 [2, 3, 4, 5, 8] 并输出。

8-选择排序法

选择排序是一种简单直观的排序算法，它的工作原理是每一次从未排序的部分中找到最小（或最大）元素，并将其放到已排序部分的末尾。以下是JavaScript实现选择排序的一个例子：

// 定义一个选择排序函数
function selectionSort(arr) {
  let len = arr.length;
  
  // 遍历所有数组元素
  for (let i = 0; i < len - 1; i++) {
    // 找到剩余未排序部分中的最小值索引
    let minIndex = i;
    for (let j = i + 1; j < len; j++) {
      if (arr[j] < arr[minIndex]) { // 如果当前元素比已知最小值还小，则更新最小值索引
        minIndex = j;
      }
    }

    // 将找到的最小值与当前位置的元素交换
    if (minIndex !== i) {
      [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
    }
  }

  return arr;
}

// 测试选择排序函数
let unsortedArray = [5, 3, 8, 4, 2];
console.log("Before sorting:", unsortedArray);
let sortedArray = selectionSort(unsortedArray);
console.log("After sorting:", sortedArray);

执行这段代码后，未排序的数组 [5, 3, 8, 4, 2] 将会被排序成 [2, 3, 4, 5, 8] 并输出。

在上述代码中：

外层循环控制需要进行多少次“选择”操作。
内层循环用于寻找每次迭代过程中的最小值及其索引。
使用解构赋值来快速交换找到的最小值和当前位置的元素。

9-数组常用方法-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [1,2,3]

        //push 后面追加元素，
        //返回值 长度

        var res = arr.push("kerwin")
        console.log(arr)
        console.log("返回值",res)

        //pop 后面删除元素
        //返回值删除的元素
        var respop = arr.pop()
        console.log(arr)
        console.log("返回值",respop)


        //unshift 前面追加元素
        //返回值 长度

        var resunshift = arr.unshift("tiechui")
        console.log(arr)
        console.log("返回值",resunshift)


        // shift 前面删除元素
        // 返回值 删除的这个元素
        var resshift = arr.shift()
        console.log(arr)
        console.log("返回值",resshift)


        // splice  删除
        // var arr2 = ["kerwin","xiaoming","tiechui"]
        // var ressplice = arr2.splice(1,2)
        // console.log(arr2)
        // console.log("返回值",ressplice)
        // splice 增加
        var arr2 = ["kerwin","xiaoming","tiechui"]
        var ressplice = arr2.splice(1,0,"gangdaner","zhugeshanzhen")
        console.log(arr2)
        console.log("返回值",ressplice)


        arr2.splice(0,0,"aaaaaa")
        console.log(arr2)

        arr2.splice(6,0,"bbbbbbb")
        console.log(arr2)


        //resver 倒序

        var arr3 = [2,1,3,4]

        arr3.reverse()

        console.log(arr3)


        //sort 排序

        var arr4 = [11,21,56,7,3]
        // console.log(arr4)
        // arr4.sort()
        // console.log(arr4)

        // sort接受一个回调函数
        arr4.sort(function(x,y){
            return x-y
        })
        console.log(arr4)
    </script>
</body>
</html>

10-数组常用方法-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 不影响原数组的方法

        // concat 拼接
        // var arr1= [1,2,3]
        // var arr2 = [4,5,6]

        // var arr3 = arr1.concat(arr2,7,[8,9])

        // console.log(arr1,arr2,arr3)

        // var arr4= arr1.concat() //复制方式，
        // arr4.pop()
        // console.log(arr1,arr4)


        // join 数组=>字符串

        // var arr = [1,2,3,4,5]

        // document.write(arr.join("|"))
        // var arr = []
        // for(var i=0;i<5;i++){
        //     arr.push("<li>"+i+"</li>")
        // }
        // // console.log(arr)

        // document.write(arr.join(""))


        // slice  截取 (开始索引，结束索引)

        // var arr = ["aaa","bbbb","ccc","ddd","eeee"]


        // var arr2 = arr.slice(0,2)
        // var arr2 = arr.slice(2)
        // var arr2 =arr.slice()
        // arr2.pop()

        // var arr2 = arr.slice(2,-1) // 长度+ （-1）
        // console.log(arr,arr2)


        //indexOf -1 找不到 

        var arr = ["aaa","bbb","ccc","ddd","eee","aaa"]

        // for()

        // var res = arr.indexOf("aaa",2)

        // console.log(res)


        //lastIndexOf -1找不到

        var res = arr.lastIndexOf("kerwin",3)
        console.log(res)
    </script>
</body>
</html>

11-数组去重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1 -方法

        var arr = [1,2,3,4,3,5,6,2,1]

        // var arr2 = []
        
        // for(var i=0;i<arr.length;i++){
        //     if( arr2.indexOf(arr[i])=== -1){
        //         arr2.push(arr[i])
        //     }
        // }
        // console.log(arr,arr2)


        //2-方法 -利用对象

        // var obj = {}

        // for(var i=0;i<arr.length;i++){
        //     obj[arr[i]] = "随便"
        // }

        // console.log(obj)
        // var arr2 =[]
        // for(var i in obj){
        //     arr2.push(i-0)
        // }
        // console.log(arr2)

        //3- new Set

        var set1= new Set(arr)

        console.log(set1)

        var arr7 = Array.from(set1）
        console.log(arr7)

        // splice 改变
    </script>
</body>
</html>

12-数组常用方法-3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // foreach 遍历
        // var arr = ["aaa","bbb","ccc","ddd"]
        // //回调函数
        // arr.forEach(function(item,index){
        //     console.log(item,index)
        // })

        // map 映射
        // var arr = [1,2,3,4,5]

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

        // var arr2 = arr.map(function(item){
        //     return item*item*item
        // })
        // console.log(arr2)

        // var arr =["xiaoming","kerwin","tiechui"]
        // var arr2 = arr.map(function(item){
        //     return "<li>"+item+"</li>"
        // })

        // console.log(arr,arr2)
        // document.write(arr2.join(""))

        //filter 过滤

        // var arr = [
        //     {
        //         name:"aaa",
        //         price:100
        //     },
        //     {
        //         name:"bbb",
        //         price:200
        //     },
        //     {
        //         name:"ccc",
        //         price:300
        //     }
        // ]
        // var arr2 = arr.filter(function(item){
        //     // console.log(item)
        //     return item.price<200
        // })

        // console.log(arr2)
        //every 每一个
        // var arr = [90,90,2,94]

        // var arr2= arr.every(function(item){
        //     return item>=90
        // })

        // console.log(arr2)

        //some 只要一个满足条件 就是true
        // var arr = [9,92,2,4]

        // var arr2 = arr.some(function(item){
        //     return item>=90
        // })
        // console.log(arr2)


        // find
        // var arr = [
        //     {
        //         name:"语文",
        //         grade:90
        //     },
        //     {
        //         name:"数学",
        //         grade:95
        //     },
        //     {
        //         name:"体育",
        //         grade:100
        //     }
        // ]
        // // var arr2= arr.filter(function(item){
        // //     return item.grade===100
        // // })
        // var arr2= arr.find(function(item){
        //     return item.grade===100
        // })

        // console.log(arr2)
        var arr = [1,2,3,4,5]
        var arr2= arr.reduce(function(prev,item){
            return prev+item
        },"")

        console.log(arr2)
    </script>
</body>
</html>