JavaScript进阶-ES6

四、JavaScript进阶-ES6

4.1 ES6 的新增语法

let关键字

let声明的变量只在所处于的块级有效
使用let关键字声明的变量才具有块级作用域特性
使用var关键字声明的变量不具备块级作用域特性
不存在变量提升
暂时性死区

var和let在for循环内的区别：

var arr = [];
for (var i = 0; i < 2; i++) {
　　arr[i] = function () {
　　　　console.log(i); 
　　}
}
/** 变量i是全局的，函数执行时输出的都是全局作用域下的i值 */
arr[0](); // 2
arr[1](); // 2

let arr = [];
for (let i = 0; i < 2; i++) {
　　arr[i] = function () {
　　　　console.log(i); 
　　}
}
/** 每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值 */
arr[0](); // 1
arr[1](); // 2

const关键字

声明常量，常量就是值（内存地址）不能变化的量
具有块级作用域
声明常量时必须赋值
常量赋值后，值不能修改；但是对于复杂数据类型，不能对其整体重新赋值，其内部的值可以单独修改

let\const\var的区别

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可更改	值可更改	值不可更改

解构赋值

数组解构

let [a, b, c, d] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // 如果解构不成功，变量的值为undefined

对象解构

/** 对象解构：使用变量的名字与对象的属性名匹配，将对象属性的值赋值给对应变量 */
let person = { name: 'zhangsan', age: 20 }; 
let { name, age } = person;
console.log(name); // 'zhangsan' 
console.log(age); // 20
let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan' 
console.log(myAge); // 20

箭头函数

箭头函数语法

// 箭头函数是用来简化函数定义语法的
const fn = () => {
    console.log(123)
}
fn();

// 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
const sum = (n1, n2) => n1 + n2;
const result = sum(10, 20);
console.log(result)

// 如果形参只有一个，可以省略小括号
const fn2 = v => {
    alert(v);
}
fn2(20)

// 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this
const obj = {name: 'zhangsan'};
function fn() {
    console.log(this); // obj
    return () => {
        console.log(this) // obj
    }
}
const resFn = fn.call(obj);
resFn();

箭头函数面试题

var age = 100;
let obj = {
    th: this, // window
    age: 20,
    say: () => {
        alert(this.age) // 100
    }
}
obj.say();


var name = "The Window"
let object = {
    name: "My Object",
    getNameFunc: function() {
        alert(this.name) // My Object
    }
}
object.getNameFunc()

剩余参数

将一个不定数量的参数表示为一个数组

const sum = (...args) => {
   let total = 0;
   args.forEach(item => total += item);
   return total;
};
console.log(sum(10, 20));
console.log(sum(10, 20, 30));

let ary1 = ['张三' , '李四', '王五'];
let [s1, ...s2] = ary1;
console.log(s1) // 张三
console.log(s2) // ['李四', '王五']

4.2 Set数据结构

ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成 Set 数据结构
　　const s = new Set();
Set函数可以接受一个数组作为参数，用来初始化
　　const s = new Set([“a”,“a”,“b”,“b”]);

const s = new Set();
s.add(1).add(2).add(3); /** 向 set 结构中添加值，返回 Set 结构本身 */
s.delete(2)             /** 删除 set 结构中的2值，返回一个布尔值，表示删除是否成功 */ 
s.has(1)                /** 表示 set 结构中是否有1这个值 返回布尔值 */ 
s.clear()               /** 清除所有成员，没有返回值 */

/** Set函数可以接受一个数组作为参数，用来初始化 */
const s = new Set(["a","a","b","b"]); 
console.log(s.size) // 2
console.log([...s]) // ['a', 'b']

/** 向 set 结构中添加值，返回 Set 结构本身 */
s.add(1).add(2) 
console.log([...s]) // ['a', 'b', 1, 2]

/** 删除 set 结构中的2值，返回一个布尔值，表示删除是否成功 */ 
const r1 = s.delete('a'); 
console.log(r1); // true
console.log([...s]) // ['b', 1, 2]

/** 表示 set 结构中是否有1这个值 返回布尔值 */
const r2 = s.has('b'); 
console.log(r2) // true

/** 遍历set数据结构中的值 */
s2.forEach(value => {
    console.log(value)
})

/** 清除所有成员，没有返回值 */
s.clear(); 
console.log([...s]); // []

4.3 模块化

分别暴露

统一暴露

默认暴露

引入模块内容