滕建建设集团网站快懂百科登录入口

滕建建设集团网站,快懂百科登录入口,wordpress 文章不显示没有图片,怎么把网站列入黑名单一行...如何改变你的 JavaScript 写法#xff1f;深入解析 ES6 扩展运算符的实战精髓你有没有过这样的经历#xff1a;写 React 组件时#xff0c;想把父组件传来的所有额外属性“原封不动”地塞给input#xff0c;结果发现得一个个手动传递#xff1f;或者在处理…一行...如何改变你的 JavaScript 写法深入解析 ES6 扩展运算符的实战精髓你有没有过这样的经历写 React 组件时想把父组件传来的所有额外属性“原封不动”地塞给input结果发现得一个个手动传递或者在处理用户配置时既要保留默认值又要让自定义设置生效最后用了一堆Object.assign和三元表达式代码越写越长其实一个简单的...就能解决这些问题。这个看似不起眼的语法符号——扩展运算符Spread Operator自 ES6 引入以来已经悄然重塑了现代 JavaScript 的编码方式。它不只是“语法糖”更是一种思维方式的进化从命令式到声明式从可变修改到不可变更新。今天我们就来彻底讲清楚这行三个点到底能做什么、怎么用、有哪些坑以及为什么你在每一个项目里都应该用好它。一、什么是扩展运算符别被名字吓到扩展运算符写作...variable它的核心作用就一个字打散。比如你有一个数组const nums [1, 2, 3];你想把它作为参数传进函数Math.max(nums); // NaN —— 因为 Math.max 不接受数组以前你可能这么写Math.max.apply(null, nums); // 3但现在你可以直接写Math.max(...nums); // 3解释器看到...nums就会把它“展开”成1, 2, 3等价于Math.max(1, 2, 3);就这么简单。但正是这种“把集合拆成单个元素”的能力打开了无数新玩法的大门。二、数组操作告别 concat 和 push合并数组不用再 call apply 了以前合并两个数组const a [1, 2]; const b [3, 4]; const c a.concat(b); // [1, 2, 3, 4]现在可以这样const c [...a, ...b]; // [1, 2, 3, 4]更妙的是你可以在中间插入别的值const full [...a, middle, ...b]; // [1, 2, middle, 3, 4]这比concat灵活得太多。快速克隆数组要复制一个数组传统做法是const copy Array.from(original); // 或者 const copy original.slice();现在最简洁的方式是const copy [...original];注意这是浅拷贝。如果数组里有对象或数组它们的引用仍然共享。const arr [{ name: Alice }]; const clone [...arr]; clone[0].name Bob; console.log(arr[0].name); // Bob —— 原数组也被改了所以记住一句话...只深一层嵌套还得靠其他方法比如structuredClone或库函数。数组去重一行搞定结合Set的自动去重特性const dupes [1, 2, 2, 3, 3, 4]; const unique [...new Set(dupes)]; // [1, 2, 3, 4]干净利落没有循环没有 filter一行解决。三、函数调用动态传参的新姿势JavaScript 函数支持任意数量的参数但如果你手里是一个数组该怎么传老办法function sum(a, b, c) { return a b c; } const args [10, 20, 30]; sum.apply(null, args); // 60问题来了apply还要传null上下文语法冗余不说还容易出错。现在sum(...args); // 60清晰、直观、安全。实战Math 函数的最佳拍档Math.min、Math.max都不接受数组作为参数但你可以const values [5, 9, -1, 12]; const max Math.max(...values); // 12 const min Math.min(...values); // -1再也不用手动遍历找最大最小值了。四、对象操作配置合并与状态更新的艺术合并对象谁在后谁说了算假设你有一组默认配置const defaults { theme: light, fontSize: 14, autoSave: true, };用户有自己的偏好const userPrefs { theme: dark, fontSize: 18, spellCheck: true, };怎么合并以前用Object.assignconst config Object.assign({}, defaults, userPrefs);现在const config { ...defaults, ...userPrefs };结果是{ theme: dark, // 用户覆盖 fontSize: 18, // 用户覆盖 autoSave: true, // 默认保留 spellCheck: true // 新增字段 }顺序很重要后面的会覆盖前面的同名属性。这也意味着你可以轻松实现“补全缺失字段”、“优先级覆盖”等逻辑。React 中的状态更新神器在 React 函数组件中useState不会自动合并对象所以我们经常看到这种写法const [user, setUser] useState({ name: Tom, age: 25 }); // 想更新 age但不能只写 age否则 name 就丢了 setUser({ ...user, age: 26 });这就是扩展运算符的经典应用保持原有数据不变只替换需要更新的部分。同样的模式也出现在 Redux reducer 中case UPDATE_PROFILE: return { ...state, profile: { ...state.profile, name: action.payload.name } };每一层都用...保证不可变性便于调试和时间旅行。五、处理类数组对象arguments、NodeList 轻松转数组有些对象长得像数组有索引、有 length但不是真正的数组没法直接调用map、filter。典型例子函数中的argumentsDOM 查询返回的NodeList过去我们这么转换function example() { const args Array.prototype.slice.call(arguments); return args.map(x x * 2); }或者const divs Array.from(document.querySelectorAll(div));现在呢function example() { const args [...arguments]; return args.map(x x * 2); } const divs [...document.querySelectorAll(div)]; divs.forEach(div div.classList.add(active));语法更短语义更明确读起来就像“把这个东西变成数组”。六、构造新数组替代 Array.from 的极简写法除了转换已有结构扩展运算符还能帮你快速生成数组。字符串 → 字符数组const str hello; const chars [...str]; // [h,e,l,l,o]比str.split()更直观。生成数字序列想生成[0,1,2,3,4]怎么办const range [...Array(5).keys()]; // [0,1,2,3,4]原理-Array(5)创建一个长度为 5 的空数组-.keys()返回一个迭代器产出 0~4-...把迭代器展开成独立元素- 放进数组字面量里完成收集。一行代码无需 for 循环。七、真实项目中的高阶用法1. React 组件属性透传Props Spread这是扩展运算符在 JSX 中最惊艳的应用之一。设想一个封装好的输入框组件function TextInput({ label, required, ...props }) { return ( div classNameform-group label{label}{required *}/label input typetext {...props} classNameform-control / {props.error span classNameerror{props.error}/span} /div ); }父组件可以自由传入任何原生input支持的属性TextInput label用户名 required value{username} onChange{e setUsername(e.target.value)} placeholder请输入用户名 error{error} /不需要提前定义每个 prop也不用手动转发。{...props}自动把所有剩余属性注入到底层元素。这不仅提升了复用性也让组件 API 更灵活。⚠️ 注意不要对用户不可控的 props 使用 spread防止 XSS 或意外行为。2. 构建灵活的 API 请求体前端常需组合多个来源的数据发送给后端const userInfo { id: 1, name: Alice }; const formInputs { email: aliceexample.com, subscribe: true }; const metadata { from: web, timestamp: Date.now() }; const payload { ...userInfo, ...formInputs, settings: { ...defaultSettings, ...userCustomSettings }, meta: metadata }; fetch(/api/user/update, { method: POST, body: JSON.stringify(payload) });结构清晰层次分明随时可扩展。八、必须知道的注意事项尽管扩展运算符强大但它不是万能药。使用时要注意以下几点✅ 推荐实践场景建议浅层数据操作完全适用首选方案状态更新配合不可变原则提升可预测性参数透传在受控组件中大胆使用配置合并注意顺序确保优先级正确⚠️ 常见陷阱只能用于可迭代对象js const obj { a: 1, b: 2 }; [...obj] // 错误Object is not iterable对象本身不可迭代不能直接用...展开。但在{...obj}中是可以的因为那是对象扩展语法不是数组扩展。仅浅拷贝js const nested { a: { b: 1 } }; const copy { ...nested }; copy.a.b 999; console.log(nested.a.b); // 999 —— 原对象也被改了IE 全系列不支持如果你需要兼容 IE请务必通过 Babel 转译如babel/plugin-proposal-object-rest-spread。性能考量大量使用...生成新对象/数组在高频更新场景下可能导致内存压力增大建议配合 memoization 或 immer 等工具优化。九、结语从学会到用好差的不只是语法掌握扩展运算符表面上是学会了一个新语法实际上是在培养一种新的编程思维避免副作用永远返回新对象而不是修改旧的声明式优于命令式告诉程序“我要什么”而不是“一步步怎么做”组合优于拼接通过小单元的组合构建复杂结构而非层层嵌套逻辑。当你开始习惯写{...state, count: state.count 1}而不是state.count你就已经在向更健壮、更可维护的代码风格迈进。未来随着 TypeScript 对扩展运算符类型的更好支持甚至在元组、模式匹配等场景中它的潜力还会进一步释放。所以别再把它当成“花哨语法”了。那一行...是你迈向现代化 JavaScript 开发的第一步。如果你正在写 JS那就从今天起多用...少用concat、apply和Object.assign吧。你会发现代码真的会变得不一样。