查看更多精彩前端资源

---

运算符

---

...运算符 （扩展运算符、多值运算符）

多个值可包装成数组，也可解开真伪数组为多个值。

• 用于形参定义 - 可获取剩余参数为数组
  

[JavaScript] 纯文本查看 复制代码

function fn(a, ...s) {
        console.log(s);
}
fn(1, 2, 3, 4, 5, 6);

• 用于函数调用 - 可解开数组依次传递(替代apply)
  

[JavaScript] 纯文本查看 复制代码

let nums = [55, 33, 66, 11];
console.log(Math.min.apply(null, nums)) // 11
console.log(Math.min(...nums)) // 11

• 用于数组定义 - 可合并数组
  

[JavaScript] 纯文本查看 复制代码

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let arr4 = [ ...arr1, ...arr2, ...arr3 ];
console.log(arr4);

• 用于数组解构赋值 - 可用1个变量获取数组剩余值
  

[JavaScript] 纯文本查看 复制代码

let arr = [ 11, 22, 33, 44 ];
let [ a, ...b ] = arr;
console.log(a, b);  // 11, [ 22, 33, 44 ]

函数

---

函数形参的定义

• 设置默认值
  

具有默认值的形参最好定义在后面

[JavaScript] 纯文本查看 复制代码

function fn(a = 10, b = 20) {
        console.log(a + b);
}
fn();
fn(100);
fn(100, 200);

• 参数解构赋值
  

[JavaScript] 纯文本查看 复制代码

function fn({a, b}) {
        console.log(a + b);
}
fn({a: 11, b: 22});

• ...形参语法
  
  

• 把函数剩余的参数存储到数组中
• 该语法定义的形参可以替代arguments
• 只有最后一个形参才能这样写
  

[JavaScript] 纯文本查看 复制代码

function total(...nums) {[/indent]        return nums.reduce(function(prevResult, current) {
                return prevResult + current;
        });
}
total(11, 22, 33, 44);  // 110

箭头函数

• 简述：
  
  
  • 使用=>定义函数。
    
    
• 特点：
  
  
  • this固定指向上级this，不再和调用方式有关
  • 不能作为构造函数使用
  • 不能使用arguments，可使用...语法代替
    
    
• 语法：
  
  
  • 形参 => 代码体
    
    
• 基本用法
  
  

[JavaScript] 纯文本查看 复制代码

let add = (a, b) => {
        return a + b;
};
console.log(add(11, 22));

• 一个形参可省略小括号
  

[JavaScript] 纯文本查看 复制代码

let add = a => {
        return a + 22;
};
console.log(add(11));

• 一句代码可省略大括号，并自动return执行结果
  

[JavaScript] 纯文本查看 复制代码

let add = a => a + 22;
add(11);

• 使用例子
  

[JavaScript] 纯文本查看 复制代码

let arr = [ 1, 2, 3, 4 ];
let newArr = arr.map(v => v * v);
console.log(newArr);

• this固定指向上级this
  

[JavaScript] 纯文本查看 复制代码

function Tab() {
        this.tabBtn = document;
        this.tabBox = document.body;
}
Tab.prototype = {
        on: function() {
                this.tabBtn.onclick = () => {
                        console.log(this);
                        this.tabBox.style.backgroundColor = 'blue';
                };
        }
};
new Tab().on();

• 不能作为构造函数使用
  

[JavaScript] 纯文本查看 复制代码

let Person = (name, age) => {
        this.name = name;
        this.age = age;
};
let p = new Person();

• 不能使用arguments对象
  

[JavaScript] 纯文本查看 复制代码

let fn = () => console.log(arguments);
fn(1, 2, 3);

对象

---

属性方法简洁表示

• 引用变量定义属性方法
  
  

[JavaScript] 纯文本查看 复制代码

let a = 10;
let b = 20;
let fn = function(){};
let obj = { a, b, fn };
console.log(obj);

• 方法定义 （改造闭包缓存例子）
  

[JavaScript] 纯文本查看 复制代码

let obj = {
        fn1: function() {
                console.log('传统写法');
        },
        fn2() {
                console.log('简洁写法');
        }
};
obj.fn1();
obj.fn2();

属性名支持表达式

• 引用变量值
  
  

[JavaScript] 纯文本查看 复制代码

let key = 'name';
let obj = {
        [ key ]: '小美';
};
console.log(obj);

• 表达式计算值
  

[JavaScript] 纯文本查看 复制代码

let key = 'name';
let obj = {
        [ 'my' + key ]: '小美',
};
console.log(obj);