黑马程序员技术交流社区

标题: 【广州前端首发】ES6核心课程笔记之语法篇（三） [打印本页]

---

作者: AreYouGlad    时间: 2017-12-19 11:17
标题: 【广州前端首发】ES6核心课程笔记之语法篇（三）

查看更多精彩前端资源

---

运算符

---

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

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

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

[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) {

        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);

---

作者: AreYouGlad    时间: 2017-12-19 11:17

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2