博客仅用来记录自己的学习历程,如果有错,希望您能私信我,或者在评论区提出,感谢
1.let与const
如果要说起es6,首先当然要说说let与const,那let又是什么,let,其实是es6新推出的,用来定义变量的关键字,用来取代已经老旧的var。
let的特点:有块级作用域,意思就是,变量的有效范围,只在它所在位置的一前一后的两个大括号中间。
没有预处理,意思是,不能在声明变量之前使用它。
不能重复定义。
let的作用与应用:作用就是定义一个变量,应用在循环遍历监听,比var方便很多
let btns = document.getElementsByTagName("button");
for( i = 0;i<btns.length;i++){
var btn = btns[i];
btn.onclick = function () {
alert(i);
}
} // 点击按钮的结果,分别弹出的是3 3 3,因为var在这是全局的变量,循环结束后,i为3,
//所以,进行点击回调的时候,弹出的是3
let btns = document.getElementsByTagName("button");
for(let i = 0;i<btns.length;i++){
var btn = btns[i];
btn.onclick = function () {
alert(i);
}
} // 点击按钮的结果,分别弹出的是3 3 3
//因为let的作用域只是在循环体之间,当进行回调的时候,调用的是局部的i,而不是全局的i
const:定义一个常量,不可改变,其他的特点与let相同
2.解构赋值
解构赋值的主要理解就是,从数组或者对象中取值,然后赋值给多个变量。
而解构赋值的用途多用在给函数的多个形参赋值的时候。
//首先声明一个对象,一个数组
let obj = {
name:"小明",
age:10
}
let arr = [1,2,"333"];
//用解构赋值的方法,将obj中的name,age属性赋值给全局变量name,age
//注:如果要提取对象中的属性,声明变量时,一定要用大括号,大括号中的变量名,会一一对应
//目标对象中的同名属性
let {name,age} = obj;
//用解构赋值的方法,将arr中下标为0,1的数据赋值给了全局变量a,b
//注:如果要提取数组中的数据,则声明变量时,要用中括号括住,每个变量会与数组中相应的下标
//一一对应
let [a,b] = arr;
console.log(name,age);//小明 10
console.info(a,b); //1 2
//使用解构赋值的方法传递参数
function fun({name}) {
console.log(name);
}
fun(obj)
3.模板字符串
在使用字符串加变量拼接成一个新的字符串的时候,我们都需要用引号,加号,引号,加号之类的方法去拼接,这样的效率无疑是非常低下的,而es6给我们提供了模板字符串,让字符串加变量变得简便了很多。
es6模板字符串的拼接方式为 `` 两个重音符,把要拼接的字符串与变量写在里面,而变量则要写在 ${} 里面
`这里写字符串${这里是变量}字符串 `
let usernmae = "kobi",age = 40;
//相对于旧的拼接方式,新的模板字符串无疑是非常方便的
let str = `我叫${usernmae}我今年${age}岁了`;
let str2 = "我叫"+usernmae+"我今年"+age+"岁了";
console.log(str);//我叫kobi我今年40岁了
4.对象的简写方式
在es6中,对象中的属性和方法都是可以简写的
属性:如果在全局作用域中有同名属性,则属性值,可以省略不写,只写属性名就行
方法:方法可以省略function
let username = "2333";
let obj = {
username,
shuo(){
console.log("我也不知道我要说什么");
}
}
console.log(obj);
obj.shuo();//我也不知道我要说什么
5.箭头函数
在es6中,新增了一种声明函数的方式,即为箭头函数
let 函数名 = (参数) =>{函数体}
箭头函数与普通函数最大的区别就是 this,箭头函数没有自己的this,箭头函数的this,在于定义箭头函数时,它的外部,是否有普通函数,如果有,则普通函数的this就是箭头函数的this,如果没有,则this为window。
var obj = {
name:"obj",
fun8:()=>{
console.log(obj.name);
}
};
//外部有常规函数,this为常规函数的this,即为obj;
function fun5() {
console.log(this)
let fun6 = () => {
console.log(this)
}
return fun6;
}
//外部没有常规函数,this为window
let fun7 = () => {
console.log(this)
}
fun5.call(obj)();// obj
// obj
fun7(); //window
接下来是箭头函数的一些书写规则
let fun1 = name => console.log(name) // 一个形参时,形参位置可以没有括号
let fun2 = (name,age) => console.log(name,age)//两个即两个以上的形参,则需要括号,形参之间用逗号隔开;
let fun3 = name => name//如果函数体只有一行且没有大括号,那么这一行的执行结果会被直接返回
console.log(fun3("小明"));// 小明
let fun4 = (naem,age) => {
console.log(name);
console.log(age);
}//如果有两条以上的函数体,则需要大括号
6.三点运算符
三点运算符是es6为了取代arguments而定义的,因为arguments只是一个伪数组,没有一般数组的方法,而三点运算符是真的数组,而且比较灵活,不过三点运算符只能用来提取形参最后的参数。
function fun(...value){}
function fun(...value) {
console.log(value);
//三点运算符拥有数组的一般方法
value.forEach(function (item,index) {
console.log(item,index);
})
}
function fun2(a,