es6 扩展运算符

一、数组的扩展运算符

1. 合并数组
   let arr1 = [1, 2, 3];
   let arr2 = [a, b, c];
   let combined = [...arr1, ...arr2]; // [1, 2, 3, a, b, c]

2. 复制数组
   const str1 = ['e', 'g', 'm'];
   const str2 = [...str1];
   console.log(str2);//['e','g','m']
   // 修改 str1 不会影响 str2
   str1[0] = 'new';
   console.log(str1);//['new','g','m']
   console.log(str2);//['e','g','m']
   3.将数组作为函数参数传递

    function myFunction(arg1, arg2, arg3) {
        console.log(arg1, arg2, arg3);
    }
   
    let args = [10, 20, 30];
    myFunction(...args); // 10 20 30
   

   4.尾部添加元素

    let baseArr = [0, 1];
    let newArr = [...baseArr, 2, 3]; // [0,1,2,3]
   

   二、对象的扩展运算符

3. 对象合并
   可以使用扩展运算符将多个对象合并成一个对象。

    const obj1 = { a: 1, b: 2 };
    const obj2 = { b: 3, c: 4 };
   
    const merged = { ...obj1, ...obj2 };
    console.log(merged); // { a: 1, b: 3, c: 4 }
   

   注意，如果对象有相同的属性，后面的对象的属性会覆盖前面的对象的属性。

4. 对象复制
   扩展运算符可以用于创建对象的浅拷贝，即复制对象的属性到一个新的对象中。

const original = { a: 1, b: 2 };

const copy = { ...original };
console.log(copy); // { a: 1, b: 2 }

1. 函数参数传递
   扩展运算符可以用于将对象的属性展开为函数的参数。

const params = { x: 1, y: 2 };

function foo({ x, y }) {
console.log(x, y);
}

foo(params); // 1 2

娃哈哈哈哈呀
关注

2

0

0

ES6 扩展运算符
KangMino的博客
884
将字面量对象展开为多个元素 getParams() { const { measureRange, ...serch } = this.searchParams const params = { ...serch, ...this.page, } return params }, ...serch 则是排除选择元素后的
ES6扩展运算符
xiaoChenPengYou的博客
197
ES6扩展运算符 扩展运算符：... ...：它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。 let arr = ['h','e','l','l','o']; console.log(...arr); // h e l l o 可以遍历数组，将数组的数据一一展示出来。 当然也不只是可以遍历数组 console.log(...'hello'); // h e l l o 字符串也是可以进行遍历的操作。 把字符串转化为真正的数组 console.log([...'hello']
es6扩展运算符拷贝
yy_nf666的博客
386
例子1 let arr = [1,2,3] let arr1 = [...arr] arr[0] = 5 // arr1 = [1,2,3] 上面代码满足深拷贝的条件 例子2 let arr = [1,[2,3]] let arr1 = [...arr] arr1[1][0] = 5 //arr1 = [1,[5,2]] 所以扩展运算进行拷贝是浅拷贝,只能拷贝第一层数据,对于底层数据不能进行拷贝.对于对象也是一样的,只有一层的情况下是可以满足深拷贝,但是有多层就不满足,只能进行浅拷贝. ...
ES6扩展运算符简单理解...
booo_ooom的博客
129
简单来说，…的作用就是可以将数组，对象，字符串，统统展开 他的用处很多，可以拼接数组，将字符串转为字符数组等，详情看图片
es6 扩展运算符...
xy_is_fhh的博客
263
解构赋值，扩展运算符
ES6扩展运算符用法实例分析
08-28
ES6扩展运算符用法实例分析 ES6扩展运算符是一种特殊的语法结构，使用三个点号（...）来表示，主要功能是将数组或类数组对象展开成一系列用逗号隔开的值。下面将对ES6扩展运算符的用法、功能、使用方法与相关注意...
ES6扩展运算符的用途实例详解
12-12
ES6的扩展运算符可以说是非常使用的，在给多参数函数传参，替代Apply，合并数组，和解构配合进行赋值方面提供了很好的便利性。 扩展运算符就是三个点“…”，就是将实现了Iterator 接口的对象中的每个元素都一个个的...
详解ES6 扩展运算符的使用与注意事项
01-21
扩展运算符 spread syntax 又叫展开语法，写法是 …，顾名思义，其实是用来展开字符串，数组和对象的一种语法，可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时, 将...
前端开发工程师面试整理-ES6+的新特性
不务正业的猿
218
这些ES6+的新特性使JavaScript变得更强大、更简洁，提高了开发效率和代码可读性。ES6（ECMAScript 2015）及后续版本引入了许多新特性，极大地增强了JavaScript的功能和开发体验。使用function*定义生成器函数，可以通过yield暂停和恢复执行。基于Promise的异步编程语法，使异步代码更加简洁和易读。使用简洁的语法定义函数，并且不绑定自己的this。使用import和export语法导入和导出模块。Map用于存储键值对，Set用于存储唯一值的集合。用于异步操作的对象。
JavaScript ES6 Proxy
歌舞阿瓜的博客
621
Proxy是ES6为了操作对象引入的 API。Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。一个 Proxy 对象由两个部分组成： target 、 handler。在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。target 即目标对象， handler 是一个对象，声明了代理 target 的指定行为。
JavaScript ES6 Set
歌舞阿瓜的博客
246
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
es6-模版字符串
karlaofsky的博客
183
模板字符串中嵌入变量，需要将变量名写在${}之中。
JS模块化总结 | CommonJS、ES6
yavlgloss的博客
1668
JS模块化总结 | CommonJS、ES6
ES6学习笔记（九）——class（类）
最新发布
weixin_56370772的博客
483
传统面向对象的编程序语言都是【类】的概念，对象都是由类创建出来，然而早期 JavaScript 中是没有类的，面向对象大多都是基于构造函数和原型实现的，但是 ECMAScript 6 规范开始增加了【类】相关的语法，使得 JavaScript 中的面向对象实现方式更加标准。class（类）是 ECMAScript 6 中新增的关键字，专门用于创建类的，类可被用于实现逻辑的封装。
ES6 & ESNext 规范及编译工具简介
yolo
634
变量定义新形式（let、const） 解构语法 模板字符串 箭头函数 ES6新增的数组方法 Set和Map 面向对象编程——class 语法 生成器 generator 异步处理——callback、Promis
node.js: postgreSQL16 sequelize6 es6 ORM in webstorm 2023.1 and vscode
Geovin Du Dream Park
131
【代码】其實就是下載的包不一樣和數據庫配置連接不一樣，代碼基本是一樣，可以学习包里的架构方式可以改配置操作選擇數據庫配置，就可以少改動代碼，變換任一個主流數據庫
【vue讲解：ref属性、动态组件、插槽、vue-cli创建项目、vue项目目录介绍、vue项目开发规范、es6导入导出语法】
weixin_50556117的博客
1286
vue讲解：ref属性、动态组件、插槽、vue-cli创建项目、vue项目目录介绍、vue项目开发规范、es6导入导出语法
ES6（五）——ES6 Reflect 与 Proxy
m0_62701594的博客
1009
Proxy 与 Reflect 是 ES6 为了操作对象引入的 API。Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。
es6 扩展运算符 在对象中用法
05-28
ES6 扩展运算符可以用于对象的浅拷贝。例如： const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; console.log(obj2); // { a: 1, b: 2, c: 3 } 上述代码中，使用扩展运算符将 obj1 中的属性拷贝到 obj2 中，并在 obj2 中添加了属性 c。需要注意的是，如果 obj1 和 obj2 中有同名的属性，后者会覆盖前者。 如果要进行深拷贝，可以使用第三方库，如 lodash 的 cloneDeep 方法。