JS数组的详解与使用

最新推荐文章于 2024-07-12 09:36:48 发布

爱程序的大马猴

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量184

点赞数 1

分类专栏： javaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_62922379/article/details/132049495

版权

javaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

什么是数组？

数组是一种有序的集合，有长度和索引，以及身上有许多的API方法
面试题：
	数组和伪数组的区别：
		数组和伪数组都有长度和索引，区别是数组身上有许多的API方法 而伪数组身上不存在这些API方法

创建数组的几种方式

方式1：利用字面量创建
let arr = []
方式2：利用new 关键字创建
let arr1 = new Array()

数组身上常用的属性和方法

let arr = []
arr.length :属性是数组的长度
遍历数组：我们可以使用For循环进行遍历，等到在ES6中我们可以使用map以及forEach()等方法进行遍历
面试题：forEach()和map()的区别：
forEach()是没有返回值的，
而map()是存在返回值的

深拷贝与浅拷贝

学习数组，我们可以了解到简单数据类型和复杂数据类型（引用数据类型）
简单数据类型一般存储在栈中
复杂数据类型一般存储在复杂数据类型中
浅拷贝只是复制某个对象的指针（地址），导致它们都指向了堆内存中同一个数据，互相影响。
经过赋值操作，两个对象都指向了堆内存中的同一个数据，所以其中一个发生变化时，另一个也会随着变化。
  let arr = [1, 2, 3, 4];
  let arr1 = arr;
 // console.log(arr1, arr);
  arr[4] = 5;
  console.log(arr1, arr);
深拷贝是赋值的内容
深拷贝是在堆内存中创建一个一模一样的数据，然后把新数据的内存地址赋给新变量，这样旧变量和新变量就指向了不同的数据，也就不会互相影响。
let arr = [1,2,3,4,5]
let arr1 = []
for(let i = 0;i<arr.length;i++){
	arr1[i] = arr[i];
}
arr[4] = 6;
console.log(arr1)
console.log(arr)

数组常用的API方法

unshift()在头部添加 会改变原数组 返回值是新数组的长度
shift() 删除头部元素 会改变原数组 返回值是删除对应的元素
push()在尾部添加 会改变原数组 返回值是新数组的长度
pop()删除尾部的元素 会改变原数组  返回值是删除对应的元素
splice()可以删除也可以修改还可以添加
有两个参数 1参： 索引  2参： 长度  如果不写 删除到尾部  如果第二个参数是0则不删除   3参：用于替换的数值
        删除   两个参数  并且第二个参数不能为0    返回值：删除的数据  数组
        添加   三个参数  并且第二个参数只能为0    返回值：空数组
        修改   三个参数  并且第二个参数不能为0    返回值：被替换的数组  数组
slice() // 截取    深拷贝     不会修改原数组    返回值：被截取的数据   数组    
join()数组转字符串
concat() 数组拼接 会返回一个新的数组
reverse()数组反转
indexOf()数组查找

数组排序

可以使用冒泡排序和sort进行排序
 let arr = [10, 5, 7, 3, 8, 1, 14];
        冒泡排序
        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 = 0;
                    // temp = arr[j];
                    // arr[j] = arr[j + 1];
                    // arr[j + 1] = temp;
                    [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                }
            }
        }
console.log(arr);
   sort()
        //sort排序
console.log(arr.sort((a, b) => {
            return a - b
}));

数组迭代

迭代就是遍历，进行循环
1.使用for循环
2.使用forEach 没有返回值
3.使用filter 过滤筛选
4.使用every 全部都为true 结果就为true  逻辑与
5.使用some 如果有一个为true 结果就为true    逻辑或
6.使用map 存在返回值
7.使用for of  内部存在迭代器 不同于forEach 它可以配合break continue return一起使用

课堂练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片排序</title>
    <style>
        .all {
            box-sizing: border-box;
            width: 1190px;
            border: 1px solid black;
            margin: 20px auto;
        }

        h2 {
            text-align: center;
            color: purple;
        }

        .btn {
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }

        button {
            background-image: linear-gradient(90deg, green, skyblue);
            border: 1px solidblack;
            outline: none;
        }

        .imgs-div {
            width: 100%;
            width: 1190px;
            padding: 20px;
        }

        ul {
            width: 100%;
            height: 500px;
        }

        li {
            margin: 5px 10px;
            float: left;
            width: 251px;
            height: 230px;
            list-style: none;
            text-align: center;
        }

        img {
            width: 100%;
            height: 90%;
        }
    </style>
</head>

<body>
    <div class="all">
        <h2>亚索所有皮肤免费来袭</h2>
        <div class="btn">
            <button>从大到小</button>
            <button>随机排序</button>
        </div>
        <div class="imgs-div">
            <ul>
                <li> <img src="./img/1.png"> <span>西部牛仔8</span> </li>
                <li> <img src="./img/2.png"> <span>原计划2</span> </li>
                <li> <img src="./img/3.png"> <span>猩红之月3</span> </li>
                <li> <img src="./img/4.png"> <span>黑夜使者1</span> </li>
                <li> <img src="./img/5.png"> <span>奥德赛5</span> </li>
                <li> <img src="./img/6.png"> <span>战场boss7</span> </li>
                <li> <img src="./img/7.png"> <span>真实伤害6</span> </li>
                <li> <img src="./img/8.png"> <span>灵魂莲华4</span> </li>
            </ul>

        </div>
    </div>
    <script>
        // 1.点击第一个按钮  从大到小排序  然后button字体变成从小到大
        // 2.再次点击 再变回来  一直切换
        // 3.点击第二个按钮进行随机排序
        var arr = [{
            "src": "./img/1.png",
            "title": "西部牛仔8",
            id: '8'
        }, {
            "src": "./img/2.png",
            "title": "原计划2",
            id: '2'
        }, {
            "src": "./img/3.png",
            "title": "猩红之月3",
            id: '3'
        }, {
            "src": "./img/4.png",
            "title": "黑夜使者1",
            id: '1'
        }, {
            "src": "./img/5.png",
            "title": "奥德赛5",
            id: '5'
        }, {
            "src": "./img/6.png",
            "title": "战场boss7",
            id: '7'
        }, {
            "src": "./img/7.png",
            "title": "真实伤害6",
            id: '6'
        }, {
            "src": "./img/8.png",
            "title": "昼夜莲华4",
            id: '4'
        }];
        // 获取元素
        let btns = document.querySelectorAll('.btn button')
        let img = document.querySelectorAll('.imgs-div li img')
        let sps = document.querySelectorAll('.imgs-div li span')
        let flag = true

        btns[0].onclick = function () {
            if (flag) {
                flag = !flag
                btns[0].innerHTML = '从小到大'
                arr.sort((a, b) => {
                    return b.id - a.id
                })
            } else {
                flag = !flag
                btns[0].innerHTML = '从大到小'
                arr.sort((a, b) => {
                    return a.id - b.id
                })
            }
            render(arr)
        }
        // 随机排序
        btns[1].onclick = function () {
            let arr1 = arr.sort(() => {
                return Math.random() - 0.5
            })
            render(arr)
            console.log(arr1);
        }
        // 渲染函数
        function render(arr) {
            arr.forEach((item, index) => {
                // console.log(item); 
                img[index].src = item.src
                sps[index].innerHTML = item.title

            })
        }
    </script>
</body>

</html>

爱程序的大马猴

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS数组的详解与使用

什么是数组？数组是一种有序的集合，有长度和索引，以及身上有许多的API方法面试题：数组和伪数组的区别：数组和伪数组都有长度和索引，区别是数组身上有许多的API方法而伪数组身上不存在这些API方法创建数组的几种方式方式1：利用字面量创建let arr = []方式2：利用new 关键字创建let arr1 = new Array()数组身上常用的属性和方法let arr = []arr.length :属性是数组的长度遍历数组：我们可以使用For循环进行遍历，等到在ES6
复制链接

扫一扫