ES6简单语法学习

最新推荐文章于 2024-08-11 18:40:36 发布

小白学习日记

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量216

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_46533814/article/details/122898462

版权

文章目录

ES6简单语法

ES6简单语法

常量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6</title>
</head>
<body>
<script>
    /*
    1.声明变量:var会变量提升 let不会
    2.const常量，不允许修改，声明必须初始化
    const PI = 3.14159;
    PI=3  TypeError: Assignment to constant variable
    const AGE;声明必须初始化
    SyntaxError: Missing initializer in const declaration
     */
</script>
</body>
</html>

解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据段获取

<script>
	//js  				  	       
	let a=1,b=2,c=3
    console.log(a,b,c)

    //es6数组解构
    let [x,y,z] = [10,20,30]
    console.log(x,y,z)

    //js对象
    let person =  {
        name: '张三',
        age: 16
    }
    let name1 = person.name;
    let age1 = person.age
    console.log(name1,age1)
    //es6对象解构
    let {name,age} = person;//解构的变量必须和user中的属性同名
    console.log(name,age)
</script>

模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符
串，还可以在字符串中加入变量和表达式。
字符串插入变量和表达式，变量名写在${}中m${}可以放入js表达式

<script>
	let name = '张三'
    let age = 16
    let info = `我的名字是${name},年龄：${age}`
    console.log(info)
</script>

声明对象简写

<script>
     const age = 12
     const name = '张三'

     //js
     const person1 = {age: age,name: name}
     console.log(person1);

     //es6
     const person2 = {age,name}
     console.log(person2)
</script>

方法简写

<script>
    //js
    const person1 = {
        sayHi: function (){
            console.log('Hi')
        }
    }
    person1.sayHi()

    //es6
    const person2 = {
        sayHi() {
            console.log('Hi')
        }
    }
    person2.sayHi()
    </script>

对象拓展运算符

“…”：用于去除参数对象所有可遍历属性，然后拷贝到当前对象

 <script>
    let person = {name: '张三',age: 15}
    let someoneOld = person //引用赋值
    let someone = {...person} //对象赋值/拷贝
    someoneOld.name = '李四'
    someoneOld.age = 99
    console.log(person) //age: 99 name: 李四
    console.log(someoneOld) //age: 99 name: 李四
    console.log(someone) //age: 15 name: 张三
</script>

函数的默认参数

  <script>
    function showInfo(name,age = 17){
        console.log(name + "," + age)
    }
    //只有在未传递参数，或者参数为undefined时，才会使用默认参数
    //null值被认为是有效的值传递
    showInfo("张三",18) //张三,18
    showInfo("张三",)  //张三,17
    showInfo("张三",undefined) //张三,17
    showInfo("张三",null) //张三,null
</script>

箭头函数

提供了一种更加简洁的函数书写方式
注意：当箭头函数没有参数或者有多个参数，要用()括起来
当箭头函数函数体有多行语句，用{}包裹起来，表示代码块
当只有一行语句，并且需要返回结果时，可以省略{}，结果会自动返回

 <script>
    //语法： 参数 => 函数体
    let arr = ["10","5","6","8"]
    let arr1 = arr.sort()
    console.log(arr1)

    arr2 = arr.sort(function (a,b){
        return a - b
    })
    //无参简写
     let a = () => "admin"
    console.log(a()) //admin
    //多参简写
    arr2 = arr.sort((a,b)=>{return a-b})
    arr2 = arr.sort((a,b) => a - b)
    console.log(arr2)
    //一个参数
    let stu = val => val;
   	console.log(stu("张三")) //张三
   
     let f3 = (a,b) => {
        let result = a + b
        return result
    }
    console.log(f3(6,2)) //8
    //简写
    let f4 = (a,b) => a+b
    console.log(f4(5,4)) //9
</script>

小白学习日记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6简单语法学习

文章目录ES6简单语法常量解构赋值模板字符串声明对象简写方法简写对象拓展运算符函数的默认参数箭头函数ES6简单语法常量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>es6</title></head><body><script> /* 1.声明变量:var会变量提升
复制链接

扫一扫