目录
[一、let 和 const关键字](#一、let 和 const关键字)
[1.1 var 和 let const的区别?](#1.1 var 和 let const的区别?)
[1.2 let 和const的区别](#1.2 let 和const的区别)
[1.3 关于块级作用域](#1.3 关于块级作用域)
[2.2 箭头函数的特殊性](#2.2 箭头函数的特殊性)
[2.4 箭头函数使用的场景有哪些](#2.4 箭头函数使用的场景有哪些)
[3.2 解构数组](#3.2 解构数组)
[七、 rest运算符 ...](#七、 rest运算符 ...)
[八、新增的数据类型 symbol类型](#八、新增的数据类型 symbol类型)
[九、set 和 map 数据结构](#九、set 和 map 数据结构)
[9.1 set](#9.1 set)
[9.2 map](#9.2 map)
[十一、JSON的方法 (ES5)](#十一、JSON的方法 (ES5))
[11.1 JSON的两个方法(ES5新增)](#11.1 JSON的两个方法(ES5新增))
[11.2 举例说明](#11.2 举例说明)
[十三、 练习](#十三、 练习)
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 不允许重复声明变量
javascript
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声明的变量没有变量提升(没有预解析)
javascript
//提升前
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声明的变量会有块级作用域
所有{} 的代码块都有块级作用域
javascript
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声明的是常量 不能变的量)
javascript
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 关于块级作用域
javascript
// 循环每走一次,就开启一个定时器,循环很快很快就走完了,启动的三个定时器,异步等待
// 循环走完,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里的箭头函数就是函数的一种简写形式
-
注意:声明式函数不能简写成箭头函数
javascript
// 不能写成箭头函数
function fn(){
}
==========================================
// let fn1 = function(){
// }
let fn1 = ()=>{}
================================================
let obj = {
// fn:function(){
// }
fn:()=>{}
}
2.1箭头函数的特点
1、如果参数只有一个,小括号可以省略的
参数有2个及以上或者没有参数 括号不能省略了
javascript
// let fn = (a)=>{
// return a+10;
// }
let fn = a=>{
return a+10;
}
console.log(fn(10));
2.2 箭头函数的特殊性
this的问题
javascript
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
}
javascript
// 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
javascript
// 在普通函数里通过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函数传递参数时的默认值
javascript
// 如果调用函数时 传递参数了 就用传来的参数
// 如果没传参数 就用默认值代表
function fn(a,b){
a = a || 10; //如果a能取到值 那么就用a的值 取不到就用||后的值
b = b || 10;
console.log(a,b);
}
fn();
fn(1,2);
=======================================================================
- 在es6中 可以直接把默认值写到形参的位置
javascript
function fn(a=10,b=10){
console.log(a,b);
}
fn();
fn(1,2);
- 默认值方式在箭头函数中也同样
javascript
const fn = (a=8,b=7)=>{
console.log(a,b);
}
fn();
fn(1,2);
2.4 箭头函数使用的场景有哪些
javascript
适用于高阶函数:函数的参数也是一个函数,函数的参数一般写成箭头函数
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解构对象
javascript
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 解构数组
javascript
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相同时 可以只写属性名
javascript
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
javascript
var obj1 = {
username:"刘锦扬",
age:18,
}
var obj2 = {
address:"河北省邢台市",
sex:"男"
}
// 第一个参数:要合并到哪个对象中去
// 第二个参数:你要合并的是谁
Object.assign(obj1,obj2);
console.log(obj1);
console.log(obj2);
五、模板字符串
-
在es5中表示字符串使用 单引号或者双引号
-
在es6中 可以使用反引号 ``
-
单引号或者双引号 在引号内回车时 会报错
-
`` 内部 不会报错
-
反引号可以直接在字符串里边拼接变量
-
需要解析的变量 ${变量}
-
javascript
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中新增了运算符
...
叫做展开运算符 -
作用:把数组和对象展开
javascript
//把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);
数组的展开
javascript
var arr = [1,2,3,4,5];
// console.log(arr[0],arr[1]);
console.log(...arr); //1,2,3,4,5
数组的合并
javascript
var arr = [1,2,3,4,5];
var arr1 = [...arr,6];
console.log(arr1);
函数传递参数时
javascript
var arr = [1,2,3,4,5];
function fn(){
console.log(arguments);
}
fn(...arr)
七、 rest运算符 ...
rest运算符是获取剩余参数,是展开运算符的逆运算
javascript
// 是展开运算符的逆运算
// 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的
javascript
基本数据类型: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 类似数组,,可以存放不会重复的元素
- 没传参数时
javascript
// 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);
})
- 传递参数时
javascript
//数组去重
// 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"
}
javascript
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 是一种特殊的字符串格式,,本质是个字符串
javascript
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格式的字符串
javascript
let obj = JSON.parse(jsonObj);//obj js里的对象
let arr = JSON.parse(jsonArr);//arr js里的数组
javascript
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 举例说明
存本地存储
javascript
存:
// 在本地存储中 只能存字符串!!!!!!
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
javascript
export let a = 10;
export let b = 20;
export let c = 30;
export let fn = function(){
return "我是模块1的fn函数"
}
方式2:
javascript
let a = 10;
let b = 20;
let c = 30;
let fn = function(){
return "我是模块1的fn函数"
}
export {
a,
b,
c,
fn
}
引入
main.js
javascript
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);
页面中使用
javascript
<script src="./09-main.js" type="module"></script>
==========================================================
export default 导出
javascript
let a = 10;
let b = 20;
let c = 30;
let fn = function(){
return "我是模块1的fn函数"
}
export default {
a,b,c,fn
}
引入
javascript
import customName from "./09-module3.js";
console.log(customName.a);
十三、 练习
1、留言板数据做持久化 2、把代码模块化 (发布是一个模块 删除是一个模块)
01-留言板
html
<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-留言板-封装
javascript
<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存放留言板功能。模块化导出,用到谁导出谁。
javascript
//模块化,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;
}
javascript
<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>

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