JavaScript - Day06 - 数组

瑟瑟发抖的张

已于 2023-04-09 21:31:02 修改

阅读量105

点赞数

文章标签： html 前端

于 2023-03-27 19:02:04 首次发布

本文链接：https://blog.csdn.net/DZYUL/article/details/129785192

版权

一、概念

1.一个变量存储多个数据：对象中可以通过键值对存储多个数据，且数据的类型是没有限制的

2.跟对象的区别：

对象无序 - 对象有小空间名称

数组有序 - 数组有小空间编号

二、定义

1.这是一个空数组，定义带数据的数组：var arr = [ ]

2.数组中可以存储多个不同类型的数据，只是我们在项目中使用的时候，一般是将同类型数据存储在数组中

var arr = [12, 'abc', true]

3.js还提供了一个构造函数，用来创建数组：

var arr = new Array()

这两种方式定义的数据是一样的。

有一种情况，这两种定义方式是不一样的：当只放一个数字n的时候，new表示有n个空的小空间，[]表示有一个空间放入了n

var arr = new Array(5) // 有5个空的小空间
console.log(arr);
var arr = [5] // 有1个小空间，里面存放了数字5
console.log(arr);

三、数组的基本操作

1.访问数组中的元素 ----- 数组[下标]

1-1.下标

数组这种数据，相当于在一个大空间中，有很多小空间，每个值前面的数字，表示这个小空间的编号，专业术语叫下标。第一个下标永远是0，依次向后递增，最后一个下标是值的个数-1，也就是说，数组这种数据中每个值是有顺序的

var arr = ['a', 'b', 'c']
console.log(arr);

2.设置数组中的元素 ---- 数组[下标] = 值

（1）如果下标是已经存在的，那赋值操作就是修改数组元素的值；

（2）如果下标是不存在，那赋值操作就给数组添加元素。

（3）下标比最大的下标要大很多，会创建很多空的小空间

var arr = ['a', 'b', 'c']
arr[1] = 'd' // 替换下标为2的元素b为d
console.log(arr); 
arr[3] = 'e' // 给数组添加下标为3的元素e
arr[10] = 'f' // 下标比原数组下标大就会创建空的小空间，导致长度会变长

3.删除数组中的元素 ---- delete 数组[下标]

这种删除方式，只能删除值，并不能删除小空间

var arr = ['a', 'b', 'c']
delete arr[1]
console.log(arr);

4.操作数组中元素个数

（1）获取数组中元素个数（也可以理解为数组的长度）

数组.length

console.log(arr.length);

（2）设置数组长度

var arr = ['a', 'b', 'c']
arr.length = 2 // 会把第三个元素的c截掉
arr.length = 20 // 会多17个空的小空间
console.log(arr);
// 第一个元素的下标一定是0，最后一个元素的下标一定是 length-1

练习：

// 如何删除崔五并将总体长度从后减1？
// 思路：将下标4后面的所有元素向前移动一位，将长度设置为长度-1
var arr = ['牛一', '冷二', '卢三', '谢四', '崔五', '王六', '李七']
arr[4] = arr[5]
arr[5] = arr[6]
arr.length = arr.length - 1
console.log(arr);

// 如何添加张八到第三个？
var arr = ['牛一', '冷二', '卢三', '谢四', '崔五', '王六', '李七']
arr[7] = arr[6]
arr[6] = arr[5]
arr[5] = arr[4]
arr[4] = arr[3]
arr[3] = '张八'
console.log(arr);

四、遍历

1.for(var a = 0; a < arr.length; a++) { arr[a] } ---- 空的空间会遍历出undefined

2.for(var key in arr){ } ---- 空的空间不会被遍历

多次输出是在进行重复动作，并且多次重复之间是有规律可循的，所以可以使用循环进行这个重复动作，这种使用循环将数组中每个元素输出的操作叫做数组的遍历 - 每个元素都经历一次

// 普通写法：将这七个人依次输出
var arr = ['牛一', '冷二', '卢三', '谢四', '崔五', '王六', '李七']
console.log( arr[0] );
console.log( arr[1] );
console.log( arr[2] );
console.log( arr[3] );
console.log( arr[4] );
console.log( arr[5] );
console.log( arr[6] );

// 循环写法：将这七个人依次输出
var arr = ['牛一', '冷二', '卢三', '谢四', '崔五', '王六', '李七']
for(var a=0; a<=6; a++) {
    console.log( arr[a] );
}

数组属于object类型，for in 这种也可以遍历数组，虽然也能遍历数组，但是不会遍历空的小空间 - 建议使用 a=0的方式来遍历数组

for in的语法更适合遍历对象，为了避免不必要的错误，尽量不要用这种语法来遍历数组。

// 从下标为0开始遍历写法：将这七个人依次输出
var arr = ['牛一', '冷二', '卢三', '谢四', '崔五', '王六', '李七']
arr[10] = '李好呀'
console.log(arr);
for(var a=0; a<arr.length; a++) {
    console.log( arr[a] );
}
// 空的空间会遍历出undefined


// for in遍历写法：将这七个人依次输出
var arr = ['牛一', '冷二', '卢三', '谢四', '崔五', '王六', '李七']
arr[10] = '李好呀'
console.log(arr);
for(var a in arr) {
    console.log(a, arr[a]);
}
// 空的空间不会被遍历

练习：根据数组渲染页面

<head>
    <meta charset="UTF-8">
    <style>
    .goods{
        float: left;
        width: 280px;
        margin:0 5px;
    }
    .goods img{
        border-right: 1px solid #ccc;
    }
    .goods:last-child img{
        border: none;
    }
    .goodsname{
        width: 280px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .price{
        color: red;
    }
    </style>
    <title>Document</title>
</head>
<body>
</body>
<script>
var arr = [
    {
        name: '欧臻廷保湿修护亮颜银霜面霜70ml护肤品化妆品乳液滋润送女友礼物礼盒款',
        price: '1380.00',
        imgpath: 'https://img20.360buyimg.com/seckillcms/s280x280_jfs/t1/155703/22/35655/57123/63fef24aF171c95c4/e7f04f1ab27e0e6f.jpg.avif'
    },
    {
        name: 'Redmi K50Pro 天玑9000 AMOLED 2K柔性直屏 OIS光学防抖  120W快充 幻镜  8GB+256GB 5G智能手机 小米红米',
        price: '2619.00',
        imgpath: 'https://img30.360buyimg.com/seckillcms/s280x280_jfs/t1/107510/22/22861/98537/628ca5caE4a4fa7e4/d29d2f7bea40b3bb.jpg.avif'
    },
    {
        name: '卡诗（KERASTASE）黑钻钥源鱼子酱洗发水250ml 改善毛躁呵护受损',
        price: '219.00',
        imgpath: 'http://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/109242/28/23835/49558/622afda5E603886a6/218e712f7c69864d.jpg.avif'
    }
]
for(var a = 0; a < arr.length; a++) {
    var obj = arr[a]
    var imgpath = obj.imgpath
    var name = obj.name
    var price = obj.price
    document.write('<div class="goods">')
        document.write('<img src="'  +  imgpath  +   '" alt="">');
        document.write('<p class="goodsname">'+name+'</p>');
        document.write('<p class="price">￥<span>'+price+'</span></p>');
    document.write('</div>');

}
</script>

五、基础类型和引用类型

1.基础/简单类型

number/string/boolean/undefined/null

存储：直接将具体数据存储在栈内存中

赋值：将具体的数据复制给另一个变量

var a = 1
var b = a
a = 2
console.log(b);

比较：比较的是具体的数据以及类型

var a = 1
var b = '1'
console.log(a == b); // 直接比较具体数据，忽略类型
console.log(a === b); // 先比较类型，类型相同了再比较具体数据

2.引用/复杂类型

object/array/function

存储：将具体数据存储在堆内存中，将堆内存中的内存地址存储在栈内存中

赋值：将堆中的地址复制给另一个变量 - 导致两个变量共享同一个数据

// 存储
var arr = [1,2,3]
var brr = arr
arr = [4,5,6]
console.log(arr); // a输出456，因为a第二次赋值覆盖第一次赋值
console.log(brr); // b输出123

// 赋值
var arr = [1,2,3]
var brr = arr
arr[0] = 'a'
console.log(brr);

比较：比较内存地址是否相同

// 比较
var arr = [1,2,3]
var brr = [1,2,3]
console.log(arr == brr);  // false
console.log(arr === brr); // false

六、数组方法

1.改变原数组

1-1.数组的增删操作

（1）unshift：给数组开头添加一个或多个元素

语法：数组.unshift(1个或多个元素) - 返回新数组的长度

    // unshift - 给数组开头添加一个或多个元素 - 返回数组新长度
    var arr = ['a','b','c']
    var brr = arr.unshift('d')
    console.log(arr);
    console.log(brr);

（2）shift：将数组的第一个元素删掉

语法：数组.shift() - 返回被删掉的元素

    // shift - 删除数组的第一个元素 - 返回被删掉的元素
    var arr = ['a','b','c']
    var brr = arr.shift();
    console.log(arr);
    console.log(brr);

（3）push：给数组末尾添加一个或多个元素

语法：数组.push(1个或多个元素) - 返回新数组长度

    // push - 给数组的末尾添加一个或多个元素 - 返回数组新长度
    var arr = [1,2,3];
    var brr = arr.push(4);
    console.log(arr);
    console.log(brr);

（4）pop：删除数组的最后一个元素

语法：数组.pop() - 返回被删掉的元素

    // pop - 删除数组最后一个元素 - 返回被删掉的元素
    var arr = [1,2,3];
    var brr = arr.pop();
    console.log(arr);
    console.log(brr);

（5）splice：在数组的任意一个位置添加、删除、修改 1个或多个元素

语法：数组.splice(开始下标, 要删除的元素个数, 在删除位置要放进去的1个或多个元素) - 返回所有被删除的元素组成的数组

    // splice - 对数组做增、删、改的操作
    // 添加
    var arr = ['a','b','c'];
    var brr = arr.splice(1,0,'d');
    console.log(arr);
    console.log(brr);
    
    // 删除
    var arr = ['a','b','c'];
    var brr = arr.splice(1,1);
    console.log(arr);
    console.log(brr);

    // 修改
    var arr = ['a','b','c'];
    var brr = arr.splice(1,1,'d');
    console.log(arr);
    console.log(brr);

1-2.其他

（1）reverse：翻转数组

语法：数组.reverse() - 返回翻转后的数组

    // reverse - 数组的反转
    var arr = [1,2,3];
    console.log(arr);    
    var brr = arr.reverse();
    console.log(brr);

（2）sort：排序

语法：数组.sort() - 进行了升序排列，默认使用字符串规则进行排列 - 返回排序后数组

    // sort - 数组的排序
    // 正序
    var arr = [9,5,3,7,1,6,4,8,2];
    console.log(arr)
    var brr = arr.sort()
    console.log(brr)
    
    // 正序
    var arr = [9,5,3,7,1,6,4,8,2];
    console.log(arr)
    var brr = arr.sort(function(a,b){
        return a-b;
    })
    console.log(brr);
    // 倒序
    var brr = arr.sort(function(a,b){
        return b-a;
    })
    console.log(brr);

2.不改变原数组

1-1.参数是基础数据

（1）concat：将1个或多个元素或数组合并成一个更大的数组

语法：数组.concat(1个或多个元素或数组) - 返回更大的新数组

    // concat - 数组的拼接
    var arr = [1, 2, 3]
    var brr = arr.concat(4)
    console.log(arr);
    console.log(brr);
    var brr = arr.concat(4, 5, 6)
    console.log(brr);

    var arr = [1, 2, 3]
    var brr = [4, 5, 6]
    var crr = [7, 8, 9]
    var drr = arr.concat(brr, crr)
    console.log(drr);

（2）slice：从数组中截取出其中一部分 - 包前不包后

语法：数组.slice(开始下标, 结束下标) - 返回截取出来的那一部分组成的数组

    // slice - 截取数组 ---- 包前不包后
    var arr = ['a','b','c','d','e','f'];
    console.log(arr)
    var brr = arr.slice(1,4)
    console.log(brr)
    console.log(arr === brr); // false

    var crr = arr.slice(1) // 省略第二个参数就默认截取到数组末尾
    console.log(crr)
    console.log(arr === brr); // false

    var drr = arr.slice() // 两个参数都不加，就会从开头截取到末尾
    console.log(drr)
    console.log(arr === brr); // false

（3）indexOf：查找元素在数组中第一次出现的下标

语法：数组.indexOf(元素) - 找到了就返回下标，找不到返回-1

    var arr = ['a','b','c','a','d']
    console.log(arr.IndexOf('a'))

我们通常会利用找到和找不到的返回值不同，来判断一个元素是否在数组中

语法：数组.indexOf(元素, 开始下标) - 从开始下标开始向后找元素第一次出现的下标

    var arr = ['a','b','c','a','d']
    console.log(arr.indexOf('a',1))

（4）lastIndexOf：查找元素在数组中最后一次出现的下标

语法：数组.lastIndexOf(元素) - 找到了就返回下标，找不到返回-1

    var arr = ['a','b','c','a','d']
    console.log(arr.lastIndexOf('a'))

我们通常会利用找到和找不到的返回值不同，来判断一个元素是否在数组中

语法：数组.lastIndexOf(元素, 下标) - 将指定下标当做数组的结尾，找元素在数组中最后一次出现的下标

    var arr = ['a','b','c','a','d']
    console.log(arr.lastIndexOf('a',1))

（5）join：使用指定的连接符将数组中每个元素连接成一个字符串

语法：数组.join(连接符) - 返回字符串

    var arr = ['a','b','c'];
    console.log(arr)
    var brr = arr.join('-');
    console.log(brr)

    var arr = ['a','b','c'];
    console.log(arr)
    var brr = arr.join(); // 不指定连接符默认使用逗号连接
    console.log(brr)

    var arr = ['a','b','c'];
    console.log(arr)
    var brr = arr.join(''); // 将所有元素合在一起
    console.log(brr)

1-1.数组的增删操作

（1）forEach：用于遍历数组，这个方法没有返回值，返回值为undefined，不会改变原来数组的值。

语法：数组.forEach(function(value, index, array) {

value - 代表遍历出来的每个元素

index - 代表每个元素的下标

array - 代表当前正在遍历的这个数组

})

    // forEach只能从头到尾遍历
    // forEach不遍历空元素
    var arr = ['a', 'b', 'c']
    arr[5] = 'd'
    console.log(arr)

    arr.forEach(function (value, index, array) {
        console.log(value, index, array);
        // if(index === 1) {
        //     break // forEach中不能使用break
        // }
    })

（2）filter：将数组中满足指定条件的元素都组成一个新的数组并返回，使用方法和功能跟map方法很像，只是运行规则不一样。map方法中的函数，用于返回新的元素，而filter方法中的函数，根据返回true或false来筛选元素

语法：var brr = 数组.filter(function(value, index, array) {

value - 代表遍历出来的每个元素

index - 代表每个元素的下标

array - 代表当前正在遍历的这个数组

return 条件

})

    var arr = [1,2,3,4,5,6];
    console.log(arr)
    var brr = arr.filter(function(v,index){
        return v>1
    })
    console.log(brr) // [2,3,4,5,6]

    var arr = [1,2,3,4,5,6];
    console.log(arr)
    var brr = arr.filter(function(v,index){
        return v>8
    })
    console.log(brr) // []

（3）map：将数组中每个元素都处理成新的元素，所有新的元素组成新的数组返回，这个方法主要用于以同样的规则处理数组中的每个值，并组成新的数组返回

语法：var brr = 数组.map(function(value, index, array) {

value - 代表遍历出来的每个元素

index - 代表每个元素的下标

array - 代表当前正在遍历的这个数组

return 处理后的新元素

})

    var arr = [1,2,3,4,5,6];
    console.log(arr)
    var brr = arr.map(function(item){
        return item+2
    })
    console.log(brr)

（4）every：判断数组中是否所有元素都满足指定的条件 - 都满足就返回true，有一个不满

足就返回false

语法：var bool = 数组.every(function(value, index, array) {

value - 代表遍历出来的每个元素

index - 代表每个元素的下标

array - 代表当前正在遍历的这个数组

return 条件

})

    var arr = [77,69,30,42,51];
    console.log(arr)
    var bool = arr.every(function(v,index,a){
        return v>100
    })
    console.log(bool)

（5）some：判断数组中是否至少有一个是满足条件的 - 只要有一个是满足条件的就返回

true，都不满足条件就返回false

语法：var bool = 数组.some(function(value, index, array) {

value - 代表遍历出来的每个元素

index - 代表每个元素的下标

array - 代表当前正在遍历的这个数组

return 条件

})

    var arr = [77,69,30,42,51];
    console.log(arr)
    var bool = arr.some(function(v,index,a){
        return v<40
    })
    console.log(bool)

（6）find：从数组中找到满足条件的第一个元素 - 找到了就返回元素，找不到就返回

undefined

语法：var ele = 数组.find(function(value, index, array) {

value - 代表遍历出来的每个元素

index - 代表每个元素的下标

array - 代表当前正在遍历的这个数组

return 条件

})

    var arr = [77,69,30,42,51];
    console.log(arr)
    var brr = arr.find(function(v,index,a){
        return v>100
    })
    console.log(brr) // undefined

    var arr = [77,69,30,42,51];
    console.log(arr)
    var brr = arr.find(function(v,index,a){
        return v<100
    })
    console.log(brr) // 77

（7）findIndex：从数组中找到满足条件的第一个元素的下标 - 找到就返回下标，找不到就

返回-1

语法：var ele = 数组.findIndex(function(value, index, array) {

value - 代表遍历出来的每个元素

index - 代表每个元素的下标

array - 代表当前正在遍历的这个数组

return 条件

})

    var arr = [77,69,30,42,51];
    console.log(arr)
    var brr = arr.findIndex(function(v,index,a){
        return v>100
    })
    console.log(brr) // -1

    var arr = [77,69,30,42,51];
    console.log(arr)
    var brr = arr.findIndex(function(v,index,a){
        return v<100
    })
    console.log(brr) // 0

（8）reduce：归并 - 数组求和

语法：数组.reduce(function(a, b) {

a第一次代表第一个元素，第二次开始代表上一次返回的结果

b第一次代表第二个元素，第二次代表第三个元素，...

})

    var arr = ['111', '222', '333']
    arr.reduce(function (a, b) {
        console.log(a, b);
    }) // 111 222
       // undefined '333'

    var arr = [1,2,3,4,5,6,7,8]
    console.log(arr)
    var brr = arr.reduce(function(a,b){
        return a + b
    })
    console.log(brr) // 36

七、数组去重

// 方法1.找到重复的，删掉
/* ①找重复 - 一模一样就是重复的 - 全等比较 - 作比较判断 - 谁跟谁比 - 第一个跟他后面
                                        每一个做比较    第二个跟他后面每个作比较 */
var arr = [1, 1, 1, 2, 2, 3, 4, 2, 1, 3, 4]
for(var b = 0; b < arr.length - 1; b++) {
    for(var a = b + 1; a < arr.length; a++) {
        if(arr[b] === arr[a]) {
            arr.splice(a, 1)
            a--
        }
    }
}
console.log(arr);

// 方法2.将所有不重复的元素放在新的数组中
/* ①找到所有不重复的 - arr中每个元素都要判断是否在新数组中 - 判断一个元素是否在数组中 - 
                                                                    用indexOf */
// ②放到新数组中 - 定义新数组 - arr.push(元素)
var arr = [1, 1, 1, 2, 2, 3, 4, 2, 1, 3, 4]
var brr = []
for(var a = 0; a < arr.length; a++) {
    var idx = brr.indexOf(arr[a])
    if(idx === -1) {
        brr.push(arr[a])
    }
}
console.log(brr);

/* 方法3.去重复 - 保证每个元素在数组中都是唯一的 - 对象中的键是唯一的 - 将数组中的每个元
                   素都作为对象的键 - 当所有元素都走完以后，对象中的键就是唯一的元素 */
var arr = [1, 1, 1, 2, 2, 3, 4, 2, 1, 3, 4]
var obj = {}
for(var a = 0; a < arr.length; a++) {
    obj[ arr[a] ] = arr[a]
}
// console.log(obj);
var brr = []
for(var a in obj) {
    brr.push(obj[a])
}
console.log(brr);

// 方法4.最简短的数组去重代码
var arr = [1, 1, 1, 2, 2, 3, 4, 2, 1, 3, 4]
var brr = [...new Set(arr)]
console.log(brr);

八、冒泡排序

相邻两个元素进行比较，将一个数组中的数字使用循环进行升序或降序的排列

for(var a = 0; a < arr.length - 1;a++) {
	for(var b = 0; b < arr.length - 1; b++){
		if(arr[b] > arr[b+1]){
			var tmp = arr[b]
			arr[b] = arr[b+1]
			arr[b+1] = tmp
		}
	}
}

九、选择排序

降序：先找最大值，排在最左边，再找第二大的值，往左边靠...，已经排好的，不再参与比较

for(var a = 0; a < arr.length - 1; a++){
	for(var b = a + 1; b < arr.length; b++){
		if(arr[a] > arr[b]){
			var tmp = arr[a]
			arr[a] = arr[b]
			arr[b] = tmp
		}
	}
}

瑟瑟发抖的张

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript - Day06 - 数组

1.这是一个空数组，定义带数据的数组：var arr = [ ]2.数组中可以存储多个不同类型的数据，只是我们在项目中使用的时候，一般是将同类型数据存储在数组中3.js还提供了一个构造函数，用来创建数组：这两种方式定义的数据是一样的。有一种情况，这两种定义方式是不一样的：当只放一个数字n的时候，new表示有n个空的小空间，[]表示有一个空间放入了nvar arr = new Array(5) // 有5个空的小空间var arr = [5] // 有1个小空间，里面存放了数字5。
复制链接

扫一扫