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命令语法的练习就🆗了,各位码友可以跟着练习…