es6初级之解构----之一
1. 访问对象属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var User = {
'name': 'aluoha',
'age': 25
};
console.log(User.name, User.age); // aluoha 25
</script>
</head>
<body>
</body>
</html>
1.1 使用解构来访问对象：同样也可以访问，这种方式就是解构
let { name, age } = User;
console.log( name, age ); // aluoha 25
1.2 解构出来的对象，需要与对象中的属性相同，不同的名字将无法实现效果:
let {
name1,
age1
} = User;
console.log(name1, age1); //undefined, undefined
1.3 小结：关于解构
1.4 解构出来的变量，可以更改名称，改名之后，原先的名字就无法访问对象的属性了
<script>
var User = {
'name': 'aluoha',
'age': 25
};
let {
name: name1,
age: age1
} = User;
console.log(name1, age1); //aluoha 25
console.log(name, age); //报错
</script>
1.5.1 可以给解构过程增加变量
var User = {
'name': 'aluoha',
'age': 25
};
let {name,age,sex} = User;
//解构出来的属性，如果不存在，默认值为undefined
console.log(name, age, sex); //aluoha undefined
1.5.2 给解构增加的变量赋值
var User = {
'name': 'aluoha',
'age': 25
};
//解构出来的值 可以赋值 一个默认的值
let {name,age,sex = 'man'} = User;
console.log(name, age, sex); // aluoha 25 man
2. 数组解构：
2.1 部分解构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
let arr = [101, 201, 301, 401];
//数组用[]解构
let [one, two] = arr;
console.log(one, two); // 101 201
</script>
</head>
<body>
</body>
</html>
2.2 全部解构：
let [one, two, three, a] = arr;
console.log(one, two, three, a); // 101 201 301 401
2.3 筛选解构：
let [, , , a] = arr;
console.log(a); //
2.4 解构时，同级之间的解构，效果是相同的，不管结构出来的是一维数组或是二维数组，只是解构结构，不解构内容
let arr = [10, [20, 30], 40];
console.log(arr[1][0]); //
let [one, two, three, four] = arr;
console.log(one, two, three, four); //10 [20, 30] 40 undefined
2.5 内层数组解构：
let arr = [10, [20, 30], 40];
let [one, [two, three], four] = arr;
console.log(one, two, three, four); //10 20 30 40
2.6 交换两个变量的值：相当于重新定义了let a ,let b ,而let是不能再次定义的
let a = 10,
b = 20;
let [a, b] = [b, a]; //报错，let定义了同名变量
换一种方式：
let a = 10,
b = 20;
[a, b] = [b, a];
console.log(a, b); //20, 10
2.7 小括号解构：使用小括号扩起来，可以避免冲突
let User = {
name: 'aluoha',
age: 25
},
name = 'zhangsan',
age = 30;
console.log(name, age); // zhangsan 30
//小括号： 把下面这个 转成解构表达式
({
name,
age
} = User);
console.log(name, age); // aluoha 25
2.8 去掉小括号，会造成冲突
<script>
let User = {
name: 'aluoha',
age: 25
},
name = 'zhangsan',
age = 30; // 小括号去掉，会造成定义冲突
let {
name,
age
} = User;
console.log(name, age); // 定义冲突
</script>
2.9 重命名局部变量：
let User = {
name: 'aluoha',
age: 25
};
//重命名局部变量，mySex:赋初始值
let {
name: myName,
age: myAge,
sex: mySex = 'man'
} = User;
console.log(myName, myAge, mySex); // aluoha 25 man
3.解构表达式作为参数：
let User = {
name: 'aluoha',
age: 25
},
name = 'zhangsan',
age = 40;
console.log(name, age); //zhangsan, 40
function show(obj) {
console.log(obj);
console.log(obj === User); //true
}
show({
name,
age
} = User); //表达式传值，把User传给了obj
console.log(name, age); //aluoha, 25
arguments 参数：
let User = {
name: "aluoha",
age: 25
};
name = 'zhangsan',
age = 30;
function show() {
console.log(arguments); // {name:'aluoha',age:25}
console.log(name, age); // aluoha 25
}
show({
name,
age
} = User);
4. 解构：
let User = {
name: 'aluoha',
age: 25,
class: {
group1: {
one: '陈世美',
two: '马汉'
},
group2: {
one: '张龙',
two: '白眉鹰王'
}
}
};
let {
class: {
group1
}
} = User;
console.log(group1.one); // 陈世美
console.log(group1.two); // 马汉
4.1 多层解构：
let User = {
name: 'aluoha',
age: 25,
class: {
group1: {
one: '陈世美',
two: '马汉'
},
group2: {
one: '张龙',
two: '白眉鹰王'
}
}
};
let {class: {group1: {one,two}}} = User;
console.log(one, two);
4.3 解构：
let {
class: {
group2: dierzu
}
} = User;
console.log(dierzu.one); //张龙
console.log(dierzu.two); //白眉鹰王
4.4 解构，添加自定义变量：
let {
class: {
group1: {
one,
two,
three = '展昭'
}
}
} = User;
console.log(one, two, three); //陈世美 马汉 展昭
es6初级之解构----之一的更多相关文章
- es6初级之解构----之二 及 键值反转实现
1.解构: 不定参数,扩展表达式 let arr = [100, 201, 303, 911]; let [one, ...others] = arr; console.log(others.leng ...
- es6学习笔记--解构赋值
昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构 ...
- 关于ES6 的对象解构赋值
之 前写了关于ES6数组的解构 现在 go on ; 解构不仅可以用于数组,还可以用于对象: 对象的解构和数组有一个重要的不同.数组的元素是按次序排列的,变量的取值是由他的位置决定的:而对象的属性没有 ...
- ES6 - Note2：解构赋值
ES6的解构赋值就是利用模式匹配从按照一定模式的数组或者对象中提取值赋值给变量. 1.数组的解构赋值 在ES6以前,变量的赋值是直接指定的,以后可以这么来写,如下所示 let [a,b,c] = [1 ...
- ES6 变量的解构赋值
数组的解构赋值 var [a,b,c] = [1,2,3]; 左边是变量,右边是值,根据数据结构一一对应 只要等号两边的模式相同,左边的变量就会被赋予右边对应的值,必须模式相同 如果等号 ...
- ES6新特性-------解构、参数、模块和记号（续）
六.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=a ...
- ES6 - 变量的解构赋值学习笔记
变量的解析赋值 数组的解析赋值 es6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这就称为解构. var a = 1; var b = 2; var c = 3; //在es6中允许写成 ...
- [js高手之路]es6系列教程 - 解构详解
解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法, es6之前,我们通过对象名称[键] 读取数据 var User = { 'name' : 'ghostwu', 'age' : ...
- ES6的变量解构赋值
前 言 ES6 解构赋值: ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为解构. 1.1 数组的结构赋值 1.1.1基本用法 JS中,为变量赋值直接指定.例如下面代码: ...
随机推荐
- [UE4]函数分组
函数分组相当于C#里面的“#region #end region”折叠注释
- 00010 - cut选取命令详解
定义 正如其名,cut的工作就是“剪”,具体的说就是在文件中负责剪切数据用的.cut是以每一行为一个处理对象的,这种机制和sed是一样的 剪切依据 cut命令主要是接受三个定位方法: 第一,字节(by ...
- 解决ExtNET ExtJS 特定日期选择月份跳转导致无法选择月份的问题
背景 项目使用 Ext.NET 2.2.0.40838 , 对应Ext JS4.2版本. 结果 2017/3/31 号的时候偶然间点日历选择控件选择2月,10月等月份突然就跳到3月份,9月份之类. 就 ...
- U3D学习08-异步、协程
1.调用 invoke不能传参, 2.协程(不是线程,拥有自己独立的执行序列) Coroutine(尽可能减少计算,提高运行效率) 需要迭代器IEnumerate,迭代器中有返回方法yield 协程的 ...
- 如何跳过前端JavaScript的验证
绕开前端的JS验证通常有以下的方法: 方法一: 将页面保存到自己机器上,然后把脚本检查的地方去掉,最后在自己机器上运行那个页面就可以了 方法二: 该方式与方法一类似一样,只是将引入js的语句删掉,或则 ...
- MySQL库操作，表操作，数据操作。
数据库服务器:本质就是一台计算机,该计算机上安装有数据库管理软件的服务端,供客户端访问使用. 1数据库管理系统RDBMS(本质就是一个C/S架构的套接字),关系型数据库管理系统. 库:(文件夹)- ...
- python学习之----爬取图片
import os from urllib.request import urlretrieve from urllib.request import urlopen from bs4 import ...
- StanFord ML 笔记 第九部分
第九部分: 1.高斯混合模型 2.EM算法的认知 1.高斯混合模型 之前博文已经说明:http://www.cnblogs.com/wjy-lulu/p/7009038.html 2.EM算法的认知 ...
- ansible安装使用入门
生成对称密钥 执行以下命令,会在当前用户的.ssh目录下生成id_rsa和id_rsa_pub两个文件. ssh-keygen -t rsa root用户:/root/.ssh 普通用户:/home/ ...
- linux环境下Mysql的卸载和重新安装和启动
MySql安装 1 安装包准备 1．查看mysql是否安装,如果安装了,卸载mysql (1)查看 [root@hadoop102 桌面]# rpm -qa|grep mysqlmysql-libs- ...