荐 ES6 入门介绍及使用

ES6介绍

ES6 （ECMAScript） 第六版
ECMAScript 是Javascript的一套标准化设置

ES6的内容包括：
1.声明变量的方法（let和const）
2.变量的结解构赋值
3.扩展运算符
4.数据劫持 箭头函数
5.Set Map
6.数组 对象 数值的扩展
7.Promise对象
8.Generator函数

let和const

let和const命令是ES6新增的语法
作用：是用来声明变量 和var的作用一样

let和const的用法注意点几乎一样 只是let在同一作用域内 可以重新赋值 但是不能重复声明
const声明的是常量 声明过后就不能再重新声明或者重新赋值

let声明的变量 只是在let所在的作用域内起作用（变量绑定）

 var a = 123;
	if (true) {
	     a = 456;
	     console.log(a);
	    // 在下面进行let声明
	     let a;	//------------------------->报错
     }

let和const中存在的问题

(1) 作用域的问题
通常情况下 如果需要一个变量在一个规定的作用域内起作用 那么就需要使用function关键字来搭建一个局部作用域

	(function(){
       var a=1;
    }());

     console.log(a);

但是在ES6的情况下 引入了let 只要存在{} 就可以形成一个块级作用域 不管是if结构 还是for循环结构 只要有{} 存在，即形成了块级作用域

	{
        let s=8;
     }
     console.log(s);

(2) var 声明变量 变量提升的问题
需求：在函数调用时 实时的打印出当前的时间

在if结构里面使用var声明 {}没办法形成块级作用域 那么if结构里面的变量声明就会覆盖掉全局的变量声明
所以打印出来的undefined;

解决办法：在if结构里面使用let声明变量 使其在if结构里面形成一个块级作用域

	var time = new Date();

    function fn() {
        console.log(time);

        if (false) {
            // var time="明天是父亲节";
            let time = "明天是父亲";
        }
    }
   fn();

(3) for循环中 循环变量泄露为全局变量的问题

	 for(var i=0;i<5;i++){
         setTimeout(function(){
            console.log(i);
         },1000);

         console.log(111);
     }
     console.log(123);
     console.log(i);

js语言的一大特性：单线程 同一时间内只做一件事
任务队列：所有的任务都需要排队 前面的执行完 才会执行后面的任务
事件循环：主线程会不断循环的去任务队列里面读取任务（Event Loop）当遇到异步任务完成 或者某个事件被触发
那么相应的回调函数 或者 函数体 就会被拉到主线程里面去执行

for (let i = 0; i < 5; i++) {
        setTimeout(function () {
            console.log(i);
        }, 1000);
        console.log(111);
    }
    console.log(123);
    console.log(i);

解构

在ES6中 按照一定的模式 从数组中提取数值 对对应的变量进行赋值的操作 就叫做解构赋值
本质上讲 解构赋值 就是模式匹配

var[a,b,c]=[1,2,3];
console.log(a,b,c); //1 2 3

特点：
1.如果想要解构赋值成功 那么就必须保证两边的模式完全一样

var[a,b,c]=[1,[2],{name:"lucy"}];
console.log(a,b,c); //1 Array(1) 0: 2   Object {name:"lucy"}

2.如果解构不成功 那么变量的值就等于undefined

left[r]=[];
console.log(r); //undefined 这个就像var 声明了变量之后 不进行赋值

left[s,t]=[3];
console.log(s,t) //3,undefined 这个也是属于解构不成功 因为数值不够

3.不完全解构的情况下 也可以进行解构赋值 只是后面放数值的数组都有多的数字
不完全解构 ：指的是等号左右两边模式一样 但是只匹配到右边的一部分数据

let[x,y]=[1,2,3];
console.log(x,y); //1 2

4.如果等号右边不是数组 那么就会报错 因为模式一样

注意点
1.解构赋值允许设置默认值 但是如果要启用默认值 那么这个变量的值就必须严格等于undefined

let[a,b]=[1,2];
let[a,b="abc"]=[1,2];
console.log(a,b); //1 2

let[a,b="abc"]=[1];
console.log(a,b); //1  "abc"

let[a,b="abc"]=[1,null];
console.log(a,b); //1 "null"

2.如果设置的默认是一个表达式 那么这个表达式只是在需要启用默认值的时候才会运算

 function fn(){
        console.log(123);
        // return 123
    }

    let[s=fn()]=[12];
    console.log(s); //12

let[s=fn()]=[];
console.log(s); //undefined 这里的undefined 不是[]里面的undefined 而是fn调用之后的返回值undefined

3.默认值可以使用其他变量 但是前提是赋值的这个变量必须是提前声明过的

let d=3;
let[x=d]=[];
console.log(x); //3

let[x=2,y=x]=[];
console.log(x,y); //2 2


// let[x=y,y=2]=[];
// console.log(x,y); //报错


let[x=2,y=x]=[8];
console.log(x,y); //8 8

扩展运算符

扩展运算符 (…)

传统的数组遍历

var arr=[100,200,300];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

用扩展运算符来完成数组的赋值

var arr=[100,200,300];
var arr2 = [...arr];
console.log(arr2);// 100 200 300

与直接赋值的区别：
直接赋值 修改了原数组的值 arr1里面的值也会发生改变 因为他们指向同一块内存空间

var arr=[100,200,300];
var arr1=arr;
arr[1]=20;
console.log(arr1);
console.log([...arr]);

使用扩展运算符 就是一个一个加到新数组里面去 所以即使原数组元素发生变化 也不会影响新数组

var arr2=[...arr];
arr[0]=10;
console.log(arr2);

扩展运算符的作用

1. 数组合并 这里不管是concat方法 还是扩展运算符 都是浅拷贝
   如果修改了原数组的指向 就会同步反应到新数组 就是浅拷贝

var arr1=[1,2,3];
var arr2=[10,20,30];
arr1[2]=33;
var arrCon=arr1.concat(arr2);

 console.log(arrCon)

var arrSp=[...arr1,...arr2];
console.log(arrSp);

//这里就证明了合并后的数组和合并前的数组指向同一片内存空间 所以证明了都是浅拷贝
console.log(arrSp[0]===arr1[0]); //true
console.log(arrCon[0]===arr1[0]); //true

2. 数组的拷贝

var arr=[1,[3,[12,15,[15,18]]],{name:"lili"}];
var arrSp=[...arr];
console.log(arrSp)

3. 与解构赋值相结合

(1). 与解构赋值相结合 给变量和数组赋值

如果是普通变量 那么就按照模式赋值 如果使用了扩展运算符 那么就是后面的值依次放入数组

var [s,...t]=[1,2,3,4,5];
console.log(s,t);  //1 [2,3,4,5]

如果等号右边是空数组 那么仅仅是声明 变量就是undefined 数组就是[]

var [s,...t]=[] 
console.log(s,t); //undefined []

(2). 如果将扩展运算符用于数组赋值 只能放在参数的最后一位 否则就会报错

let[a,...b,c]=[1,2,3,2,9];
let[...b,a,c]=[1,2,3,2,9];
console.log(a,b,c) //Rest element must be last element

4. 扩展运算符可以将字符串转成真正的数组

 	console.log([..."hello"]);
    var str="hello";
    console.log(str.split(""));

5. 只有函数调用时 扩展运算符才可以放在圆括号里面 否则这种写法就直接报错

var arr1=[12,45,25];

console.log([...arr1]); //12 45 25

console.log(...arr1); //12 45 25

console.log((...arr1)); //报错

本文地址：https://blog.csdn.net/weixin_45060872/article/details/107321447