mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-25 03:02:21 +00:00
docs: use let/const instead of var
This commit is contained in:
parent
5fbafe9efc
commit
7b2b8f1e46
@ -5,12 +5,12 @@
|
|||||||
ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
|
ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var foo = 'bar';
|
const foo = 'bar';
|
||||||
var baz = {foo};
|
const baz = {foo};
|
||||||
baz // {foo: "bar"}
|
baz // {foo: "bar"}
|
||||||
|
|
||||||
// 等同于
|
// 等同于
|
||||||
var baz = {foo: foo};
|
const baz = {foo: foo};
|
||||||
```
|
```
|
||||||
|
|
||||||
上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。下面是另一个例子。
|
上面代码表明,ES6 允许在对象之中,直接写变量。这时,属性名为变量名, 属性值为变量的值。下面是另一个例子。
|
||||||
@ -32,7 +32,7 @@ f(1, 2) // Object {x: 1, y: 2}
|
|||||||
除了属性简写,方法也可以简写。
|
除了属性简写,方法也可以简写。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var o = {
|
const o = {
|
||||||
method() {
|
method() {
|
||||||
return "Hello!";
|
return "Hello!";
|
||||||
}
|
}
|
||||||
@ -40,7 +40,7 @@ var o = {
|
|||||||
|
|
||||||
// 等同于
|
// 等同于
|
||||||
|
|
||||||
var o = {
|
const o = {
|
||||||
method: function() {
|
method: function() {
|
||||||
return "Hello!";
|
return "Hello!";
|
||||||
}
|
}
|
||||||
@ -50,9 +50,9 @@ var o = {
|
|||||||
下面是一个实际的例子。
|
下面是一个实际的例子。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var birth = '2000/01/01';
|
let birth = '2000/01/01';
|
||||||
|
|
||||||
var Person = {
|
const Person = {
|
||||||
|
|
||||||
name: '张三',
|
name: '张三',
|
||||||
|
|
||||||
@ -69,8 +69,8 @@ var Person = {
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
function getPoint() {
|
function getPoint() {
|
||||||
var x = 1;
|
const x = 1;
|
||||||
var y = 10;
|
const y = 10;
|
||||||
return {x, y};
|
return {x, y};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -81,7 +81,7 @@ getPoint()
|
|||||||
CommonJS 模块输出一组变量,就非常合适使用简洁写法。
|
CommonJS 模块输出一组变量,就非常合适使用简洁写法。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var ms = {};
|
let ms = {};
|
||||||
|
|
||||||
function getItem (key) {
|
function getItem (key) {
|
||||||
return key in ms ? ms[key] : null;
|
return key in ms ? ms[key] : null;
|
||||||
@ -107,7 +107,7 @@ module.exports = {
|
|||||||
属性的赋值器(setter)和取值器(getter),事实上也是采用这种写法。
|
属性的赋值器(setter)和取值器(getter),事实上也是采用这种写法。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var cart = {
|
const cart = {
|
||||||
_wheels: 4,
|
_wheels: 4,
|
||||||
|
|
||||||
get wheels () {
|
get wheels () {
|
||||||
@ -126,7 +126,7 @@ var cart = {
|
|||||||
注意,简洁写法的属性名总是字符串,这会导致一些看上去比较奇怪的结果。
|
注意,简洁写法的属性名总是字符串,这会导致一些看上去比较奇怪的结果。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj = {
|
const obj = {
|
||||||
class () {}
|
class () {}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -142,7 +142,7 @@ var obj = {
|
|||||||
如果某个方法的值是一个 Generator 函数,前面需要加上星号。
|
如果某个方法的值是一个 Generator 函数,前面需要加上星号。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj = {
|
const obj = {
|
||||||
* m() {
|
* m() {
|
||||||
yield 'hello world';
|
yield 'hello world';
|
||||||
}
|
}
|
||||||
@ -186,9 +186,9 @@ let obj = {
|
|||||||
下面是另一个例子。
|
下面是另一个例子。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var lastWord = 'last word';
|
let lastWord = 'last word';
|
||||||
|
|
||||||
var a = {
|
const a = {
|
||||||
'first word': 'hello',
|
'first word': 'hello',
|
||||||
[lastWord]: 'world'
|
[lastWord]: 'world'
|
||||||
};
|
};
|
||||||
@ -214,13 +214,13 @@ obj.hello() // hi
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// 报错
|
// 报错
|
||||||
var foo = 'bar';
|
const foo = 'bar';
|
||||||
var bar = 'abc';
|
const bar = 'abc';
|
||||||
var baz = { [foo] };
|
const baz = { [foo] };
|
||||||
|
|
||||||
// 正确
|
// 正确
|
||||||
var foo = 'bar';
|
const foo = 'bar';
|
||||||
var baz = { [foo]: 'abc'};
|
const baz = { [foo]: 'abc'};
|
||||||
```
|
```
|
||||||
|
|
||||||
注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串`[object Object]`,这一点要特别小心。
|
注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串`[object Object]`,这一点要特别小心。
|
||||||
@ -346,10 +346,10 @@ Object.defineProperty(Object, 'is', {
|
|||||||
`Object.assign`方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
|
`Object.assign`方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var target = { a: 1 };
|
const target = { a: 1 };
|
||||||
|
|
||||||
var source1 = { b: 2 };
|
const source1 = { b: 2 };
|
||||||
var source2 = { c: 3 };
|
const source2 = { c: 3 };
|
||||||
|
|
||||||
Object.assign(target, source1, source2);
|
Object.assign(target, source1, source2);
|
||||||
target // {a:1, b:2, c:3}
|
target // {a:1, b:2, c:3}
|
||||||
@ -360,10 +360,10 @@ target // {a:1, b:2, c:3}
|
|||||||
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
|
注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var target = { a: 1, b: 1 };
|
const target = { a: 1, b: 1 };
|
||||||
|
|
||||||
var source1 = { b: 2, c: 2 };
|
const source1 = { b: 2, c: 2 };
|
||||||
var source2 = { c: 3 };
|
const source2 = { c: 3 };
|
||||||
|
|
||||||
Object.assign(target, source1, source2);
|
Object.assign(target, source1, source2);
|
||||||
target // {a:1, b:2, c:3}
|
target // {a:1, b:2, c:3}
|
||||||
@ -372,7 +372,7 @@ target // {a:1, b:2, c:3}
|
|||||||
如果只有一个参数,`Object.assign`会直接返回该参数。
|
如果只有一个参数,`Object.assign`会直接返回该参数。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj = {a: 1};
|
const obj = {a: 1};
|
||||||
Object.assign(obj) === obj // true
|
Object.assign(obj) === obj // true
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -400,11 +400,11 @@ Object.assign(obj, null) === obj // true
|
|||||||
其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。
|
其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var v1 = 'abc';
|
const v1 = 'abc';
|
||||||
var v2 = true;
|
const v2 = true;
|
||||||
var v3 = 10;
|
const v3 = 10;
|
||||||
|
|
||||||
var obj = Object.assign({}, v1, v2, v3);
|
const obj = Object.assign({}, v1, v2, v3);
|
||||||
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
|
console.log(obj); // { "0": "a", "1": "b", "2": "c" }
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -444,8 +444,8 @@ Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
|
|||||||
`Object.assign`方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。
|
`Object.assign`方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj1 = {a: {b: 1}};
|
const obj1 = {a: {b: 1}};
|
||||||
var obj2 = Object.assign({}, obj1);
|
const obj2 = Object.assign({}, obj1);
|
||||||
|
|
||||||
obj1.a.b = 2;
|
obj1.a.b = 2;
|
||||||
obj2.a.b // 2
|
obj2.a.b // 2
|
||||||
@ -456,8 +456,8 @@ obj2.a.b // 2
|
|||||||
对于这种嵌套的对象,一旦遇到同名属性,`Object.assign`的处理方法是替换,而不是添加。
|
对于这种嵌套的对象,一旦遇到同名属性,`Object.assign`的处理方法是替换,而不是添加。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var target = { a: { b: 'c', d: 'e' } }
|
const target = { a: { b: 'c', d: 'e' } }
|
||||||
var source = { a: { b: 'hello' } }
|
const source = { a: { b: 'hello' } }
|
||||||
Object.assign(target, source)
|
Object.assign(target, source)
|
||||||
// { a: { b: 'hello' } }
|
// { a: { b: 'hello' } }
|
||||||
```
|
```
|
||||||
@ -838,7 +838,7 @@ d.a // "a"
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// es6的写法
|
// es6的写法
|
||||||
var obj = {
|
const obj = {
|
||||||
method: function() { ... }
|
method: function() { ... }
|
||||||
};
|
};
|
||||||
obj.__proto__ = someOtherObj;
|
obj.__proto__ = someOtherObj;
|
||||||
@ -895,7 +895,7 @@ Object.getPrototypeOf({ __proto__: null })
|
|||||||
Object.setPrototypeOf(object, prototype)
|
Object.setPrototypeOf(object, prototype)
|
||||||
|
|
||||||
// 用法
|
// 用法
|
||||||
var o = Object.setPrototypeOf({}, null);
|
const o = Object.setPrototypeOf({}, null);
|
||||||
```
|
```
|
||||||
|
|
||||||
该方法等同于下面的函数。
|
该方法等同于下面的函数。
|
||||||
@ -957,7 +957,7 @@ function Rectangle() {
|
|||||||
// ...
|
// ...
|
||||||
}
|
}
|
||||||
|
|
||||||
var rec = new Rectangle();
|
const rec = new Rectangle();
|
||||||
|
|
||||||
Object.getPrototypeOf(rec) === Rectangle.prototype
|
Object.getPrototypeOf(rec) === Rectangle.prototype
|
||||||
// true
|
// true
|
||||||
@ -1033,7 +1033,7 @@ for (let [key, value] of entries(obj)) {
|
|||||||
`Object.values`方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
|
`Object.values`方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj = { foo: 'bar', baz: 42 };
|
const obj = { foo: 'bar', baz: 42 };
|
||||||
Object.values(obj)
|
Object.values(obj)
|
||||||
// ["bar", 42]
|
// ["bar", 42]
|
||||||
```
|
```
|
||||||
@ -1041,7 +1041,7 @@ Object.values(obj)
|
|||||||
返回数组的成员顺序,与本章的《属性的遍历》部分介绍的排列规则一致。
|
返回数组的成员顺序,与本章的《属性的遍历》部分介绍的排列规则一致。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj = { 100: 'a', 2: 'b', 7: 'c' };
|
const obj = { 100: 'a', 2: 'b', 7: 'c' };
|
||||||
Object.values(obj)
|
Object.values(obj)
|
||||||
// ["b", "c", "a"]
|
// ["b", "c", "a"]
|
||||||
```
|
```
|
||||||
@ -1051,14 +1051,14 @@ Object.values(obj)
|
|||||||
`Object.values`只返回对象自身的可遍历属性。
|
`Object.values`只返回对象自身的可遍历属性。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj = Object.create({}, {p: {value: 42}});
|
const obj = Object.create({}, {p: {value: 42}});
|
||||||
Object.values(obj) // []
|
Object.values(obj) // []
|
||||||
```
|
```
|
||||||
|
|
||||||
上面代码中,`Object.create`方法的第二个参数添加的对象属性(属性`p`),如果不显式声明,默认是不可遍历的,因为`p`的属性描述对象的`enumerable`默认是`false`,`Object.values`不会返回这个属性。只要把`enumerable`改成`true`,`Object.values`就会返回属性`p`的值。
|
上面代码中,`Object.create`方法的第二个参数添加的对象属性(属性`p`),如果不显式声明,默认是不可遍历的,因为`p`的属性描述对象的`enumerable`默认是`false`,`Object.values`不会返回这个属性。只要把`enumerable`改成`true`,`Object.values`就会返回属性`p`的值。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj = Object.create({}, {p:
|
const obj = Object.create({}, {p:
|
||||||
{
|
{
|
||||||
value: 42,
|
value: 42,
|
||||||
enumerable: true
|
enumerable: true
|
||||||
@ -1095,7 +1095,7 @@ Object.values(true) // []
|
|||||||
`Object.entries`方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
|
`Object.entries`方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj = { foo: 'bar', baz: 42 };
|
const obj = { foo: 'bar', baz: 42 };
|
||||||
Object.entries(obj)
|
Object.entries(obj)
|
||||||
// [ ["foo", "bar"], ["baz", 42] ]
|
// [ ["foo", "bar"], ["baz", 42] ]
|
||||||
```
|
```
|
||||||
@ -1127,8 +1127,8 @@ for (let [k, v] of Object.entries(obj)) {
|
|||||||
`Object.entries`方法的另一个用处是,将对象转为真正的`Map`结构。
|
`Object.entries`方法的另一个用处是,将对象转为真正的`Map`结构。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var obj = { foo: 'bar', baz: 42 };
|
const obj = { foo: 'bar', baz: 42 };
|
||||||
var map = new Map(Object.entries(obj));
|
const map = new Map(Object.entries(obj));
|
||||||
map // Map { foo: "bar", baz: 42 }
|
map // Map { foo: "bar", baz: 42 }
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -1220,7 +1220,7 @@ o3.a // undefined
|
|||||||
下面是另一个例子。
|
下面是另一个例子。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var o = Object.create({ x: 1, y: 2 });
|
const o = Object.create({ x: 1, y: 2 });
|
||||||
o.z = 3;
|
o.z = 3;
|
||||||
|
|
||||||
let { x, ...{ y, z } } = o;
|
let { x, ...{ y, z } } = o;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user