Day03·ES6新增语法

Day03·ES6新增语法

  1. 定义变量时let/const和var的区别:
    1) 新增了一个块级作用域;
    if(ture){
    var n=1;
    }
    console.log(n);//1
    if(ture){
    let i=10;
    }
    console.log(i);// i is not defined报错类型:未定义
    2) 没有变量的默认提升;
    //有提升功能
    console.log(n);//undefined
    var n=1;//未赋值的变量提升至顶部
    //没有提升功能
    console.log(i);// Cannot access ‘i’ before initialization报错:初始化前无法访问"i"
    let i=10;
    3) 同一变量不能重复定义;
    var n=1;
    var n=2;
    console.log(n);//2
    let i=10;
    let i=20;
    console.log(i);// Identifier ‘i’ has already been declared报错:变量"i"已被声明
    4) 定义的变量不会自动挂载到window对象上;
    var n=1;
    console.log(window.n);//1
    let i=10;
    console.log(window.i);//undefined
    5) 存在暂时性死区(必须定义后才能使用);
    var n=1;
    if(ture){
    n=2;
    console.log(n);// Cannot access ‘n’ before initialization报错:初始化前无法访问"n"
    let n=10;
    }
    6) let和const的区别:const定义常量用(定义后常量不可更改);

  2. 字符串模板:(用 插入字符${变量} 语法代替 “插入字符”+变量 语法)

  3. 数据结构:(将复杂结构中的内容结构成一个简单的结构)
    let student{
    name:”李四”,
    age:21
    }
    let{name,age}=student;
    console.log(name);//李四
    console.log(age);//21

  4. 对象的简化写法:
    对象的简化写法

  5. 箭头函数:
    ① 语法:用变量定义 --> let a=()=>{}
    简写:a. 如果只有一个参数,可以省略小括号;
    b. 如果有且仅有一个return语句,可以省略return和花括号;
    let a=(n)=>{
    return nn; --> let a=n=>nn;
    }

② function函数和箭头函数的区别:

  1. this的指向性问题:(function中指向运行环境;箭头函数中永远指向生产环境);
    箭头函数中this指向

  2. 无提升功能;
    show();//window
    function show(){
    console.log(this);
    };
    show();//Cannot access ‘show’ before initialization未定义报错
    let show=()=>{
    console.log(this);
    }

  3. 因为this指向固定,所以不能作为构造函数使用;

  4. 没有arguments参数集合;(可以用拓展运算符(…)实现相似方法);
    arguments与拓展运算符拓展运算符与arguments区别
    b. arguments是js中默认的属性;拓展运算符需手动加入;

③ 案例:

定时变色
</div>
<script>
    //需求:点击div时,三秒后背景色变成红色
    let box=document.getElementsByClassName("box")[0]
    box.onclick=function(){
    //1)延时定时器 ,异步操作 window环境下调用所以this指向window,可以用暂时性保存变量的方法如下代码:
        var that=this;
        setTimeout({
            console.log(that)
            that.style.background="red"
        },3000)
 // 2)用箭头函数固定this指向的方法:this永远指向它的生产环境即box事件编程中,所以this就永远指向了box;如下代码:
        setTimeout(function(){
            console.log(this)
            this.style.background="red"
        },3000)
    }
    //箭头函数:如果业务中的this指向性,不想发生变化时使用箭头函数;
</script>
6. 函数参数的默认值:(函数的形参可以附带默认值,没赋默认值的写在最前面) //求三数相加的和 let sum=(a,b=1,c=2)=>a+b+c; console.log(sum(0));//3 7. 拓展运算符的使用: 1) 展开数组; //获取数组中的最大值:(先用拓展运算符展开数组后,再获取最大值) let arr=[1,2,3]; console.log(Math.max(...arr)) 2) 复制数组;(将数组复制给另一个数组,改变数组不影响之前的数组;复制的不是地址) let arr1=[1,2,3]; let arr2=[...arr,4]; arr2.push(5); console.log(arr1);//[1,2,3]没受到影响 console.log(arr2)[1,2,3,4,5] 3) 展开对象; let obj1={a:1,b:2}; let obj2={...obj1,c:3} console.log(obj1);// {a: 1, b: 2} console.log(obj2);// {a: 1, b: 2, c: 3}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

stiges

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值