10 - ES6 基础语法、解构赋值

一、ES6的基础语法

1. let / const

ES6中新增的用来创建变量和常量的

let a = 12;
a = 13;
console.log(a); // 13
const b = 12;
b = 13; // Uncaught TypeError: Assignment to constant variable. 基于 CONST 创建变量，变量存储的值不能被修改（常量）
console.log(b);

let 和 var 的区别

• let 不存在变量提升（当前作用域中，不能在 let 声明前使用变量）
• 同一个作用域中，let 不允许重复声明
• let解决了 typeof 的一个暂时性死区问题
• 全局作用域中，使用 let 声明的变量并没有给 window 加上对应的属性
• let会存在块作用域（除对象以外的大括号都可被看做块级私有作用域）

2. 箭头函数及THIS问题

ES6中新增了创建函数的方式：“箭头函数” 真实项目中是箭头函数和 FUNCTION 这种普通函数混合使用 箭头函数简化了创建函数的代码

// 箭头函数的创建都是函数表达式方式（变量=函数），这种模式下，不存在变量提升，函数只能在创建完成后被执行（也就是创建的代码之后执行）
const fn = ([形参]) => {
  // 函数体 （return）  
};
fn([实参]);
// 形参只有一个，小括号可以不加
const fn = n => {};
// 函数体中只有一句话，并且是 return xxx 的，可以省略大括号和 return 等
const fn = n => n * 10;
/*
function fn(n){
    return function(m){
        return m+(++n);
    }
}
*/
const fn=n=>m=>m+(++n);

箭头函数中没有 ARGUMENTS，但是可以基于剩余运算符获取实参集合，而且 ES6 中是支持给形参设置默认值的

let obj = {};
let fn = (context = window, ...args) => {
    // console.log(arguments); // Uncaught ReferenceError: arguments is not defined 箭头函数中没有 arguments
    // ...args：剩余运算符（把除第一项外的，其它传递的实参信息都存储到 ARGS 这个数组集合中）
    console.log(args);
};
fn(obj, 10, 20, 30); // context:obj  arg:[10,20,30]
fn(); // context:window  arg:[]

箭头函数中没有自己的 THIS，它里面用到的 THIS，都是自己所处上下文中的 THIS（真实项目中，一但涉及THIS 问题，箭头函数慎用）

window.name = "WINDOW";
let fn = n => {
    console.log(this.name);
};
let obj = {
    name: 'OBJ',
    fn: fn
};
// FN 所处的执行上下文中的 THIS 是 WINDOW
fn(10); // this:window
fn.call(obj, 10); // this:window 不是我们预期的 OBJ
document.body.onclick = fn; // this:window 不是我们预期的 BODY
obj.fn(10); // this:window

let obj = {
    name: 'OBJ',
    fn: function () {
        // this:obj 普通函数是有自己的 THIS 的
        let f = () => {
            console.log(this);
        };
        f(); // this:obj
        return f;
    }
};
let f = obj.fn();
f(); // this:obj

真实项目中的一个应用

let obj = {
    name: 'OBJ',
    fn: function () {
        // this:obj
        // 原本期望的需求是：1S 后把 OBJ 中的 NAME 改为'珠峰'
        setTimeout(() => {
            console.log(this); // OBJ
            this.name = '珠峰';
        }, 1000);
        /* setTimeout(function () {
            console.log(this);// WINODOW
            this.name = '珠峰';
        }, 1000); */
        /* let _this = this; // 把需要的 THIS 提前用变量存储起来
        setTimeout(function () {
            _this.name = '珠峰'; // 需要使用的时候拿出来用即可
        }, 1000); */
    }
};
obj.fn();

二、解构赋值

// 让左侧出现和右侧相同的数据，彼此快速获取到我们需要的内容
// 真实项目中最常用的就是对数组和对象的解构赋值
/*let obj = {
  name: '马宾',
  age: 18,
  title: '宇宙集团军总司令'
};*/
// let name = obj.name;
// let age = obj.age;
// let title = obj.title;
// let { name, age, title } = obj;
// // console.log(name, age, title);
// let ary = ['JS', 'HTML', 'CSS', 'NODEJS', 'MYSQL'];
// let js = ary[0];
// let html = ary[1];
// let [js, html, css, node, mysql] = ary;
// // console.log(js, html, css, node, mysql);
// 解构赋值：利用数据结构，快速对对象和数组进行取值；（ES6 新增的）
// 1. 数组的解构赋值：
let ary = [1, 2, 3, 4];
// 1.1 顺序解构
let [a, b, c, d] = ary; // 等号左边是变量，等号右边是数组，左边的变量要求和你想取的数组中的值位置对应
// console.log(a, b, c, d);
// 1.2 只取数组中的某一个，如取第三个，前面写两个逗号
let [,,e] = ary;
// console.log(e);
// 1.3 进一步解构: 取 ary2中 'a' 'b'
let ary2 = [1, ['a', 'b']];
let [f, [g, h]] = ary2;
// console.log(g, h);
// 1.4 取出第一项和第二项，把剩下的放到一个数组中；
let ary3 = [1, 3, 5, 7, 9];
let [i, j, ...k] = ary3; // k 的后面不能再解构了，再解构就会报错
// console.log(i);
// console.log(j);
// console.log(k);
// 1.5 数组解构时的默认值: 当解构到的值是 undefined 时（解构到的值是 undefined，另一种就是没有解构到值），就会使用默认值
let ary4 = [2, 4, 6, undefined];
let [l, m, n, o = 'hahaha'] = ary4; // 给 o 设置解构的默认值
// console.log(l, m, n, o);
// 用p当q的默认值
let [p, q = p] = [1];
// console.log(p, q);
// let [r = s, s] = [undefined, 3]; 报错：当 r 解构出 undefined 时，要使用s的值做默认值，但是 s 没声明过，就会报错；当解构变量互为默认值时，注意！
// // console.log(r, s);
// 对象的解构赋值
// 通常情况下我们使用对象.属性名 或者 对象['属性名'] 取得该属性名对应的属性值；
// 对象的解构赋值：利用变量名和对象的属性名同名时就可以取得对象该属性的值，和顺序无关。
let obj = {
  name: '马宾',
  age: 18,
  title: '宇宙集团军总司令'
};
let { name, title, age } = obj;
// console.log(name, title, age);
// 1. 只想取一个值，比如取 courses；对象解构赋值，你想取哪个就写哪个。
let zf = {
  name: '珠峰',
  age: 10,
  courses: ['JS', 'UI', 'Architect']
};
let { courses } = zf;
// console.log(courses);
// 2. 进一步解构，解构 t_name 的值；
let zf2 = {
  name: '珠峰',
  age: 10,
  characters: {
    teacher: {
      t_name: 'mabin',
      t_age: 18
    }
  }
};
let {characters: {teacher: {t_name}}} = zf2;
// console.log(t_name);
// 3. 重命名：防止和其他变量命名冲突；
let job = 'FE';
let obj4 = {
  name: '马宾',
  job: 'teacher'
};
let { job: job2 } = obj4; // 从 obj4 中解构 job 属性，并且重命名为 job2
// console.log(job2);
// 4. 对象解构的默认值: 当解构出来的值是 undefined，默认值才会生效
let obj5 = {
  name: '珠峰'
};
let {name: name2, address = '北京昌平'} = obj5;
// console.log(name2);
// console.log(address);
// 解构字符串：字符串的解构依赖位置
let [x, y, z] = 'HELLO';
// console.log(x, y, z);
// 函数的参数解构
/*
// 原来是在函数中对 obj 解构
function reg(obj) {
  let {name, age} = obj;
}
reg({
  name: '珠峰',
  age: 10
});*/
function reg({name = 'zhufeng', age = 10}) {
  // 在函数形参位置解构函数执行时传递进来的实参
  // console.log(name, age);
}
reg({
  name: '珠峰'
});
function getAry([x, y, z]) {
  console.log(x, y, z);
}
getAry(['a', 'b', 'c']);
// 对象的简洁语法：ES6
let config = '110.179.23.123';
let pwd = '@#4ghjkl099';
let obj6 = {
  config: config,
  pwd: pwd
};
// 当对象属性名和变量名同名时，在对象中只写一个变量名就可以了
let obj7 = {
  config, // config: config
  pwd // pwd: pwd
};
console.log(obj6);
console.log(obj7);