| JavaScript, ES6

ES6总结（二）

1. 参数处理

  1. 参数默认值：
    a. 基本使用方法；
    b. 在默认值中使用其他变量。
    如：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 例1
    function fn(a=1,b=2,c=3){ // 这样写是为了提高可读性
    	console.log(a,b,c);
    }
    fn(); // 1 2 3
    // 例2
    function fn(a=1,b=2,c=3){
    	console.log(a,b,c);
    }
    fn(10); // 10 2 3
  2. 惰性求值
    为什么会有惰性求值，其原因就是因为提高它的性能。
    如：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function value(){
    	return 20;
    }
    // 惰性求值，为了提高其性能
    function fn(a=value(),b=2,c=3){
    	console.log(a,b,c);
    }
    // 注意：当fn里面有值了，a=value()中的value就不会去执行了
    fn(10); // 10 2 3
  3. 在默认值中使用其他变量
    如：
    1
    2
    3
    4
    function fn(a=1,b=a){
    	console.log(a,b);
    }
    fn(); // 1 1
    在上面代码中我们需要注意括号中的值是从左到右执行的，下面我再来给大家举一个例子：
    1
    2
    3
    4
    function fn(a=b,b=1){
    	console.log(a,b);
    }
    fn(); // 报错，因为是从左到右执行的，当a=b时，b还没有
    下面还要再给大家举一个易错的例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const c = 3; // 外部
    functiono fn(a=c,b=1){
    	const c = 4; // 内部
    	console.log(a,b);
    }
    fn(); // 3 1
    // 为什么打印出来的a为3？
    // 因为函数参数的作用域是介于外部作用域和函数里面作用域之间的。
    // 它可以访问到外部，但是不能访问到内部。

2. 剩余运算符(…)

  1. 剩余运算符(…)的作用
    把散列的元素变成一个集合。
  2. 剩余运算符(…)的场景
    在函数或者解构中使用
    如在函数中使用：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 例1
    function add(...arr){
    	console.log(arr);
    }
    add(1,2,3); // [1,2,3]
    // 例2
    function add(a,...arr){
    	console.log(a,arr);
    }
    add(1,2,3); // 1 [2,3]
    如在解构中使用：
    1
    2
    3
    4
    5
    6
    // 例1
    let [a,...b] = [1,2,3];
    console.log(a,b); // 1 [2,3]
    // 例2
    let {a,b,...c} = {a: 1,b: 2,c: 3,d: 4};
    console.log(a,b,c); // 1 2 {c: 3,d: 4}

3. 扩展运算符(…)

  1. 扩展运算符(…)的作用
    把一个集合变成散元素。
  2. 扩展运算符(…)的场景
    函数参数传递，数组和对象的复制。
    如在函数参数传递中使用：
    1
    2
    3
    4
    function fn(a,b,c){
    	console.log(a,b,c);
    }
    fn(...[1,2,3]); // 1 2 3
    如数组的复制：

注意：复制的数组改变，不会影响到原来的数组。

1
2
3
4
5
6
7
8
9
// 例1
let arr = [1,2,3];
let arr2 = [...arr];
// 注意：它是一个浅拷贝
console.log(arr2); // [1,2,3]
// 例2
let arr = [1,2,3];
let arr1 = [...arr,4,5,6];
console.log(arr1); // [1,2,3,4,5,6]

如对象的复制：

1
2
3
let obj = {a: 1,b: 2,c: 3};
let obj2 = {...obj};
console.log(obj2); // {a: 1,b: 2,c: 3}

对于剩余运算符和扩展运算符的一个简单总结：
扩展运算符：…[1,2,3] —> 1,2,3
剩余运算符：…1,2,3 —> [1,2,3]

4. 模拟命名参数

使用对象的解构赋值来模拟命名参数。
如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 例1
function fn({start,end}){
	console.log(start,end);
}
fn({start: 1,end: 2}); // 1 2，相当于{start,end} = {start: 1,end: 2}
// 例2
function fn({start=1,end=2}){
	console.log(start,end);
}
fn({}); // 1 2
// 上面代码等价于下面几行代码
// function fn({start=1,end=2} = {}){
//     console.log(start,end);
// }
// fn(); 1 2
// 例3
function fn({start=1,end=2}){
	console.log(start,end);
}
fn(); // 报错，因为它相当于{start=1,end=2} = undefined，此时左边模式与右边模式不匹配

5. 数字操作

新的Number方法：
以前方法的移植；合理误差范围；判断是否为整型；安全整数的相应方法。
如：
a. Number.isNaN(1);
b. Number.isFinite(‘123’);
c. Number.parseFloat();
d. Number.parseInt();

6. 模块化

一说到模块化，不得不说的就是箭头函数，它是一个语义化的函数。

  1. 基本语法：()=>{}
    如：
    1
    2
    3
    4
    var foo1 = (a,b)=>{
    	console.log(a,b);
    }
    foo1(1,2); // 3

使用箭头函数需要注意：
a. 如果参数只有一个的话，我们的小括号可以省略；
b. 如果参数只有0个或者2个及2个以上的话，我们的小括号必须有；
c. 如果大括号里面只有1条语句的时候，大括号可以省略，大括号被省略时，如果这1条语句中有return的话，return也必须省略；
d. 如果大括号里面的语句两条及以上的时候，不可以省略大括号。

  1. 下面给大家分享一个易错的知识点，先看如下代码：
    1
    2
    3
    4
    5
    6
    // 注意最外层的()括号是必须加的，否则它就只是一个代码块，从而就不会返回对象了。
    var sum = ()=>({name: 'a'});
    // 上面这句代码等价于下面这几行代码
    // function sum(){
    //     return {name: 'a'};
    // }
  2. 箭头函数和函数的区别和注意事项
    a. this指向问题：在箭头函数中是没有this指向的，this是借助父级作用域中的this指向，你通过call等方法改变它的this指向都是不好使的。
    b. 不能使用arguments。
    c. 不能当做构造函数。