13.ES6
1.json概述
1.什么是json
- 一种轻量级的数据格式
- 键必须带双引号
- 值如果是字符串,必须带双引号
2.json能做什么
- 进行网络传输,其他语言也支持json
- 配置文件
3.json注意点
- json里面不能写注释
- 值如果是字符串,必须带引号,值如果是字符串,也必须加
- 不能到json的后面加分号
4.如和把js中的对象转换成json格式的字符串
JSON.stringify(对象名称)
5.把json转换为对象或数组
JSON.parse(json格式的代码)
2.本地存储(localStorage)
- 存储在浏览器的本地存储技术
- 可以存储5M左右大小的数据
- 本地永久存储,需要手动删除
- 它不能跨域
- 必须是字符串的格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>添加</button>
<button>修改</button>
<button>查看</button>
<button>删除</button>
<script>javascript">
// localStorage
// 存储在浏览器的本地存储技术
// 1.可以存储5M左右大小的数据
// 2.本地永久存储,需要手动删除
// 3.它不能跨越
// 4.必须是字符串的格式
// -----获取元素----
var btn = document.querySelectorAll("button");
// ----------添加---------
btn[0].onclick = function () {
// 1.获取已有数据,转换为数组
var oUserList = JSON.parse(localStorage.getItem("user") || '[]')
// 2.准备一个保存的数据
var oUser = {
id: 1,
name: "小易",
age: 22
}
// 3.把准备的数据,添加数组
oUserList.push(oUser)
console.log(oUserList);
// 4.数组去覆盖原来的本地数据
// 把数组转换成json格式的字符串
var str = JSON.stringify(oUserList);
localStorage.setItem("user", str)
}
// ----------修改---------
btn[1].onclick = function () {
// 1.获取本地数据
var oUserList = JSON.parse(localStorage.getItem("user") || '[]')
// 2.修改第一条数据
oUserList[0].name = "易玲"
console.log(oUserList);
// 3.覆盖原来的数据
var str = JSON.stringify(oUserList)
localStorage.setItem("user", str)
}
// ----------查询---------
btn[2].onclick = function () {
// 1.获取本地数据
var srt = localStorage.getItem("user")
console.log(srt);
var list = JSON.parse(srt)
console.log(list);
}
// ----------删除---------
btn[3].onclick = function () {
// 1.获取本地数据
// 根据key删除指定的数据
localStorage.removeItem("user")
// 清除
localStorage.clear()
}
</script>
</body>
</html>
3.ES5严格模式
1.ES5引入了严格模式
1.消除一些不合理的地方
2.提高代码运行效率
2.严格模式分类
1.全局严格 函数外的,全局的,use strict 必须放在代码的第一行
2.局部严格 函数内的 局部的
3.如何使用严格模式
“use strict”
4.全局严格的特点
- 不可以省略var声明变量
- 禁止函数使用this关键字指向全局变量
- 禁止使用八进制
- 不允许在非函数的代码块内声明函数
- 在严格模式下,arguments变量,形参是不会变(不同变)
- 作用域全局 局部 块级作用域 在严格模式下,eval函数作用域
4.改变this指向bind,apply,call
- 他们都能够改变函数的this指向
- bind不会立即执行,需要手动执行
- apply和call都会立即执行,区别在于apply的第二个参数是一个数组
5.let作用域
- 如果在{}内部声明变量,外部不能访问
- 它防止了变量的提升,遵循先定义,后使用原则
- 它防止了同一个变量,不能重复声明
- 它声明的值,可以被修改,可以是任意类型
6.const
- 它声明的变量名称只能声明一次,不能重复声明
- 防止变量的提升
- 具有块级作用域
- 它的值类型,不能被修改
- 如果是引用类型,可以修改它的属性或方法,不能修改类型和地址
7.ES6 对数组增强
- Array.from()将伪数组变成数组,就是只要有length的就可以转成数组
- Array.of()将一组值,转换为数组
8.ES6对函数增强2个点
- 函数的默认参数
- 箭头函数
- 箭头函数的this(跟它的环境有关),它的this指向上下文对象
- 它本身没有this,利用bind,apply,call无法改变this
- 它默认情况是window(因为箭头函数的执行环境是全局的window)
- 它无法被实例化,不能被new
- 只有一个参数,可以省略小括号
- 如果代码体只有一句话,{},return 都可以省略
9.ES6对象的增强
- 属性简写
- 方法简写
- object.assign()
10.Set集合
add()不能添加重复项,添加成功返回变化后的集合
delete()删除成功返回true,否则false
has()判断是否存在,存在返回true,不存在返回false
clear()清除
利用Array.from()或[…new Set()]转成数组
11.Map
添加:map.set(“键”,"值)
添加:map.set(“键”,"值)键一样,会覆盖,值一样没关系
删除:map.delete(“键”)
map.has(“键”)判断是否存在
获取:map.get(“键”)
清空:map.clear()
