<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
更多ES6相关内容 https://es6.ruanyifeng.com/
1. let / const
let :用于声明变量
- 必须先声明，后使用。（变量不再做提升了）
- let声明的全局变量不是window对象的属性。
- 在同一个作用域中，let不能重复声明同一个变量。
- let声明会产生块级作用域,for循环有两个作用域，for本身是一个作用域，for循环体又是子级作用域
const :用于声明常量
- 常量一旦声明，不允许修改。
- 基本类型的数据，值不允许修改。
- 复合类型的数据，引用地址不允许修改。
let` 和 `const` 的区别
- `let` 声明的变量的值可以改变，`const` 声明的变量的值不可以改变
- `let` 声明的时候可以不赋值，`const` 声明的时候必须赋值
2. 箭头函数
语法： (函数的行参) => { 函数体内要执行的代码 }
- ES6 里面一个简写函数的语法方式
* 箭头函数只能简写函数表达式，不能简写声明式函数
- 内部没有 this 和 arguments
- 行参只有一个且没有默认值的时候可以不写 ()
3. 函数参数默认值
直接把默认值写在函数的行参位置
4. 模板字符串
表达字符串使用 ``（反引号）
``（反引号）的优点：
- 可以换行书写
- 可以直接在字符串里面拼接变量
let str = `hello${100}world${100}`//hello100world100
5. 解构赋值
1. 对象解构：可以快速读取对象中的属性或方法。.{} = {}
let {a = 1,b = 2,c = 3} = {c : 8,a : 2,b : 3}
2. 数组解构: 可以快速读取数组中的元素。 [] = []
let [a = 1,b = 2,c = 3] = [4,5,6];
3. 好处？
* 可以快速交换两个变量中的值
* 函数中的形参可以设置默认值
* 函数中的形参可以不按照顺序传递
* 函数中的返回值可以一次返回多个数据了。
6. ... 运算符(展开运算符)
- 展开数组、对象、字符串 ...arr
- 合并数组 [...arr, 5]
- 合并对象 obj = {...obj1, ...obj2}
- 在函数传递参数的时候使用 fn(...arr)
7. 对象简写形式
当对象中的key和value的名字相同时，可以只写一个key
//创建一个对象
let obj = {
id, // id : id 名字相同，可以简写
num : 2
}
8. 模块化语法 import / export
- 解决全局污染问题
- 实现方法
先定义模块，再导出模块
边定义模块，边导出模块 (不推荐)
以别名的方式导出模块(不推荐)
导入 导出默认模块(一个JS文件中只能导出有一个默认模块）
export {a};//导出模块
export myname a;//默认模块//自己给默认模块起的名字myname
import {a} from './tools.js';//导入模块
import myname from './tools.js';//导入默认模块
9. Set / Map / for ... of
9.1 Set : 天然具有去重的功能。（针对数组）
1. 创建set对象
let set = new Set();
let set = new Set([1,2,1,2,1,2,3]); //[1,2,3]
[... new Set([1,2,3,4,2,3,4,1])] //[1,2,3,4]
2. 属性 size : 长度
set.size
3. 方法：
set.add(元素) : 添加一个元素，返回set对象
set.has(元素) : 检测元素是否在set对象中，返回布尔值
set.delete(元素) : 删除指定元素，返回布尔值
set.clear() : 清空set对象
set.forEach((value,key,set) =>{}) : 遍历set对象
set.keys() : 获取所有的key
set.values() : 获取所有的value
set.entries() : 获取所有的key和value
for of
9.2 Map（针对对象）
1. 创建map对象
let map = new Map();
let map = new Map([ [1,'one'], [2,'two'], ['2','three'], [true,'four'], [3,'five'] ]);
2. 属性 size : 长度
map.size
3. 方法：
map.set('key','value') : 添加元素，返回map对象
map.get('key') : 获取value
map.has(元素) : 检测元素是否在map对象中，返回布尔值
map.delete(元素) : 删除指定元素，返回布尔值
map.clear() : 清空map对象
map.forEach((value,key,map) =>{}) : 遍历map对象
map.keys() : 获取所有的key
map.values() : 获取所有的value
map.entries() : 获取所有的key和valuefor of
9.3 for...in和 for...of的区别
for in 中的循环变量代表 下标 或 key
for of 中的循环变量代表 元素 或 value
-->
<script>
// Set
//1. 创建set对象
const set1 = new Set();
//1.1初始化set对象
const set2 = new Set([1,2,3,1,2,5]);//[1,2,3,5]
//2. set对象的属性 --- size
console.log(set2.size);//5
//3. set对象的方法
//3.1 添加元素
set1.add(1).add(2).add(3);//[1,2,3]
//3.2 删除指定的元素
console.log(set1.delete(2));//true 删除成功
console.log(set1.delete(2));//flase 删除失败
//3.3 检测指定元素是否存在
console.log(set1.has(2));//flase 不存在
//3.4 清空set对象
set1.clear();
//3.5 遍历
set2.forEach((value,key,set)=>{
console.log(key,value);//1 1 //2 2 //3 3 //5 5
})
//3.6 获取所有的key、value、key和value
console.log(set2.keys());//SetIterator {1, 2, 3, 5}
console.log(set2.values());//SetIterator {1, 2, 3, 5}
console.log(set2.entries());// {1 => 1, 2 => 2, 3 => 3, 5 => 5}
//3.7 for of
for(let key of set2.keys()){
console.log(key);//1 2 3 5
}
for(let value of set2.values()){
console.log(value);//1 2 3 5
}
for(let [key,value] of set2.entries()){
console.log(key,value);//1 1 //2 2 //3 3 //5 5
}
</script>
<script>
// Map
//1. 创建map对象
const map1 = new Map();
//1.1初始化map对象
const map2 = new Map([[1,3],[2,'3'],['ture','flase'],["3",'three']]);//Map(4) {1 => 3, 2 => '3', 'ture' => 'flase', '3' => 'three'}
//2. map对象的属性 --- size
console.log(map2.size);//4
//3. map对象的方法
//3.1 添加元素
map1.set(1,3).set(2,'two').set(1,3);//Map(2) {1 => 3, 2 => 'two'}
//3.2 获取指定的元素
console.log(map1.get(2)); //two
//3.2 删除指定的元素
console.log(map1.delete(2));//true 删除成功
console.log(map1.delete(2));//flase 删除失败
//3.3 检测指定元素是否存在
console.log(map1.has(2));//flase 不存在
//3.4 清空map对象
map1.clear();
//3.5 遍历map对象
map2.forEach((value,key,map)=>{
console.log(key,value);//1 3 //2 '3' //ture flase //3 three
})
//3.6 获取所有的key、value、key和value
console.log(map2.keys());//MapIterator {1, 2, 'ture', '3'}
console.log(map2.values());//MapIterator {3, '3', 'flase', 'three'}
console.log(map2.entries());//MapIterator {1 => 3, 2 => '3', 'ture' => 'flase', '3' => 'three'}
//3.7 for of
for(let key of map2.keys()){
console.log(key);//1 2 ture 3
}
for(let value of map2.values()){
console.log(value);//3 3 flase three
}
for(let [key,value] of map2.entries()){
console.log(key,value);//1 3 //2 '3' //ture flase //3 three
}
//原生对象(原生对象中的key，无论原来是什么类型，作为对象的key时都会自动转为字符串)
const a = {},b = {},c = {};
console.log(b.toString()); //[object Object]
console.log(c.toString()); //[object Object]
a[b] = 1; //a['[object Object]'] = 1
a[c] = 2; //a['[object Object]'] = 2
console.log(a);//{[object Object]: 2}
</script>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
