mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-28 21:32:20 +00:00
edit function/desturcturing/array
This commit is contained in:
parent
857944c681
commit
1b0805cb30
@ -4,6 +4,23 @@
|
|||||||
|
|
||||||
`Array.from`方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
|
`Array.from`方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let arrayLike = {
|
||||||
|
'0': 'a',
|
||||||
|
'1': 'b',
|
||||||
|
'2': 'c',
|
||||||
|
length: 3
|
||||||
|
};
|
||||||
|
|
||||||
|
// ES5的写法
|
||||||
|
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
|
||||||
|
|
||||||
|
// ES6的写法
|
||||||
|
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
|
||||||
|
```
|
||||||
|
|
||||||
|
下面是更多的例子。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
Array.from('hello')
|
Array.from('hello')
|
||||||
// ['h', 'e', 'l', 'l', 'o']
|
// ['h', 'e', 'l', 'l', 'o']
|
||||||
@ -46,13 +63,15 @@ function foo() {
|
|||||||
|
|
||||||
扩展运算符背后调用的是遍历器接口(`Symbol.iterator`),如果一个对象没有部署这个接口,就无法转换。`Array.from`方法就不存在这个问题,比如下面的这个例子,扩展运算符就无法转换。
|
扩展运算符背后调用的是遍历器接口(`Symbol.iterator`),如果一个对象没有部署这个接口,就无法转换。`Array.from`方法就不存在这个问题,比如下面的这个例子,扩展运算符就无法转换。
|
||||||
|
|
||||||
任何有`length`属性的对象,都可以通过`Array.from`方法转为数组。
|
所谓类似数组的对象,本质特征只有一点,即必须有`length`属性。因此,任何有`length`属性的对象,都可以通过`Array.from`方法转为数组。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });
|
Array.from({ length: 3 });
|
||||||
// [ "a", "b" , "c" ]
|
// [ undefined, undefined, undefinded ]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
上面代码中,`Array.from`返回了一个具有三个成员的数组,每个位置的值都是`undefined`。
|
||||||
|
|
||||||
对于还没有部署该方法的浏览器,可以用`Array.prototype.slice`方法替代。
|
对于还没有部署该方法的浏览器,可以用`Array.prototype.slice`方法替代。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
@ -429,7 +429,14 @@ function add([x, y]){
|
|||||||
add([1, 2]) // 3
|
add([1, 2]) // 3
|
||||||
```
|
```
|
||||||
|
|
||||||
上面代码中,函数add的参数实际上不是一个数组,而是通过解构得到的变量`x`和`y`。
|
上面代码中,函数`add`的参数实际上不是一个数组,而是通过解构得到的变量`x`和`y`。
|
||||||
|
|
||||||
|
下面是另一个例子。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
[[1, 2], [3, 4]].map(([a, b]) => a + b)
|
||||||
|
// [ 3, 7 ]
|
||||||
|
```
|
||||||
|
|
||||||
函数参数的解构也可以使用默认值。
|
函数参数的解构也可以使用默认值。
|
||||||
|
|
||||||
@ -446,7 +453,7 @@ move(); // [0, 0]
|
|||||||
|
|
||||||
上面代码中,函数`move`的参数是一个对象,通过对这个对象进行解构,得到变量`x`和`y`的值。如果解构失败,`x`和`y`等于默认值。
|
上面代码中,函数`move`的参数是一个对象,通过对这个对象进行解构,得到变量`x`和`y`的值。如果解构失败,`x`和`y`等于默认值。
|
||||||
|
|
||||||
注意,指定函数参数的默认值时,不能采用下面的写法。
|
注意,下面的写法会得到不一样的结果。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
function move({x, y} = { x: 0, y: 0 }) {
|
function move({x, y} = { x: 0, y: 0 }) {
|
||||||
@ -459,7 +466,14 @@ move({}); // [undefined, undefined]
|
|||||||
move(); // [0, 0]
|
move(); // [0, 0]
|
||||||
```
|
```
|
||||||
|
|
||||||
上面代码是为函数move的参数指定默认值,而不是为变量x和y指定默认值,所以会得到与前一种写法不同的结果。
|
上面代码是为函数`move`的参数指定默认值,而不是为变量`x`和`y`指定默认值,所以会得到与前一种写法不同的结果。
|
||||||
|
|
||||||
|
`undefined`就会触发函数参数的默认值。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
[1, undefined, 3].map((x = 'yes') => x)
|
||||||
|
// [ 1, 'yes', 3 ]
|
||||||
|
```
|
||||||
|
|
||||||
## 圆括号问题
|
## 圆括号问题
|
||||||
|
|
||||||
|
171
docs/function.md
171
docs/function.md
@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
## 函数参数的默认值
|
## 函数参数的默认值
|
||||||
|
|
||||||
|
### 基本用法
|
||||||
|
|
||||||
在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。
|
在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -52,10 +54,37 @@ function Point(x = 0, y = 0) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
var p = new Point();
|
var p = new Point();
|
||||||
// p = { x:0, y:0 }
|
p // { x: 0, y: 0 }
|
||||||
```
|
```
|
||||||
|
|
||||||
除了简洁,ES6的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本彻底拿到这个参数,也不会导致以前的代码无法运行。
|
除了简洁,ES6的写法还有两个好处:首先,阅读代码的人,可以立刻意识到哪些参数是可以省略的,不用查看函数体或文档;其次,有利于将来的代码优化,即使未来的版本彻底拿掉这个参数,也不会导致以前的代码无法运行。
|
||||||
|
|
||||||
|
参数默认值可以与解构赋值,联合起来使用。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
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`函数的参数是一个对象,变量`x`和`y`用于解构赋值,`y`有默认值5。
|
||||||
|
|
||||||
|
另外,参数变量是默认声明的,所以不能用let或const再次声明。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function foo(x = 5) {
|
||||||
|
let x = 1; // error
|
||||||
|
const x = 2; // error
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码中,参数变量`x`是默认声明的,在函数体中,不能用let或const再次声明,否则会报错。
|
||||||
|
|
||||||
|
### 双重默认值
|
||||||
|
|
||||||
默认值的写法非常灵活,下面是一个为对象属性设置默认值的例子。
|
默认值的写法非常灵活,下面是一个为对象属性设置默认值的例子。
|
||||||
|
|
||||||
@ -86,7 +115,7 @@ fetch('http://example.com')
|
|||||||
|
|
||||||
上面代码中,调用函数`fetch`时,第二个参数默认为一个空对象,而只要有第二个参数,`method`参数就默认为`GET`。
|
上面代码中,调用函数`fetch`时,第二个参数默认为一个空对象,而只要有第二个参数,`method`参数就默认为`GET`。
|
||||||
|
|
||||||
请问下面两种写法有什么差别?
|
再请问下面两种写法有什么差别?
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// 写法一
|
// 写法一
|
||||||
@ -123,7 +152,9 @@ m1({z: 3}) // [0, 0]
|
|||||||
m2({z: 3}) // [undefined, undefined]
|
m2({z: 3}) // [undefined, undefined]
|
||||||
```
|
```
|
||||||
|
|
||||||
通常情况下,定义了默认值的参数,都是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。但是,非尾部的参数,也是可以设置默认值的。
|
### 参数默认值的位置
|
||||||
|
|
||||||
|
通常情况下,定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来,到底省略了哪些参数。如果非尾部的参数设置默认值,实际上这个参数是没法省略的。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// 例一
|
// 例一
|
||||||
@ -149,7 +180,7 @@ f(1, undefined, 2) // [1, 5, 2]
|
|||||||
|
|
||||||
上面代码中,有默认值的参数都不是尾参数。这时,无法只省略该参数,而不省略它后面的参数,除非显式输入`undefined`。
|
上面代码中,有默认值的参数都不是尾参数。这时,无法只省略该参数,而不省略它后面的参数,除非显式输入`undefined`。
|
||||||
|
|
||||||
如果传入`undefined`,将触发该参数等于默认值,null则没有这个效果。
|
如果传入`undefined`,将触发该参数等于默认值,`null`则没有这个效果。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
function foo(x = 5, y = 6){
|
function foo(x = 5, y = 6){
|
||||||
@ -162,6 +193,8 @@ foo(undefined, null)
|
|||||||
|
|
||||||
上面代码中,`x`参数对应`undefined`,结果触发了默认值,`y`参数等于`null`,就没有触发默认值。
|
上面代码中,`x`参数对应`undefined`,结果触发了默认值,`y`参数等于`null`,就没有触发默认值。
|
||||||
|
|
||||||
|
### 函数的length属性
|
||||||
|
|
||||||
指定了默认值以后,函数的`length`属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,`length`属性将失真。
|
指定了默认值以后,函数的`length`属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,`length`属性将失真。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -172,6 +205,88 @@ foo(undefined, null)
|
|||||||
|
|
||||||
上面代码中,`length`属性的返回值,等于函数的参数个数减去指定了默认值的参数个数。
|
上面代码中,`length`属性的返回值,等于函数的参数个数减去指定了默认值的参数个数。
|
||||||
|
|
||||||
|
### 作用域
|
||||||
|
|
||||||
|
一个需要注意的地方是,如果参数默认值是一个变量,则该变量所处的作用域,与其他变量的作用域规则是一样的,即先是当前函数的作用域,然后才是全局作用域。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var x = 1;
|
||||||
|
|
||||||
|
function f(x, y = x) {
|
||||||
|
console.log(y);
|
||||||
|
}
|
||||||
|
|
||||||
|
f(2) // 2
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码中,参数`y`的默认值等于`x`。调用时,由于函数作用域内部的变量`x`已经生成,所以`y`等于参数`x`,而不是全局变量`x`。
|
||||||
|
|
||||||
|
如果调用时,函数作用域内部的变量`x`没有生成,结果就会不一样。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let x = 1;
|
||||||
|
|
||||||
|
function f(y = x) {
|
||||||
|
let x = 2;
|
||||||
|
console.log(y);
|
||||||
|
}
|
||||||
|
|
||||||
|
f() // 1
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码中,函数调用时,`y`的默认值变量`x`尚未在函数内部生成,所以`x`指向全局变量,结果又不一样。
|
||||||
|
|
||||||
|
如果此时,全局变量`x`不存在,就会报错。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function f(y = x) {
|
||||||
|
let x = 2;
|
||||||
|
console.log(y);
|
||||||
|
}
|
||||||
|
|
||||||
|
f() // ReferenceError: x is not defined
|
||||||
|
```
|
||||||
|
|
||||||
|
如果函数`A`的参数默认值是函数`B`,由于函数的作用域是其声明时所在的作用域,那么函数`B`的作用域不是函数`A`,而是全局作用域。请看下面的例子。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let foo = 'outer';
|
||||||
|
|
||||||
|
function bar(func = x => foo) {
|
||||||
|
let foo = 'inner';
|
||||||
|
console.log(func()); // outer
|
||||||
|
}
|
||||||
|
|
||||||
|
bar();
|
||||||
|
```
|
||||||
|
|
||||||
|
上面代码中,函数`bar`的参数`func`,默认是一个匿名函数,返回值为变量`foo`。这个匿名函数的作用域就不是`bar`。这个匿名函数声明时,是处在外层作用域,所以内部的`foo`指向函数体外的声明,输出`outer`。它实际上等同于下面的代码。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let foo = 'outer';
|
||||||
|
let f = x => foo;
|
||||||
|
|
||||||
|
function bar(func = f) {
|
||||||
|
let foo = 'inner';
|
||||||
|
console.log(func()); // outer
|
||||||
|
}
|
||||||
|
|
||||||
|
bar();
|
||||||
|
```
|
||||||
|
|
||||||
|
如果写成下面这样,就会报错。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function bar(func = () => foo) {
|
||||||
|
let foo = 'inner';
|
||||||
|
console.log(func());
|
||||||
|
}
|
||||||
|
|
||||||
|
bar() // ReferenceError: foo is not defined
|
||||||
|
```
|
||||||
|
|
||||||
|
### 应用
|
||||||
|
|
||||||
利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
|
利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@ -191,45 +306,6 @@ foo()
|
|||||||
|
|
||||||
从上面代码还可以看到,参数`mustBeProvided`的默认值等于`throwIfMissing`函数的运行结果(即函数名之后有一对圆括号),这表明参数的默认值不是在定义时执行,而是在运行时执行(即如果参数已经赋值,默认值中的函数就不会运行),这与python语言不一样。
|
从上面代码还可以看到,参数`mustBeProvided`的默认值等于`throwIfMissing`函数的运行结果(即函数名之后有一对圆括号),这表明参数的默认值不是在定义时执行,而是在运行时执行(即如果参数已经赋值,默认值中的函数就不会运行),这与python语言不一样。
|
||||||
|
|
||||||
另一个需要注意的地方是,参数默认值所处的作用域,不是全局作用域,而是函数作用域。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
var x = 1;
|
|
||||||
|
|
||||||
function foo(x, y = x) {
|
|
||||||
console.log(y);
|
|
||||||
}
|
|
||||||
|
|
||||||
foo(2) // 2
|
|
||||||
```
|
|
||||||
|
|
||||||
上面代码中,参数y的默认值等于x,由于处在函数作用域,所以y等于参数x,而不是全局变量x。
|
|
||||||
|
|
||||||
参数变量是默认声明的,所以不能用let或const再次声明。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
function foo(x = 5) {
|
|
||||||
let x = 1; // error
|
|
||||||
const x = 2; // error
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
上面代码中,参数变量x是默认声明的,在函数体中,不能用let或const再次声明,否则会报错。
|
|
||||||
|
|
||||||
参数默认值可以与解构赋值,联合起来使用。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
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函数的参数是一个对象,变量x和y用于解构赋值,y有默认值5。
|
|
||||||
|
|
||||||
## rest参数
|
## rest参数
|
||||||
|
|
||||||
ES6引入rest参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
|
ES6引入rest参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
|
||||||
@ -544,6 +620,13 @@ var go = function*(){
|
|||||||
|
|
||||||
上面代码中,变量`go`是一个Generator函数,执行后返回的是一个遍历器对象,对这个遍历器对象执行扩展运算符,就会将内部遍历得到的值,转为一个数组。
|
上面代码中,变量`go`是一个Generator函数,执行后返回的是一个遍历器对象,对这个遍历器对象执行扩展运算符,就会将内部遍历得到的值,转为一个数组。
|
||||||
|
|
||||||
|
如果对没有`iterator`接口的对象,使用扩展运算符,将会报错。
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var obj = {a: 1, b: 2};
|
||||||
|
let arr = [...obj]; // TypeError: Cannot spread non-iterable object
|
||||||
|
```
|
||||||
|
|
||||||
## name属性
|
## name属性
|
||||||
|
|
||||||
函数的`name`属性,返回该函数的函数名。
|
函数的`name`属性,返回该函数的函数名。
|
||||||
|
27
docs/let.md
27
docs/let.md
@ -127,33 +127,6 @@ function bar(x = 2, y = x) {
|
|||||||
bar(); // [2, 2]
|
bar(); // [2, 2]
|
||||||
```
|
```
|
||||||
|
|
||||||
需要注意的是,函数的作用域是其声明时所在的作用域。如果函数`A`的参数是函数`B`,那么函数`B`的作用域不是函数`A`。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
let foo = 'outer';
|
|
||||||
|
|
||||||
function bar(func = x => foo) {
|
|
||||||
let foo = 'inner';
|
|
||||||
console.log(func()); // outer
|
|
||||||
}
|
|
||||||
|
|
||||||
bar();
|
|
||||||
```
|
|
||||||
|
|
||||||
上面代码中,函数`bar`的参数`func`,默认是一个匿名函数,返回值为变量`foo`。这个匿名函数的作用域就不是`bar`。这个匿名函数声明时,是处在外层作用域,所以内部的`foo`指向函数体外的声明,输出`outer`。它实际上等同于下面的代码。
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
let foo = 'outer';
|
|
||||||
let f = x => foo;
|
|
||||||
|
|
||||||
function bar(func = f) {
|
|
||||||
let foo = 'inner';
|
|
||||||
console.log(func()); // outer
|
|
||||||
}
|
|
||||||
|
|
||||||
bar();
|
|
||||||
```
|
|
||||||
|
|
||||||
ES6规定暂时性死区和不存在变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在ES5是很常见的,现在有了这种规定,避免此类错误就很容易了。
|
ES6规定暂时性死区和不存在变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在ES5是很常见的,现在有了这种规定,避免此类错误就很容易了。
|
||||||
|
|
||||||
总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
|
总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。
|
||||||
|
Loading…
x
Reference in New Issue
Block a user