ES6 对象扩展:对象简写,对象属性 表达式,扩展运算符 ...,Object.assign,Object.is,用法和应用场景

1. 对象属性简写

1.1 基本语法

// 传统写法
const name = 'John';
const age = 25;
const user = {name: name,age: age
};// ES6 简写语法
const user = {name,age
};

1.2 实际应用场景

// 1. 函数返回对象
function createUser(name, age, email) {return {name,age,email};
}// 2. React 组件状态
function useState(initialState) {const state = initialState;const setState = (newState) => {// 更新逻辑};return { state, setState };
}// 3. 模块导出
const actions = {increment,decrement,reset
};
export default actions;

2. 对象属性表达式

2.1 基本语法

const prefix = 'user';
const id = 1;// 计算属性名
const user = {[`${prefix}_${id}`]: 'John',[`${prefix}Email`]: 'john@example.com'
};console.log(user.user_1); // 'John'
console.log(user.userEmail); // 'john@example.com'

2.2 实际应用场景

// 1. 动态键名对象
function createStyles(theme) {return {[`button_${theme}`]: {backgroundColor: theme === 'dark' ? '#000' : '#fff',color: theme === 'dark' ? '#fff' : '#000'}};
}// 2. Redux action types
const actionTypes = {[`FETCH_USER_${status}`]: `FETCH_USER_${status}`,[`UPDATE_USER_${status}`]: `UPDATE_USER_${status}`
};// 3. 国际化键值对
const i18n = {[`greeting_${language}`]: '你好',[`farewell_${language}`]: '再见'
};

3. 扩展运算符 (…)

3.1 对象展开

// 基本用法
const base = { a: 1, b: 2 };
const extended = { ...base, c: 3 };
console.log(extended); // { a: 1, b: 2, c: 3 }// 对象合并
const defaults = { theme: 'light', language: 'en' };
const userPreferences = { theme: 'dark' };
const finalPreferences = { ...defaults, ...userPreferences };
console.log(finalPreferences); // { theme: 'dark', language: 'en' }

3.2 实际应用场景

// 1. React 组件属性传递
function Button({ children, ...props }) {return (<button {...props}>{children}</button>);
}// 2. 配置合并
const baseConfig = {api: 'https://api.example.com',timeout: 5000
};const devConfig = {...baseConfig,api: 'http://localhost:3000'
};// 3. 状态更新
setState(prevState => ({...prevState,loading: false,data: newData
}));

4. Object.assign()

4.1 基本用法

// 对象合并
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };const result = Object.assign(target, source1, source2);
console.log(result); // { a: 1, b: 2, c: 3 }
console.log(target); // { a: 1, b: 2, c: 3 } - 目标对象被修改

4.2 实际应用场景

// 1. 创建对象的浅拷贝
const original = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, original);// 2. 合并默认配置
function createConfig(options) {const defaults = {debug: false,timeout: 5000,retries: 3};return Object.assign({}, defaults, options);
}// 3. 不可变状态更新
const state = { user: { name: 'John' }, theme: 'light' };
const newState = Object.assign({}, state, { theme: 'dark' });

5. Object.is()

5.1 基本用法

// 比较值
console.log(Object.is(5, 5)); // true
console.log(Object.is(5, '5')); // false
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(+0, -0)); // false// 与 === 的区别
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // trueconsole.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

5.2 实际应用场景

// 1. 精确的值比较
function areSameValues(x, y) {return Object.is(x, y);
}// 2. NaN 检测
function isReallyNaN(x) {return Object.is(x, NaN);
}// 3. React 中的值比较
function shouldComponentUpdate(nextProps) {return !Object.is(this.props.value, nextProps.value);
}

6. 最佳实践

6.1 选择合适的方法

// 1. 简单对象合并:使用扩展运算符
const merged = { ...obj1, ...obj2 };// 2. 需要深拷贝:使用其他方法
const deepCopy = JSON.parse(JSON.stringify(obj));// 3. 精确值比较:使用 Object.is()
if (Object.is(value1, value2)) {// 相等处理
}

6.2 性能考虑

// 1. 避免过深的对象展开
const obj = {...baseObj,...middlewareObj,...finalObj
};// 2. 使用 Object.assign 处理多个源对象
const result = Object.assign({}, baseConfig,environmentConfig,userConfig
);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/68048.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【2025】camunda API接口介绍以及REST接口使用(3)

前言 在前面的两篇文章我们介绍了Camunda的web端和camunda-modeler的使用。这篇文章主要介绍camunda结合springboot进行使用&#xff0c;以及相关api介绍。 该专栏主要为介绍camunda的学习和使用 &#x1f345;【2024】Camunda常用功能基本详细介绍和使用-下&#xff08;1&…

Java进阶学习之路

Java进阶之路 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 Java进阶之路前言一、Java入门 Java基础 1、Java概述 1.1 什…

JAVA安全—反射机制攻击链类对象成员变量方法构造方法

前言 还是JAVA安全&#xff0c;哎&#xff0c;真的讲不完&#xff0c;太多啦。 今天主要是讲一下JAVA中的反射机制&#xff0c;因为反序列化的利用基本都是要用到这个反射机制&#xff0c;还有一些攻击链条的构造&#xff0c;也会用到&#xff0c;所以就讲一下。 什么是反射…

TfidfVectorizer

TF-IDF / Term Frequency - Inverse Document Frequency 作用&#xff1a;是自然语言处理NLP中常用的文本特征提取工具&#xff0c;用于将文本数据转换为数据向量。 核心思想&#xff1a;是通过统计词频和逆文档频率来量化词语在文本中的重要性。 T F − I D F ( t , d ) T F…

DeepSeek-R1 论文解读:强化学习如何 “炼” 出超强推理模型?

深度解析DeepSeek-R1&#xff1a;强化学习驱动大语言模型推理能力新突破 论文链接&#xff1a;DeepSeek-R1: Incentivizing Reasoning Capability in LLMs via Reinforcement Learning 在大语言模型&#xff08;LLMs&#xff09;飞速发展的当下&#xff0c;提升模型推理能力成…

【数据结构】循环链表

循环链表 单链表局限性单向循环链表判断链表是否有环思路code 找到链表入口思路代码结构与逻辑 code 单链表局限性 单链表作为一种基本的数据结构&#xff0c;虽然在很多场景下都非常有用&#xff0c;但它也存在一些局限性&#xff1a; 单向访问&#xff1a;由于每个节点仅包含…

ip属地是手机号还是手机位置?一文理清

在数字化和网络化的今天&#xff0c;IP属地这一概念逐渐成为了人们关注的焦点。特别是在社交媒体和在线平台上&#xff0c;IP属地的显示往往让人联想到用户的地理位置。然而&#xff0c;关于IP属地到底与手机号还是手机位置有关&#xff0c;却存在着不少误解和混淆。本文将深入…

【嵌入】基于nomic-embed-text-v1.5和HuggingFaceEmbeddings实现

测试代码 model_name = /media/zhangbin/DATA/DataCache/nomic-ai/nomic-embed-text-v1.5import osos.environ[HF_HOME] = /media/zhangbin/DATA/DataCache/#os.environ["TRANSFORMERS_CACHE"] = "/media/zhangbin/DATA/DataCache/" # 确保目录结构正确 if…

离散时间傅里叶变换(DTFT)公式详解:周期性与连续性剖析

摘要 离散时间傅里叶变换&#xff08;DTFT&#xff09;是数字信号处理领域的重要工具&#xff0c;它能将离散时间信号从时域转换到频域&#xff0c;揭示信号的频率特性。本文将深入解读DTFT公式&#xff0c;详细阐述其具有周期性和连续性的原因&#xff0c;帮助读者全面理解DT…

哈希表与散列表的原理及C++实现

1. 什么是哈希表&#xff1f; 哈希表&#xff08;Hash Table&#xff09;是一种高效的数据结构&#xff0c;用于存储键值对&#xff08;Key-Value Pairs&#xff09;。它通过哈希函数&#xff08;Hash Function&#xff09;将键&#xff08;Key&#xff09;映射到一个固定大小…

图像分类与目标检测算法

在计算机视觉领域&#xff0c;图像分类与目标检测是两项至关重要的技术。它们通过对图像进行深入解析和理解&#xff0c;为各种应用场景提供了强大的支持。本文将详细介绍这两项技术的算法原理、技术进展以及当前的落地应用。 一、图像分类算法 图像分类是指将输入的图像划分为…

前端框架中 HTML 的应用技巧:React、Vue、Angular 深度解析

系列文章目录 01-从零开始学 HTML&#xff1a;构建网页的基本框架与技巧 02-HTML常见文本标签解析&#xff1a;从基础到进阶的全面指南 03-HTML从入门到精通&#xff1a;链接与图像标签全解析 04-HTML 列表标签全解析&#xff1a;无序与有序列表的深度应用 05-HTML表格标签全面…

Vue - customRef 自定义ref

customRef 作用&#xff1a;创建一个自定义的 ref , 并对其依赖项跟踪和更新触发进行逻辑控制。 在原生 ref 的基础上&#xff0c;添加自己的逻辑等... 在 Vue 3 中&#xff0c;customRef 是一个用于创建自定义响应式引用的 API。它允许开发者控制和优化响应式引用的行为&…

数字化转型:概念性名词浅谈(第四讲)

​大家好&#xff0c;本篇文章是在新年之际写的&#xff0c;所以在这里先给大家拜个年。 今天要介绍的名词为ETL: ETL&#xff0c;是英文Extract-Transform-Load的缩写&#xff0c;用来描述将数据从来源端经过抽取&#xff08;extract&#xff09;、转换&#xff08;transfor…

UE学习日志#22 C++笔记#8 基础复习8 string和string_view2

1 std::string_view类 string_view基本上就是const string&的简单替代品&#xff0c;但不会产生开销。他不复制字符串。 string_view添加了remove_prefix(size_t)和remove_suffix(size_t)方法&#xff0c;前者将起始指针给定的偏移量来收缩字符串&#xff0c;后者则将结尾指…

UVM factory机制

目录 1. factory-register 1.1 uvm_object_registry#(type T=uvm_object, string Tname="") 1.1 uvm_default_factory::register 2. factory-override 2.1 set_type_override(uvm_object_wrapper override_type) 2.2 set_inst_override(uvm_object_wrapper ove…

Spring MVC学习——发送请求(@RequestMapping注解及请求参数绑定)

前言 Spring MVC作为Spring框架中的核心组件之一&#xff0c;其强大的功能在于能简洁高效地处理HTTP请求和响应。在开发Web应用时&#xff0c;理解和正确使用Spring MVC的注解&#xff0c;尤其是RequestMapping注解&#xff0c;至关重要。本文将详细讲解RequestMapping注解的使…

C# Action和 Func的用法

C#中的数据类型 函数数据类型 Action 是一个数据类型 但是是没有返回值得函数数据类型 Func 用于指定一个有返回值的委托 internal class Program{static void Main(string[] args){TT.F1(NoVoid);TT.F2(Void1);Void2(() > { Console.WriteLine("Void2执行了");…

C++中的模板(上)

C中的模板(上) 模板参数和函数参数是很像的,函数参数定义的形参对象,而模板参数定义的是类型. 模板分为函数模板和类模板 函数模板 一个交换两个数的函数模板: template<class T> // 此处typename和class是等价的 void Swap(T &a, T &b) {T temp a;a b;b …

MySQL面试题----如何进行 MySQL 数据库备份与恢复

MySQL 数据库备份 1. 使用 mysqldump 工具(逻辑备份) 全量数据库备份 该方式会备份指定数据库中的所有数据和表结构。在命令行中输入以下命令,将 username 替换为你的 MySQL 用户名,password 替换为对应的密码,database_name 替换为要备份的数据库名,backup.sql 为备份文…