声明变量 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>

输出

reduce方法

对象扩展
数组扩展
- find方法
- findIndex方法
- includes方法
111

ECMAScript6 语法

声明变量 var let const

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

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

const声明一个常量

字符串扩展 includes() startsWith() endsWith()

结构表达式

解构数组

解构对象

函数优化

函数NaN问题

函数参数默认值

箭头函数

对象的函数属性简写

箭头函数结合解构表达式

map和reduce方法

map方法

reduce方法

对象扩展

数组扩展

find方法

findIndex方法

includes方法

111

猜你喜欢