ES6 -- 总结 01 - 技术栈

let关键字的基本上使用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- es6新增了一个关键字let用来声明变量的 -->
     <script>
        //  let a = 10;
        //  console.log(a)
        console.log()//undefined
        // var 变量的提升
        // b = 10;
        // var b;
        // let没有变量提升
        // 如果将来写项目，你感觉你的代码有可能报错，你写的代码对项目影响比较大那你就try catch

        try {
            // 把你感觉有可能报错的代码扔到try里面
            console.log(c)
            let c = 123
        } catch (e) {
            // catch捕获错误的
            console.log(e)
        }
        var b =10
       
        // 
        var d = 10;
        var d = 30;
        console.log(d)
        // 再同一作用域下let的变量名不能重复
        // let t = 55;
        // let t = 66;
        // console.log(t)
        // es6之前学了哪些作用域
        // 全局作用域和局部作用域
        // 函数体内外
        // function a (){
        //     var b 
        // }
        // es6新增了块级作用域
        // {}就是一个块级作用域
        if(123){
            var str = '我是var'
            // let声明的变量没有变量提升只在当前作用域生效
            let num = 123
            if(999){
                console.log(str)
                console.log(num)
            }
        }
        if(888){
            let num  = 55
            console.log(str)
            // console.log(num) //ReferenceError: num is not defined
        }
        console.log('str最外层的作用域',str)
        console.log('num最外层的作用域',num)//ReferenceError: num is not defined
        // let新特性 
        // 1.let声明的变量没有变量提升
        // 2.let声明的变量不能重复声明（同一作用域下）
        // 3.let声明的变量存在块级作用域
     </script>
</body>
</html>

const关键字

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // cosnt关键字是用来声明常量的 
        // 常量就是不变的量
        // 声明常量的时候一般需要大写

        // 基本数据类型
        // nubmber string boolean underfined null

        // 引用数据类型（复杂数据类型）
        // object 

        // 声明常量的时候必须进行赋值操作
        // 基本数据的常量一旦赋值不逊于再去修改
        const FLAG = true;
        // FLAG = false
        console.log(FLAG)
        // 引用数据类型的常量
        const OBJ = {
            name:"小明"
        }
        OBJ.name = 'san'
        console.log(OBJ)
        // 同一作用域下不能同名
        // const A =1
        // const A =2
        //const也具有块级作用域
        {
            const A =1
        }
        console.log(A)
    </script>
</body>
</html>

解构

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 解构
        // 解构有两部分组成
        // 解构的源 =的右边部分
        // 解构的目标 =的左边部分
        {
            let [a,b,c] = [1,2,3];
            console.log(a,b,c); // 1 2 3
        }
        {
            let [a,[b,c]] = [1,[2,3]];
            console.log(a,b,c); // 1 2 3
        }
        // 忽略某个
        {
            let [a,,c] = [1,2,3];
            console.log(a,c); //1 3
        }
        // 剩余运算符
        // 把多个东西揉到一个变量里面
        {
            let [a,...t] = [1,2,3,4,5,6,7]
            console.log(a,t); // 1 [2, 3, 4, 5, 6, 7]
        }
        // 结构赋值的时候能不能设置默认值呢
        {
            let [a=1,b=2] = [,3];
            console.log(a,b); //1 3
        }
      
    </script>
</body>
</html>

对象的解构

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        {
            let obj = {
                name:'san',
                age:20
            }
            // 对象的解构 按需解构
            // let {name:name,age:age} = obj;
            let {name,age} = obj;
            console.log(name)
            console.log('age',age)
            let {alert} = window;
            console.log(alert)
            let {name:yourName} = obj;
            console.log(yourName)
            // 扩展运算符
            let obj2 = {
                sex:'男',
                ...obj,
            }
            console.log(obj2)
        }
        {
            // 对象的简写
            // key:value
            // 对象的简写就是 key value一致时可以简写
            let name = '小明'
            let age = 20
            let obj = {
                name,
                age,
                // singIng:function(){

                // }
                singIng(){

                }
            }
            console.log(obj)
        }
    </script>
</body>
</html>

symbol数据类型

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // let arr = new Array()
        // symbol 是一个基本数据类型 不能new
        // symbol 代表独一无二的值
        let str1 = Symbol('123')
        let str2 = Symbol('123')
        console.log('str1', str1) // Symbol(123)
        console.log(str1 == str2) // false
    </script>
</body>
</html>

Map对象

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 普通对象 是无序键值对的集合
        let obj = {
            name:'san',
            age:20
        }
        console.log(obj)
        // map对象
        // 有序的键值对集合 key=>value
        let map = new Map()
        
        map.set('name','stan')
        console.log(map)
        // map对象的key可以是任意值
        map.set(obj,'我是特殊key的值')
        console.log(map)
        // 遍历map对象
        map.forEach(function(item,index){
            console.log(item)//value
            console.log(index)//key
        })
        // es6 for in 遍历对象
        for(let key in obj){
            console.log(key)//对象的key
        }
        let arr = ['a','b','c']
        for(let key in arr){
            console.log('arr的key',key)//索引下标
        }
        // es6又新增了一个循环for of
        for(let key of arr){
            console.log('for of循环数组的key',key)//数组中的值
        }
        // for of不能循环普通对象
        // for(let key of obj){
        //     console.log('for of循环对象的key',key)
        // }
        // 循环遍历map对象一般用for of
        for (let [a,b] of map){
            console.log(a)
            console.log(b)
            
        }
    </script>
</body>
</html>

set实现数组的去重

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 数组去重
        // es6新增了一种数据结构是set 里面的值具有唯一性没有重复的值
        // Set本身是构造函数，用来生成Set数据结构

        let set1 = new Set([1,2,3,4,5,5,5]);
        
        set1.add(5)
        console.log(set1); Set(5) {1, 2, 3, 4, 5}
        // 转换成正常的数组
        // 扩展运算符
        let arr = [...set1]
        let arr2 = Array.from(set1)
        console.log(arr2); // [1, 2, 3, 4, 5]
        console.log(arr); // [1, 2, 3, 4, 5]
    </script>
</body>
</html>

proxy代理的基本使用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 你现在可以对对象进行读写操作
        let obj = {
            name:'小明',
            age:"20"
        }
        // 为什么要学习代理 Proxy() 数据的私有化处理 就可以用到代理
        // target 目标对象 handler处理函数
        // Proxy(target, handler)
        let handler = {
            get:function(target,key){
                console.log('get读取数据')
                console.log(target)
                console.log(key)
            },
            set:function(target,key,value){
                console.log('set设置数据')
                console.log(target)
                console.log(key)
                console.log(value)
            }
        }
        let proxy = new Proxy(obj,handler)
        // console.log(proxy)
        console.log('proxy',proxy.name)//读数据走get
        proxy.age = '99'//写数据走set
    </script>
</body>
</html>

字符串的方法

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 字符串的方法
        let str = 'hello world';
        console.log(str.includes('hel'))
        console.log(str.startsWith('h'))
        let aa = 'aa'
        // 重复
        console.log(aa.repeat(4))
        // 头部添加
        console.log(aa.padStart(6,'p'))
        // 指数的运算
        // 幂运算
        console.log(2 ** 3)
    </script>
</body>
</html>

对象的新方法

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let obj = {
            name:'小明',
            age:20
        }
        let obj1 = {
            name:'小明',
            age:20
        }
        console.log(obj==obj1)  // false
        console.log(Object.is(obj,obj1)) // false
    </script>
</body>
</html>

数组的新方法

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // Array.of()
        // Array.of()将参数中所有值作为元素形成数组。
        console.log(Array.of(1, 2, 3))
        // Array.from()将类数组对象或可迭代对象转化为数组

        function fun(){
            // arguments 是所有参数的一个集合
            console.log('arguments',Array.from(arguments))
        }
        fun('a','b','c')

        // find() //返回符合条件的第一个元素
        // findIndex() //返回符合条件的第一个元素的索引
        // 找到符合条件的元素之后后面的就不遍历了
        let arr =['lol','12345','dnf','csgo','cs','cf']
        let  index = arr.findIndex(function(item,index){
            // console.log(item)
            // console.log(index)
            return item.length>4
        })
        console.log(index)

        // 抚平数组--数组扁平化 ---多维变一维
        let arr2 = [1,[2,3,[4,5]]]
        console.log(arr2.flat())
        console.log(arr2.flat(888))

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