数组与箭头函数初级理解

最新推荐文章于 2023-11-01 15:38:24 发布

L.xin Q

最新推荐文章于 2023-11-01 15:38:24 发布

阅读量215

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Lxingling/article/details/126910211

版权

一·数组

1.什么是数组？一种复杂数据类型
2.数组作用？可以在变量中“存多个数据”
3.数组内存原理？数组村粗由三个部分组成（数组三要素）

（1）、内存（数组中的数据（ 2）、下标（元素的位（3）、长度（元素的数量）

<script>
        
        //4.数组声明
        let arr = ['胡歌','彭于晏','吴京']

        //5.数组取值
        console.log(arr);
        console.log(arr[1]);

        //6.数组长度（.length）
        console.log(arr.length);

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

二数组的增删改查

1.数组新增

（1）数组名.push('元素')添加到末尾

        array.push("新增元素")
        console.log(array);

(2) 数组名.push(元素);添加到开头

        array.unshift('元素')
        console.log(array);

2.数组的删除

（1）数组名.pop（）删除最后一个元素

array.pop()
        console.log(array);

（2）数组名.shift()删除第一个元素

array.shift()
        console.log(array);

（3）【数组删除指定元素】

数组名.splice(start,daleteCount) 第一个值：起始位置从0开始第二个值：要删除的数量如果没有指定的数量则会从其实位置到后面所有元素

        array.splice(3,2)
        console.log(array);

3.【数组赋值（改）】

数组名[下标] 如果下标存在。则获取元素值。如果下标不存在，则新增数列项。

         array[0] = '9'
         console.log(array);
         array[3] = '5'
         console.log(array);

三.数组中ES5与ES6区别

    <script>
        //1.连接两个数组
        let arr1 = [11,22,33]
        let arr2 = [13,24,35]

        //ES5写法
        // concat: 连接数组
        let arr3 = arr1.concat(arr2)
        // push: 加入新元素
        arr3.push(44)
        console.log(arr3);//[13,24,35,11,22,33,44] length = 7

        //ES6写法
        let arr4 = [...arr1,...arr2,44]
        console.log(arr4);//[13,24,35,11,22,33,44] length = 7

        //2.求数组最大值和最小值
        let arr = [12,16,13,18,91,69]

        //ES5写法
        //利用apply传参：自动遍历arr，逐个传参
        let max1 = Math.max.apply(Math,arr)
        console.log(max1);//91

        //ES6写法
        let max = Math.max(...arr)
        console.log(max);//91
    </script>

四.箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。箭头函数其实就是function关键词的简写形式将function关键字用 => 符号代替

<script>
        //1.无参无返回值
        //ES5
        let fn = function () {
            console.log('222');
        }
        fn()

        // ES6 (function变成箭头符号 =>;形参括号写在箭头左边)
        let fn1 = () =>{
            console.log('333');
        }
        fn1()

        //2.有参返回值
        //ES5
        let add = function (a,b) {
            return a + b
        }
        console.log(add(91,1436));

        //ES6
        let add2 =(a,b) => {
            return a + b
        }
        console.log(add2(467,258));
    </script>

箭头函数高阶用法：如果函数只有一个形参，则可以省略形参小括号

let fn1 = (a) => {
            return a * 4
        }
        console.log(fn1(648));

如果函数只有一行代码，则可以省略函数大括号

注意：如果省略函数大括号，则返回值也要省略return

        let fn2 = a => a * 3
        console.log(fn2(42));

五.拓展运算符

扩展运算符是三个点（...）。用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。

<script>
  
        let person = {
            name:'李四',
            age:20,
            sex:'男'
        }

        let student = {
            score:99,
            girlFiend:'有'
        }
        let monitor = {
            ...person,
            
            ...student,
            hoppy:'打游戏'
        }
        console.log(monitor);
    </script>

作用：对象遍历的一种简写形式