ES6新属性补充：Symbol、Set、Map、for-of的用法、模块化语法、js错误处理机制

一、Symbol

 联想以前的知识

           数据类型

             基本数据类型

                string number boolean  undefined

            复杂数据类型

                object Array Math Date String Number Boolean...

        Symbol

           ES6新增加的 基本数据类型

            ES6引入Symbol的原因

            ES6引入Symbol的原因:

                ES5的对象属性名都是字符串，很容易造成属性名冲突。

                比如，使用了一个他人提供的对象，想为这个对象添加新的方法，新方法的名字就有可能与现有方法产生冲突。

                如果有一种机制，保证每个属性的名字都是独一无二的，这样就从根本上防止了属性名冲突。

           

            Symbol表示独一无二的值

            定义

              let sym =Symbol(描述符)  描述符可以是相同的，表示的值也是独一无二

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

 <script>
        function test2() {
            let num = 100
            let str = 'helloworld'
            let sname1 = Symbol('name')
            let sname2 = Symbol('name')

            console.log(typeof num)
            console.log(typeof str)
            console.log(typeof sname1)
            console.log(sname1 === sname2)//判断铜元素的两个变量一不一样
        }
        // test2()
        function test1() {
            let num = 100
            let str = 'helloworld'
            let sname1 = Symbol('name')
            let sname2 = Symbol('name')


            let obj = {
                naem1: 'jack',
                age: 18,

            }
            let newObj = {
                ...obj,
                name2:'rose',
            }
            console.log(newObj)
        }
        // test1()
    </script>

二、Set

  javascript内置对象

        object Array Math Date String Number Boolean...

   

       

        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,3,2,4,5]

                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--

                        }

                    }

                }

               

 <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([1,2,{name:'jack'},function(){},'hello'])
            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(){
            let set=new Set([10,20,30])
            let arr=[...set]
            console.log(arr)
            console.log(arr[0])
        }
        // test2()

        function test3(){
        // let arr=[10,20,30,30,20]
        // let set=new Set(arr)
        // arr=[...set]
        // console.log(arr)


        // 代码行数越少，出错概率越低
        // 数组去重
        let arr=[10,20,30,30,20]
        arr=[...new Set(arr)]
        console.log(arr)
        }
        test3()
    </script>

三、Map

 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)

   <script>
        function test3(){
            let arr =[
                {name:'钢筋',value:11},
                {name:'水泥',value:12},

                {name:'混泥土',value:13},
                {name:'加气砖',value:14},

                ]
            // 
            // 
            // arr.forEach(item=>{
            //     if(item.value==12){
            //         console.log(item.name)
            //     }
            // })
            // let item1=arr.find(function(item,index){
            //     return item.value==12

            // })
            

            // 数组->Map
            let map=new Map()
            arr.forEach(item=>{
                map.set(item.value,item.name)
            })
            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>
    

四、for-of

  for-of

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

              对象 for-in

        语法：

            for(let v of arr){

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

            }

            let str ='helloworld'

            for(let v of str ){

                //v 字符

            }

 <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>

 五、模块化语法 import/export

           模块化

               =>每个js文件都可以看作一个模块

               =>每个js模块中的内容与其他模块相互独立相互不影响

               模块间通讯

                   第一种方法

                 a.js 暴露模块

                     export 变量名或方法

                     b.js   引入模块

                     import{变量，方法} from`./a.js`

                     index.html

                       <script type='module'>

                        import{变量，方法} from `./a.js`

                       </script>

                    第二种方法

                    export default{

                      name:'jack'

                    }

                    import A from `c.js`

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
}


// export default obj

// import {obj} from 'c.js'

index.html

<body>
    <h2>模块化编程</h2>
    <p>最大值是<span></span></p>
    <script type="module">
        // 引入js模块中的getMax方法
        import {getMax} from './a.js'
        import jackObj from './c.js'
        let max = getMax(20, 40)

        // 显示最大值
        const spanEle=document.querySelector('span')
        spanEle.innerHTML=max
        console.log('jackObj',jackObj)



    </script>


</body>

六、 js错误处理机制

             javascript 引擎负责执行Javascript代码

             如果发现错误代码，抛出异常错误，如果异常错误没有处理语句，继续向上抛，直到系统处理

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

        异常错误分类

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

           SyntaxError 语法错误

           ReferenceError 引用错误

           TypeError 类型错误

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

       

        自己捕获异常进行处理

          try{

            //可能发生异常的代码

          }catch(error){

            console.log(error)

          }

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>