2023/3/8日笔记

少年别浪
146 阅读2分钟

6-1、方括号语法

方括号语法和点语法的区别

  • 点语法是方括号语法的特殊形式,只不过方括号能干的更全面罢了

属性名由数字、字母、下划线、以及 $ 构成，并且数字还不能打头的时候可以使用点语法

合法标识符可以用来作为变量或常量值

当你的属性值或方法名是合法标识符时，可以使用点语法，其他情况使用方括号语法

代码案例

<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>6-1、方括号语法</title>
</head>

<body>
    <script>
        // 1.方括号语法的用法
        // const prop = "age";
        // const person = {};

        // person.prop = 18;
        // person[prop]  = 18;
        // console.log(person);

        // const prop = "age";
        // const person = { 
        //     [prop]: 18 
        // }
        // console.log(person);

        // 2.方括号中可以放什么
        // ${}
        // {值或通过计算方式可以得到值的（表达式）}
        // const prop = "age";
        // const func = () => 'age2';
        // const person = {
        //     [prop]:18,
        //     [func()]:18,
        //     ['sex']:'male',
        //     // ['se'+'x']:'female',
        // }
        // console.log(person);

        // 3.方括号语法和点语法的区别
        // 点语法是方括号语法的特殊形式,只不过方括号能干的更全面罢了
        // const person = {};
        // person.age 等价于 person['age']

        // 属性名由数字、字母、下划线、以及 $ 构成，并且数字还不能打头的时候可以使用点语法
        // age18_$     √
        // 18age1      X
        // 合法标识符可以用来作为变量或常量值
        // 当你的属性值或方法名是合法标识符时，可以使用点语法，其他情况使用方括号语法
    </script>
</body>

</html>

6-2、属性和方法的简洁表示法

代码案例

<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>6-2、属性和方法的简洁表示法</title>
</head>
<body>
    <script>
        // 1.对象字面量是什么
        // 实例化构造函数生成对象
        // const person = new Object();
        // person.age = 18;
        // person.speak = function () {};

        // 对象字面量
        // const person = {
        //     age:18,
        //     speak:function(){},
        // };
        // console.log(person);

        // 2.属性的简洁表示法
        const age = 20;
        const person = {
            // age:age.
            age,
            // 3.方法的简洁表示法
            // speak: function () {},
            speak(){},
        }
        console.log(person);
    </script>
</body>
</html>

7-1、函数参数的默认值

认识函数默认值

  • 调用函数默认值的时候传参了，就用传递的参数；如果没传参，就用默认值

代码案例

<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>7-1、函数参数的默认值</title>
</head>
<body>
    <script>
        // 1.认识函数默认值
        // 调用函数默认值的时候传参了，就用传递的参数；如果没传参，就用默认值
        // multiply(2,1);
        // multiply(2);

        // 2.函数参数默认值的基本用法
        // 以前的用法
        // const multiply = (x,y) => {
        //     if(y === undefined) {
        //         y = 1;
        //     }
        //     return x*y;
        // }
        
        // const multiply = (x,y = 1) => x*y;
        // console.log(multiply(2,2));
        // console.log(multiply(2));

            

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

7-2、函数参数默认值的注意事项

1.默认值的生效条件

  • 不传参数，或者明确的传 undefined 作为参数，只有这两种情况下，默认值才会生效

2.默认值表达式

  • 如果默认值是表达式，默认值表达式是惰性求值的

3.设置默认值的小技巧

  • 函数参数的默认值，最好从参数列表的最右边开始设置

代码案例

<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>7-2、函数参数默认值的注意事项</title>
</head>
<body>
    <script>
        // 1.默认值的生效条件
        // 不传参数，或者明确的传 undefined 作为参数，只有这两种情况下，默认值才会生效
        // const multiply = (x,y = 1) => x*y;
        // console.log(multiply(2,0));
        // console.log(multiply(2,null));
        // console.log(multiply(2,undefined));
        // console.log(multiply(2));

        // 2.默认值表达式
        // 如果默认值是表达式，默认值表达式是惰性求值的
        // 这不是第一次遇见了，省略

        // 3.设置默认值的小技巧
        // 函数参数的默认值，最好从参数列表的最右边开始设置
        // const multiply = (x=1,y) => x*y;
        // console.log(,y);
        // console.log(undefined,y);
        const multiply = (x,y = 2) => x*y;
        console.log(multiply(2));
        </script>
</body>
</html>

7-3、函数参数默认值的应用

代码案例

<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>7-3、函数参数默认值的应用</title>
</head>

<body>
    <script>
        // 1.接收很多参数的时候
        // const logUser = (username = "ZhangSan", age = 0, sex = "male") => console.log(username, age, sex);
        // logUser("Alex", 18, "male");
        // logUser();

        // 2.接收一个对象作为参数
        // const logUser = option => console.log(option.username, option.age, option.sex);
        // logUser({
        //     username: "ZhangSan",
        //     age: 0,
        //     sex: "male"
        // });
        // const logUser = ({username,age = 0,sex = "male"}) => console.log(username, age, sex);
        // logUser({
        //     username: "ZhangSan",
        //     age: 0,
        //     sex: "male"
        // });

        // logUser({username: "ZhangSan"});
        // 相当于下面这行解构赋值
        // {username,age = 0,sex = "male"} = {username: "ZhangSan"}

        // logUser({});

        const logUser = ({username = "老八",age = 0,sex = "male"} = {}) => console.log(username, age, sex);
        // 可以理解为
        // const logUser = (option = {}) => console.log(username, age, sex);
        
        // logUser();
        // 相当于
        // {username,age = 0,sex = "male"} = undefined;

        logUser();
        // 相当于
        // {username,age = 0,sex = "male"} = {};
        
    </script>
</body>

</html>

8-1、剩余参数

  • 剩余参数永远是个数组，即使没有值，也是空数组

代码案例

<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>8-1、剩余参数</title>
</head>
<body>
    <script>
        // 1.认识剩余参数
        // const add = (x,y,z,...args) => {}

        // 2.剩余参数的本质
        const add = (x,y,...args) => {
            console.log(x,y,args);
        };
        add();
        add(1);
        add(1,2);
        add(1,2,3,4,5,6,7,8,9);

        // 剩余参数永远是个数组，即使没有值，也是空数组

        // 3,4,5 -> [3,4,5]
    </script>
</body>
</html>

8-2、剩余参数的注意事项

箭头函数的剩余参数

  • 箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号

剩余函数的位置

  • 剩余函数只能是最后一个参数，之后不能再有其他参数，否则会报错

代码案例

<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>8-2、剩余参数的注意事项</title>
</head>

<body>
    <script>
        // 1.箭头函数的剩余参数
        // 箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号
        // const add = ...argu => {}
        // const add = (...argu) => {}

        // 2.使用剩余参数替代 arguments 获取实际参数
        // const add = function () {
        //     console.log(arguments);
        // }
        // add(1,2,3);

        // const add = (x,y) =>{
        //     console.log(arguments);
        // }
        // 因为箭头函数是没有 arguments 的，所以可以使用剩余函数来替代arguments，并且剩余参数是一个实打实的数组，数组的好处要比类数组好得多
        // const add = (...argus) => {
        //     console.log(argus);
        // }
        // add(1, 2, 3)

        // 3.剩余函数的位置
        // 剩余函数只能是最后一个参数，之后不能再有其他参数，否则会报错
        // const add = (x,...argus,y) => {console.log(argus);}
        const add = (x,...argus) => {console.log(argus);}
        add(1,2,3,4,5,6)
    </script>
</body>

</html>

8-3、剩余参数的应用

代码案例

<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>8-3、剩余参数的应用</title>
</head>

<body>
    <script>
        // 1.完成 add 函数
        // const add = (...args) => {
        //     let sum = 0;
        //     for(let i=0;i<args.length;i++){sum+=args[i]};
        //     // 也可以使用reduce代替for
        //     return sum;
        // }
        // console.log(add());
        // console.log(add(1,2,3));

        // 2.与解构赋值结合使用
        // 剩余参数不一定非要作为函数参数使用
        // 必须是最后一个
        // const [num,...argus,y] = [1,2,3,4,5]
        // const [num,...argus] = [1,2,3,4,5];
        // console.log(num,argus);

        // const func = ([nums,...argus]) => {}
        // func([1,2,3,4,5])
        
        const { x,y,...z} = { a: 3, x: 1, y: 2, b: 4 };
        // 必须是最后一个
        // const { x,y,...z,yy} = { a: 3, x: 1, y: 2, b: 4 };
        console.log(x,y,z);
    </script>
</body>

</html>

9-1、数组的展开运算符

代码案例

<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>9-1、数组的展开运算符</title>
</head>
<body>
    <script>
        // 1.认识展开运算符
        // [3,1,2];
        // Math.min

        // console.log(Math.min([3,2,1]));
        // console.log(Math.min(3,2,1));

        // [3,2,1] -> 3,2,1

        // 2.数组展开运算符的基本用法
        console.log(Math.min(...[3,2,1]));
        // 相当于
        // console.log(Math.min(3,2,1));
        </script>
</body>
</html>

9-2、区分剩余参数和展开运算符

代码案例

<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>9-2、区分剩余参数和展开运算符</title>
</head>
<body>
    <script>
        // 1.根本区别

        // 展开运算符
        // [3,2,1] -> 3,2,1

        // 剩余参数
        // 3,2,1 -> [3,2,1]

        // 2.区分剩余参数和展开运算符
        
        // 剩余参数
        const add = (...argus) =>  {
            console.log(argus);

            
            // // 展开运算符
            // console.log(...argus);
            // console.log(...[1,2,3]);
            // console.log(1,2,3);
            
        }
        add(1,2,3);
        console.log([...[1,2,3],4]);
        // [1,2,3] -> 1,2,3
    </script>
</body>
</html>

9-3、数组展开运算符的应用

代码案例

<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>9-3、数组展开运算符的应用</title>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        // 1.复制数组
        // const a = [1,2];
        // const b = a;
        // b[0] = 3;
        // console.log(a);

        // const a = [1,2];
        // const c = [...a];
        // c[0] = 3;
        // console.log(a);

        // 2.合并数组
        const a = [1,2];
        const b = [3];
        const c = [4,5];

        // 这里是展开，并不是剩余参数，所以想怎么加就怎么加
        // console.log([11,...b,...c,22,...a,12]);

        // console.log([...a,...b,...c]);

        // 3.字符串转为数组
        // 字符串可以按照数组的形式展开
        console.log(...'Alex');
        // 相当于
        // console.log('A','l','e','x');
        console.log([...'Alex']);
        // ES6之前采用这种方法
        // console.log('Alex'.split(""));

        // 4.常见的类数组转化为数组
        // arguments
        function func () {
            // console.log(arguments.push());
            console.log([...arguments]);
        }
        func(1,2)

        // NodeList
        // console.log(document.querySelectorAll("p"));
        console.log([...document.querySelectorAll("p")].push);
    </script>
</body>
</html>
avatar
文章
阅读
粉丝