ES6的常用方法(一)
什么是es6?ES6全称 ECMAScript 6.0,2015年6月发布。现在大部分浏览器都支持ES6了。
为什么会有ES6?
- 解决了ES5的不足点。
- ES6的语法糖,写代码有质的飞跃。
- 现在各大厂面试中必有ES6,如果还不会找工作可能都会有点困难。
1,变量声明
let
let是ES6新增的,用于声明变量,块级作用域。
var:
var a='aaa';
var a='ssss'
console.log(a);
//输出 ssss
let:
let a='aaa';
let a='ssss'
console.log(a);
//输出 会报错不会输出
上面两个例子就可以看出let声明变量不会有变量覆盖的情况,这可以减少后续写代码中变量被覆盖的风险。(所以别在项目中全篇var了)
2,解构赋值
- 解构赋值是对赋值运算符的一种扩展。
- 主要争对数组或者对象进行解构。
- 代码简洁易读,大大的提高了我们的开发效率。
数组解构
//数组解构
let [a,s,d]=[1,2,3]
console.log(a,s,d)
//输出 1,2,3
//=========================================
//数组占位符
let arr=['a','s','d','f']
let [,,toArr]=arr
console.log(toArr)
//输出 d
let arr=['a','s','d','f']
let [,,,toArr]=arr
console.log(toArr)
//输出 f
//==========================================
//数组整体解构赋值
let arr=['a','s','d','f']
let arry=['q','w']
let newArry=[...arr,...arry]
console.log(newArry)
//输出 ["a","s","d","f","q","w"]
对象解构
//ES5获取对象中某个属性值的方式:
var obj={
name:'张三',
sex:88
};
console.log(obj.name);
//输出 张三
//==================================================
//ES6获取对象中的某个属性值方式:
let _obj={
name:'张三',
sex:88
};
let {name} = _obj
console.log(name);
//输出 张三
//使用es6的写法既获取了属性值同时也生命了一个属性
3,模板字符串
普通字符串写法:
let str="你好"+"世界!"
console.log(str)
//输出 你好世界!
模板字符串写法:
//字符串的拼接:
let oneStr="你好";
let twoStr="世界!";
let _str=`${oneStr}${twoStr}`
console.log(_str)
//输出 你好世界!
//=============================================
//函数的使用
function fun(str){
return str
}
let threeStr=`你好${fun('世界!')}`;
console.log(threeStr)
//输出 你好世界!
4,ES6函数
可以说用了ES6的函数后简直不要太舒服!!!
箭头函数
- 箭头函数相比普通函数,更加的简洁易用。
- 箭头函数没有this作用域的限制。
//箭头函数基本用法:
let fun = val => val;
console.log(fun('a'))
//输出 a
//上面的写法相当于
var fun = function (val){
return val
}
//===============================
//带参写法
let fun = (val1,val2)=>{
return val1+val2;
}
console.log(fun(1,2))
//输出 3
箭头函数的带参扩展写法
//默认值
let fun = (val1,val2=10)=>{
return val1+val2;
}
console.log(fun(1))
//输出 11
console.log(fun(1,2))
//输出 3
//===============================
//不定参数写法:
let fun = (...val)=>{
return val
}
console.log(fun(1))
//输出 1
console.log(fun(1,2,3))
//输出 1,2,3
这里的参数默认值,为什么第一次输出11?因为fun函数中本身是有两个参数的,只不过第二个参数默认给了10,所以当我们传参的时候不传第二个,es6就是有默认参数值了。那么第二个为什么输出3就很明了了,就不多说了。
5,数组去重
ES6提供了特别简单的去重方法Set对象
var arrSet=[1,1,1,3,3,2,2]
let arry1=Array.from(new Set([1,1,1,3,3,2,2]))
console.log(arry1)
//输出 [1,3,2]