ECMAScript6 语法

2024-03-13 16:56:15

声明变量 var let const

var(声明变量,有局部外可用缺陷(可越界))

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }

    console.log("我在循环外"+i);

</script>
</html>

显示结果

let(声明变量,同var,不能局部外使用(不会越界))

代码:把上面var改为let

<script>
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }

    console.log("我在循环外"+i);

</script>

显示结果

const声明一个常量

字符串扩展 includes() startsWith() endsWith()
- includes()
  startsWith()
  endsWith()
- `` 带有换行可以正常声明,正常打印
  "" 带有换行不能正常声明
结构表达式
- 解构数组
- 解构对象

函数优化

函数NaN问题

代码

<script>
    function fun1(a,b) {
        console.log(a/b);
    }

    fun1(10);
</script>

结果

函数参数默认值

代码

<script>
    function fun1(a, b) {
        /*如果b为空,就会把1赋值给b*/
        /*如果b不为空,b值不变*/
        if (!b) {
            b = 1;
        }
        console.log(a / b);
    }

    fun1(10);
</script>

<!--等同于-->

<script>
    function fun1(a, b) {
        b = b || 1;
        console.log(a / b);
    }

    fun1(10);
</script>

<!--等同于-->

<script>
    function fun1(a, b = 1) {
        console.log(a / b);
    }

    fun1(10);
</script>

结果

箭头函数

一个参数

代码

<script>
    let fun1=i=>console.log("输出i的值:"+i);
    fun1(100);
</script>

输出

多个参数,参数用()括起来

代码

<script>
    let fun2=(i,j)=>console.log("输出i的值:"+i);
    fun2(100,200);
</script>

输出

代码不止一行,逻辑用{}括起来

代码

<script>
    let fun2=(i,j)=>{
        console.log("输出i的值:"+i);
        console.log("输出j的值:"+j);
    }
    fun2(100,200);
</script>

输出

对象的函数属性简写

代码

<script>
    const person = {
        name: "daniu",
        //以前
        eat1: function (food) {
            console.log(this.name + "吃了" + food);
        },
        //箭头函数版
        //这里需要用person.name,this.name会获取不到name="daniu"
        eat2: food => console.log(person.name + "吃了" + food),
        //简写版
        eat3(food) {
            console.log(this.name + "吃了" + food);
        }
    }

    person.eat1("香蕉");
    person.eat2("苹果");
    person.eat3("菠萝");
</script>

输出

箭头函数结合解构表达式

代码

<script>
    const person = {
        name: "daniu",
        age: 25
    }

    //普通
    function fun1(person1) {
        console.log("fun1 姓名:" + person1.name + ",年龄:" + person1.age);
    }

    //箭头函数
    const fun2=person2=>console.log("fun2 姓名:" + person2.name + ",年龄:" + person2.age);

    //箭头函数+解构表达式
    const fun3 = ({name, age}) => console.log("fun3 姓名:" + name + ",年龄:" + age);

    fun1(person);
    fun2(person);
    fun3(person);
</script>

输出

map和reduce方法

map方法

代码

<script>
    let sz = ['1', '20', '-5', '3'];
    //map前输出
    console.log(sz)

    sz = sz.map(index => parseInt(index));
    //map后前输出
    console.log(sz)
</script>