javaScirpt学习第七章(数组)-第一部分-EW帮帮网

javaScirpt学习第七章(数组)-第一部分

1、数组简介

数组（Array）

数组也是一种复合数据类型，在数组可以存储多个不同类型的数据
数组中存储的是有序的数据，数组中的每个数据都有一个唯一的索引
可以通过索引来操作获取数据
- 数组中存储的数据叫做元素
  索引（index）是一组大于0的整数
  - 创建数组
    通过Array()来创建数组，也可以通过[]来创建数组
  - 向数组中添加元素
    语法:
    数组[索引] = 元素
  - 读取数组中的元素
    语法：
    数组[索引]
  - 如果读取了一个不存在的元素，不好报错而是返回undefined
    - length
- 获取数组的长度
- 获取的实际值就是数组的最大索引 + 1
- 向数组最后添加元素
  数组[数组.length] = 元素
- length 是可以修改的

创建数组的方式

const arr1 = new Array();
const arr2 = [];// 创建数组方式2 字面量
const arr3 = [‘鲁迅’,‘周树人’,‘李大钊’]; // 直接赋值

// 创建数组方式1

const arr1 = new Array();

// 创建数组方式2 字面量

const arr2 = [];

console.log(arr1);

console.log(arr2);

数组添加元素

// 添加元素方式1

arr1[0] = ‘张天宇’;

arr1[1] = ‘周杰伦’;

arr1[2] = ‘孙岚’;

console.log(‘arr1==>’,arr1)

跳跃性数组添加元素

我们不建议这么操作，因为中间其他元素会是空，占用更多的空间

// 不连续赋值，直接赋值100

// 使用数组时，应该避免非连续数组，因为它性能不好

arr1[100] = ‘张杰’;

console.log(‘arr1==>’, arr1)//[‘张天宇’, ‘周杰伦’, ‘孙岚’, 空 ×97, ‘张杰’]

读取数组

console.log(‘arr3[0]==>’, arr3[0])//鲁迅

console.log(‘arr3[10]==>’, arr3[10])//undefined

console.log(‘arr3[-1]==>’, arr3[-1])// undefined

length 操作

console.log(arr3.length)// 3

// 操作小技巧，往最后一个下标添加新的元素

for(let index = 1 ;index <= 10; index ++) {

arr3[arr3.length] = ‘元素’+index

}

console.log(arr3.length,arr3)//(13) [‘鲁迅’, ‘周树人’, ‘李大钊’, ‘元素1’, ‘元素2’, ‘元素3’, ‘元素4’, ‘元素5’, ‘元素6’, ‘元素7’, ‘元素8’, ‘元素9’, ‘元素10’]

修改length 的长度

// 修改length 长度，更长的长度

arr3.length = 100;

console.log(arr3)//(100) [‘鲁迅’, ‘周树人’, ‘李大钊’, ‘元素1’, ‘元素2’, ‘元素3’, ‘元素4’, ‘元素5’, ‘元素6’, ‘元素7’, ‘元素8’, ‘元素9’, ‘元素10’, 空 ×87]

// 将元素长度赋值更短，那么就会截取元素,超过3的长度截取掉了

arr3.length = 3;

console.log(arr3)//[‘鲁迅’, ‘周树人’, ‘李大钊’]

在这里插入图片描述

2、数组遍历

任何类型的值都可以成为数组中的元素,但是不建议，数组最好是存放同一类型的数据
- let arr1 = [1,‘hello’,null,undefined,true,{name:‘李四’},()=> {}];
  
  console.log(arr1);
创建数组时尽量要确保数组中存储的数据的类型是相同
- arr1 = [“孙悟空”, “猪八戒”, “沙和尚”]
  
  console.log(arr1);

使用示例

// 遍历数组 相当于是获取数组里面每一个元素,通过下标一个一个的获取比较麻烦
console.log(arr1[0]);
console.log(arr1[1]);
console.log(arr1[2]);


// 如果我们向元素里面追加了一个元素的话，那么上面也需要再加一个索引的下标
arr1 = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]


// 使用 for 遍历，自然顺序遍历，跟存放的顺序一直
for(let i =0 ;i < arr1.length; i++) {
  console.log(i,'=',arr1[i])
}

console.log('---------------------->')
// for 遍历方式2 倒序
for(let i = arr1.length -1; i >= 0;i--) {
console.log(i, '=', arr1[i])
}

在这里插入图片描述

小练习1

/*
         定义一个Person类，类中有两个属性name和age
                    然后创建几个Person对象，将其添加到一个数组中

            遍历数组，并打印未成年人的信息          
    
    */

    class Person {
       constructor(name,age) {
         this.name = name
         this.age = age
       }
    }


    const personArr = [new Person('猪八戒',88),new Person('唐孙',33),new Person('红孩儿',15)];


    for(let i =0;i < personArr.length;i ++) {
      if(personArr[i].age < 18) {
        console.log('未成年人：',personArr[i])
      }
    }

3、for-of使用

for-of语句可以用来遍历可迭代对象

语法
- for(变量 of 可迭代的对象){
```
  	语句...
```
  }
执行流程
- for-of的循环体会执行多次，数组中有几个元素就会执行几次，
  
  每次执行时都会将一个元素赋值给变量

使用示例

4、数组方法1

破坏性的，就是对原数组有影响
非破坏性，不会数组的操作会返回一个新对象，不会对原数组产生影响
参考文献： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

非破坏性的

我们需要用一个返回值的变量去接收这个返回的值

内置方法
- 静态方法
  - Array.isArray();
- 实例方法
- at()
  - 可以根据索引获取数组中的指定元素
  - at可以接收负索引作为参数
- concat
  - 用来连接两个或多个数组
  - 非破坏性方法，不会影响原数组，而是返回一个新的数组

Array.isArray()

用来检查一个变量是否为数组，返回一个boolean值

console.log(Array.isArray([1, 3, 5])); // Expected output: true

console.log(Array.isArray(“[]”)); // Expected output: false

console.log(Array.isArray(new Array(5)));// Expected output: true

console.log(Array.isArray(new Int16Array([15, 33])));// Expected output: false

at() 方法使用

用来获取下标的元素，跟[] 类似，但是可以传负值，如果是负数的话，那么就是从后往前取

const arr1 = [“孙悟空”, “猪八戒”, “沙和尚”, “唐僧”]

console.log(arr1.at(1))//猪八戒

console.log(arr1.at(-1))//倒数第一个元素唐僧

console.log(arr1[arr1.length -1])//和arr1.at(-1)等价

concat() 方法使用

用来连接字符串或数组，将之拼成一个新得数组

const arr2 = [“白骨精”, “蜘蛛精”, “玉兔精”]

// 拼接后需要重新接收值，不会改变原数组的值

let result = arr1.concat(arr2,[‘红孩儿’,‘牛魔王’]);

console.log(‘arr1’,arr1);

console.log(‘arr2’,arr2);

console.log(‘result’, result);

在这里插入图片描述

5、数组方法2

indexOf()
- 获取元素在数组中第一次出现的索引
  参数：
  1. 要查询的元素
  2. 查询的起始位置
lastIndexOf()
- 获取元素在数组中最后一次出现的位置
  返回值：
  找到了则返回元素的索引
  没有找到返回-1
join()
- 将一个数组中的元素连接为一个字符串
  参数：
  指定一个字符串作为连接符
  - 示例
    [“孙悟空”, “猪八戒”, “沙和尚”, “唐僧”, “沙和尚”] ==》孙悟空,猪八戒,沙和尚,唐僧,沙和尚
sclice()
- 用来截取数组（非破坏性方法）
  参数：
  1. 截取的起始位置(包括该位置)
  2. 截取的结束位置(不包括该位置)
  - 第二个参数可以省略不写，如果省略则会一直截取到最后
  - 索引可以是负值
    如果将两个参数全都省略，则可以对数组进行浅拷贝（浅复制）

公共部分参数

let arr = [“孙悟空”, “猪八戒”, “沙和尚”, “唐僧”, “沙和尚”]

indexOf()

// indexOf() 方法

console.log(arr.indexOf(‘沙和尚’))// 2 ，第二个参数不写默认就是0

console.log(arr.indexOf(‘唐僧’,1))// 3

lastIndexOf()

console.log(arr.lastIndexOf(‘沙和尚’))// 4 从后往前找

console.log(arr.lastIndexOf(‘沙和尚1’))// -1 不存在的元素

join()

console.log(arr.join())// 默认, 作废分隔符孙悟空,猪八戒,沙和尚,唐僧,沙和尚

// 指定分割字符串

console.log(arr.join(‘@#@’))// 孙悟空@#@猪八戒@#@沙和尚@#@唐僧@#@沙和尚

sclice()

let result = arr.slice(0,2)// 0 ~ 1 二个元素 [‘孙悟空’, ‘猪八戒’]

result = arr.slice(1,3);// 1 ~ 2 二个元素 [‘猪八戒’, ‘沙和尚’]

result = arr.slice(1,-1);// 从第一个元素开始，不包含最后一个元素 [‘猪八戒’, ‘沙和尚’, ‘唐僧’]

result = arr.slice();// 全部元素[‘孙悟空’, ‘猪八戒’, ‘沙和尚’, ‘唐僧’, ‘沙和尚’]

console.log(result)

在这里插入图片描述

6、对象复制

<script>
    const arr = ["孙悟空", "猪八戒", "沙和尚"];

    const arr2 = arr;// 该操作不是复制，只不过是移动了一下指针的位置，如果我们改变原数组内容，那么他本身也会发生变化

    console.log(arr2)
    arr[0] = '牛魔王';
    console.log(arr2)
    console.log(arr === arr2)// true

    // 复制一个新对象，浅复制
    // 当调用slice时，会产生一个新的数组对象，从而完成对数组的复制
    const arr3 = arr.slice();
    arr[0] = '孙悟空';
    console.log(arr3)
    console.log(arr === arr3)// false




</script>

在这里插入图片描述

7、浅拷贝与深拷贝

浅拷贝（shallow copy）
- 通常对对象的拷贝都是浅拷贝
  贝顾名思义，只对对象的浅层进行复制（只复制一层）
  - 如果对象中存储的数据是原始值，那么拷贝的深浅是不重要
    贝只会对对象本身进行复制，不会复制对象中的属性（或元素）
深拷贝（deep copy）
- 深拷贝指不仅复制对象本身，还复制对象中的属性和元素
  性能问题，通常情况不太使用深拷贝

浅拷贝方式

// 创建一个数组

const arr = [{ name: “孙悟空”}, { name: “猪八戒” }]

const arr2 = arr.slice();// 浅拷贝

console.log(‘arr’, arr)

console.log(‘arr2’,arr2)

深拷贝方式

const arr3 = structuredClone(arr);// 专门用来深拷贝的方法

console.log(arr3)

在这里插入图片描述

8、对象的复制

… (展开运算符)
- 可以将一个数组中的元素展开到另一个数组中或者作为函数的参数传递
  它也可以对数组进行浅复制
对象的复制
- Object.assign(目标对象, 被复制的对象)
  复制对象中的属性复制到目标对象里，并将目标对象返回
  - 也可以使用展开运算符对对象进行复制

浅复制

const arr = [“孙悟空”, “猪八戒”, “沙和尚”]

// 浅复制方式1

const arr2 = arr.slice();

console.log(arr === arr2)//false

// 浅复制方式2 …

const arr3 = […arr]

console.log(arr3)

// …元素

const arr4 = [“红孩儿”,…arr,“沙和尚”];// [‘红孩儿’, ‘孙悟空’, ‘猪八戒’, ‘沙和尚’, ‘沙和尚’]

console.log(arr4)

使用小技巧

// 使用小技巧1

const arr5 = [10, 20, 30]

function sum(a, b, c) {

return a + b + c

}

let result = sum(arr5[0], arr5[1], arr5[2]);

console.log(result)//60

result = sum(…arr5)

console.log(result)//60

对象复制

// 对象复制

const obj = { name: “孙悟空”, age: 18 }

const obj1 = Object.assign({},obj);

console.log(obj1)

const obj2 = {address:“花果山”,age: 28};

//相同属性后面会把前面的覆盖

Object.assign(obj2,obj);

console.log(obj2)//{address: ‘花果山’, age: 18, name: ‘孙悟空’}

// 使用 …合并

const obj3 = {address:‘高老庄’,…obj,age: 77};

console.log(obj3)//{address: ‘高老庄’, name: ‘孙悟空’, age: 77}

在这里插入图片描述

9、数组方法(破坏性)

push()
- 向数组的末尾添加一个或多个元素，并返回新的长度
pop()
- 删除并返回数组的最后一个元素
unshift()
- 向数组的开头添加一个或多个元素，并返回新的长度
shift()
- 删除并返回数组的第一个元素
splice()
- 可以删除、插入、替换数组中的元素
  - 参数
    1、删除的起始位置
    2、删除的数量
    3、要插入的元素
    - 返回值：
      - 返回被删除的元素
reverse()
- 反转数组

公共部分

let arr = [‘张三’,‘李四’,‘王五’];

push() 方法

从数组的末尾开始添加元素，也就是索引值为数组的lenght的位置

let result = arr.push(‘赵六’);

console.log(result)

console.log(arr)

pop() 出栈

从数组的末尾开始弹出元素，也可以理解为删除元素，返回的值就是被删除的元素

result = arr.pop();

console.log(‘pop=====>result’,result)//arr

console.log(‘pop=====>arr’, arr)//[‘张三’, ‘李四’, ‘王五’]

unshift() 开头添加

在数组的最开头添加元素，也就是第一位，索引值为0的位置

result = arr.unshift(‘小二’,‘小三’);

console.log(‘unshift=====>result’, result)//result 5

console.log(‘unshift=====>arr’, arr)//[‘小二’, ‘小三’, ‘张三’, ‘李四’, ‘王五’]

shift() 开头删除

从数组的开头位置开始出栈，也就是删除元素，返回的值就是被删除的元素

result = arr.shift();

console.log(‘shift==>result’,result);//shift==>result 小二

console.log(‘shift==>arr’,arr);// [‘小三’, ‘张三’, ‘李四’, ‘王五’]

splice() 删/插/替换全能性

let arr2 = [‘张老大’,‘张老二’,‘张老三’,‘张老四’,‘小二狗’];

3个参数，替换元素

做一个替换的动作，从索引值为1的位置向后找一个元素作为替换

let result2 = arr2.splice(1,1,‘我是插入的元素张大大’);

console.log(‘splice’,result2)

console.log(‘splice’, arr2)

3个参数添加操作

// 3个参数

let result2 = arr2.splice(1,1,‘我是插入的元素张大大’);

console.log(‘splice’,result2)

console.log(‘splice’, arr2)

// 直接插入元素

result2 = arr2.splice(1,0,‘张老二回来了’);

console.log(‘splice’, result2)

console.log(‘splice’, arr2)

2个参数

代表的是直接删除元素

result2 = arr2.splice(1, 2);

console.log(‘splice’, result2)// [‘张老二回来了’, ‘我是插入的元素张大大’]

console.log(‘splice’, arr2)

reverse() 反转

将元素从后往前倒着所有的元素

// reverse() 反转

let arr3 = [‘a’,‘b’,‘c’,‘d’];

let result3 = arr3.reverse();

console.log(‘reverse’, result3) //[‘d’, ‘c’, ‘b’, ‘a’]

在这里插入图片描述

javaScirpt学习第七章(数组)-第一部分

javaScirpt学习第七章(数组)-第一部分

1、数组简介

创建数组的方式

数组添加元素

跳跃性数组添加元素

读取数组

length 操作

修改length 的长度

2、数组遍历

使用示例

小练习1

3、for-of使用

使用示例

4、数组方法1

非破坏性的

Array.isArray()

at() 方法使用

concat() 方法使用

5、数组方法2

公共部分参数

indexOf()

lastIndexOf()

join()

sclice()

6、对象复制

7、浅拷贝与深拷贝

浅拷贝方式

深拷贝方式

8、对象的复制

浅复制

使用小技巧

对象复制

9、数组方法(破坏性)

公共部分

push() 方法

unshift() 开头添加

shift() 开头删除

splice() 删/插/替换 全能性

3个参数，替换元素

3个参数 添加操作

2个参数

reverse() 反转

网站公告

今日签到

热门文章

最新发布

splice() 删/插/替换全能性

3个参数添加操作