ES6基础语法（let、const、解构赋值、模板字符串、简化对象、箭头函数、扩展运算符）（一）

系列文章目录

第二章：ES6深入（Symbol、类、迭代器、Set、Map）（二）
第三章：ES6深入（生成器、Promise、async/await）（三）
第四章：ES6+新增API拓展（对象API拓展、数组API拓展、字符串&函数API拓展、数值API拓展）（四）

---

---

一、let 关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：
1) 不允许重复声明

let star = 'lzx';
let star = 'hh';
//报错

2) 块儿级作用域

{
     let girl = 'hhh';
} 
console.log(girl);//报错

3) 不存在变量提升

console.log(song);//报错
let song = 'hhh';

4) 不影响作用域链

   {
            let school = '你猜';
            function fn(){
                console.log(school);
            }
            fn();
        }

应用场景： 以后声明变量使用 let 就对了

二、const 关键字

const 关键字用来声明常量，const 声明有以下特点
1) 声明必须赋初始值

 const SCHOOL = '你猜';
// const A;

2) 标识符一般为大写

const A = 100;

3) 不允许重复声明

const SCHOOL = '你猜';
const SCHOOL = 'ATGUIGU';

4) 值不允许修改

const TEAM = ['UZI', 'MXLG', 'Ming', 'Letme'];
TEAM.push('Meiko');
console.log(TEAM)//[ 'UZI', 'MXLG', 'Ming', 'Letme', 'Meiko' ]

const T = 123;
T = 13
console.log(T) //报错

5) 块级作用域

 {
     const PLAYER = 'UZI';
 }
 console.log(PLAYER);

注意: 对象属性修改和数组元素变化不会出发 const 错误
应用场景: 声明对象类型使用 const，非对象类型声明选择 let

三、解构

1）数组解构

// 1.完全解构
let [a, b, c, d, e] = [1, 2, 3, [4, 5], 6];
console.log(a, b, c, d, e)//1 2 3 [4,5] 6

// 2.不完全解构
let [a, b, c, [d], e] = [1, 2, 3, [4, 5, 6], 7];
console.log(a, b, c, d, e)//1 2 3 4 7

// 3.默认值解构
// 默认值生效条件，右侧匹配严格模式为undefined
let [a = 1, b = 2, c = 3] = [4];
console.log(a, b, c);// 4 2 3

// 默认值也可以是一个函数
let test = () => {
    console.log("我是箭头函数");
    return 1;
}

let [x = test()] = [1]
console.log(test());1

// 4.集合解构 拓展运算符
let [e, ...f] = [1, 2, 3, 4];
console.log(e, f)//1 [2,3,4]

// 5.拓展运算符
let [...arr] = [1, 2, 3, 4, 5];
console.log(arr)//[1, 2, 3, 4, 5]

2）对象解构

// 1.对象解构 属性名必须和变量名一致才可以取到正确的值
let { name, age } = { name: 'zs', age: 19, }
console.log(name, age);//zs 19

// 2.属性名和变量名不一致 给属性名重命名
let { name: a, age: b } = { name: 'ls', age: 18 }
console.log(a, b);//ls 18

// 3.嵌套解构
let obj = { p: ['hello', { y: 'world' }] }

let { p: [a, { y: b }] } = obj
console.log(a, b);//hello world

// 4.默认值解构
let { x: y = 8 } = {}
console.log(y)//8

// 5.面试题
const [a, b, c, ...d] = [1, 2, 3, 11, 999];
const { e, f, f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
console.log(a, b, c, d, e, f1, g, h);//1 2 3 [ 11, 999 ] undefined 4 undefined 5 { i: 6, j: 7 }

3）字符串解构

// 1.指定字符解构
let [a, b, c, d, e] = 'hello';
console.log(a)//h

// 2.使用拓展运算符 解构
let [...arr] = 'world'
console.log(arr)//[ 'w', 'o', 'r', 'l', 'd' ]

// 3.对象解构字符串
let { toString, valueOf, length } = 'hello' //相当于把‘hello’当成String基本包装器类型
console.log(toString, valueOf, length)//[Function: toString] [Function: valueOf] 5

四、模板字符串

ES6 引入新的声明字符串的方式 『``』 ‘’ “”
模板字符串（template string）是增强版的字符串，用反引号标识，特点：
1） 声明

let str = `我也是一个字符串哦!`;
console.log(str, typeof str);

2) 字符串中可以出现换行符

		let str = `<ul>
                    <li>沈腾</li>
                    <li>玛丽</li>
                    <li>魏翔</li>
                    <li>艾伦</li>
                    </ul>`;

3) 可以使用 ${xxx} 形式输出变量

let lovest = '魏翔';
let out = `${lovest}是我心目中最搞笑的演员!!`;
console.log(out);

注意： 当遇到字符串与变量拼接的情况使用模板字符串

五、简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

	      let name = 'zs';
        let change = function(){
            console.log('我们可以改变你!!');
        }
        const school = {
            name,
            change,
            improve(){
                console.log("我们可以提高你的技能");
            }
        }
        console.log(school);

注意： 对象简写形式简化了代码，所以以后用简写就对了

六、箭头函数

1.内部this指向声明箭头函数时外部作用域this

let name='xlz';
	let age=12;
	let obj={
		name,
		age,
    	//es5 sayName:function(){}
    	// sayName(){
        //     console.log(this.name) --按照这种形式写this依然指向调用者 xlz
        // },
		// sayName:()=>{
		// 	console.log(this)//{} 111
		// }
		sayName(){
            //this-->obj
			return ()=>{
				console.log(this)//obj
			}
		}
	}
	obj.sayName();
	obj.sayName()();

2. 不能作为构造实例化对象

        let Person = (name, age) => {
            this.name = name;
            this.age = age;
        }
        let me = new Person('xiao', 30);
        console.log(me);

3. 不能使用 arguments 变量,使用rest参数保存实际参数

        let fn = (...b) => {
        	console.log(b);//[1,2,3]
            console.log(arguments);//报错
        }
        fn(1,2,3);

4. 箭头函数的简写

1. 省略小括号, 当形参有且只有一个的时候

  let add = n => {
            return n + n;
        }
        console.log(add(9));

2. 省略花括号, 当代码体只有一条语句的时候, 此时 return 必须省略，而且语句的执行结果就是函数的返回值

 let pow = n => n * n;
 console.log(pow(8));

结果：

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适

箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法

七、拓展运算符

扩展运算符也是三个点（…）它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

let arr = [1, 2, 3, 4];
// 拓展运算符用在左侧是聚合，右侧是展开
let [...a] = arr;

console.log(a); //[1,2,3,4]

let obj = { name: 'zhangsan', age: 12 };

let obj1 = { gender: "female" };

let obj2 = {
    ...obj,
    ...obj1,
    height: '111m'
}

console.log(obj2) //{ name: 'zhangsan', age: 12, gender: 'female', height: '111m' }