前言
ES6， 全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版。使用ES6語法可以大大的減少JS代碼，弊端是瀏覽器并不識別ES6語法，主流瀏覽器一般都是將ES6語法轉為ES5語法。本編文章講解的都是一些工作中常用到的知識點，并不包含所有知識點。
ES6
demo地址: https://github.com/pengjunshan/WebPJS/ES6
其它Web文章
CSS浮動的使用和解決浮動的五種方法
CSS定位relative、absolute、fixed使用總結
原生開發WebApi知識點總結
開發中常用jQuery知識點總結
C3動畫+H5+Flex布局使用總結
Vue學習知識點總結
開發環境到生產環境配置webpack
待續......
本編文章會講到的知識點
- 變量聲明let、const
- 箭頭函數
- 解構賦值
- 字符串擴展
- 函數默認參數
- 對象的擴展
- 擴展運算符
- ES6遍歷數組
- ES6遍歷對象
- import和export
變量聲明let、const
ES6 新增了let命令，用來聲明變量。它的用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內有效。
特點
1.塊級作用域；
2.先聲明再使用；
3.在同作用域中不能重復聲明；
4.聲明了但沒有賦值，值是undefined
let num = 2;
let mm;//undefined
{
let num = 3;
// let num = 4;//再次聲明會報錯，提示已經聲明過num了
console.log(num)//3
}
console.log(num)//2
for (var i = 0; i < 10; i++) {
}
//i被變量提升了成為了全局變量
console.log(i)//10
for (let j = 0; j < 10; j++) {
}
// console.log(j)//報錯找不到j,因為j是局部變量出了for循環就找不到j了
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。const的作用域與let命令相同：只在聲明所在的塊級作用域內有效;
特點
1.聲明必須賦值，否則報錯；
2.一旦聲明，值不可以變；
3.可以更改對象中屬性的值
const name = '鄧紫棋'
// const sex;//報錯，提示常量聲明缺少初始值
console.log(name)
// name = '張韶涵'//報錯，常量不能改值
//可以改變對象中的屬性的值
const user = {name:'張萌萌'}
user.name = '關曉彤'
console.log(user.name)
箭頭函數
特點
1.箭頭函數里沒有this，如果要用this就是父級的this 如果父級也沒有this 那么就繼續往上找 直到找到window
2.無法使用arguments，沒有arguments對象
3.不需要 function 關鍵字來創建函數
4.不要在Vue的選項屬性或回調上使用箭頭函數
5.相當于java中的lamda表達式
//使用一:沒有入參，函數內就一行
let aa1 = function(){
return 1;
}
//轉箭頭函數，可以省略return和{}
let aa2 = ()=> 1;
//使用二：有入參，函數內就一行
let bb1 = function(num){
return num+1;
}
//轉箭頭函數，可以省略return和{}
let bb2 = num=> num+1;
//使用三：有多個入參，函數內有多行
let cc1 = function(pp,jj){
pp = pp+'你好';
return jj+'你好'
}
//轉箭頭函數，多個參數時用()包含著，
let cc2 = (pp,jj)=>{
pp = pp+'你好';
return jj+'你好'
}
console.log(cc2('aa','鄧紫棋'));//鄧紫棋你好
解構賦值
ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。
數組解構
let arr = [1,2,3];
let [a,b,c] = arr;
console.log(""+a+b+c)
對象解構
let obj = {name:'鄧紫棋',sex:'女'}
//賦給對應的字段名
let {name,sex} = obj
console.log(name+sex)
//賦給對應字段的變量,如果發現對應的字段名已經存在了可以用這種方式解構
let {name:x,sex:y} = obj
console.log(x+y)
在函數參數中使用解構
let obj = {name:'鄧紫棋',sex:'女'}
let fn =function({name,sex}){
console.log(name+sex)
}
//箭頭函數+對象解構
let fn1 = ({name,sex})=> console.log(name+sex+'fn1')
fn(obj)
fn1(obj)
字符串擴展
自從ES6出了``字符串模板標記后，再也不用雙引號拼接字符串了。如果模板中有需要插入變量值使用${變量名}來界定；
//上篇文章中組件就使用了字符串模板
const template = `
<div>
<p>你好！</p>
<p>鄧紫棋</p>
</div>
`
console.log(template)
//將表達式嵌入字符串中進行拼接。用${}來界定
let name = '鄧紫棋'
console.log(`我愛你${name}`)
函數默認參數
ES6為參數提供了默認值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。
//如果傳參了就是傳參的值，如果沒有傳參默認為6
let fn = function(num=6){
console.log(num)
}
fn();//沒有傳值默認6
fn(8);//傳了值8 num值就是8
對象的擴展
經常遇到key:value形式，把key和value命名都一樣的話可以省略:value
//鍵值對重名
let fn = function (name, age) {
return {
name: name,
age: age
}
}
//簡化 鍵值命名一樣
let fn1 = function (name, age) {
return {
name,
age
}
}
ES6 同樣改進了為對象字面量方法賦值的語法
let obj = {
fn: function () {
console.log(111111)
}
}
//省略function關鍵字
let obj1 = {
fn() {
console.log(222222)
},
}
obj.fn();
obj1.fn();
// Object.keys(obj)：獲取對象的所有key形成的數組
// Object.values(obj)：獲取對象的所有value形成的數組
// Object.entries(obj)：獲取對象的所有key和value形成的二維數組。格式：[[k1,v1],[k2,v2],…]
// Object.assign(dest, …src) ：將多個src對象的值 拷貝到 dest中（淺拷貝）。
擴展運算符
ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒...， 它可以是數組也可以是對象，可以很好的把兩個數組或者兩個對象合并在一起；
數組
在一個數組中添加元素返回一個新數組，不會除重
//數組，在一個數組中添加元素返回一個新數組，不會除重
let arr = [1,2,3,4,5]
let arr1 = [...arr,6,7,8,9,5]
console.log(arr1)//[1,2,3,4,5,6,7,8,9,5]
//兩個數組合并不會除重
let arr2 = [1,2,3,4,5]
let arr3 = [1,2,3,4,5]
console.log([...arr2,...arr3])//[1,2,3,4,5,1,2,3,4,5]
對象
1.在老對象中新增屬性返回一個新的對象;
2.兩個對象合并,后面對象會覆蓋前面重復的屬性
//對象,在老對象中新增屬性返回一個新的對象
let obj = {
name:'鄧紫棋',
age:18
}
let obj1 = {...obj,sex:'女'}
console.log(obj1)
//兩個對象合并,后面對象會覆蓋前面重復的屬性
let obj2 = {
name:'鄧紫棋',
age:18
}
let obj3 = {
name:'鄧紫棋',
age:19,
sex:'女'
}
let obj4= {...obj2,...obj3}
console.log(obj4)
函數中使用
let fn = function(...n){
console.log(n)
}
fn(1,2,3)//[1,2,3]
ES6遍歷數組
map
map()方法,map常用在修改item中屬性的值，不會改變數組的長度。
- 如果數組是值類型的，不會改變老的數組中的值；
- 如果數組的類型是對象，會改變老的數組中的值；
- item:當前元素； index:當前元素的下標；arr:當前操作的數組
//值類型數組
let arrNum = [1, 2, 3, 4, 5, 6]
//對象類型數組
let arrObj = [
{ id: 1, name: '鄧紫棋', age: 18 },
{ id: 2, name: '高圓圓', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
//如果數組是值類型的，不會改變老的數組中的值
let mapArrNum = arrNum.map((item,index,arr) => {
return item * 2
})
console.log('arrNum老的數組', arrNum)//[1, 2, 3, 4, 5, 6]
console.log('mapArrNum新的數組', mapArrNum)//[2, 4, 6, 8, 10, 12]
//如果數組的類型是對象，會改變老的數組中的值
//item:當前元素； index:當前元素的下標；arr:當前操作的數組
// let mapArrObj = arrObj.map((item,index,arr)=>{
let mapArrObj = arrObj.map((item) => {
if (item.id === 3) {
item.age = 20
}
return item;
})
console.log('arrObj老的數組', arrObj)//{ id: 3, name: '周芷若', age: 20 }
console.log('mapArrObj新的數組', mapArrObj)//{ id: 3, name: '周芷若', age: 20 }
filter
- filter()方法，用來過濾數組，返回一個新的數組;
- filter方法需要在循環的時候判斷一下是true還是false，是true才會返回這個元素然后加入到新的數組中;
let filterArrObj = [
{ id: 1, name: '鄧紫棋', age: 18 },
{ id: 2, name: '高圓圓', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
let filterArr = filterArrObj.filter((item, index, arr) => {
return item.age >= 18;
})
console.log('age大于等于18的人', filterArr)//{id:1...}{id:2...}
forEach
- forEach()方法，沒有返回值，map()、filter()都會返回一個新數組；
- forEach遍歷方式遍歷數組全部元素，利用回調函數對數組進行操作，自動遍歷數組.length次；
- 且無法break中途跳出循環，不可控、不支持return操作輸出，return只用于控制循環是否跳出當前循環；
let eachArrObj = [
{ id: 1, name: '鄧紫棋', age: 18 },
{ id: 2, name: '高圓圓', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
eachArrObj.forEach((item,index,arr)=>{
item.age>18? item.age=18:item.age=item.age
})
console.log('forEach遍歷后：',eachArrObj)//{id:1,age:18}{id:2,age:18}{id:3,age:16}
every
- every()方法，循環遍歷數組，返回一個布爾值；
- 對數組中的每一項運行給定函數，如果該函數對每一項返回true,則最后返回true。否則返回false；
let arrObjTow = [
{ id: 1, name: '鄧紫棋', age: 18 },
{ id: 2, name: '高圓圓', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
let isEvery = arrObjTow.every((item,index,arr)=>{
return item.age>18
})
console.log('every，age是否全部大于18:',isEvery)//false
some
- some()方法，循環遍歷數組，返回一個布爾值；
- 對數組中的每一項運行給定函數，如果該函數中任一項返回true，則最后返回true；
let isSome = arrObjTow.some((item,index,arr)=>{
return item.age>18
})
console.log('some(),age有大于18的嗎:',isSome)//true
for…in
- for…in;是用于遍歷包含鍵值對(key-value)的對象，對數組并不是那么友好;
- 通過arr[key]獲取當前元素,key：下標;
let arrObjTow = [
{ id: 1, name: '鄧紫棋', age: 18 },
{ id: 2, name: '高圓圓', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
for(let key in arrObjTow){
console.log('for...in:',arrObjTow[key])//{id:*,name:*,age:*}
}
for...of
- for...of;是ES6定義的新的遍歷數組的方法,直接獲取值
let arrObjTow = [
{ id: 1, name: '鄧紫棋', age: 18 },
{ id: 2, name: '高圓圓', age: 19 },
{ id: 3, name: '周芷若', age: 16 },
]
for(let val of arrObjTow){
console.log('for...of：',val)//{id:*,name:*,age:*}
}
ES6遍歷對象
for...in
- for...in;循環遍歷對象自身的和繼承的可枚舉屬性;
- 通過obj[key]獲取值，key：屬性名稱;
let obj = {id: 1, name: '鄧紫棋', age: 18}
for(let key in obj){
console.log(key+'--'+obj[key])//id--1 name--鄧紫棋 age--18
}
Object.keys(obj)
- Object.keys(obj);獲取對象中的key,組成一個數組
Object.keys(obj).forEach(key=>console.log(key+'--'+obj[key]))
import和export
導入第三方庫、插件
- import引入一個依賴包，不需要相對路徑
import vue from 'vue'
import axios from 'axios'
- import引入css、less、sass
import './index.css'
import './a.less'
export{}
- 使用export{}拋出的變量,一個文件里可以多個export；
- 可以導出多個變量, 當使用導出變量時, 需要了解導出變量原來的命名；
A.js導出
const name = '鄧紫棋'
function fn() {}
function getName() {
return name
}
export { name, getName }
//給fn另起個名字 as后面的值就是新名字
export { fn as fnn }
B.js導入
// 導入1 B.js導入，用{}分別接收每個變量和方法
import {name,fnn,getName} from 'A.js'
console.log(name)
console.log(fn())
//導入2 B.js導入，一次性導入整個類
import * as utils from 'A.js'
console.log(utils.name)
console.log(utils.getName())
export default{}
- 使用export default{}拋出,一個文件里只能有一個export default；
- 默認無法同時導出多個變量；
- 導出變量的方式非常優雅, 當使用導出變量時, 無需了解導出變量原來的命名；
// A.js導出
function getAge(){return 18}
export default{ getAge }
// B.js接收導入 接收export導出的數據需要用{}接收，接收export default導出的數據不需要用{}接收并且接收名字可以更改
import getAge from 'A.js'
export 和 export default的區別
1.export
import {getCurrTime} from './util'; //需要加花括號 可以一次導入一個也可以一次導入多個，但都要加括號
如果是兩個方法，import {getCurrTime,post} from './util';
2.export default
import utils from './util'; //不需要加花括號 只能一個一個導入
export default有單次限制，只能使用export default向外暴露一次
