ES6——01(命令语法)

ES6命令语法

  1. Let命令
  2. Const命令
  3. 箭头函数
  4. 函数的参数默认值
  5. 操作符…
  6. 解构
  7. 重构
  8. for…of循环

Let命令

与var的主要区别为作用域不同

示例
//let定义  作用域不同
    {
        let i=10;
        var j=20;
    }
    console.log(j);//20
    // console.log(i);//报错
    for(var a=0;a<10;a++){
        console.log("var a="+a);
    }
    console.log("外面var a="+a);//10
    for(let b=0;b<10;b++){
        console.log("let b="+b);
    }
    // console.log("外面let b="+b);//报错

    var arr=[];
    for(let i=1;i<10;i++){
        arr[i]=function(){
            console.log(i);
        }
    }
    arr[6]()//6

Const

常量 用来声明只读变量 作用域与let一样

示例
 const PI=3.14;
    // PI=12;//报错
    const stu={};//对象 stu的内存地址不能被修改
    stu.name="temo";
    console.log(stu.name);
    stu=new Object();//报错

箭头函数(是一种简写方式)

1、无参数或多个参数时小括号必须得写,有一个参数时可省略不写
2、当代码块语句只有一句时可省略花括号否则需要加花括号并且以return返回
3、当返回值为对象时,省略return的情况下需加上小括号

无参无返
//无参无返    
    let fn1=function(){
        console.log("无参无返");
    }
    fn1();
    let fn2=()=> console.log("无参无返2");
    fn2();
有参无返
//有参无返
    let fn1=function(name,age){
        console.log("有参无返"+name+age);
    }
    fn1("碰磕1",17);
    let fn2= (name,age)=>console.log("有参无返"+name+age);
    fn2("碰磕2",18);
无参有返
//无参有返
    let fn3=function(){return 50;}
    console.log("返回值="+fn3());
    let fn4=()=>100;
    console.log("返回值="+fn4());
有参有返
//有参有返
    let fn3=function(a,b){return a+b;}
    console.log("a+b="+fn3(3,5));
    let fn4=(a,b)=>{
        console.log("参数a="+a);
        console.log("参数b="+b);
        return a+b;
    };
    console.log("a+b="+fn4(6,7));
返回值为对象
//返回值为对象
    var fn5=function(){
       return {'name':'碰磕','age':18};
    }
    console.log(fn5().name);//碰磕
    var fn6=()=>({'name':'碰磕','age':18});
    console.log(fn6().age);//18

函数的参数默认值

直接在参数上赋值

示例语法
//函数的参数默认值
    function hello(name='无名氏'){
        console.log("hello:"+name);
    }
    hello('碰磕');

操作符…

…就是Spread/Rest操作符,具体是(Spread)展开还是(Rest)可变数量参数,需要看上下文语境

Spread展开模式
示例
 function foo(x,y,z){
        console.log("三个数的和为="+(x+y+z));
    }
    let arr=[3,2,1];
    foo(...arr);
Rest可变数量参数(主要被用于函数传参时)
示例
 	function foo1(...args){
        console.log(args);  //args为数组
    }
    foo1(1,2,3,4,5);//[1,2,3,4,5]

解构

解构表示从数组和对象提取值并赋值给独特的变量,解构对象即获取对象中的属性值

示例语法
对象解构
//对象解构
   
   let stu={
       name:'碰磕',
       age:18,
       sex:'男'
   };
   //ES5语法
   
   //var name=stu.name;
   //var age=stu.age;
   //var sex=stu.sex;
   
   //ES6语法(变量名必须要与属性名同名)
   let {name,age,sex}=stu;
   console.log(name);//碰磕
   console.log(age);//18
   console.log(sex);//男
数组解构
	//数组解构
   let arr=['aa','bb','cc'];
   let [x,y,z]=arr;
   console.log(x,y,z);

重构

重构表示与解构相反

代码示例
 //重构
   let name='人马';
   let age=18;
   let sex='男';
   let stu={name,age,sex};
   console.log(stu);

for…of循环

只循环访问对象中的值

代码示例
//for...of循环
  let arr=['aa','bb','cc','dd'];
  Array.prototype.fn=function(){};//给Array的原型添加函数
  //普通for循环不能循环出函数
//   for(let i=0;i<arr.length;i++){
//       console.log(arr[i]);
//   }
 //for...in会把所有属性都循环出来
//   for(let i in arr){
//       console.log(arr[i]);
//   }
    for(let num of arr){
        console.log(num);//num是值
    }

练习

1、给页面中的所有按钮绑定点击事件,当点击这些按钮时弹出“这个页面的第几个按钮”。

	<h1>作业</h1>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
	//1
    let btns=document.querySelectorAll("button");
    for(let i=1;i<=btns.length;i++){
        btns[i-1].onclick=()=>console.log("这个页面的第"+i+"个按钮");
    }

2、分别定义无参无返回,有参无返回,无参有返回和有参有返回的箭头函数,并且调用它。

 //2
    //无参无返
    let fun1=()=>console.log("Homework无参无返");
    fun1();
    //有参无返
    let fun2=num=>console.log("Homework有参无返"+num);
    fun2(2);
    //无参有返
    let fun3=()=>"Homework无参有返";
    console.log(fun3());
    //有参有返
    let fun4=num=>"Homework有参有返"+num;
    console.log(fun4(4));

3、定义三个变量snum,name,classroom三个变量,通过重构将这三个变量合并成一个对象。

//3
    let snum='001';
    let name='碰磕';
    let classroom='C1901';
    let stu1={snum,name,classroom};
    console.log(stu1);

4、var dog = {n:“旺财”,weight:2,color:“黑色”};通过解构取出旺财的所有属性值。

//4
    var dog = {n:"旺财",weight:2,color:"黑色"};
    let {n,weight,color}=dog;
    console.log(n);
    console.log(weight);
    console.log(color);

5、定义一个学生对象,包含一个eat方法,通过解构取出这个方法并调用它。

//5
    let student={
        eat:()=>  console.log("我要吃好吃的")
    }
    let {eat}=student;
    eat();

6、定义一个没有参数个数限制的函数,打印出输入的参数个数。

//6
    let fun6=(...param)=>{
        console.log("输入参数的个数:"+param.length);
    }
    fun6(1,2,3,4,5)

ES6命令语法的练习就🆗了,各位码友可以跟着练习…

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

碰磕

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

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

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

打赏作者

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

抵扣说明:

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

余额充值