19_20 js es6

ES6

一、let 和 const关键字

1.1 var 和 let const的区别？

1.2 let 和const的区别

1.3 关于块级作用域

二、箭头函数

2.1箭头函数的特点

2.2 箭头函数的特殊性

this的问题

arguments参数集合

2.3函数传递参数时的默认值

2.4 箭头函数使用的场景有哪些

三、解构赋值

3.1解构对象

3.2 解构数组

四、对象扩展

五、模板字符串

六、展开运算符

七、 rest运算符 ...

八、新增的数据类型 symbol类型

九、set 和 map 数据结构

9.1 set

9.2 map

十一、JSON的方法（ES5）

11.1 JSON的两个方法（ES5新增）

11.2 举例说明

十二、es6模块化开发

十三、练习

ES6

之前讲的内容都是es5的内容
es6 （ECMASCRIPT6的版本） 2015年，只是版本不同，语法简写
自2015年之后，每年升级一次现在都es14了
但是es6的改动是最大的，也有人把es6,7,8,9,10... 统称为es6

一、let 和 const关键字

之前都是使用var关键字声明变量
多了let 和 const
和var是有区别的

1.1 var 和 let const的区别？

1、let 和 const 不允许重复声明变量

var num = 10;
var num = 20;
console.log(num);//20

let num1 = 10;
let num1 = 20; //报错

const num2 = 10;
const num2 = 20;//报错

2、let 和 const声明的变量没有变量提升（没有预解析）

//提升前
console.log(num); //undefined
var num = 100;

//提升后
var num;
console.log(num);//undefined
num = 100


// console.log(num); // 报错
// let num = 100;


console.log(num1);//报错
const num1= 100;

3、let和const声明的变量会有块级作用域

所有{} 的代码块都有块级作用域

function fn(){
    let num = 100; // 局部作用域
}
console.log(num);//num is not defined

if(true){
    let num1 = 200; //局部作用域
}
// console.log(num1);//num is not defined

for(let i=0;i<3;i++){
    console.log(i); //局部作用域
}
console.log(i);// i is not defined

while (condition) {
    let num2 = 300;
}
console.log(num2);//num2 is not defined

1.2 let 和const的区别

1、let声明的变量可以改变，const声明的变量值不能改变（const声明的是常量不能变的量）

let num = 100;
num = 200;
console.log(num);


const num1 = 100;
num1 = 200;
console.log(num1); //报错

const obj = {
    name:"张鑫",
    age:18
}
obj.name = "张鑫鑫";
console.log(obj); //可以修改

1.3 关于块级作用域

// 循环每走一次，就开启一个定时器，循环很快很快就走完了，启动的三个定时器，异步等待

        // 循环走完，30行的位置  打印出i最终的值  是3

        // 三个定时器里用的都是i i的值早就循环完变成了3 
        // 一秒钟之后，i的值一起打印3

        // for(var i=0;i<3;i++){
        //     setTimeout(function(){
        //         console.log(i);//3 3 3  一秒钟之后打印三遍
        //     },1000)
        // }
        // console.log(i);//3

===============================================================================

        // 每循环一次，都会产生一个块级作用域，都会有一个局部变量，最后就有三个局部变量

        // 每个定时器内部都会使用自己的局部变量

        for(let i=0;i<3;i++){
            setTimeout(function(){
                console.log(i); //0 1 2
            },1000)
        }
        // console.log(i);i is not defined
        // {
        //     let i = 0;
        //     setTimeout(function(){
        //         console.log(i); //0
        //     },1000)
        // }
        // {
        //     let i = 1;
        //     setTimeout(function(){
        //         console.log(i); //1
        //     },1000)
        // }
        // {
        //     let i = 2;
        //     setTimeout(function(){
        //         console.log(i); //2
        //     },1000)
        // }

二、箭头函数

es6里的箭头函数就是函数的一种简写形式
注意：声明式函数不能简写成箭头函数

 // 不能写成箭头函数
        function fn(){

        }
==========================================
        // let fn1 = function(){

        // }

        let fn1 = ()=>{}
================================================

        let obj = {
            // fn:function(){

            // }
            fn:()=>{}
        }

2.1箭头函数的特点

1、如果参数只有一个，小括号可以省略的

参数有2个及以上或者没有参数括号不能省略了

// let fn = (a)=>{
//     return a+10;
// }

let fn = a=>{
    return a+10;
}
console.log(fn(10));

2.2 箭头函数的特殊性

this的问题


var btn = document.querySelectorAll("button")
btn[0].onclick=function(){
    console.log(this); //事件处理函数  this执行的是当前的元素
}


// 箭头函数内部 没有自己的this
// 箭头函数的this是上下文的this  (箭头函数所处的当前环境的this)
console.log(this);//箭头函数所出的环境位置是这个位置
btn[1].onclick=()=>{
    console.log(this); //window
}

// 2-在箭头函数定义的位置往上数,这一行可以打印出this
// 因为这里的this是window
// 所以箭头函数内部的this是window
console.log(this); //window
const obj = {

    fn:function(){
        console.log(this);  //执行的当前对象
    },


    // 箭头函数的this是上下文的this  (箭头函数所处的当前环境的this)

    // 1-箭头函数内部的this 书写箭头函数位置的上一行一个可以打印出this的位置
    fn1:()=>{
        console.log(this);//Window 
    }
}
obj.fn();
obj.fn1();

arguments参数集合

在箭头函数中不能用arguments

// 在普通函数里通过arguments获取到不确定个数的所有参数
function fn(){
    console.log(arguments);
}
fn(1,2,3,4)
fn(1,2)
fn(1,2,3,4,5)


// 在箭头函数中  不能用arguments
const fn1 = ()=>{
    console.log(arguments); //报错
}
fn1(1,2)
fn1(1,2,3)
fn1(1,2,3,4)

2.3函数传递参数时的默认值

// 如果调用函数时 传递参数了  就用传来的参数
// 如果没传参数  就用默认值代表
function fn(a,b){
    a = a || 10; //如果a能取到值 那么就用a的值  取不到就用||后的值
    b = b || 10;
    console.log(a,b);
}
fn();
fn(1,2);
=======================================================================

在es6中可以直接把默认值写到形参的位置

function fn(a=10,b=10){
    console.log(a,b);
}
fn();
fn(1,2);

默认值方式在箭头函数中也同样

const fn = (a=8,b=7)=>{
    console.log(a,b);
}
fn();
fn(1,2);

2.4 箭头函数使用的场景有哪些

适用于高阶函数:函数的参数也是一个函数,函数的参数一般写成箭头函数
setTimeout(()=>{

},1000);

var arr = [1,2,3];
arr.forEach(item=>{
    console.log(item);
})
arr.map(item=>{

})
arr.filter(item=>{

})
arr.every(item=>{

})
arr.some(item=>{

})
.....

三、解构赋值

快速从对象或者数组中取出成员的一个语法方式

3.1解构对象

es5里
let obj = {
    username:"刘锦扬",
    age:18,
    address:"河北省邢台市"
}
// let name = obj.username;
// let age =  obj.age;
// let address = obj.address;
// console.log(name,age,address);



es6解构
let obj = {
    username:"刘锦扬",
    age:18,
    address:"河北省邢台市"
}
let {username,age,address} = obj;
console.log(username,age,address)
注意：解构时的变量名 不能乱写  要和obj里的key值一致
let {username} = obj; 如果只用到一个  也可以取出来这一个！！

3.2 解构数组

es5
const arr = ["rose","Jack","TOM"];
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a,b,c);



es6
let [a,b,c] = arr;
console.log(a,b,c);

注意：

{} 解构对象使用
[] 解构数组使用
不能混用

四、对象扩展

当key和value相同时可以只写属性名

let username = "李福";
let age = 10;
let address = "黑龙江省";


// 对象里  key：value的形式
// key 键名   自己定义
// value 键值  

// 在es6中 当key和value相同时 可以只写一个
// let obj = {
//     username:username,
//     age:age,
//     address:address
// }

let obj = {
    username,
    age,
    address
}
console.log(obj);

对象合并方法 Object.assign

var obj1 = {
    username:"刘锦扬",
    age:18,
}

var obj2 = {
    address:"河北省邢台市",
    sex:"男"
}
// 第一个参数：要合并到哪个对象中去
// 第二个参数：你要合并的是谁
Object.assign(obj1,obj2);
console.log(obj1);
console.log(obj2);

五、模板字符串

在es5中表示字符串使用单引号或者双引号
在es6中可以使用反引号 ``
- 单引号或者双引号在引号内回车时会报错
- `` 内部不会报错
- 反引号可以直接在字符串里边拼接变量
- 需要解析的变量 ${变量}

var username = "杨浩";
let age = 19;
console.log("我的名字是"+username+"，我的年龄是"+age);
console.log(`我的名字是${username}，我的年龄是${age}`);
==============================================================
var content = [
    {
        id:1,
        con:"你好1"
    },
    {
        id:2,
        con:"你好2"
    },
    {
        id:3,
        con:"你好3"
    }
];

var str = "";
content.forEach(item=>{
    str+=`<li>
            ${item.con}
        </li>`
})
console.log(str);

六、展开运算符

ES6中新增了运算符... 叫做展开运算符
作用：把数组和对象展开

//把obj1的值展开 都给obj2
// var obj1 = {
//     username:"刘锦扬",
//     age:18, 
//     address:"河北省邢台市",
//     sex:"男"
// }

// let obj2 = {
//     ...obj1
// }
// console.log(obj2);  
=====================================
// 对象的合并
 var obj1 = {
    username:"刘锦扬",
    age:18
}

var obj2 = {
    ...obj1,
    address:"河北省邢台市",
    sex:"男"
}
console.log(obj2);

数组的展开

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

数组的合并

var arr = [1,2,3,4,5];
var arr1 = [...arr,6];
console.log(arr1);

函数传递参数时

var arr = [1,2,3,4,5];
function fn(){
    console.log(arguments);
}
fn(...arr)

七、 rest运算符 ...

rest运算符是获取剩余参数，是展开运算符的逆运算

// 是展开运算符的逆运算
// arr这个变量是啥  才能和1,2,3,4,5对应起来！！！

// 如果arr是个数组[1,2,3,4,5]  ...arr  得到 1,2,3,4,5
function fn1(...arr){
    console.log(arr);
}
fn1(1,2,3,4,5);


//剩余参数
function fn1(a,b,...arr) {
    console.log(arr); //[3,4,5]
}
fn1(1, 2, 3, 4, 5);

//和arguments类似，但是箭头函数中不能用arguments  在箭头函数里可以用rest运算符

八、新增的数据类型 symbol类型

symbol 是基本数据类型，，表示一个独一无二的值

symbol 函数：参数用来描述symbol的

基本数据类型：string  number boolean null undefined  symbol
引用数据类型：arr  obj



let s1 = Symbol('a');
let s2 = Symbol('a');
console.log(s1===s2);

九、set 和 map 数据结构

之前数据存到数组里也可以存到对象里

9.1 set

set 类似数组，，可以存放不会重复的元素

没传参数时

   // set 类似数组  没有索引
       let s1 = new Set();
       s1.add(1);
       s1.add(2);
       s1.add(3);
       s1.add(4);
       s1.delete(2);
       console.log(s1);
       s1.forEach(item=>{
        console.log(item);
       })

传递参数时

//数组去重
// let s2 = new Set([1,2,3,4,1,2,3,4,1,2]);
// let arr = [...s2];
// console.log(arr);//[1,2,3,4]

// 一句话实现数组去重
var arr1 = [1,2,3,4,1,2,3,4,1,2];
// console.log([...new Set(arr1)]);


// Array.from  也可以把set结构转为数组
let arr3 = Array.from(new Set(arr1));
console.log(arr3);

9.2 map

map类似对象，可以存放键值对，属性名：属性值 ,,

map的属性名可以是任何类型，，而普通对象的属性名只能是字符串

let obj = {

name：”libai“

}

  let m1 = new Map();
       m1.set("name","李白");
       m1.set("age",18);
       let fn = function(){

       }
       m1.set(fn,"bbbb")
       console.log(m1);

      console.log(m1.get("name")); 
      console.log(m1.get("age")); 
      console.log(m1.get(fn)); 

      m1.forEach((val,key)=>{
        console.log(val,key);
      })

十一、JSON的方法（ES5）

json 是一种特殊的字符串格式，，本质是个字符串

var jsonobj = '{"name":"libai","age":18，"gender":"女"}'

var jsonarr = '[{"name":"libai","age":18，"gender":"女"},{"name":"libai","age":18，"gender":"女"},{"name":"libai","age":18，"gender":"女"}]'

对象内部的key 和 value都是用双引号包裹起来的字符串（必须是双引号）

11.1 JSON的两个方法（ES5新增）

JSON.parse() 将json格式的字符串转化为对象
JSON.stringify() 将js对象或者数组转换成json格式的字符串

let obj = JSON.parse(jsonObj);//obj js里的对象
let arr = JSON.parse(jsonArr);//arr  js里的数组

let obj1 = {
    name: "李白",
    age: 18
}

let arr1 = [{
    id: 1,
    goodsname: "小米手机"
}, {
    id: 2,
    goodsname: "大米手机"
}]

let objstr = JSON.stringify(obj1);
let arrstr = JSON.stringify(arr1);
console.log(objstr);
console.log(arrstr);

11.2 举例说明

存本地存储

存：
// 在本地存储中  只能存字符串！！！！！！
var obj = {
    name:"李白",
    age:18
}

let arr1 = [{
    id: 1,
    goodsname: "小米手机"
}, {
    id: 2,
    goodsname: "大米手机"
}]


localStorage.setItem("userinfo",JSON.stringify(obj));
localStorage.setItem("goodsinfo",JSON.stringify(arr1));


取：
let obj = JSON.parse(localStorage.getItem("userinfo")) ;
console.log(obj);
let arr = JSON.parse(localStorage.getItem("goodsinfo")) 
console.log(arr[0]);

十二、es6模块化开发

历史上，js一直没有模块的体系，无法将一个大项目拆分成互相依赖的小文件，其他语言都有这些功能

在es6中新增了这个模块化开发

模块化开发主要分成两部

第一步导出 export

第二步引入 import

导出

方式1：

module1.js

export let a  = 10;
export let b = 20;
export let c = 30;
export let fn = function(){
    return "我是模块1的fn函数"
}

方式2：

 let a  = 10;
 let b = 20;
 let c = 30;
 let fn = function(){
    return "我是模块1的fn函数"
}

export {
    a,
    b,
    c,
    fn
}

引入

main.js

import {a,b,c,fn} from "./09-module1.js";
console.log(a,b,c,fn());

//引入时通过as  取别名
import {a as aaa,b,c} from "./09-module2.js";
console.log(aaa,b,c);

页面中使用

<script src="./09-main.js" type="module"></script>

==========================================================

export default 导出

let a  = 10;
let b = 20;
let c = 30;
let fn = function(){
   return "我是模块1的fn函数"
}

export default {
    a,b,c,fn
}

引入

import customName from "./09-module3.js";
console.log(customName.a);

十三、练习

1、留言板数据做持久化 2、把代码模块化（发布是一个模块删除是一个模块）

01-留言板

<body>
    <input type="text" id="ipt">
    <button id="btn">发布</button>
    <ul id="ul"></ul>
    <script>
        var ipt = document.querySelector("#ipt");
        var btn = document.querySelector("#btn");
        ul = document.querySelector("#ul");
        let arr = []; //存放所有留言
        let str = "";

        //把缓存中的数组取出来并渲染
        let localArr = JSON.parse(localStorage.getItem("arr")) || [];
        if (localArr.length > 0) {
            arr = localArr
        }
        // 写循环去展示
        arr.forEach(item => {
            str += `
                <li>
                    <h4>留言内容：${item.content}</h4>
                    <span>留言时间：${item.time}</span>
                    <button class="del">删除</button>
                </li>
                `
        })
        ul.innerHTML = str;



        btn.onclick = function () {
            str = "";
            let val = ipt.value;
            let obj = {
                content: val,
                time: new Date().getTime()
            }
            arr.push(obj);
            arr.forEach(item => {
                str += `
                <li>
                    <h4>留言内容：${item.content}</h4>
                    <span>留言时间：${item.time}</span>
                    <button class="del">删除</button>
                </li>
                `
            })
            ul.innerHTML = str;
            ipt.value = "";
            // 为了以后刷新也有数据 ，把arr存入到缓存里
            // 缓存里只能存字符串的形式  arr这个数组对象处理成json串
            localStorage.setItem("arr", JSON.stringify(arr));
        }
    </script>
</body>

但无法删除，只是数据持久化

02-留言板-封装

<body>
    <input type="text" id="ipt">
    <button id="btn">发布</button>
    <ul id="ul"></ul>
    <script>
        var ipt = document.querySelector("#ipt");
        var btn = document.querySelector("#btn");
        ul = document.querySelector("#ul");
        let arr = []; //存放所有留言
        let str = "";


        // 页面一加载就让它显示一个列表
        loadlist();
        btn.onclick = function () {
            str = "";
            let val = ipt.value;
            let obj = {
                content: val,
                time: new Date().getTime()
            }
            arr.push(obj);
            ipt.value = "";
            // 为了以后刷新也有数据 ，把arr存入到缓存里
            // 缓存里只能存字符串的形式  arr这个数组对象处理成json串
            localStorage.setItem("arr", JSON.stringify(arr));
            loadlist();
        }


        // 封装一个函数  功能：显示列表
        function loadlist() {
            //把缓存中的数组取出来并渲染
            let localArr = JSON.parse(localStorage.getItem("arr")) || [];
            if (localArr.length > 0) {
                arr = localArr
            }
            // 写循环去展示
            arr.forEach(item => {
                str += `
                <li>
                    <h4>留言内容：${item.content}</h4>
                    <span>留言时间：${item.time}</span>
                    <button class="del">删除</button>
                </li>
                `
            })
            ul.innerHTML = str;
        }
    </script>
</body>

03-留言板-模块化

模块化把功能抽离出去，尽可能在html里面只用html，js文件都用模块化去写

模块化，创建一个js存放留言板功能。模块化导出，用到谁导出谁。

//模块化，js存放留言板功能
// 导出

    let arr = []; //存放所有留言
    let str = "";
// 添加留言
   export function add(){
        var ipt = document.querySelector("#ipt");
        var btn = document.querySelector("#btn");
        btn.onclick = function () {
            str = "";
            let val = ipt.value;
            let obj = {
                content: val,
                time: new Date().getTime()
            }
            arr.push(obj);
            ipt.value = "";
            // 为了以后刷新也有数据 ，把arr存入到缓存里
            // 缓存里只能存字符串的形式  arr这个数组对象处理成json串
            localStorage.setItem("arr", JSON.stringify(arr));
            loadlist();
        }

    }

   loadlist();
   // 封装一个函数  功能：显示列表
   function loadlist() {
    var ul = document.querySelector("#ul");
    //把缓存中的数组取出来并渲染
    let localArr = JSON.parse(localStorage.getItem("arr")) || [];
    if (localArr.length > 0) {
        arr = localArr
    }
    // 写循环去展示
    arr.forEach(item => {
        str += `
        <li>
            <h4>留言内容：${item.content}</h4>
            <span>留言时间：${item.time}</span>
            <button class="del">删除</button>
        </li>
        `
    })
    ul.innerHTML = str;
}

<body>
    <input type="text" id="ipt">
    <button id="btn">发布</button>
    <ul id="ul"></ul>
    
    <script type="module">
        import {add} from "./liuyan.js";//引入功能 //把add函数解构出来
        add()//调用一下，这样点击的时候就执行add里面的添加功能了
    </script>
   
</body>