扩展运算符使用示例

最新推荐文章于 2024-09-30 14:28:41 发布

前端李大力

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量250

点赞数

分类专栏：前端文章标签： javascript 前端

原文链接：https://www.cnblogs.com/qianxiaox/p/15012745.html

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

1、复制数组

const a=[1,2,3,4];
const b=[...a];
console.log(b);
// [1,2,3,4]

2、合并数组

const a=[1,2,3];
const b=[4,5,6];
const c=[...a,...b];
console.log(c);
// [1,2,3,4,5,6]

3、给数组添加元素

const a=[1,2,3];
const b=["apple","banana"];
const c=[...a,...b,"hahaha"];
console.log(c);
// [1,2,3,"apple","banana","hahaha"]

4、给对象添加属性

const data={sex："male", age：12}；
const newData={...data, name:"jack Lee"};
console.log(newData);
//{sex："male", age：12, name:"jack Lee"}

5、使用Math()函数取最大值、最小值

// 取数组最大值
const arr1=[1,-5,8,-10];
const max=Math.max(...arr1);
console.log(max);
// 8


// 取数组最小值
const arr1=[1,-5,8,-10];
const min=Math.min(...arr1);
console.log(min);
// -10

6、展开字符串

const name="Jack";
const arr=[...name];
console.log(arr);
// ["J","a","c","k"]

7、解构对象

const data={sex："male", age：12, name:"jack Lee"}；
const {sex, ...rest}=data;
console.log(sex);
// "male"
console.log(rest);
// {age：12, name:"jack Lee"}

8、给函数传递参数

// 假设我们有一个函数可以接受无数个参数
const myFunc = (...args) => {
  console.loge(args);
}

myFunc(1,"we","中国人");

// 函数返回以下结果
[1,"we","中国人"]

9、将nodeList转换为数组

// 假设我们用展开运算符获取了页面中所有的div
const el=[...document.querySelectorAll('div')];
console.log(el);
// (3) [div, div, div]

// 在这里可以看到我们从dom中获得了3个div。
// 现在，我们可以轻松地遍历这些元素，因为它们是数组了。

const el=[...document.querySelectorAll('div')];
el.forEach(item => {console.log(item)});
// <div></div>
// <div></div>
// <div></div>