ES6 对象字面量的改进

最新推荐文章于 2024-07-16 08:52:12 发布

五仁卤鸡翅

最新推荐文章于 2024-07-16 08:52:12 发布

阅读量202

点赞数 2

分类专栏： ES6 文章标签： javascript es6

本文链接：https://blog.csdn.net/MoonNight608/article/details/104167495

版权

ES6 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

介绍

本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记

字面量改进

字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字面量。
字面量分为字符串字面量(string literal )、数组字面量(array literal)和对象字面量(object literal)，另外还有函数字面量(function literal)。

　var a = 1  　　//1是字面量
　var b = 'css'　　 //css是字面量
　var c = [5,6,7] 　　 //567是字面量
　var d = {"my","box"} 　　//{"my","box"}是字面量

具体示例如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spread operator Intro</title>
</head>
<style>

</style>

<body>
<script>
const name = 'Laravist';
const age = 2;
const birthday='2015-09';

// 当属性名和变量名相同时，只需写一次即可

// 传统写法
const Lavarist={
    name: name,
    age: age,
    birthday: birthday
    // 方法也可以进行简写，传统方法如下
    great:function(){
        
    },
    getName:function(){
        
    }
}

//ES6 写法，方法也进行了简写
const Lavarist={
    name,
    age,
    birthday
    great(){}，
    getName(){}
   
}

</script>

</body>
</html>

在ES5之前，如果属性名是个变量或者需要动态计算，则只能通过对象.[变量名] 的方式去访问。

var p = {
        name : '李四',
        age : 20
    }
    var attName = 'name';
    console.log(p[attName]) //这里 attName表示的是一个变量名。

而且这种动态计算属性名的方式在字面量中是无法使用的。

var attName = 'name';
    var p = {
        attName : '李四',  // 这里的attName是属性名，相当于p定义了属性名叫 attName的属性。
        age : 20
    }
    console.log(p[attName])  // undefined

在ES6中，把属性名用[ ]括起来，则括号中就可以引用提前定义的变量。

var attName = 'name';
    var p = {
        [attName] : '李四',  // 引用了变量attName。相当于添加了一个属性名为name的属性
        age : 20
    }
    console.log(p[attName])  // 李四

如下例子也是动态属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spread operator Intro</title>
</head>

<body>
<script>
// 动态属性
let id=0;
const userIds = {
    [`user-${++id}`]: id,
    [`user-${++id}`]: id,
    [`user-${++id}`]: id
}

// 动态属性
const keys=['name','age','birthday'],
const values = ['Laravist',2,'2015-09']
const Larvist= {
    [keys.shift()]: values.shift(),
    [keys.shift()]: values.shift(),
    [keys.shift()]: values.shift()
}
</script>

</body>
</html>

五仁卤鸡翅

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 对象字面量的改进

目录介绍字面量改进介绍本文是在学习ES6时做的一些学习笔记，所有的笔记请查看：ES6 学习笔记本文视频地址为:https://www.bilibili.com/video/av47304735?p=25字面量改进字面量表示如何表达这个值，一般除去表达式，给变量赋值时，等号右边都可以认为是字面量。字面量分为字符串字面量(string literal )、数组字面量(array lite...
复制链接

扫一扫

专栏目录