JavaScript学习笔记15

Amy_cx

已于 2022-09-03 23:29:32 修改

阅读量305

点赞数

文章标签： javascript 学习前端

于 2022-09-03 23:28:26 首次发布

本文链接：https://blog.csdn.net/amy_cx/article/details/126683134

版权

五、模块化语法 import / export

六、js错误处理机制

一、Symbol

1.联想以前的知识

数据类型：

- 基本数据类型：string number boolean null undefined

- 复杂数据类型：Object Array Math Date String Number Boolean

2.Symbol

- 它是ES6新增加的基本数据类型

- ES6引入Symbol的原因：

ES5的对象属性名都是字符串，很容易造成属性名冲突。比如，使用了一个他人提供的对象，想为这个对象添加新的方法，新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的，这样就从根本上防止了属性名冲突。

- Symbol表示独一无二的值

- 定义：

let sym = Symbol(描述符)

描述符=>描述当前symbol表示什么意义

- 检査数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>symbol</title>
</head>
<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) //false，因为它们是独一无二的
        }
        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>
</html>

二、Set

作用：存储无序数据的集合，属于复杂数据类型。

创建：

let set = new Set() //空集合

用中括号[ ]装起来，里面可以是任意类型：number、object、函数、string

let set = new Set([1,2,{name:'jack'},function(){},'hello'])

属性和方法：

size add delete clear

遍历集合set.forEach()

特点：集合set中元素不能重复

应用：数组去重。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>set</title>
</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>

三、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)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Map</title>
</head>
<body>
    <script>
        function test1() {
        // Object对象属性名是字符串类型, 值可以是任意类型
            let obj = {
                name: 'jack',
                age: 18,
                say: function () {},
            }
        }
        // test1()

        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)

            //判断集合是否有数据，有true，无false
            let isHas = map.has('name')
            console.log('isHas ', isHas)
        }
        // test2()

        function test3(){
            arr =[
                {name:'钢筋',value:11},
                {name:'水泥',value:12},
                {name:'混凝土',value:13},
                {name:'砖',value:14},
            ]
            // 遍历数组
            let item1 = arr.filter(function(item){
                return item.value == 12
            })
            console.log(item1[0].name)

            let item2 = arr.find(item=>item.value == 12)
            console.log(item2.name)
            
            //数组->Map
            let map = new Map()
            arr.forEach(item=>{
                map.set(item.value,item.name)
            })
            console.log(map.get(12))
            console.log(map)
        }
        test3()

    </script>
</body>
</html>

四、for-of

作用：遍历数组、字符串、Map

语法：

for(let v of arr){

//遍历数组 v:数组元素

}

let str = 'hellword'

for(let v of str){

//v字符

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>for-of</title>
</head>
<body>
    <script>
        function test1(){
            // 遍历对象Object
            //for in
            let obj = {
                name:'jack',
                age:18
            }
            for(let key in obj){
                console.log(key,obj[key])
            }
        }
        // test1()
        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);
                console.log(v[0]);
            }
        }
        test2()
    </script>
</body>
</html>

五、模块化语法 import / export

- 每个js文件都可以看作一个模块 xx.js

- 好处：每个js模块中的内容与其它模块相互独立

- 模块间通讯

第一种方式：

a.js 暴露模块

        export 变量或方法名

b.js 引入模块

        import {变量,方法} from './a.js'

index.html

        <script type="module">

                 import {变量,方法} from './a.js'

        </script>

第二种方法（一个js文件里只能用一次）

export default {

name:'jack'

}

import A from 'c.js' //A处的名字不用一一对应

index.html

<!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>模块化编程</title>
</head>
<body>
	<h2>模块化编程</h2>
	<p>最大值是<span></span></p>

	<script type="module">
		import { getMax } from './a.js' // 引入a.js模块中的getMax方法
		import jackObj from './c.js'
		let max = getMax(20, 34)
		
		// 显示最大值
		const spanEle = document.querySelector('span')
		spanEle.innerHTML = max 

		console.log('jackObj ',jackObj)
	</script>
</body>
</html>

a.js

import { getSum } from './b.js'
let num = 100

//直接在需要暴露的方法前加export
export const getMax = function(m,n){
    let max = m
    if(n > max){
        max = n
    }
    return max
}

let sum = getSum()
console.log('sum ',sum)

// export {getMax,num}

b.js

export const getSum = function(){
    let arr = [10,20,30]
    return arr.reduce((privous,current)=>privous = privous + current,0)
}

c.js

export default {
    name:'jack',
    age:18
}
// const obj = {
//     name:'jack',
//     age:18
// }
// export default obj

六、js错误处理机制

javascript引擎负责执行javascript代码，如果发现错误代码，抛出异常错误，如果异常错误没有处理语句，继续向上抛，直到系统处理。

系统处理方式：终止程序执行，在控制显示异常错误信息。

异常错误类型：

- 每个异常对应一个异常对象

- SyntaxError 语法错误

- ReferenceError 引用错误

- TypeError 类型错误

- RangeError 值超出有效范围时发生的错误

throw语句的作用是手动中断程序执行，抛出一个错误。对于 JavaScript 引擎来说，遇到throw语句，程序就中止了。引擎会接收到throw抛出的信息。

自己捕获异常进行处理：

try{

// 可能发生异常的代码

}catch(error){

console.log(error)

}

<!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>js错误处理机制</title>
	</head>
	<body>
		<h2>js错误处理机制</h2>
		<script>
			function test2() {
				try {
					const num = 100
					num = 200
				} catch (error) {
                    console.log('程序出错了 :',error)
                } 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
			}
			test1()
		</script>
	</body>
</html>