ES6命令语法
- Let命令
- Const命令
- 箭头函数
- 函数的参数默认值
- 操作符…
- 解构
- 重构
- 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命令语法的练习就🆗了,各位码友可以跟着练习…