JavaScript ES6基础
1.let声明
- 1.let不像var有变量声明提升，未声明直接使用会报错
console.log(a); //undefined
var a;
console.log(b); //报错
let b;
- 2.在ES5中，全局变量是挂载在顶层对象（浏览器是window）中。而let不会
var a = 1;
console.log(window.a); //1
let b = 2;
console.log(window.b); //undefined
- 3.在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。而let可以声明块级作用域的变量。
if(true){
var num = 10;
}
console.log(num); //10 var定义的变量没有块级作用域
if(true){
let num2 = 10;
}
console.log(num2); //报错 num2 is not defined
- 4.let变量不能重复声明，而var声明的变量可以
let num = 10;
let num = 11;
console.log(num); //报错 Identifier 'num' has already been declared
var num = 10;
var num = 11;
console.log(num); //11 var可以重复声明
- 5.let 配合for循环的独特应用
<ul id="ul1">
<li>11111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
window.onload = function(){
var allLis = document.getElementsByTagName("li");
for(var i=0;i<allLis.length;i++){
allLis[i].onclick = function(){
console.log(i);
}
}
//无论点击哪个元素都是输出4
for(let j=0;i<allLis.length;j++){
allLis[j].onclick = function(){
console.log(j);
}
}
}
//依次点击各个li元素分别输出0/1/2/3
2.模版字符串
- 由来：传统的方式拼接字符串和变量时，如果拼接内容很多的话，会变得很复杂。需要大量的双引号 +号 变量名组合在一起，很不方便，极易出错
- 用法：用反引号（tab顶上那个键）标识将模版包裹起来。${}里面既可以放变量，也可以放函数，还可以放表达式
<script>
var str = "我是谁，我在哪"
var n = 16
document.body.innerHTML += `<h1>${str}?你就少说两句吧</h1>`
document.body.innerHTML += `<h1>2的16次方=${Math.pow(2,n)}</h1>`
</script>
运行结果：
<h1>我是谁，我在哪?你就少说两句吧</h1>
<h1>2的16次方=65536</h1>
- 另外，eval(string) 函数可计算某个字符串，并执行其中的的 JavaScript 代码。string为要计算的 JavaScript 表达式或要执行的语句
<script>
let n=3,m=4
let codeStr = "console.log(123)"
eval(codeStr)
let codeStr2 = "n+m"
let s = eval(codeStr2) //对于表达式，会自动返回计算的结果
console.log(s)
</script>
控制台打印:
123
7
3.解构赋值
- 含义：按照一定的模式从数组或者对象中取值，对变量进行赋值的过程称为解构
- 数组：定义变量时，将变量放入左边的数组中，将自动与右边的数组元素进行匹配赋值（通过下标）
<script>
var arr = [0,1,2]
//传统赋值
var a=arr[0],b=arr[1],c=arr[2]
console.log(a,b,c) //0 1 2
//解构赋值
var [d,e,f] = arr
console.log(d,e,f) //0 1 2
//实例 交换数值
var g = 1,h = 2;//这里不能少 分号
[g,h] = [h,g]
console.log(g,h) // 2 1
</script>
- 对象：定义变量时，将变量放入左边的对象中，将自动与右边的对象进行匹配赋值（通过属性名称）
<script>
var p = {name:"张三",age:20,friend:"李四"};
//传统赋值
var name=p.name,age=p.age
console.log(name,age); //张三 20
//解构赋值
var {name,age} = p;
console.log(name,age); //张三 20
</script>
- 字符串：定义变量时，将变量放入左边的数组中，将自动与右边的字符串素进行匹配赋值（通过下标）
<script>
var str = "hello world"
var [a,b,c] = str
console.log(a) //h
console.log(b) //e
console.log(c) //l
</script>
- 解构赋值允许使用默认值：如果右边的对应的值为undefined，则使用默认的值
<script>
// 如果右边的对应的值为undefined，则使用默认的值
var {name="张三",age=20} = {}
console.log(name,age) //张三 20
// 右边有值则正常赋值
var {name="张三",age=20} = {name:"李四",age:25}
console.log(name,age) //李四 25
//数组
var [num1=10,num2=20] = []
console.log(num1,num2) //10 20
var [num1=10,num2=20] = [5,15]
console.log(num1,num2) //5 15
</script>
4.扩展运算符
- 将一个数组转为用逗号分隔的参数序列
<script>
// 将所有传参求和
function sum(){
var total = 0
for(var i = 0; i < arguments.length; i++){
total += arguments[i]
}
return total
}
var arr = [1,2,3,4,5]
var arr2 = [3,4,5]
console.log(sum(...arr)) //15
console.log(sum(...arr2)) // 12
// ES5 使用apply()将参数以数组的形式传入
console.log(sum.apply(window,arr)) //15
</script>
- 还可以用于数组的拼接与合并
<script>
// 数组拼接
var arr = [1,2,3]
var arr2 = [3,4,5]
arr.push(...arr2)
console.log(arr) // [1, 2, 3, 3, 4, 5]
// 数组合并
var arr3 = [1,2,3]
var arr4 = [3,4,5]
var newArr = [...arr3,...arr4]
console.log(newArr) // [1, 2, 3, 3, 4, 5]
</script>
- 对象
<script>
//复制键值对给新的对象
var p = {name: 'kyo',age: 20}
var p2 = {...p}
console.log(p2.name,p2.age) // 'kyo' 20
//修改新对象对旧的对象无影响
p2.age = 25
console.log(p) //{name: "kyo", age: 20}
//对象拼接
var fnobj = {
test:function(){},
test2:function(){}
}
var fnobj2 = {
test3:function(){},
test4:function(){}
}
var methods = {...fnobj,...fnobj2}
console.log(methods)//{test: ƒ, test2: ƒ, test3: ƒ, test4: ƒ}
// ES5方法 循环遍历添加
Object.keys(p).forEach(key => {
p2[key] = p[key]
})
</script>
- 字符串：直接转换成单个字符组成的数组
<script>
var str = 'hello'
var arr = [...str]
console.log(arr) // ['h','e','l','l','o']
// ES5方法
arr = str.split('')
</script>
5.Set 数据结构
- 含义：ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
- 常用方法：
| 方法名 | 说明 |
|---|---|
| new Set() | 创建Set |
| add() | 向Set中添加元素 |
| delete() | 从Set中删除目标元素 |
| has() | 判断某元素是否存在 |
| clear() | 清空所有元素 |
- 基本使用
<script>
// 创建Set
var mySet = new Set()
// 添加元素（一次只能添加一个）
mySet.add(1)
mySet.add(2)
mySet.add(3)
console.log(mySet) //Set(3) {1, 2, 3}
// size属性
console.log(mySet.size) //3
// 删除元素
mySet.delete(2)
console.log(mySet) //Set(2) {1, 3}
// 判断是否拥有指定元素
mySet.add([7,8]) //添加引用类型的元素
console.log(mySet.has(1)) //true
console.log(mySet.has(2)) //false
console.log(mySet.has([7,8])) //false 不是同一个 指针，这里要注意
//清空元素
mySet.clear()
console.log(mySet) //Set(0) {}
</script>
- Set和Array可以互转,可以利用它进行数组去重
<script>
var arr = [1,2,3,4,2]
// Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化
var mySet = new Set(arr)
console.log(mySet) //Set(4) {1, 2, 3, 4} 去重
// set转数组
var newArr = Array.from(mySet)
console.log(newArr) //[1, 2, 3, 4]
</script>
- Set可以使用forEach遍历
<script>
var mySet = new Set([1,2,3,4])
mySet.forEach(function(val,index){
// Set集合的键名和键值一样的
console.log(val,index)
// 1 1
// 2 2
// 3 3
// 4 4
})
</script>
6.对象属性判断
- 由来：当对象多级嵌套时，某个属性可能是空值（null或者undefined），强制读取就会报错
- 解决方法：读取对象之前，在 "." 添加 "?" 避开报错（为空值则不继续执行，直接返回undefined）
<script>
var p1 = {
name: "kyo",age: 20,
friend: {
name: "Daimon",age: 25,
}
}
//p2没有friend，更没有friend.name
var p2 = {
name: "kyo",age: 20,
}
console.log(p1.name)
console.log(p1.friend.name)
console.log(p2.name)
console.log(p2.friend?.name)
//报错
console.log(p2.friend.name)
</script>
7.JavaScript 代理
- 由来：Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）
- 语法：Proxy是一个构造函数，第一个参数target表示要使用 Proxy 包装的目标对象（也就是代理源，返回的proxy本身操作的就是这个数据，proxy本身和代理源会会相互影响），handler是一个对象，他的属性值通常是函数，用来定义了在执行各种操作时代理 p 的行为
const p = new Proxy(target, handler)
- 基本用法：创建一个代理实例，监听其不同的行为，包括但不局限于读取，赋值，删除等
<script>
//配置项
var handler = {
//读取时触发
//第一个参数就是target,也就是包装的目标对象
//第二个参数数访问的属性值
get(obj, prop) {
console.log('get执行')
return obj[prop]
},
//修改时触发
set: function (obj, prop, value){
console.log('set执行')
obj[prop] = value
},
//删除属性时触发
deleteProperty(obj, prop){
console.log('deleteProperty执行')
}
}
const p = new Proxy({}, handler)
//赋值触发set
p.name = "张三"
//读取触发get
console.log(p.name)
//删除触发deleteProperty
delete p.name
</script>
- 浏览器兼容性
8.Fetch
- 作用：fetch() 方法用于发起获取资源的请求，它会返回一个会在请求响应后兑现的 promise
- 基本语法：传入url，用then获取返回数据
fetch('http://127.0.0.1:8097/api/data.json').then(res=>{
console.log(res)
})
- 第二个参数，对象类型，有以下常用字段
| 字段 | 说明 |
|---|---|
| body | 请求参数，附带在请求体中 |
| headers | 请求头 |
| method | 请求的方法，比如 "GET"、"POST"，默认值是 "GET" |
| mode | 指定请求的模式，默认cors，表示允许跨源请求，same-origin表示只允许同源请求，这里js层面允许，能不能拿到数据还得看后端的接口设置 |
- 返回值：返回一个 Promise，resolve 时回传 Response 对象，Response.body 是 ReadableStream（可读流）数据，可以对其进行转换
async getMsg(){
//发请求获取响应
const response = await fetch('http://127.0.0.1:8097/api/data.json')
//转换数据为json
const json_data = await response.json()
console.log(json_data)
}
