解构赋值的应用

最新推荐文章于 2023-04-05 22:49:33 发布
最新推荐文章于 2023-04-05 22:49:33 发布
阅读量205 收藏
点赞数
分类专栏： 基础知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hy1255564202/article/details/109776539
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<script type="text/javascript">
			//利用解构赋值过滤对象中部分属性,两种方法
			let student={
			        age: 18,
			        name: 'kysue',
			        sex: "男"
			      }
							/*方法一 过滤掉name属性 */
			let {sex,...result}=student;
			console.log('result',result);//{age: 18, name: "kysue"}
			
			
			/*方法二 过滤掉age属性*/
			const fun=({name,sex})=>({name,sex});
			let param=fun(student);
			console.log('param',param);//{name: "kysue", sex: "男"}
			
			
			
			/* 要求：
现有数组对象：
featureTags: [{featureId: 1,featureContent: '全新未用',checked: '0'},
	      {featureId: 2,featureContent: '验货面付',checked: '0'},
	      {featureId: 3,featureContent: '快递包邮',checked: '0'},
	      {featureId: 4,featureContent: '保修期内',checked: '0'},
	      {featureId: 5,featureContent: '专柜正品',checked: '0'},
	      {featureId: 6,featureContent: '有发票',checked: '0'}]
要求使用ES6语法将数组内每个对象的checked属性去掉。 */
			
			let featureTags=[
				{featureId: 1,featureContent: '全新未用',checked: '0'},
	      {featureId: 2,featureContent: '验货面付',checked: '0'},
	      {featureId: 3,featureContent: '快递包邮',checked: '0'},
	      {featureId: 4,featureContent: '保修期内',checked: '0'},
	      {featureId: 5,featureContent: '专柜正品',checked: '0'},
	      {featureId: 6,featureContent: '有发票',checked: '0'},
		  ];
		  //test
		  let arrTest=[];
		  for (let s of featureTags) {
		  	let {checked,...res}={...s}
			arrTest.push(res);
		  }
		 console.log('arrTest:',arrTest);
		  //1.使用push,将修改后的数组放入新数组中
		 let newArr=[];
		  for(let i of featureTags){
			  // console.log(i);
			  const f=({featureId,featureContent})=>({featureId,featureContent})
			  ;
			  let param=f(i);
			  newArr.push(param);
			}
			console.log(newArr);
			
			//2.Array.map()方法 通过指定函数处理数组的每个元素，并返回处理后的数组。
		  var arr = featureTags.map(({featureId,featureContent})=>{
			  return {featureId,featureContent}
		  })
		  console.log(arr)
		  //3.Array.map()更牛逼的方法
		  let bestArr=featureTags.map(v=>{
			  let {checked,...reset}={...v}
			  return reset;
		  })
		   console.log('bestArr:',bestArr);
		  //3.使用foreach实现一下
		  let bestArr2=featureTags.forEach(item=>{
			  let {checked,...reset}={...item}
			  return reset;
		  })
		  console.log('bestArr2:',bestArr2);
		  
		  //4.向对象数组中添加新的属性
		  var arr1 = featureTags.map(v=>{
			  return {...v,test:'hello'}
		  })
		  
		  console.log(arr1);
		  
		  //5.连接两个数组的es6方式(...将数组序列化，成为逗号隔开的序列)
		  arr3 = [1,2];
		  arr4= [3,4,5];
		  arr3.push(...arr4);
		  console.log(arr3);
		  
		  
		 
		</script>
	</body>
</html>
hy1255564202
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解构赋值及使用
Y_zzh202的博客
09-06 489
解构赋值及使用
解构赋值的使用
weixin_69761220的博客
07-13 529
解构赋值
ES6 解构赋值用途
qq_32445689的博客
09-25 479
（1）交换变量的值[x, y] = [y, x];上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。（2）从函数返回多个值函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。// 返回一个数组function example() { return [1, 2, 3]; } var [a, b, c] = example(
对象的解构赋值应用
fx_small的博客
11-29 321
对象的解构赋值应用 有时候难得不是理解一个知识，而是理解了之后要熟练的运用到合适的地方。 出了es6我们就开始学习，了解，就比如我有时候并不知道该用在哪里，但是在项目中遇到的情况多了，总用之前的老方法，难免会比较 繁琐乏味。现在就简单说下，我关于对象的解构赋值应用的地方，在项目中需要处理树结构 如   像上面左侧的树一般展示的名字都是用title，但是后端总喜欢把这些数据...
ES6知识点整理之对象解构赋值应用示例
10-17
在ES6中，对象解构赋值是一种强大的语法特性，它允许我们从对象中方便地提取属性值并赋值给变量。这种语法简洁且高效，极大地提升了代码的可读性和可维护性。以下是对该知识点的详细说明： 1. **初识对象解构** ...
解构赋值中的数组的解构赋值和对象解构赋值
m0_49456900的博客
03-13 2150
1解构赋值 ①定义.解析某一数据结构，将我们想要的东西提取出来，赋值给变量或者常量 ②应用场景：交换变量的值；从函数返回多个值，可以返回一个数组，也可以返回一个对象；函数参数的定义，方便将一组参数与变量名对应起来，数组的参数是有次序的，对象的参数是没有次序的；指定函数参数的默认值；遍历Map解构，方便获取键名和键值；加载模块；提取JSON数据 2.数组的解构赋值 ①原理：模式（结构）匹配；索引值相同的完成赋值，不取的就用逗号隔开 ②默认值：const/let [a,b] = [];是一个空数组时，
ES6基础之解构赋值(destructuring assignment)
10-17
本文将深入探讨解构赋值的各个方面，包括数组和对象的解构，以及它们在不同场景下的应用。 首先，解构赋值允许我们将数组的值直接赋给一组变量。例如，以前我们需要通过索引来逐个赋值： ```javascript let ...
JS解构赋值详解
最新发布
Zhang_wang_yun的博客
04-05 4039
解构赋值是一种快速为变量赋值的简洁语法，本质上仍然是为变量赋值。
解构赋值的运用
王飞
03-16 314
什么是解构赋值 解构赋值是赋值运算符的扩展，左边结构与右边结构一一对应赋值。 let [a, b, c] = [1, 2, 3] console.log(a, b, c) // a => 1 // b => 2 // c => 3 除了上面最基本的解构赋值，我们还可以省略 let [a, , b] = [1, 2, 3] console.log(a, b) // a =&g...
解构赋值的用途
qq_44827936的博客
06-23 220
1.交换变量的值 let x = 1, y = 3; [x, y] = [y, x]; 2.从函数返回多个值 function func() { return [1, 2, 3]; } let [a, b, c] = func(); function func() { return { foo: 1, bar: 2 }; } let { foo, bar } = func(); 3.函数参数的定义：解构赋值可以方便地将一组参数与变量名对应起来。 //一组有序参数 function
ES6数据的解构赋值使用及应用
weixin_44258964的博客
04-20 640
ES6语法的解构赋值，简单快速的学习，能让你的代码看起来更加优质。
ES6解构赋值的一些应用场景
热门推荐
Army-海军的博客
06-03 1万+
解构赋值使用场景： 第一种：变量互换 例子： { let a=1; let b=2; [a,b]=[b,a]; console.log(a,b); } 输出2,1 以前想交换变量必须要一个中间变量做存贮 场景2： { function f(){ return [1,2] } let a,b; [a,b]...
结构赋值应用合应用
zuiruolong的博客
12-17 209
结构赋值 解构赋值就是从目标对象或数组中提取自己想要的变量 注意 左右的结构必须一样 var a,b [a,b]=[1,2];//左右数据结构必须一样 {a,b}=[1,5]//不一样就会报错 console.log(a)//1 console.log(b)//2 数组需要左右对应，对象必须要是键值对 var a,b [a,b]=[1,2];//数组结构一一对应 ({a,b}={b:10,a:20})//对象的取的是键值对 console.log(a)//（1）1（2）12 conso
ECMAScript6（ES6）标准之解构赋值语法及应用
尐轩web前端网络日志
12-18 5053
在七种方案解决JavaScript交换两个变量值的问题中 我写的最后一种方案就是用到了ES6的解构赋值语法[a, b] = [b, a]下面我来详细说明一下什么是解构赋值数组解构基本概念按照一定模式，从数组和对象中提取，对变量进行赋值，称为解构 通过解构我们可以让赋值更优雅便捷// 一般赋值 var a = 1, b = 2, c = 3;//解构赋值 var [a, b, c]
ES6知识点整理对象解构赋值的应用
Wang的专栏
03-24 2351
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）, 在对象的解构赋值中有一些需要注意的事项 初识对象的解构 var {name} = { name:'Joh', age:10 }; console.log(name); // Joh 通过解构的形式取出对象中的属性值 对解构出的属性进行重命名 var {na...
es6中变量的解构赋值与其在函数中的应用
u011870010的博客
08-01 308
最近在用react写项目，也用到了redux，想要提高自己的技术（逼格），所以就看了下react-reudx的源码。想着平时用到最多的就是connect方法就点进去看了下，发现了一处代码非常难理解，代码如下： 重点在函数的参数上，这种传值方式还真是没见过，但是见多识广的我并没有慌张，猜想这应该是es6的新特性，多方查找之后终于弄清楚是解构赋值。 解构赋值 ES6 允许按照一定模式，从数组...
ES6基础教程（3）
前端大白LKUAN
07-19 536
ES6基础教程3 变量的解构赋值 数组的解构赋值 对象的解构赋值
ES6入门：详解变量解构赋值及其应用
- 解构赋值不仅仅局限于基本类型，还可以应用于函数参数和数组/对象的嵌套结构： ```javascript let [x, y, z] = new Set([1, 2, 3]); // x, y, z依次获取Set中的元素 ``` ES6的解构赋值是JavaScript中一个强大的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值