🌈个人主页：前端青山
🔥系列专栏：Javascript篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来Javascript篇专栏内容:Es6-对象新增了哪些扩展？
目录
一、参数
二、属性
函数的length属性
name属性
三、作用域
四、严格模式
五、箭头函数
1、属性的简写
2、属性名表达式
3、super关键字
4、扩展运算符的应用
5、属性的遍历
六、对象新增的方法
Object.is()
Object.assign()
Object.getOwnPropertyDescriptors()
Object.setPrototypeOf()
Object.getPrototypeOf()
Object.keys()
Object.values()
Object.entries()
Object.fromEntries()
参考文献
一、参数
ES6允许为函数的参数设置默认值
function log(x, y = 'World') {console.log(x, y);
}
console.log('Hello') // Hello World
console.log('Hello', 'China') // Hello China
console.log('Hello', '') // Hello函数的形参是默认声明的，不能使用let或const再次声明
function foo(x = 5) {let x = 1; // errorconst x = 2; // error
}参数默认值可以与解构赋值的默认值结合起来使用
function foo({x, y = 5}) {console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined上面的foo函数，当参数为对象的时候才能进行解构，如果没有提供参数的时候，变量x和y就不会生成，从而报错，这里设置默认值避免
function foo({x, y = 5} = {}) {console.log(x, y);
}
foo() // undefined 5参数默认值应该是函数的尾参数，如果不是非尾部的参数设置默认值，实际上这个参数是没发省略的
function f(x = 1, y) {return [x, y];
}
f() // [1, undefined]
f(2) // [2, undefined]
f(, 1) // 报错
f(undefined, 1) // [1, 1]二、属性
函数的length属性
length将返回没有指定默认值的参数个数
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2rest 参数也不会计入length属性
(function(...args) {}).length // 0如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1name属性
返回该函数的函数名
var f = function () {};// ES5
f.name // ""// ES6
f.name // "f"如果将一个具名函数赋值给一个变量，则 name属性都返回这个具名函数原本的名字
const bar = function baz() {};
bar.name // "baz"
Function构造函数返回的函数实例，name属性的值为anonymous(new Function).name // "anonymous"
bind返回的函数，name属性值会加上bound前缀function foo() {};
foo.bind({}).name // "bound foo"(function(){}).bind({}).name // "bound "三、作用域
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域
等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的
下面例子中，y=x会形成一个单独作用域，x没有被定义，所以指向全局变量x
let x = 1;function f(y = x) { // 等同于 let y = x let x = 2; console.log(y);
}f() // 1四、严格模式
只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错
// 报错
function doSomething(a, b = a) {'use strict';// code
}// 报错
const doSomething = function ({a, b}) {'use strict';// code
};// 报错
const doSomething = (...a) => {'use strict';// code
};const obj = {// 报错doSomething({a, b}) {'use strict';// code}
};五、箭头函数
使用“箭头”（=>）定义函数
var f = v => v;// 等同于
var f = function (v) {return v;
};如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分
var f = () => 5;
// 等同于
var f = function () { return 5 };var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {return num1 + num2;
};如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回
var sum = (num1, num2) => { return num1 + num2; }如果返回对象，需要加括号将对象包裹
let getTempItem = id => ({ id: id, name: "Temp" });注意点：
-
函数体内的
this对象，就是定义时所在的对象，而不是使用时所在的对象 -
不可以当作构造函数，也就是说，不可以使用
new命令，否则会抛出一个错误 -
不可以使用
arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替 -
不可以使用
yield命令，因此箭头函数不能用作 Generator 函数
1、属性的简写
ES6中，当对象键名与对应值名相等的时候，可以进行简写
const baz = {foo:foo}
// 等同于
const baz = {foo}方法也能够进行简写
const o = {method() {return "Hello!";}
};
// 等同于
const o = {method: function() {return "Hello!";}
}在函数内作为返回值，也会变得方便很多
function getPoint() {const x = 1;const y = 10;return {x, y};
}
getPoint()
// {x:1, y:10}注意：简写的对象方法不能用作构造函数，否则会报错
const obj = {f() {this.foo = 'bar';}
};
new obj.f() // 报错2、属性名表达式
ES6 允许字面量定义对象时，将表达式放在括号内
let lastWord = 'last word';
const a = {'first word': 'hello',[lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"表达式还可以用于定义方法名
let obj = {['h' + 'ello']() {return 'hi';}
};
obj.hello() // hi注意，属性名表达式与简洁表示法，不能同时使用，会报错
// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };
// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]
const keyA = {a: 1};
const keyB = {b: 2};
const myObject = {[keyA]: 'valueA',[keyB]: 'valueB'
};
myObject // Object {[object Object]: "valueB"}3、super关键字
this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象
const proto = {foo: 'hello'
};
const obj = {foo: 'world',find() {return super.foo;}
};
Object.setPrototypeOf(obj, proto); // 为obj设置原型对象
obj.find() // "hello"4、扩展运算符的应用
在解构赋值中，未被读取的可遍历的属性，分配到指定的对象上面
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }注意：解构赋值必须是最后一个参数，否则会报错
解构赋值是浅拷贝
let obj = { a: { b: 1 } };
let { ...x } = obj;
obj.a.b = 2; // 修改obj里面a属性中键值
x.a.b // 2，影响到了结构出来x的值对象的扩展运算符等同于使用Object.assign()方法
5、属性的遍历
ES6 一共有 5 种方法可以遍历对象的属性。
-
for...in：循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）
-
Object.keys(obj)：返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名
-
Object.getOwnPropertyNames(obj)：回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名
-
Object.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有 Symbol 属性的键名
-
Reflect.ownKeys(obj)：返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举
上述遍历，都遵守同样的属性遍历的次序规则：
-
首先遍历所有数值键，按照数值升序排列
-
其次遍历所有字符串键，按照加入时间升序排列
-
最后遍历所有 Symbol 键，按照加入时间升序排
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]六、对象新增的方法
关于对象新增的方法，分别有以下：
-
Object.is()
-
Object.assign()
-
Object.getOwnPropertyDescriptors()
-
Object.setPrototypeOf()，Object.getPrototypeOf()
-
Object.keys()，Object.values()，Object.entries()
-
Object.fromEntries()
Object.is()
严格判断两个值是否相等，与严格比较运算符（===）的行为基本一致，不同之处只有两个：一是+0不等于-0，二是NaN等于自身
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // trueObject.assign()
Object.assign()方法用于对象的合并，将源对象source的所有可枚举属性，复制到目标对象target
Object.assign()方法的第一个参数是目标对象，后面的参数都是源对象
const target = { a: 1, b: 1 };
const source1 = { b: 2, c: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}注意：Object.assign()方法是浅拷贝，遇到同名属性会进行替换
Object.getOwnPropertyDescriptors()
返回指定对象所有自身属性（非继承属性）的描述对象
const obj = {foo: 123,get bar() { return 'abc' }
};
Object.getOwnPropertyDescriptors(obj)
// { foo:
// { value: 123,
// writable: true,
// enumerable: true,
// configurable: true },
// bar:
// { get: [Function: get bar],
// set: undefined,
// enumerable: true,
// configurable: true } }Object.setPrototypeOf()
Object.setPrototypeOf方法用来设置一个对象的原型对象
Object.setPrototypeOf(object, prototype)
// 用法
const o = Object.setPrototypeOf({}, null);Object.getPrototypeOf()
用于读取一个对象的原型对象
Object.getPrototypeOf(obj);Object.keys()
返回自身的（不含继承的）所有可遍历（enumerable）属性的键名的数组
var obj = { foo: 'bar', baz: 42 };
Object.keys(obj)
// ["foo", "baz"]Object.values()
返回自身的（不含继承的）所有可遍历（enumerable）属性的键对应值的数组
const obj = { foo: 'bar', baz: 42 };
Object.values(obj)
// ["bar", 42]Object.entries()
返回一个对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对的数组
const obj = { foo: 'bar', baz: 42 };
Object.entries(obj)
// [ ["foo", "bar"], ["baz", 42] ]Object.fromEntries()
用于将一个键值对数组转为对象
Object.fromEntries([['foo', 'bar'],['baz', 42]
])
// { foo: "bar", baz: 42 }参考文献
-
ES6 入门教程
![[OpenGL] 点光源阴影(万向阴影贴图)](https://img-blog.csdnimg.cn/direct/01a26042c9eb4eac803008140bf4b423.png)
