前端学习第二阶段day15

于 2022-09-03 00:19:57 发布
阅读量346 收藏
点赞数
分类专栏： 二阶段学习笔记 文章标签： 前端 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58114686/article/details/126670343
版权

目录

  1.Symbol

2.Set

        创建：通过new语句 

        属性和方法：

        特点：

        应用：

3.map

        -作用

        创建

         属性和方法

        特点：

4.for-of

        作用：遍历数字 字符串 Map

        语法：

5.模块化语法 import/export

        模块化

        -模块间通讯

                方式一：

                方式二：

6.js错误处理机制

        1.异常错误的类型

        2.自己捕获异常进行处理

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>
wuyuling111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值