ES6的常用方法(一)

什么是es6?ES6全称 ECMAScript 6.0,2015年6月发布。现在大部分浏览器都支持ES6了。

为什么会有ES6?

  1. 解决了ES5的不足点。
  2. ES6的语法糖,写代码有质的飞跃。
  3. 现在各大厂面试中必有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,解构赋值

  1. 解构赋值是对赋值运算符的一种扩展。
  2. 主要争对数组或者对象进行解构。
  3. 代码简洁易读,大大的提高了我们的开发效率。

数组解构

//数组解构
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的函数后简直不要太舒服!!!

箭头函数
  1. 箭头函数相比普通函数,更加的简洁易用。
  2. 箭头函数没有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]