今天学习ES6的第二天（在es5基础上继续增加）

最新推荐文章于 2024-09-03 16:07:32 发布

聿庵

最新推荐文章于 2024-09-03 16:07:32 发布

阅读量762

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/N2316429505/article/details/121898404

版权

今天学习对象的扩展和函数的扩展

一，对象的扩展

1，当对象的属性名和属性值是相同的时候，则可以直接写一个属性名就可以。

<!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 name = '夏利'
        let age = 20
        let like = '干饭'

        // 原来
        let obj = {
            name: name,
            age: age,
            like: like
        }
        console.log(obj);
        // 简化
        let obj1 = {
            name,
            age,
            like
        }
        console.log(obj1);
    </script>
</body>

</html>

2，通过[]表达式的形式，来给对象添加属性，如果不用[]的话，在对象之中是直接添加变量名

<!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>
         var ter = 'heat'
        let a = {
            [ter]: '中括号引用变量',
            ter: '直接引用变量'
        }
        console.log(a);
    </script>
</body>

</html>

3，对象里面简写函数

<!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 add() {
            console.log(111);
        }
          let a = {
            name: '李四',
            //调用外面的函数，当属性名和属性值相同的时候可以直接省略属性值
            add,
            // 直接引用函数
            ree() {
                console.log('我擦累');
            },
    }
          console.log(a);
    </script>
</body>

</html>

4，两个新增的方法 Object.keys()和Object.values()

Object.keys() 取出对象中所有的属性名

Object.values()取出指定对象的属性值

二函数的扩展

箭头函数

<!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 add = a => {
            console.log(a);
        }
        add(10)
            //  且当函数体里面只有一个returu是 可以省略{}和 return 直接写执行语句
        let add2 = a => a + 10
        console.log(add2(13));
        // 当有多个参数时，按照原来的方法写
        let add1 = (b, c) => {
            console.log(b + c);
        }
        add1(10, 15)
    </script>
</body>

</html>