ES6对象优化

最新推荐文章于 2022-04-14 16:10:52 发布
最新推荐文章于 2022-04-14 16:10:52 发布
阅读量234 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengqiuming/article/details/109143871
版权

一 点睛

扩展运算符（ spread ）是三个点（...）。它将一个数组或对象转为用逗号分隔的参数序列。

二 实战

<!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>
        /* 对象的新方法 */
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //key/values/entries方法
        console.log(Object.keys(person)); // ["name", "age", "language"]
        console.log(Object.values(person)); // ["jack", 21, Array(3)]
        console.log(Object.entries(person)); // [Array(2), Array(2), Array(2)]

        const target = { a: 1 };
        const source1 = { b: 2 };
        const source2 = { c: 3 };

        // assign将源对象的所有可枚举属性复制到目标对象中。
        Object.assign(target, source1, source2);
        console.log(target); // {a:1,b:2,c:3}

        /* 声明对象简写 */
        const age = 23
        const name = "张三"
        //原本声明对象
        const person1 = { age: age, name: name }

        //简写后(若属性名与常量名相同时才可以使用)
        const person2 = { age, name }
        console.log(person2);

        /* 对象函数属性简写 */
        let person3 = {
            name: "jack",
            // 以前：
            eat: function (food) {
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用，对象.属性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
                console.log(this.name + "在吃" + food);
            }
        }

        person3.eat("苹果")
        person3.eat("香蕉")
        person3.eat("梨子")

        /* 对象扩展运算符 */
        // 1 拷贝对象（深拷贝）
        let p1 = { name: "Amy", age: 15 }
        let someone = { ...p1 }
        console.log(someone)  // {name: "Amy", age: 15}

        // 2 合并对象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let p2 = { name: "zhangsan" }
        p2 = { ...age1, ...name1 }
        console.log(p2) // {age: 15, name: "Amy"}
    </script>
</body>

</html>

三 测试

chengqiuming
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6新特性：对象优化
流楚丶格念的博客
02-21 1780
文章目录基础用法属性打印复制对象声明对象简写对象的函数属性简写拷贝对象（深拷贝）对象合并 基础用法 属性打印 const person = { name: 'jack', age: 21, language: ['java','js','css'] }; // 打印所有key console.log(Object.keys(person)); // 打印所有value console.log(Object.values(person)); // 将属性值以键值对的方式打印 cons
es6入门.zip
08-28
以上只是 ES6 中部分关键特性的介绍，实际学习中还需要深入理解迭代器、Proxy、Reflect、尾调用优化等其他概念。这个 ES6 入门教程将详细讲解这些内容，帮助你快速掌握 ES6 的核心知识，提升编程能力。无论你是初学...
ES6----对象优化
热门推荐
诗水人间
07-01 14万+
获取对象的变量和值 const person={ name:"jack", age:21, language:['java','js','css'] } console.log(Object.keys(person));//输出["name","age","language"] console.log(Object.values(person));//["jack",21,Array[3]] console.log(Object.entries(person)); /* [ ["name","jac
es6 函数优化
baidongying的博客
08-01 473
es6 函数改变 可以为函数定义默认参数，在es6之前，可能需要在函数体内添加额外的代码来检查参数是否存在，如若不存在，则需要手动赋一个默认值。 也可以为函数定义不定参数，这个数组中包含其后所有的参数，由于使用的是真实数组，且可以根据需要决定要囊括到数组中的参数，因此不定参数是一个比arguments对象更灵活的解决方案。 展开运算符与不定参数形似，可以通过它解构数组，并将每一个元素作为函数的第一参
es6 对Object类型做的一些常用升级优化
m0_49016709的博客
07-13 537
优化部分： 1、.对象属性变量式声明。ES6可以直接以变量形式声明对象属性或者方法，。比传统的键值对形式声明更加简洁，更加方便，语义更加清晰。 let [apple, orange] = ['red appe', 'yellow orange']; let myFruits = {apple, orange}; // let myFruits = {apple: 'red appe', orange: 'yellow orange'}; 尤其在对象解构赋值(见优化部分b.)或者模块输出变量时，这种写
ES6的函数优化
实践求真知
10-18 212
一实战 <!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> <.
ES6_es6_
09-30
在严格模式下，ES6 实现了尾调用优化，避免栈溢出。 12. **Proxy 和 Reflect** - **Proxy**：创建一个代理对象，可以拦截并定制对象的访问行为。 - **Reflect**：提供了一套与 Proxy 配套的方法，用于操作对象。 ...
ES6规范简介
02-06
ES6规范简介。 1.数据类型的声明，除了原有的var，新增const、let、class。同时新增“解构”操作，对变量进行赋值。 2.基础数据类型除了原有的六种（string、boolean、number、null、undefined、object）,新增Symbol...
es6 prototype
12-04
ES6（ECMAScript 2015）引入了一系列新的特性，其中就包括对原型对象的改进，使得对象继承更加简洁易用。在本教程中，我们将深入探讨ES6中的原型扩展以及如何使用`XExtends Core v1.0.0`提供的核心功能，如`core.js`...
ES6之函数优化(默认参数、剩余参数、 箭头函数)
猫老板的豆
05-09 682
ES6中，当参数个数无法确定时，可以使用剩余参数（rest parameter）来表示，剩余参数就相当于一个容器，调用函数时传入几个参数值，这个容器就装载几个参数值。剩余参数能够将多个独立的参数合并到一个数组中去，剩余参数表示为。如果箭头函数只有一条语句，那么可以省略大括号，并且自动将该语句的结果作为返回值。箭头函数不能使用yield关键字来定义生成器函数，因此无法迭代返回多个值。）或使用默认参数来获取参数列表。由于箭头函数没有自己的this值，因此不能使用。箭头函数相当于匿名函数，并且简化了函数定义。
es6对JS函数的优化
qq_39144051的博客
04-11 214
函数参数的默认值、多参数写法 1.1函数默认值：给入口参数设定一个默认值 1.2多参数写法：…变量名，n表示一个存放参数的数组 箭头函数 语法格式：方法名=(参数)=>{方法体} 当参数只有一个的时候，()可以省略不写；当方法体只有一行时，{}可以省略不写，如下图： 3. 函数尾调用：某个函数的最后一步是调用另一个函数。 用函数尾调用优化改写递归： 阮一峰-尾调用优化htt...
JavaScript代码ES6优化点
spicyIsPleasant的博客
04-08 1028
一、取值使用解构方法 数组 优点：只需提供位置即可，并且可同时获得不同位置的值 let array = [1,2,3,4,5] let [a,,b] = array console.log(a) //1 console.log(b) //3 let array = [1,2,3,4,5] let [,,a] = array a //3 对象 优点：只需提供名称（与属性名形同）即可，不需要注意位置 let array ={name:'Tom',age:18} let {
ES6的优化技巧
Qianliwind的博客
10-09 383
不是标题党，这是一位leader在一次代码评审会对小组成员发出的“怒吼”，原因是在代码评审中发现很多地方还是采用ES5的写法，也不是说用ES5写法不行，会有BUG，只是造成代码量增多，可读性变差而已。 恰好，这位leader有代码洁癖，面对3~5年经验的成员，还写这种水平的代码，极为不满，不断对代码进行吐槽。不过对于他的吐槽，我感觉还是有很大收获的，故就把leader的吐槽记录下来，分享给掘友们，觉得有收获点个赞，有错误的或者更好的写法，非常欢迎在评论中留言。 ps：ES5之后的JS语法统称ES6！！！
es6对象的扩充
lucky_ly的博客
08-11 124
1.对象属性简介的定义 不必向以前一样必须要键值对的形式定义，可以对已经定义的变量或函数直接放入对象，对象的属性名默认会和变量名相同。 const attribute = "attr"; const method = function (){ document.write("<br /> just simple define attribute"); } const obj = {at...
ES6对Object类型做的优化更新
qq_44675204的博客
07-31 219
11111
浅谈ES6尾调优化
fernwehseven的博客
04-14 193
前言 前两天笔试的时候遇到了这个问题，看了多篇博文之后终于理解了，在这里记录一下~ 什么是尾调用 简单来说，一个函数的返回值是对另外一个函数的调用，这种情况就叫做尾调用。 function f1(n) { return n * 2 } function f2(n) { return f1(n + 1) //line A } const res=f2(2))//line B 在以上代码中，f2的返回值是对f1的调用，这就是尾调用。 对尾调用的优化 首先我们要知道尾调优化是浏览器帮我们完成的
ES6之尾调用优化
高山景行，一尘不染
08-08 297
什么是尾调用？  尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。 function f(x){ return g(x); } 上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。 以下三种情况，都不属于尾调用。 // 情况一 function f(x){ let y = g(x); r...
ES6 尾调用优化--函数编程中规范
kill_bugs的博客
05-25 839
学习笔记： 尾递归 函数调用自身，称为递归。如果尾调用自身，就称为尾递归。 递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。 function factorial(n) { if (n === 1) return 1; return n * fa
writable es6
最新发布
09-19
writable是ES6中的一个属性，用于定义对象的属性是否可被赋值修改。当将一个属性定义为writable时，这个属性可以被修改，即可以通过赋值运算符改变该属性的值。 在ES6之前，对象的属性默认都是可写的，即默认可被修改。但是ES6引入了一些新的特性来优化对象的属性定义与访问。其中一个特性就是writable属性。通过将属性定义为不可写，可以避免在修改属性时出现意外的情况。 在ES6中，我们可以使用Object.defineProperty()方法来定义对象的属性，并设置属性的可写性。该方法接受三个参数：需要定义属性的对象、属性名和一个描述符对象。描述符对象中的writable属性，用于指定属性是否可写。 例如，我们定义了一个person对象，该对象有一个名为name的属性。我们可以选择性地将该属性定义为不可写，以确保在运行时不会修改对象的名称： ```javascript const person = {}; Object.defineProperty(person, 'name', { value: 'John', writable: false, // 将属性设置为不可写 }); person.name = 'Jane'; // 尝试修改属性的值，但会被忽略 console.log(person.name); // 输出: John ``` 通过上述代码，我们可以看到无论我们如何尝试修改person对象的name属性，最终结果都是保持不变。这是因为在定义属性时，我们将其设置为不可写。这样做可以确保我们在代码中意外地修改属性的值。 在使用ES6的可写性特性时，需要根据实际需求来决定是否将属性定义为可写。在某些情况下，将属性定义为只读是非常有用的，以确保数据的稳定性和完整性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值