1、let 和 const 命令
1.1 let命令
基本用法
ES6中新增的let命令是用来声明变量的，它的用法类似于var ,但是所声明的变量只在let命令所在的代码块内有效
{
let a = 11;
var b = 22;
console.log(a) //11
console.log(b)
}
console.log(b) //22
console.log(a) //ReferenceError: a is not defined.
复制代码上面代码快中，分别用let和var声明了两个变量，让这两个变量分别在代码块内和在代码块外打印，由结果可以看出，在代码块内用let声明的变量可以打印，而在代码块外用let声明的变量出现引用错误，而用var声明的变量在代码块内或者代码块外都可以正确打印，这表明，let声明的变量只在它所在的代码块有效。
使用技巧
for循环中，就非常适合使用let命令
for (let i = 0; i < 10; i++) {
}
console.log(i) //ReferenceError: i is not defined
复制代码上面的i使用let声明的，只在for循环体内有效
//例一
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]() //6
//例二
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]() //10
复制代码上面的例一中的i是用let声明的，声明的变量仅在块级作用域内有效，最后输出的是6。
而例二变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值
let 与 var的区别
1. let声明的变量中不存在变量提升，var声明的变量存在变量提升
console.log(b) //undefined
console.log(a) //ReferenceError: a is not defined
let a = 11;
var b = 22;
复制代码2. let声明的变量存在“暂时性死区(TDZ)”
ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
ES6规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为
var str = "aaa"
if (true) {
//TDZ start
str = "bbb" //ReferenceError
let str; //TDZ end
console.log(str);
}
复制代码上面代码中，在let命令声明变量str之前，都属于变量str的“死区”。 "暂时性死区"结束之后str可以重新赋值
3.let命令不允许重复声明
let不允许在相同的作用域内，重复声明同一个变量
//例一
function f() {
let a = 10;
let a = 1; //SyntaxError: Identifier 'a' has already been declared
}
f()
//例二
function f() {
var a = 1;
let a = 10; //SyntaxError: Identifier 'a' has already been declared
}
f()
复制代码根据以上情况，得出不能在函数内部重新声明参数。
//例一
function func(arg) {
let arg; // 报错
}
//例二
function func(arg) {
{
let arg; // 不报错
}
}
复制代码4. let命令为JavaScript新增了块级作用域
function f1() {
let n = 5;
if (true) {
let n = 10;
console.log(n); //10
}
console.log(n); // 5
}
f1()
复制代码上面的函数有两个代码块，都声明了变量n,根据输出的情况说明内外层代码块互不影响。
1.2 const命令
基本用法
1. cosnt声明一个只读的常量，而且一但声明，常量的值就不能改变
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
复制代码2. const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const foo;
// SyntaxError: Missing initializer in const declaration
复制代码3.const的作用域与let命令相同：只在声明所在的块级作用域内有效。
if (true) {
const MAX = 5;
}
console.log(MAX) //ReferenceError: MAX is not defined
复制代码4.const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
if (true) {
console.log(MIN) //ReferenceError: MIN is not defined
const MIN = 5;
}
复制代码5.const声明的常量，也与let一样不可重复声明。
var message = "Hello!";
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30;
复制代码2、变量的解构赋值
2.1 数组的解构赋值
基本用法
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）
之前为变量赋值，只能直接指定值
var arr = [1,2,3]
var a = arr[0]
var b = arr[1]
var c= arr[2]
console.log(a) //1
console.log(b) //2
console.log(c) //3
复制代码ES6允许写成以下这样，表示可以从数组中提取值，按照对应位置，对变量赋值。只要等号两边模式相同，左边的变量就会被赋予对应的值
var arr = [1,2,3]
var [a,b,c] = arr
console.log(a) //1
console.log(b) //2
console.log(c) //3
复制代码默认值
解构赋值允许指定默认值。
//例一
var [a,b,c=999] = [1,2]
console.log(a) //1
console.log(b) //2
console.log(c) //999
//例二
var [a,b,c=55,d=66,e] = [1,2,null,undefined]
console.log(a) //1
console.log(b) //2
console.log(c) //null
console.log(d) //66
console.log(e) //undefined
复制代码注意：ES6内部使用严格相等运算符（===），判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的,上面的代码中null不严格等于undefined 所以默认值不起效。
默认值可以引用解构赋值其他变量，但是引用的变量必须已经声明，如例四会报错是因为x在引用y变量时，y变量还没有声明
//例一
let [x = 1, y = x] = [];
console.log(x,y) // x = 1,y = 1
//例二
let [x = 1, y = x] = [2];
console.log(x,y) // x=2; y=2
//例三
let [x = 1, y = x] = [1,2];
console.log(x,y) // x=1; y=2
// 例四
let [x = y, y = 1] = [];
console.log(x,y) // ReferenceError:y is not defined
复制代码注意细节
1. 解构不成功，变量的值就等于undefined
//例一
var [a,b,c] = [1,2]
console.log(a) //1
console.log(b) //2
console.log(c) //undefined
//例二
var [a] = [];
console.log(a) //undefined
复制代码2. 等号的右边不是数组,将会报错
// 例一
var [a] = 1;
console.log(a) //TypeError: 1 is not iterable
// 例二
let [b] = {};
console.log(b) //TypeError: {} is not iterable
复制代码3. Set解构也可以使用数组的解构赋值
let [x,y,z] = new Set(["a", "b", "c"]);
console.log(x,y,z) //a,b,c
复制代码4.嵌套解析赋值
//例一
var [a,b,c] = [1,2,[3]]
console.log(a) //1
console.log(b) //2
console.log(c) //[3]
// 例二
var [a,b,[c]] = [1,2,[3]]
console.log(a) //1
console.log(b) //2
console.log(c) //3
复制代码2.2 对象的解构赋值
1. 与数组解析赋值的不同点
数组的元素是按次序排列的，变量的取值由他的位置决定，但是对象的属性设置没有次序，变量名需与属性同名，才能取得正确的值
//例一
var { name, age } = { age: 666, name: "bbb" };
console.log(name) //bbb
console.log(age) //666
// 例二
var { name, age ,sex } = { age: 666, name: "bbb" };
console.log(name) //bbb
console.log(age) //666
console.log(sex) //undefined
复制代码上面的例一等号左右两边的同名属性次序不一样，但对取值没有影响，例二，sex变量没有对应的属性名，所以取不到值，最后等于undefined。
注意细节
1.对象的解构赋值是下面形式的简写,对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者
var {name:n, age:a } = { age: 666, name: "bbb" };
console.log(n) //bbb
console.log(a) //666
console.log(name) //ReferenceError: name is not defined
console.log(age) //ReferenceError: age is not defined
复制代码2.对于用let和const声明解构的变量，变量不能重复声明，否则会报错
// 例一
let age;
let {age} = {age: 1}; // SyntaxError: Duplicate declaration "age"
// 例二
let age;
({age} = {age: 1});
console.log(age) //1
复制代码在例二中let命令下面一行的圆括号是必须的，否则会报错，因为解析器会将起首的大括号，理解成一个代码块，而不是赋值语句
2. 与数组解析赋值的相同点
和数组一样，解构也可以用于嵌套结构的对象。
var { p: [x, {y} ]} = {p:['hello',{y:"world"}]};
console.log(x,y) //hello world
复制代码注意这里的p不是变量,y其实也不是变量，（参考上面介绍）
对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。
var {x = 3} = {x: null};
console.log(x) //null
复制代码数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
var arr = [1, 2, 3];
var {0 : first, [arr.length - 1] : last} = arr;
console.log(first) //1
console.log(last) //3
复制代码数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3
2.3 字符串的解构赋值
基本用法
字符串在进行结构赋值时，被转化成了一个类似数组的对象
var [a,b,c,d,e] = 'hello';
console.log(a) //"h"
console.log(b) //"e"
console.log(c) //"l"
console.log(d) //"l"
console.log(e) //"o"
复制代码2.4函数参数的解构赋值
基本用法
1.函数的参数可以使用解构赋值
function add([x, y]){
return x + y;
}
console.log(add([1, 2])); //3
复制代码2. 函数参数的解构也可以使用默认值。
function add([x = 5, y]){
return x + y;
}
console.log(add([, 2])); //7
复制代码2.5变量的解析赋值用途
1.交换变量的值
[x,y] = [y,x]
复制代码2.从函数返回多个值
一般情况下函数只能返回一个值，如果想要返回多个值，只能将要返回的数据放到数组或者对象当中，但是在ES6中可以利用解构赋值取出返回的数据
//例一 返回一个数组
function f(){
var arr = [1,2,3,4]
return arr;
}
var [a,b,c,d] = f()
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(d); //4
//例二 返回一个对象
function obj(){
var obj = {
name:"zhangsan",
age:23,
sex:"man"
}
return obj;
}
var {name,age,sex} = obj()
console.log(name); //zhangsan
console.log(age);//23
console.log(sex);//man
复制代码3.函数参数的定义 解构赋值可以方便地将一组参数与变量名对应起来
//例一
//参数结构是数组形式，则参数是按照次序赋值的
function f([x,y,z]){
console.log(x,z,y) //x = 1, z = 3, y = 2
}
f([1,2,3])
//例二
//参数的结构是对象的形式，参数是按照相同的属性名赋值的
function f({x,y,z}){
console.log(x,y,z) //x =2,y = 3,z = 1
}
f({z:1,x:2,y:3})
复制代码4.提取JSON数据 解构赋值对提取JSON对象中的数据，尤其有用
var jsonData = {
id: 42,
status: "NO",
data: [88, 66]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number) // 42 'NO' [ 88, 66 ]
复制代码5.遍历Map结构
//例一
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let i of map) {
console.log(i); //[ 'first', 'hello' ] [ 'second', 'world' ]
}
//例二
var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key,value] of map) {
console.log(key + ":" + value); //first:hello second:world
}
复制代码3、ES6字符串扩展
3.1模板字符串
基本用法
在传统的JS语言中，输出模板比较麻烦，字符串与变量需要使用 + 连接符，拼接在一起，在ES6中新添了模板字符串，解决了传统写法繁琐的问题
1.模板字符串用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
// 字符串中嵌入变量
var name = "Tom",time = "today";
console.log(`Hello ${name}, how are you ${time}?`) //Hello Tom, how are you today?
复制代码2.如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
// 字符串中嵌入变量
var str = `\`Hello\` Wrode`
console.log(str) // `Hello` Wrode
复制代码3.如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。如果你不想要这个换行，可以使用trim方法消除它。
console.log(
`
`
)
/*
*/
复制代码4. 模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的JavaScript表达式，可以进行运算，引用对象属性,还能调用函数。
function fn() {
return "World";
}
console.log(`Hello ${fn()}!`) //Hello World!
复制代码5.由于模板字符串的大括号内部，就是执行JavaScript代码，因此如果大括号内部是一个字符串，将会原样输出。模板字符串还能进行嵌套
//原样输出
console.log(`Hello "World"`) //Hello "World"
//模板字符串嵌套
const tmpl = addrs => `
${addrs.map(addr => `
${addr.first} ${addr.last}
`;
const data = [
{ first: '' , last: 'Bond' },
{ first: 'Lars', last: '' },
];
console.log(tmpl(data));
//
//
// Bond Lars
复制代码3.2 trim()
除去字符串空格。一般配合正则表达式用的较多
-
trim 左右空格都是去掉
-
trimLeft 左空格去掉
-
trimRight 右空格去掉
var str = " a b c "
console.log(str.trim()) //"a b c"
复制代码3.3 repeat()
含义及用法
repeat()返回一个新的字符串，表示原字符串将要重复n次
var str = "A"
str.repeat(3)
console.log(str.repeat(3)) //AAA
复制代码注意
1. repeat()并没有对对原字符串产生影响。
2. repeat()d的参数时小数会向下取整，如果是负数会报错
3. 参数NaN等同与0
3.4 includes() startsWidth() 和 endsWith()
含义及用法
在ES6中新添加了三种方法用来确定字符串是否包含在另一个字符串中
-
includes():表示是否找到了参数字符串,返回布尔值
-
startsWidth():表示参数字符串是否在源字符串的头部,返回布尔值
-
endsWith():表示参数字符串是否在源字符串的尾部,返回布尔值
var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
复制代码注意：这三个方法都支持第二个参，使用第二个参数n时，endsWith()是针对n之前的字符串，includes()和startsWidth()是针对n之后直到结束的字符串。
var s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
复制代码3.5 padStart() 和 padEnd()
含义及用法
ES7推出了字符串补全长度的功能，如果某个字符串不够指定长度，会在头部或尾部补全。padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串
- padStart() 用于头部补全
- padEnd() 用于尾部补全
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
复制代码注意
1. 如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串
console.log("bbb".padStart(2,"ac")) //bbb
复制代码2. 如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。
'x'.padStart(4, 'abc') // 'abax'
复制代码3.如果省略第二个参数，则会用空格补全长度。
常见用法
1. 为数值补全指定位数
2. 提示字符串格式
//数值补全指定位数
'1'.padStart(10, '0') // "0000000001"
//提示字符串格式
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
复制代码4、ES6数组扩展
4.1 Array.from()
含义及作用
含义 这个方法是 Array 构造器的静态方法
作用 将把类数组对象和可遍历的对象（包括ES6新增的数据结构Set和Map），转成真正的数组
常见的类数组对象
- DOM操作返回的NodeList集合(如例一)
- 函数内部的arguments对象(如例二)
<body>
<p>1p>
<p>2p>
<p>3p>
body>
<script>
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
console.log(p);
});
//1
//2
//3
script>
复制代码//例二
function f(){
var args = Array.from(arguments)
console.log(args) //[1,8,6,7]
}
f(1,8,6,7)
复制代码Array.from 还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
Array.from([1, 2, 3], (x) => x * x) //[1,4,6]
复制代码常见用法示例
1. 取出一组DOM节点的文本内容
<body>
<span class="dd">hhspan>
<span class="dd">xxspan>
<span class="dd">llspan>
body>
<script>
let spans = document.getElementsByTagName('span');
//Array.from()
let name1 = Array.from(spans,s=>console.log(s.textContent)) // hh dd ll
// map()
let name2 = Array.prototype.map.call(apans,s=>console.log(s.textContent))
script>
复制代码2. 返回各种数据的类型
function typrOf(){
return Array.from(argurments,values=>typeof value)
}
typeOf(null,[],NaN) //['object', 'object', 'number']
复制代码4.2 Array.of()
含义及目的
含义 Array.of() 方法用于将一组值，转换为数组
目的 是弥补数组构造函数Array()的不足，因为参数个数的不同，会导致Array()的行为有差异
注意
-
不存在由于参数不同而导致的重载。它的行为非常统一。
-
Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
复制代码4.3 数组实例的find()和findIndex()
find()和findexIndex()的不同点
1 . find()是找出第一个符合条件的数组，返回值为数组元素 只能找到第一个满足的条件 ，并不会把所有都满足的条件找出来，如果没有符合条件的成员，则返回undefined。
findIndex()是返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
复制代码find()和和indexIndex()的相同点
1.find()和findIndex()的参数都是一个回调函数，回调函数的参数可以接受三个参数，分别表示 当前的值，当前的位置，原数组
2.这两个方法都可以接受第二个参数，用来绑定回调函数的this对象。
3.这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足。
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))}) // 0
复制代码4.4 数组实例的fill()
含义
含义 fill方法使用给定值，填充一个数组 参数含义 fill可以接受第二个和第三个参数，用于指定填充的 起始位置 和 结束位置 不包括结束位置
new Array(3).fill(7)
// [7, 7, 7]
['a', 'b', 'c'].fill(6,1,2) //表示起始位置是数组索引的1，结束位置是数组索引的2，不包括结束位置
// ['a', 6, 'c']
复制代码4.5 数组实例的entries(),key(),values()
含义
含义都用于遍历数组，它们都返回一个遍历器对象，可以用for...of循环进行遍历。
区别
-
keys()是对键名的遍历
-
values()是对键值的遍历
-
entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
复制代码4.6 数组的includes()
含义
含义表示某个数组是否包含给定的值，该方法返回一个布尔值
[1, 6, 3].includes(3); // true
[1, 6, 3].includes(4); // false
[1, 2, NaN].includes(NaN); // true
复制代码注意细节
- 该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。
- 通常也可以使用数组的indexOf方法，检查是否包含某个值。但是会导致NaN的判断失误
4.7 数组的扩展运算符
作用
写法是三个英文的句号即 ...
功能把数据结构转成数组。相当于实现了，数组的复制（这里指浅拷贝）
var arr = [1,2,3]
var arr1 =[...arr]
console.log(arr1) //[1,2,3]
arr[0] = 66;
console.log(arr) //[66,2,3]
console.log(arr1) //[1,2,3]
复制代码作用可以利用扩展运算符，把类数组转成数组
小总结 ：把一个类数组转成数组有如下几种方式：
-
Array.prototype.slice.call();
-
Array.from();
-
[...类数组对象]
5、ES6 对象扩展
5.1属性的简写
- 在ES6中如果属性名和代替属性值的变量相等的话，属性值可以不写，如下
var str = "hello"
var obj1 = {str}
console.log(obj1) //{ str: 'hello' }
复制代码- 同样的在对象中如果方法名和定义方法名的变量相等的话，方法名可以省略。
function say(){
console.log("hello")
}
var obj = {
say
}
console.log(obj.say()) //hello
复制代码采用以上写法是不是就简单多了
5.2 Object.is()
在ES5中虽然有两个运算符可以比较两个值是否相等，但是都有各自的优缺点，如（==）运算符会自动转换数据类型，（===）运算符NaN不等于NaN，-0等于+0，有没有一种运算符，只考虑只要两个值相等，他们就应该相等的运算符呢，所以在ES6中提出“同值相等”的算法，即Object.is(),用来比较两个值是否完全相等，与（===）的行为基本一致
Object.is(+0,-0) //false
Object.is(NaN,NaN)//true
Object.is({},{})//true
Object.is("str","str")//true
复制代码5.3 Object.assign()
Object.assign就去用于对象的合并，将源对象的所有的可枚举属性，复制到目标对象。可以有多个参数，但是第一个参数是目标对象，后面的参数都是源对象。
var target = {a:1,b:2}
var obj1 = {b:3,c:4}
var obj2 = {b:11,d:55}
var obj = Object.assign(target,obj1,obj2)
console.log(obj) // { a: 1, b: 11, c: 4, d: 55 }
复制代码注意
-
如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
-
这个方法的返回值就是第一个参数的引用，也就是返回了第一个参数。
-
这个方法会把原型上面的数据也拷贝了。
-
不能拷贝继承过来的属性，也不拷贝不可枚举的属性
-
这个方法是属于浅拷贝。
常见用法
- 为对象添加属性
class Point {
constructor(x, y) {
Object.assign(this, {x, y});
}
}
//通过Object.assign方法，将x属性和y属性添加到Point类的对象实例。
复制代码- 为对象添加方法
function Example(){
}
Example.prototype.showTab = function(){
console.log("Hello")
}
Object.assign(Example.prototype,{
say(){
console.log("world")
},
see(){
console.log("Hi")
}
})
var example = new Example()
console.log(example.showTab()) //Hello
console.log(example.say()) //world
console.log(example.see()) //Hi
复制代码- 克隆对象
- 合并多个对象
- 为属性指定默认值
5.4 属性相关的方法
1. Obect.getOwnProertyDescriptor()获取一个对象中某个属性的详细信息 (例一)
2. Object.defineProperty( )精细化设置一个对象的单个属性的(例二)
- configurable 是否可以删除
- writeable 是否可以修改
- enumerable 是否可以枚举
- value：属性值
3. Object.defineProperties() 精细化设置一个对象的多个属性的(例三)
4.getOwnPropertyNames() 获取自的属性，以数组的格式返回的(例四)
5.Object.keys()得到一个对象的属性名，把属性名放到一个数组中(例五)
6.Object.values()获取对象的值，放到数组中(例六)
//例一
var obj = {
name:"wangcai",
age:16
}
console.log(Object.getOwnPropertyDescriptor(obj,"name"))
/*{ value: 'wangcai',
writable: true,
enumerable: true,
configurable: true }
*/
// 例二
//添加一个属性
Object.defineProperty(obj,"name",{configurable:true,value:"wangcai"})
// 例三
//添加多个属性
Object.defineProperties(obj,
{
name:{configurable:true,value:"wangcai"},
id:{writeable:false,value:"123456"}
}
)
//例四
var obj = {
name:"wangcai",
age:16
}
console.log(Object.getOwnPropertyNames(obj)) //[ 'name', 'age' ]
//例五
var obj = {
name:"wangcai",
age:16
}
console.log(Object.keys(obj)) //[ 'name', 'age' ]
//例六
var obj = {
name:"wangcai",
age:16
}
console.log(Object.values(obj)) //[ 'wangcai', 16 ]
复制代码5.5 对象继承相关的方法
1. Object.create()使用Object.create比较适合对字面量对象的继承。 2. getPrototypeOf()获取创建这个对象的构造器的prototype属性
//例一
var newObj = Object.create({}, {
size: {
value: "large",
enumerable: true
},
shape: {
value: "round",
enumerable: true
}
});
console.log(newObj.size) //large
console.log(newObj.shape) //round
console.log(Object.getPrototypeOf(newObj)) //{}
//例二
var obj = {
name:"wangcai",
age:16
}
console.log(Object.getPrototypeOf(obj)==Object.prototype)
复制代码5.6 对象的遍历总结
在ES6中有以下几种方式可以遍历对象的属性
- for in : 会输出自身以及原型链上可枚举的属性。
- Object.keys() : 用来获取对象自身可枚举的属性键
- Object.getOwnPropertyNames() : 用来获取对象自身的全部属性名
5.7对象的扩展运算符
在前面我们详细的说过数组的扩展运算符，对象的扩展运算符和数组的扩展运算符思想一样，就是取出参数对象的所有可遍历的属性，赋值给当前的对象（看到这里你会发现，对象的扩展运算符等同于Object.assign()这个方法）
let z ={a:6,b:4}
let n = {...z}
console.log(n) //{a:6,b:4}
console.log(Object.assign({},z)) //{a:6,b:4}
复制代码作用
- 可以用于合并两个对象
- 注意如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。
let a = {x:55,y:66
}
let x = 1, y = 2, aWithOverrides = { ...a, x, y };
console.log(aWithOverrides) //{ x: 1, y: 2 }
复制代码由于篇幅关系剩余的知识点另开一篇
敬请期待下篇ES6中的函数扩展、Class、Set和Map数据结构、Iterator和for...of
[参考文献]
参考文献 阮一峰ES6入门