数组的使用

最新推荐文章于 2023-04-20 10:59:51 发布

cabacwj

最新推荐文章于 2023-04-20 10:59:51 发布

阅读量46

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/cabacwj/article/details/126909081

版权

1.数据结构

代码如下：

<!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]);
        // 数组长度
        console.log(array.length);
        // 数组遍历
        for(let i = 0; i < array.length;i++){
            console.log(array[i]);
        }
      </script>
</body>
</html>

效果图：

2.数据的增删改查

代码如下：

<!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 arry = [1,2,3,4]

        // 在数组末尾增加元素
      arry.push(5);
      console.log(arry);

    //   在数组的开头增加元素
    arry.unshift('cccc');
    console.log(arry);

    // 删除最后一个元素
    arry.pop()
    console.log(arry);

    // 删除第一个元素
    arry.shift()
    console.log(arry);

    arry[0] ='护牙菜'
    console.log(arry);
    arry[3] ='小老鼠'
    console.log(arry);
    </script>
</body>
</html>

效果图：

3. 拓展运算符

代码如下：

<!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 person = {
            name:'护牙菜',
            age:19,
            sex:'男'
        }
        
        let student = {
            score:88,
            girlfriend:'代码'
        }

        let monitor = {
            ...person,//相当于遍历person的属性名和属性值，赋值给对象。
            ...student,
            hoppy:'学习'
        }
        console.log(monitor);
    </script>
</body>
</html>

效果如下：

4. 数组中使用拓展运算符

代码如下：

<!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]

        // es5 concat:连接数组
        let arr3 = arr1.concat(arr2)
        console.log(arr3);

        // es5
        let arr4 = [...arr1,...arr2]
        console.log(arr4);
        
        let arr = [11,22,333,55]
        let max1 = Math.max.apply(Math,arr);
        console.log(max1);

        let max = Math.max(...arr)
        console.log(max);
    </script>
</body>
</html>

效果如下：

5.箭头函数的基本用法

代码如下：

<!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>
//  无参数返回值 
// es5
let fn = function(){
    console.log('111');
}
fn()
// es6
let fn1 = () =>{
    console.log('222');
}
fn1()
// 有参有返回值
// es5
let add = function(a,b){
    return a + b
}
console.log(add(10,20));
// es6
let add1 = (a,b) => {
    return a+ b
}
console.log(add1(100,200));
</script>
    
   
</body>
</html>

效果如下：