目录
函数的扩展
箭头函数
ES6允许使用“箭头”(=>
)定义函数。箭头函数使得表达更加简洁。
var f = (参数)=>{ 代码块}
var ff = (x,y)=>{ return x+y }
// 相当于
var f = function(参数){ 代码块 }
var ff = function(x,y){ return x+y }
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
箭头函数可以与变量解构结合使用。
const full = ({ first, last }) => first + ' ' + last;
// 等同于
var person={ first, last };
function full(person) {
return person.first + ' ' + person.last;
}
箭头函数可以嵌套使用。一个箭头函数大括号中可以嵌套另一个箭头函数。
箭头函数this对象指向
普通函数this 的指向
- js中的this是执行上下文,在普通函数中,this指向它的直接调用者;
- 在默认情况下(非严格模式),在全局环境下,js中的this指向window;
箭头函数的this指向
箭头函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。
简单而言,箭头函数使用时,不绑定this对象,箭头函数没有自己的this,它的this是继承而来的,默认指向在定义箭头函数时所处的对象。
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
var f = foo.call({id: 1}); // 设置foo的id为1
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1
上面代码之中,只有一个this,就是函数foo的this。所以t1、t2、t3都输出同样的结果。
因为所有的内层函数都是箭头函数,都没有自己的this,它们的this其实都是最外层foo函数的this。所以箭头函数的this指向是创建它所在的对象,不会改变。
箭头函数有几个使用注意点:
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。
函数的默认值
在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。
function log(x, y) {
y = y || 'aaa'; // 设置y的默认值为aaa
console.log(x, y);
}
ES6允许为函数的参数设置默认值,即直接写在参数定义的后面。
function log(x, y = 'aaa') {
console.log(x, y);
}
与解构赋值默认值结合使用
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才会通过解构赋值而生成。如果函数foo调用时参数不是对象,变量x和y就不会生成,从而报错。如果参数对象没有y属性,y的默认值5才会生效。
函数的length属性
指定了默认值以后,函数的length属性,返回的是没有默认值的参数个数。也就是说,指定了默认值后,length属性将失真。
下面代码中,length属性的返回值,等于函数的参数个数减去指定了默认值的参数个数。
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
如果设置了默认值的参数不是尾参数(排在最右边),那么length属性也不再计入后面的参数了(就是说,以第一个默认参数位置开始计数,只计算第一个默认参数前边的个数,不计算后边的)。
如下面代码第一行,默认参数a在最左边位置,右边参数b和c虽然不是默认参数,但是在默认参数后边(右边),所以不计参数b和c了。
第二行代码中,排在默认参数b前面(左边)的参数a计入length,而排在默认参数后面(右边)的参数c则不计入。
(function (a = 0, b, c) { }).length // 0
(function (a, b = 1, c) { }).length // 1
函数默认值的作用域
作用域问题
var x=1; // 全局变量x
function f(x, y = x) { console.log(y); }
上面代码中,参数y的默认值等于x。调用时,由于函数作用域内部的变量x已经生成,所以y等于参数x,而不是全局变量x。
let x = 1; // 全局变量 x
function f(y = x) {
let x = 2; // 局部变量 x
console.log(y);
}
f() // 1
上面代码中,函数调用时,y的默认值变量x尚未在函数内部生成,所以x指向全局变量。
rest参数
ES6引入rest参数(形式为“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
function add(...values) {
let sum = 0;
for (var num of values) {
sum += num;
}
return sum;
}
add(4, 5, 6,7) // 22
注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。函数的length属性,不包括rest参数。
扩展运算符
扩展运算符(spread)是三个点(…)。它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列。
console.log( ...[1, 2, 3] ) // 1 2 3
console.log( ...[1, 2, ...[1,2,5],3] ) // 1 2 1 2 5 3
console.log( ...[1, 2, [1,2,5],3] ) // 1 2 [ 1, 2, 5 ] 3
该运算符主要用在函数调用
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42
尾调用和尾递归
尾调用(Tail Call)指某个函数的最后一步是调用另一个函数,它是函数式编程的一个重要概念。
function f(x){
return g(x);
}
上面代码中,函数f的最后一步是调用函数g,这就叫尾调用。
函数调用自身,称为递归。
如果尾调用自身称为尾递归。
function foo(n) {
if (n === 1) return 1;
return n * foo(n - 1);
}
foo(5) // 120
对象的扩展
属性的简洁表示法
ES6允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
var foo = 'bar';
var baz = {foo};
console.log( baz ) // { foo: 'bar' }
//等同于
var foo = 'bar';
var baz={ foo:foo};
console.log( baz ) // { foo: 'bar' }
除了属性简写,方法也可以简写。
var func= {
method() {
return "这里是ES6方法简写!";
}
};
// 等同于
var func= {
method: function() {
return "这里是ES6以前的方法!";
}
};
属性名表达式
JavaScript语言定义对象的属性,有两种方法。
// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;
上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。
ES6 允许字面量定义对象(使用大括号)时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。
let propKey = 'foo';
let obj = {
[propKey]: true,
['a' + 'bc']: 123 // ES5使用大括号时不能这样定义
}
表达式还可以用于定义方法名。
let obj = {
['f' + 'unc']() {
return 'hello';
}
};
obj.func() // hello
属性名表达式与简洁表示法,不能同时使用,会报错。
属性的遍历
ES6一共有5种方法可以遍历对象的属性:
-
for...in
for…in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。
-
Object.keys(obj)
Object.keys
返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)。 -
Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames
返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)。 -
Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols
返回一个数组,包含对象自身的所有Symbol属性。 -
Reflect.ownKeys(obj)
Reflect.ownKeys
返回一个数组,包含对象自身的所有属性,不管是属性名是Symbol或字符串,也不管是否可枚举。
以上的5种方法遍历对象的属性,都遵守同样的属性遍历的次序规则。
- 首先遍历所有属性名为数值的属性,按照数字排序。
- 其次遍历所有属性名为字符串的属性,按照生成时间排序。
- 最后遍历所有属性名为Symbol值的属性,按照生成时间排序。
Object.assign()
Object.assign
方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
Object.assign
方法的第一个参数是目标对象,后面的参数都是源对象。
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}
如果目标对象和源对象有同名属性,或者多个源对象有同名属性,则后面的属性会覆盖前面的属性。
var target = { a: 111, b: 111 };
var source1 = { b: 222, c: 222 };
var source2 = { c: 333 };
Object.assign(target, source1, source2);
target // {a:111, b:222, c:333}
如果该函数只有一个参数,当参数为对象时,直接返回该对象;当参数不是对象时,会先将参数转为对象然后返回。
如果该参数不是对象,则会先转成对象,然后返回。由于undefined
和null
无法转成对象,所以如果它们作为参数,就会报错。
Object.assign()常见用途
(1)为对象添加属性
下面方法通过Object.assign
方法,将x属性和y属性添加到Person 类的对象实例。
class Person {
constructor(x, y) {
Object.assign(this, {x, y});
}
}
(2)为对象添加方法
Object.assign(Person.prototype, {
method1(arg1, arg2) {
···
},
method2() {
···
}
});
// 等同于下面的写法
Person.prototype.method1 = function (arg1, arg2) {
···
};
Person.prototype.method2 = function () {
···
};
(3)克隆对象
上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。此方法为浅拷贝,不能克隆它继承的值。
function clone(origin) {
return Object.assign({}, origin);
}
(4)合并多个对象
将多个对象合并到某个对象。
const merge =function(target, ...sources){
Object.assign(target, ...sources);
}
(5)为属性指定默认值
下面代码中,DEFAULTS对象是默认值,options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象,如果两者有同名属性,则option的属性值会覆盖DEFAULTS的属性值。
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
options = Object.assign({}, DEFAULTS, options);
}
Object.is()
ES5比较两个值是否相等,只有两个运算符:相等运算符()和严格相等运算符(=)。它们都有缺点,前者会自动转换数据类型,后者的NaN
不等于自身,以及+0等于-0。
JavaScript缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。
ES6提出同值相等算法,用来解决这个问题。Object.is
就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。不同之处只有两个:一是+0不等于-0,二是NaN
等于自身。
+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true
对象的解构赋值
对象的解构赋值用于从一个对象取值,相当于将所有可遍历的、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
上面代码中,变量z是解构赋值所在的对象(前面有三个点)。它获取等号右边的所有尚未读取的键(a和b),将它们连同值一起拷贝过来。
解构赋值必须是最后一个参数,否则会报错。
let { ...x, y, z } = obj; // 句法错误
let { x, ...y, ...z } = obj; // 句法错误
由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就会报错,因为它们无法转为对象。
解构赋值的拷贝是浅拷贝,即如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。
let obj = { a: { b: 1 } };
let { ...x } = obj; // 解构赋值
obj.a.b = 2;
x.a.b // 2
上面代码中,x是解构赋值所在的对象,拷贝了对象obj的a属性。a属性引用了一个对象,修改这个对象的值,会影响到解构赋值对它的引用。
扩展运算符
扩展运算符( … )用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。
let z = { a: 3, b: 4 };
let n = { ...z }; // n的值 { a: 3, b: 4 }
// 相当于Object.assign方法
let m = Object.assign( {}, z ); // m的值 { a: 3, b: 4 }
扩展运算符可以用于合并两个对象。
let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);
如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉。
let newobj= { ...obj, x: 1, y: 2 };
// 等同于
let newobj= Object.assign({}, obj, { x: 1, y: 2 });
上面代码中,如果obj对象有x属性和y属性,拷贝到新对象后会被覆盖掉。
属性的可枚举性
对象的每个属性都有一个描述对象,用来控制该属性的行为。
Object.getOwnPropertyDescriptor
方法可以获取该属性的描述对象。
描述对象的enumerable
属性,称为”可枚举性“,如果该属性为false,就表示某些操作会忽略当前属性。
ES5有三个操作会忽略enumerable为false的属性。
for...in
循环:只遍历对象自身的和继承的可枚举的属性。Object.keys()
:返回对象自身的所有可枚举的属性的键名。JSON.stringify()
:只串行化对象自身的可枚举的属性。
ES6新增了一个操作Object.assign()
,会忽略enumerable
为false
的属性,只拷贝对象自身的可枚举的属性。