数组与箭头函数

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

啊唯11

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

阅读量205

点赞数

文章标签：前端 javascript node.js

本文链接：https://blog.csdn.net/weixin_66059613/article/details/126877566

版权

数组

数组是一种复杂的数据类型数组的作用是可以储存多个数据

数组储存原理

数组储存由三个要素组成：

内存：数组的数据

下标：元素的位置

长度：元素的数量

接下来我们用代码来展示一下数组的基本用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
//数组声明
let array = ['胆','小','如','旭']

//数组取值?数组名【下标】
console.log(array);
console.log(array[3]);

//数组长度？数组名.length
console.log(array.length);

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

说完了基本用法，我们就来说一下数组的增删改查：这个就直接用代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let array =['活','着']
        console.log(array);//['活','着']

        //新增数组
        //添加到末尾
        array.push('就')
        console.log(array);//['活','着','就']
        //添加到开头
        array.unshift('行')
        console.log(array);//['活','着','就','行']
        //删除数组
        array.pop()
        console.log(array);//['活','着','就']
        //删除第一个元素
        array.shift()
        console.log(array);//['着','就']
        //数组改动
        array[0] = '嘿';
        console.log(array);//['嘿','就']
        array[4]= '哈'
        console.log(array);//['嘿', '着', 空属性 × 2, '哈']
        //删除指定的数列
        array.splice(3,1)
          console.log(array);//['嘿', '着', 空白, '哈']


    </script>
</body>
</html>

然后我们再来探究一下spread扩展运算符...

它可以说是数组遍历的一种简写形式：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //1.扩展运算符...
        //2.数组遍历的一种简写形式
        let person = {
            name: '胆小如旭',
            age: '18',
            sex: '两性之间'
        }
        let student = {
            score: 38,
            girlfriend: '右手'
        }
        let monitor = {
            ...person,
            ...student,
            hoppy: '吃喝'
        }
        console.log(monitor);
    </script>
</body>

</html>

我们再来一个进阶教学看一下在数组中扩展运算符的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script>
   let arr1 = [1,2,3]
   let arr2 = [4,5,6]
 //之前方法，连接两个数组
 let arr3 = arr1.concat(arr2)
console.log(arr3);//[1,2,3,4,5,6]
arr3.push(7)
console.log(arr3);//[1,2,3,4,5,6,7]

//扩展运算符写法
let arr4 = [...arr1,...arr2,7]
console.log(arr4);//[1,2,3,4,5,6,7]
//数组的最大值
let arr = [20,66,888,9844,1]
//之前的方法 求数组的最大值(Es5写法)利用apply传参，自动遍历arr，逐个传参
let max1 =Math.max.apply(Math,arr)
console.log(max1);//9844
//扩展运算符（ES6方法）
let max =Math.max(...arr)
console.log(max);//9844
</script>
    

</body>
</html>

扩展运算符相较与之前ES5的遍历方法可以说是简洁了许多。

箭头函数

es6 新增了使用胖箭头（=>）语法定义函数表达式的能力，很大程度上，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
 //箭头函数其实就是function关键词的简写形式
 //将function关键字用=> 符号代替
 
 //1无参返回值
//ES5
let fn =function(){
    console.log('88');//88
}
fn()
//ES6(function变成箭头符号=>;形参括号写在箭头左边)
let fn1=()=>{
    console.log('99');//99
}
fn1()
//2.有参返回值
//ES5
let add = function(a,b){
    return a+b
}
console.log(add(10,20));//30
 //ES6
 let add1=(a,b)=>{
     return a+b
 }
 console.log(add1(100,200));//300
 </script>
</body>
</html>

说完了基本用法我们来看一下箭头函数的高阶用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
 //如果函数只有一个形参，即可以省略形参小括号
 let fn1 = a => a * 2
  
console.log(fn1(62));//124

//如果函数只有一行代码，则可以省略函数大括号
//注意：如果省略函数大括号，则返回值也要省略return
//let fn2 = function(a){return a*2}
let fn2 = a=> a*2
console.log(fn2(30));//60
    </script>
</body>
</html>