目录
ES5新增的特性
1.Symbol
-ES6新增加的基本数据类型
-ES6引入symbol的原因:
ES5的对象属性名都是字符串，很容易造成属性名冲突
let sym=Symbol(描述符)// 描述符=>描述当前symbol表示什么意义
-Symbol 表示独一无二的值
<body>
<script>
function test2(){
let num = 100
let str = 'helloworld'
let sname1 = Symbol('name')
let sname2 = Symbol('name')
console.log( typeof num) // number
console.log( typeof str) // string
console.log( typeof sname1) // symbol
console.log(sname1 === sname2)
}
test2()
function test1() {
let num = 100 // number
let str = 'helloworld' // string
let sname1 = Symbol('name') //adsfaewrqwerawer
let sname2 = Symbol('name') //kasdfawerafasdfa
let obj = {
name1: 'jack',
age: 18,
}
let newObj = {
...obj,
// name:'jack',
// age:18,
name2: 'rose',
}
}
</script>
</body>
2.Set
-ES6新增加的复杂数据类型
作用：存储无序数据的集合
创建：通过new语句
let set=new Set()//空集合
let set=new Set([1,'name',{},fun()])//有数据
属性和方法：
1.集合中的数据个数
set.size
2.添加元素
set.add()
3.删除元素
set.delete(元素)
4.清空元素
set.clear()
5.遍历
forEach
6.展开运算符
set转arr
var a=[...set]
特点：
集合中set元素不能重复
应用：
数组去重
let set=new Set(arr) arr=[..set]
arr=[...new Set(arr)]
<!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>Set</title>
<!--
javascript内置对象
Object Array Date Math ...
Set
=> 复杂数据类型
=> 作用
存储无序数据的集合
=> 创建
let set = new Set() //空集合
let set = new Set([1,2,{name:'jack'}, function(){},'hello'])
=> 属性和方法
size
add
delete
clear
=>遍历集合set forEach
=> 特点
集合set中元素不能重复
=> 应用
数组去重
+ indexof或includes
定义一个新数组,存储不重复元素
遍历原数组, 判断新数组中是否存在原数组元素，如果不存，加入新数组
let arr = [1,2,1,2,4]
let newArr = []
arr.forEach((item)=>{
if(newArr.indexOf(item) == -1){
newArr.push(item)
}
})
+ 双重for循环 + splice
for(let i = 0; i < arr.length; i++){
let item = arr[i]
for(let j = i+1; j<arr.length; j++){
if(item == arr[j]){
arr.splice(j,1)
j--
}
}
}
+
-->
</head>
<body>
<button class="add">添加</button>
<button class="delete">删除</button>
<script>
const btnAdd = document.querySelector('.add')
const btnDelete = document.querySelector('.delete')
function test1(){
let set = new Set([10,20])
console.log(set)
console.log('size :',set.size)
set.forEach(function(item){
console.log(item)
})
btnAdd.addEventListener('click',function(){
set.add(20)
console.log(set)
})
btnDelete.addEventListener('click',function(){
set.delete(20)
// set.clear()
console.log(set)
})
}
// test1()
function test2(){
// 集合set转数据Array
let set = new Set([10,20,30])
let arr = [...set]
console.log(arr)
console.log(arr[0])
}
// test2()
function test3(){
// let arr = [10,20,10,30,20]
// console.log(arr)
// let set = new Set(arr)
// arr = [...set]
// console.log(arr)
// 代码行数越少出错概略越低
let arr = [10,20,10,30,20]
arr = [...new Set(arr)]
console.log(arr)
}
test3()
</script>
</body>
</html>
3.map
-复杂数据类型
-作用
是一个数据集合，是一个类似于对象Object的数据集合
Map存储的数据也是key/value形式，key可以是任意类型，Object对象key是字符串类型
创建
let map=new Map()//空Map
let map=new Map([['name':'jack'],[100,18]])
属性和方法
Map数据的键值对个数：size
添加键值对 set
获取值 get（key）
清除数据 clear
判断是否存在 has（key）
删除 delete
特点：
查找存储在map中的数据，可以不用遍历直接获取
value=map.get(key)
<!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>Map</title>
<!--
Map
=> 复杂数据类型
=> 作用
是一个数据集合，是一个很类似于对象Object的数据集合
Map存储的数据也是key/value形式， key可以是任意类型
=> 创建
let map = new Map()
let map = new Map([ ['name','jack'], [100,18] ])
=> 属性和方法
size
set
get
delete
clear
has
=> 特点:
查找存储在map中的数据，可以不用遍历，根据key直接获取
value = map.get(key)
-->
</head>
<body>
<script>
function test3() {
let arr = [
{ name: '钢筋', value: 11 },
{ name: '水泥', value: 12 },
{ name: '混泥土', value: 13 },
{ name: '加气砖', value: 14 },
]
// value:12 -> 名称name是什么?
// 遍历数组
// arr.forEach(item=>{
// if(item.value == 12){
// console.log(item.name)
// }
// })
// let item1 = arr.find(item => item.value == 12)
// console.log(item1.name)
// 数组->Map
let map = new Map()
arr.forEach(item=>{
map.set(item.value,item.name) // [11,'钢筋']
})
console.log(map.get(12))
}
test3()
function test2() {
let map = new Map([
['name', 'jack'],
[100, 18],
])
console.log(map)
console.log(map.size)
//添加元素
map.set(true, '成立')
console.log(map)
//获取元素
console.log(map.get('name'))
//删除元素
map.delete('name')
console.log(map)
//判断集合是否有数据
let isHas = map.has('name')
console.log('isHas ', isHas)
}
// test2()
function test1() {
// Object对象属性名是字符串类型, 值可以任意类型
let obj = {
name: 'jack',
age: 18,
say: function () {},
}
}
</script>
</body>
</html>
4.for-of
作用：遍历数字 字符串 Map
【遍历对象用for-in】
语法：
for(let v of arr){}
for(let v of str){}
for(let v of map){}
<body>
<script>
function test2() {
let arr = [10, 20, 30, 40]
for (const v of arr) {
console.log(v)
}
let str = 'hello'
for (const v of str) {
console.log(v)
}
let map = new Map([['hello','world'],[100,true]])
for (const v of map) {
console.log(v);
}
}
test2()
function test1() {
//遍历对象Object
// for-in
let obj = {
name: 'jack',
age: 18,
}
for (let key in obj) {
console.log(key, obj[key])
}
}
// test1()
</script>
</body>
5.模块化语法 import/export
模块化
-没有给js文件都可以看作一个模块 xx.js
-每个js模块中的内容与其它模块相互独立
-模块间通讯
方式一：
1、js暴露模板
export{变量或方法,变量或方法}
2、js引入模板
import{变量或方法} from xx.js
script==>里面写 <script type='module'>
方式二：
export default xxx 一个js文件只能用一个
import A from xx.js
6.js错误处理机制
执行JavaScript引擎负责执行JavaScript代码，如果发现错误代码，js引擎抛出异常错误，如果异常错误没有处理语句，错误会继续向上抛，直到系统处理
系统处理方式：终止程序执行，在控制台显示异常错误信息
1.异常错误的类型
SyntaxError 语法错误
ReferenceError 引用错误
TypeError 类型错误
RangeError 值超出有效范围时发生错误
2.自己捕获异常进行处理
try{
//可能发生异常的代码
}catch（error）{
}finally{
//有无错误都会执行
}
<body>
<h2>js错误处理机制</h2>
<script>
function test2() {
try {
const num = 100
num = 200
} catch (error) {
console.log('程序出错了 :')
} finally{
console.log('不论程序有无出错，都会执行')
}
console.log('结束');
}
test2()
function test1() {
let num = 100
// let num = 200 //Uncaught SyntaxError: Identifier 'num' has already been declared (at 07js错误处理机制.html:14:13)
const a = 1
// a = 2 // Uncaught TypeError: Assignment to constant variable
// obj.a // Uncaught ReferenceError: obj is not defined
}
</script>
</body>