es6解构赋值

最新推荐文章于 2024-08-14 22:20:20 发布

lanlanmingyue

最新推荐文章于 2024-08-14 22:20:20 发布

阅读量664

点赞数

分类专栏：练习文章标签： es6

本文链接：https://blog.csdn.net/lanlanmingyue/article/details/80283265

版权

练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <title>es6--解构赋值</title>
</head>
<body>
  <script type="text/javascript">
	// let imageUrl='<img src="http://abc.com/jd.png"/>'.match(/src=['"]?([^'"]*)['"]?/i);
	// let ii = 'https://abc.com/shop/item/123456477.sc'.match(/https:\/\/[^/]*\/shop\/item\/(\d{8,11}).sc/);
	// console.log(imageUrl);
	// console.log(ii);

	//对象解构
	let jiegou = {
		a: "a1",
		b: "b2",
		c: "c3",
		d: "d4"
	}

	const {a,c,d} = jiegou;
	console.log("a:",a,"c",c,"d",d); //a: a1 c c3 d d4

	//对象解构不能按顺序走
	const {e,f,g} = jiegou;
	console.log("e",e,"f",f,"g",g); //e undefined f undefined g undefined

	//对象解构
	const person = {
	  name: 'namemem',
	  age: 18,
	  sex: '男'
	}
	//以前写法
	// let age = person.age;
	// let name = person.name;
	// let sex = person.sex;

	//解构写法
	let { name,age,sex } = person;

	//数组解构
	let nbaStars=['yaoming','kobe','james','paul']
	let [chinaStar,...usaStar] = nbaStars
	let [,,,myidol] = nbaStars
	console.log("usaStar:",usaStar,"chinaStar:",chinaStar,"myidol:",myidol)  //usaStar: (3) ["kobe", "james", "paul"] chinaStar: yaoming myidol: paul

	//数组解构可按顺序解构，解构变量名与变量不用一致
	// let [a, b] = [1,3,4,5,6] 
	// console.log(a)  // 1
	// console.log(b)  // 3

	//数组解构的另一个用处，交换变量值 
	var list = [ 'aa1', 'bb2', 'cc3' ];
	var [ aa, , cc ] = list;
	[ cc, aa ] = [ aa, cc ]; 
	console.log("aa",aa,"cc",cc); //aa cc3 cc aa1

	//数据解构与对象解构结合使用
	const rocketsTeam = {
    name:'rockets',
    players:[
      {
         name:'james harden',
         age: 18,
         role: 'sg'
      },
      {
         name:'yao ming',
         age: 12,
         role: 'c'
      }
    ],
    city:'houston'
}

//取出姚明的角色
let {players:[,{role:playerRole}]} = rocketsTeam;
console.log("姚明角色",playerRole) //姚明角色 c

  </script>
</body>
</html>