JS后盾人--JS数组挖掘（少年篇）

数组引用类型分析

<!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>
        let array = [1,2,3,4]
        let hd = array
        hd[1]="houdunren.com"
        console.log(array)
        console.log(hd)
    </script>
</body>
</html>

这就是我们的羁绊！

多维数组操作

可以在数组中定义多个值，然后这样进行访问：

<!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>
        //首先可以这样
        let array = [["houdunren","nihaome"],["xiangjun","cms"]]
        console.log(array[1][1])
        let lessons = [{name:"php",click:33},{name:"js",click:88}]
        console.log(lessons[1].name)
    </script>
</body>
</html>

Array.of与数组创建细节

<!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>
        let hd= ["hdcms"]
        hd[3]="houdunren"
        console.log(hd.length)
        console.log(hd[2])
        console.log(hd)
    </script>
</body>
</html>

类型检测与转换

把数组转换成字符串会更方便传递

<!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>
    <div>hdcms</div>
    <div>hdcms</div>
    <script>
        let divs = document.querySelectorAll("div")
        console.log(
            Array.from(divs, function (item) {
                item.style.backgroundColor = "red"
            })
        )
    </script>
</body>

</html>

展开语法真的好用啊

接下来我们看看展开语法

<!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>
        let arr = ["hdcms", "houdunren"]
        let hd = ["js", "css"]
        arr = [...arr, ...hd]
        console.log(arr)
        // for (const value of hd) {
        //     arr.push(value)
        // }
        // console.log(arr)
    </script>
</body>

</html>

使用展开语法也可以更快捷的计算和

<!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>
        let arr = ["hdcms","houdunren"]
        let hd = ["js","css"]
        function sum(...args){
            return args.reduce((s,v)=>{
                return (s+=v)
            },0)
        }
        console.log(sum(1,2,34,54,5))
    </script>
</body>
</html>

点语法操作DOM节点元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" width="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>houdunren.com</div>
    <div>hdcms.com</div>
    <script>
        const div = document.querySelectorAll('div');
        // 使用 forEach 替代 map 方法
        [...div].forEach(function(item){
            item.addEventListener("click", function(){
                this.classList.toggle("hide");
            });
        });
    </script>
</body>
</html>

点击就会消除的魔法

使用解构赋值提高效率

解构可以简单理解为把数组里面的值批量赋值给变量

<!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>
        let arr = ["houdunren",2010,"houdunren.com"]
        let [name,...args] = arr
    </script>
</body>
</html>

添加元素的多种操作技巧

可以使用...也可以使用push方法追加元素，一般来说是更加推荐用push方法的，举个例子：

<!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>
        function rangeArray(begin,end){
            const array = []
            for(let i = begin ;i<=end;i++)
        {
            array.push(i)
        }
        return array
        }
        console.table(rangeArray(11,15))
    </script>
</body>
</html>

数据出栈与入栈及填充操作

<!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>
        console.log(Array(5).fill("houdunren"))
        console.log([1,2,3,4].fill("houdunren",1,3))
    </script>
</body>
</html>

出入栈已经很熟悉了，主要是看看填充操作

splice与slice实现数组的增删改查

<!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>
        let arr = [1,2,3,4,5]
        let hd= arr.slice(1,3)      //从哪开始截取，截到哪里
        console.log(hd)
    </script>
</body>
</html>

像这样使用splice

<!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>
        let arr = [1,2,3,4,5]
        arr.splice(1,1,"后盾人","hdcms","houdunren")
        console.log(arr)
    </script>
</body>
</html>

数组移动函数实例

<!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>
        function move(array,from,to){
            if(from<0 || to>=array.length)
            {
                console.log("参数错误")
                return
            }
            const newArray = [...array]
            let item = newArray.splice(from,1)
            console.log(...item)
            newArray.splice(to,0,item[0])
            return newArray
        }
        let arr = [1,2,3,4,5]
        console.table(move(arr,1,3))
    </script>
</body>
</html>

清空数组的多种处理方式

<!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>
        let hd = [1,2,3,4,5]
        hd = []                 //推荐,清空是产生一块新空间
        hd.length = 0           //推荐，引用同一块地址
        hd.splice(0,hd.length)
        while(hd.pop()){}
    </script>
</body>
</html>

数组的拆分与合并操作

拆分：split，合并：join，...语法，concat

介绍一下copyWithin的使用

查找元素基本使用

<!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>
        let arr = [1,2,3,4]
        console.log(arr.indexOf(-4))    //这种查找是严格类型匹配
        console.log(arr.includes(2))    //返回的是真假
        console.log(arr.lastIndexOf(2,-3))  //从后往前查找
    </script>
</body>
</html>

includes方法原理实现

<!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>
        let arr = [1, 2, 3, 4, 5]
        function includes(array, value) {
            for (const find of array) {
                if (find == value) {
                    return true
                }
            }
            return false
        }
        console.log(includes(arr, 3))
    </script>
</body>

</html>

高效的find与findIndex新增方法

find方法也可以帮助我们查找，它返回的就是值（不是索引）

<!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>
        let arr = [1,2,3,4,5]
        console.log(arr.find(function(item){
            return item == 2
        }))
    </script>
</body>
</html>

对于引用类型的查找，includes会有些问题（因为进行的是地址之间的比较），使用find比较合适：

<!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>
        let lessons = [{ name: "js" }, { name: "css" }, { name: "mysql" }]
        // console.log(lessons.includes({name:"css"}))   //找不到
        console.log(lessons.find(function (item) {
            return item.name == 'css'
        }))
    </script>
</body>
</html>

如果只想知道所在位置就用findIndex：

<!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>
        let lessons = [{ name: "js" }, { name: "css" }, { name: "mysql" }]
        // console.log(lessons.includes({name:"css"}))   //找不到
        console.log(lessons.findIndex(function (item) {
            return item.name == 'css'
        }))
    </script>
</body>
</html>