JS ES6 的解构、合并、展开

最新推荐文章于 2024-10-08 07:30:00 发布

Coco_choco

最新推荐文章于 2024-10-08 07:30:00 发布

阅读量793

点赞数 2

本文链接：https://blog.youkuaiyun.com/aaassddd_a/article/details/121606238

版权

本文深入探讨JavaScript中的解构赋值在对象和数组中的应用，以及合并运算符如何用于对象和数组的合并。通过实例解析了如何根据键值或索引匹配进行赋值，并展示了展开运算符在函数参数中的使用，阐述了其与数组的关系。此外，还介绍了对象和数组的合并操作，以及自定义添加对象和元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解构

对象结构

let a = {'b':'bb','c':'cc'};

//对象结构，根据 key 值匹配
let {b,c} = a;

console.log(b) // 'cc'

数组结构

let arr = ['a','b','c'];

//数组结构， 根据 索引 匹配
let [one,two,thrre] = arr

consolelog(three);//'c'

合并运算符

对象合并

  let a = 'aa';

  let b = {
   'bb': 'bbb'
  };

  let c = {
   'cc': 'ccc'
  }

  let d = {
   a,
   b,
   ...c,
   ...{'d': 'ddd'} //自定义添加对象
  }
  console.log(d); //{a: 'aa', b: {…}, cc: 'ccc', d: 'ddd'}

数组合并

  let a = 'aa'
  let b = [1, 2, 3]
  let c = ['a', 'b', 'c']

  let d = [
   a,
   b,
   ...c,
   ...['ssss'] // ...[自定义元素]
  ]
  console.log(d); //['aa', Array(3), 'a', 'b', 'c', 'ssss']

展开运算符

展开运算符可以理解为就是 Function 中的 arguments，都属于为数组

至于数组和为数组的区别请看文章数组和为数组的区别_aaassddd_a的博客-优快云博客

  let a = 'aa';
  let b = [1, 2, 3];
  let c = {
   'c': 'cc'
  };
  let d = function () {}

  foo(a, b, c, d)

  function foo(...arg) {
   console.log(arg);
  }

打印结果