对象语法增强

最新推荐文章于 2024-08-18 13:05:25 发布

407指导员

最新推荐文章于 2024-08-18 13:05:25 发布

阅读量112

点赞数 1

分类专栏： # es6 文章标签： es6

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110958568

版权

es6 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

对象语法增强

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对象字面量增强写法</title>
</head>
<body>
<script>
  // 属性增强写法,在es5中，不能直接在字面量中不能直接动态命名属性

  /*  const nameKey = 'name';
    const ageKey = 'age';
    const heightKey = 'height';

    let person = {};
    person[nameKey] = 'LQJ';
    person[ageKey] = 18;
    person[heightKey] = 1.88
    console.log(person);//Object { name: "LQJ", age: 18, height: 1.88 }*/
  //在es6中可以这样写
  const nameKey = 'name';
  const ageKey = 'age';
  const heightKey = 'height';
  const sayNameKey = 'sayName';

  let person = {
    [nameKey]: 'LQJ',
    [ageKey]: 18,
    [heightKey]: 1.88
  };
  console.log(person);//Object { name: "LQJ", age: 18, height: 1.88 }
  //如果名字和属性相同还可以如此来写
  const name = 'TTY';
  const age = 25;
  const height = 1.63;

  let person1 = {
    name,
    age,
    height
  };
  console.log(person1);//Object { name: "TTY", age: 25, height: 1.63 }
  //简写方法名，不用写匿名函数了
  let person2 = {
    sayName: function () {
      console.log('我是es5的函数定义');
    }
  };
  person2.sayName();//我是es5的函数定义
  let person3 = {
    sayName() {
      console.log('我是es6的函数定义');
    }
  };
  person3.sayName();//我是es6的函数定义
  //属性简写和方法简写相结合
  let person4 = {
    [sayNameKey]() {
      console.log('我是es6的函数定义');
    }
  };
  person4.sayName();//我是es6的函数定义
</script>
</body>
</html>

407指导员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
对象语法增强

对象语法增强<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>对象字面量增强写法</title></head><body><script> // 属性增强写法,在es5中，不能直接在字面量中不能直接动态命名属性 /* const nameKey = 'name'; const
复制链接

扫一扫

专栏目录