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);//20let 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 definedif(true){let num1 = 200; //局部作用域
}
// console.log(num1);//num is not definedfor(let i=0;i<3;i++){console.log(i); //局部作用域
}
console.log(i);// i is not definedwhile (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  objlet 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>

不光是实现功能，连封装，连模块化都讲了