ES6新语法

最新推荐文章于 2024-04-08 12:34:14 发布

黄酱！

最新推荐文章于 2024-04-08 12:34:14 发布

阅读量307

点赞数

分类专栏： JS 文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/tianranran/article/details/121853707

版权

JS 专栏收录该内容

91 篇文章 2 订阅

订阅专栏

var let const
           =>声明变量
              =>不重复  
              =>let 声明的变量没有变量提升，必须先声明在使用
              =>let const 块作用域

            
            全局作用域
            局部作用域
            块作用域
               function fn(){
                   var num = 100
               }
               var num = 200
           
            const 与 let 区别：
              const声明变量只能赋值一次，称为常量

 // let num = 100
        // let num = 200 //Identifier 'num' has already been declared

        // let num = 100
        // console.log(num); //Cannot access 'num' before initialization


let num = 100
        if(true){
            num = 300
        }

        function fn(){
            let num = 400

        }

箭头函数

 箭头函数
          => 简化函数声明写法
          => 赋值式函数定义
              const fn = function(){}
              function fn(){}
          => 语法:
              (形参)=>{函数体执行代码}

              const fn = function(){}
              const fn = ()=>{}
          => 特殊写法
             1. 函数体执行代码只有一行，大括号可以不写
             2. 函数体执行代码只有一行代码并且有返回值时,大括号和return都可以不写
             3. 形参只有一个时，括号可以不写
          
          => this关键字
              箭头函数中this指向应用上下文


const fn1 = function (a, b) {
            console.log('赋值式函数', a, b);
        }

        //箭头函数
        const fn2 = (a, b) => {
            return a + b
        }

        const fn3 = (a,b) => a + b

        // 1. 函数体执行代码只有一行是，大括号可以不写
        const fn = (a, b) => console.log('箭头函数', a, b);

        // fn(11, 21)
        let sum = fn3(11,21)
        console.log(sum);

        const fun = a => a

        // const fun = (a) => {
        //     return a
        // }

        let m = fun(100)
        console.log(m);

箭头函数中this指向应用上下文

const obj = {
            name: 'jack',
            say: function () {
                console.log('obj say this->', this);
            }
        }	整个对象

        const obj1 = {
            name: 'rose',
            say: () => {
                console.log('obj say this->', this);
            }
        }	window对象

默认函数值
 const fn = (a = 10)=>{
            // a = a || 10
            console.log(a);
        }

        // fn(10)
        fn(20)
        默认10 传实参20

解构赋值
<title>解构赋值</title>
</head>
<body>
    <script>
        const obj = {
            name:'jack',
            age:20
        }
        // let name = obj.name
        // let age = obj.age

        let {name,age} = obj

        console.log('name ',name, ' age ',age);

        const arr = ['jack','rose','tom']
        let [a,b,c] = arr
        console.log('a :',a , ' b :',b , ' c ',c);

展开运算符

const arr = [1,2,3,4]
        // console.log(...arr);

        const arr1 = [5,6]

        // [1,2,3,4,5,6]

        const arr2 = [...arr,...arr1]

        console.log(arr2);

        const obj = {
            name:'jack',
            age:20
        }

        const obj1 = {
            ...obj,
            gender:'男'
        }

        console.log(obj1);

字面量简化写法

let name = 'rose'
        let age = 20

        let obj = {
            name: name,
            age: age
        }
        let obj1 = {name,age}


        console.log(obj1);