1、解构

在接收数据的地方(比如赋值的左边),解构使你使用模式去获取部分数据。

下面的代码是解构的一个例子:

let obj = { first: 'Jane', last: 'Doe' };
let { first: f, last: l } = obj; // (A)
// f = 'Jane'; l = 'Doe'

在行 A 解构了 obj :通过左边的模式,运用赋值操作符(=)从里面获取数据,并将数据赋值给变量 f 和 l 。这些变量事先自动声明好,因为该行以 let 开始。

也可以解构数组:

let [x, y] = ['a', 'b']; // x = 'a'; y = 'b'

解构可以用于下列情形:

// Variable declarations:解构赋值不仅适用于var命令,也适用于let和const命令。
let [x] = ['a'];
const [x] = ['a'];
var [x] = ['a']; // Assignments:
[x] = ['a']; // Parameter definitions:
function f([x]) { ··· }
f(['a']);

也可以在一个 for-of 循环中解构:

// Handled like a variable declaration:
for (let [k,v] of arr.entries()) ··· // Handled like an assignment
for ({name: n, age: a} of arr) ···

(1)Rest解构赋值

对象的Rest解构赋值用于从一个对象取值,相当于将所有可遍历的、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x //
y //
z // { a: 3, b: 4 }

上面代码中,变量z是Rest解构赋值所在的对象。它获取等号右边的所有尚未读取的键(ab),将它们和它们的值拷贝过来。

由于Rest解构赋值要求等号右边是一个对象,所以如果等号右边是undefinednull,就会报错,因为它们无法转为对象。

let { x, y, ...z } = null; // 运行时错误
let { x, y, ...z } = undefined; // 运行时错误

Rest解构赋值必须是最后一个参数,否则会报错。

let { ...x, y, z } = obj; // 句法错误
let { x, ...y, ...z } = obj; // 句法错误

上面代码中,Rest解构赋值不是最后一个参数,所以会报错。

圆括号问题

解构赋值虽然很方便,但是解析起来并不容易。对于编译器来说,一个式子到底是模式,还是表达式,没有办法从一开始就知道,必须解析到(或解析不到)等号才能知道。

由此带来的问题是,如果模式中出现圆括号怎么处理。ES6的规则是,只要有可能导致解构的歧义,就不得使用圆括号。

  • 变量声明语句中,不能带有圆括号。

  • 函数参数中,模式不能带有圆括号。

  • 赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号之中。

用途:

  • 交换变量的值

  • 从函数返回多个值

  • 函数参数的定义

  • 提取JSON数据

  • 函数参数的默认值

  • 遍历Map结构

  • 输入模块的指定方法

总结:

  • 如果解构不成功,变量的值就等于undefined

  • 不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

  • 解构赋值允许指定默认值。

  • 对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

  • 默认值生效的条件是,对象的属性值严格等于undefined

  • 解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。由于undefinednull无法转为对象,所以对它们进行解构赋值,都会报错。

2、新的对象字面量特性

1、新的对象字面量特性

方法定义:

let obj = {
myMethod(x, y) {
···
}
};

属性值缩写:

let first = 'Jane';
let last = 'Doe'; let obj = { first, last };
// Same as:
let obj = { first: first, last: last };

计算属性键:

let propKey = 'foo';
let obj = {
[propKey]: true,
['b'+'ar']: 123
};

这种新语法也可用于方法定义:

let obj = {
['h'+'ello']() {
return 'hi';
}
};
console.log(obj.hello()); // hi

计算属性键主要的应用场景就是使 symbol 成为属性键变得更加方便。

2、Object 中的新方法

Object 中最重要的新方法是 assign() 。习惯上,在 JavaScript 的世界中,这个函数叫做 extend() 。 Object.assign() 仅考虑自有(非继承)属性。

let obj = { foo: 123 };
Object.assign(obj, { bar: true });
console.log(JSON.stringify(obj));
// {"foo":123,"bar":true}

常见用途:

(1)为对象添加属性

(2)为对象添加方法

(3)克隆对象

(4)合并多个对象

(5)为属性指定默认值

属性的遍历

ES6一共有6种方法可以遍历对象的属性。

(1)for...in

for...in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。

(2)Object.keys(obj)

Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)。

(3)Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有Symbol属性。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组,包含对象自身的所有属性,不管是属性名是Symbol或字符串,也不管是否可枚举。

(6)Reflect.enumerate(obj)

Reflect.enumerate返回一个Iterator对象,遍历对象自身的和继承的所有可枚举属性(不含Symbol属性),与for...in循环相同。

以上的6种方法遍历对象的属性,都遵守同样的属性遍历的次序规则。

  • 首先遍历所有属性名为数值的属性,按照数字排序。
  • 其次遍历所有属性名为字符串的属性,按照生成时间排序。
  • 最后遍历所有属性名为Symbol值的属性,按照生成时间排序。

注意,语言规范把索引定义为字符串键,当转换成无符号整数然后再转换回来,仍然是同样的字符串(同样也必须比232-1小,因此数组是有长度限制的)。这意味着规范把数组索引看作字符串键,甚至普通的对象都可以有数组索引:

Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
//['2', '10', 'b', 'a', Symbol()]

__proto__属性,Object.setPrototypeOf(),Object.getPrototypeOf()

(1)__proto__属性

__proto__属性(前后各两个下划线),用来读取或设置当前对象的prototype对象。目前,所有浏览器(包括IE11)都部署了这个属性。

在实现上,__proto__调用的是Object.prototype.__proto__。

(2)Object.setPrototypeOf()

Object.setPrototypeOf方法的作用与__proto__相同,用来设置一个对象的prototype对象。它是ES6正式推荐的设置原型对象的方法。

// 格式
Object.setPrototypeOf(object, prototype) // 用法
var o = Object.setPrototypeOf({}, null);

该方法等同于下面的函数。

function (obj, proto) {
obj.__proto__ = proto;
return obj;
}

(3)Object.getPrototypeOf()

该方法与setPrototypeOf方法配套,用于读取一个对象的prototype对象。

Object.values(),Object.entries()

Object.keys()

ES5引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

Object.values()

Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。

Object.entries

Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

es6学习笔记3--解构和对象的更多相关文章

  1. ES6学习笔记之解构赋值

    1.数组的解构赋值 简单用法 { // 旧 let a=1,b=3; //新 let [a,b]=[1,3]; console.log(a,b);// 1 3 } 只要等号两边的模式相同,左边的变量就 ...

  2. ES6-个人学习笔记二--解构赋值

    第二期,解构赋值如果能够熟练应用确实是个十分方便的功能,但是过分的依赖和嵌套只会让代码理解和维护起来十分困难,是个体现高逼格的表达式呢~ 1,解构赋值的基础 //定义:es6运行按照一定模式,从数组或 ...

  3. es6学习笔记--字符串&数值&数组&函数&对象的扩展

    这几天抽空学习了es6语法,关于字符串,数值,数组,函数以及对象的扩展,看到es6标准入门这本书,里面讲的扩展特别多,我认为有几部分在项目上用不到,就挑有用的当笔记学习了. 字符串的扩展 str.in ...

  4. ES6学习笔记四(类和对象)

    { // 构造函数和实例 class Parent{ constructor(name='mukewan'){ this.name=name; } } let v_parent=new Parent( ...

  5. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  6. ES6 学习笔记(二)解构赋值

    一.数组的解构赋值 1.基本用法 ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,该操作即为解构 如: let [a,b,c]=[1,2,3]; console.log(a,b,c) ...

  7. ES6学习笔记(let,const,变量的解构赋值)

    1.let: ; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc 不存在变量提升,它所声明的变量一定要在声 ...

  8. ES6 学习笔记(一)let,const和解构赋值

    let和const let和const是es6新增的两个变量声明关键字,与var的不同点在于: (1)let和const都是块级作用域,在{}内有效,这点在for循环中非常有用,只在循环体内有效.va ...

  9. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

随机推荐

  1. java基础知识-新手上路注意事项一

    1.文件名,类名,字节码文件名三者的关系 源文件名:Demo.java 类名:Demo 字节码文件名:Demo.class 2.如果class定义前,加上public修饰,说明这是一个公共类,此时类名 ...

  2. unigui结合JS方法

    在js中界面上所有组件都当成html里来控制 1.控制按钮事件 document.getElementById(MainForm.UniButton4.getId()).click(); 这个方法让J ...

  3. [Proposal][app]觅食去

    又要加班,午饭晚饭怎么解决?每天吃食堂换个口味可是不想出门怎么办?顿顿麦当劳,看见汉堡就想吐,下一顿吃什么? 来点个外卖吧! 可是去哪儿点呢—— 百度外卖?美团外卖?饿了么?KFC宅急送?………… 统 ...

  4. 代码面试集锦 2 - Google

    Given the root to a binary tree, implement serialize(root), which serializes the tree into a string, ...

  5. 【转】PowerDesigner快捷键

    一般快捷键 快捷键 说明 F4 打开检查模型窗口,检查模型 F5 如果图窗口内的图改变过大小,恢复为原有大小即正常大小 F6 放大图窗口内的图 F7 缩小图窗口内的图 F8 在图窗口内中查看全部图内容 ...

  6. 【CS】笔试常见题目

    网络 IP地址分类 常见网络协议 HTTP状态码 算法 排序问题总结 git git和svn的区别 git常用命令 git暂存区,工作区等 一.网络 1. IP地址分类: IP网络使用32位地址,以点 ...

  7. winform自动升级方案

    未涉及过winform升级,研究一阵,大致出来个不成熟的方案. 我的解决方案(判断升级,升级程序下载安装包的压缩包,解压,自动安装,重新启动程序). 1.首先根据服务器中软件版本号和本地软件版本号是否 ...

  8. 【洛谷4587】 [FJOI2016]神秘数(主席树)

    传送门 BZOJ 然而是权限题 洛谷 Solution 发现题目给出的一些规律,emm,如果我们新凑出来的一个数,那么后面一个数一定是\(sum+1\). 于是就可以主席树随便维护了! 代码实现 #i ...

  9. FWT学习笔记

    FWT学习笔记 引入 一般的多项式乘法是这样子的: \(c_i=\sum_{i,j}a_j*b_k*[j+k==i]\) 但是如果我们将这个乘法式子里面的+号变换一下变成其他的运算符号呢? \(c_i ...

  10. WCF接口实例介绍

    Windows Communication Foundation(WCF)是由微软开发的一系列支持数据通信的应用程序框架,可以翻译为Windows 通讯开发平台. WCF整合了原有的windows通讯 ...