變量聲明

var 特點： 1.可以重復聲明 2.不能定義常量 3.不支持塊級作用域 復制代碼

• let

//1.不存在預解釋 變量提升 //2.暫時性死區 //3.具備塊級，同一塊內不能重復聲明;let a ={name:'xiaoming'}if(true){let a = 'xiaohong'；//不同塊，可以聲明相同名；}console.log(a) //{name:'xiaoming'}if(true){let v= '20130401'}console.log(v) //報錯：v is not definedfor(var i=0;i<3;i++){//i是全局的//閉包(function(i){setTimeout(function(){console.log(i)})})(i)}//用letfor(let i = 0;i<3;i++){//i是塊級的setTimeout(function(){console.log(i)},1000)} 復制代碼

• const

//不存在預解釋、變量提升 //不能重復定義聲明 //不能更改他的值。 //具備塊級const str = 123; str = 3445;//報錯：常量不能重新賦值const = obj = {name:'xiaoming'} obj.name= 'xiaohong'；//可以修改；const限制的是不能給變量重新賦值，給變量的屬性修改，實際并未修改內存地址。復制代碼

解構

解構就是分解一個對象的解構，可以用一種類似數組的方式定義n個變量，可以將一個數組中的值按照規則賦值過去。 解構的時候，等號兩邊結構類似；左邊對象右邊就是對象；左邊數據右邊也得是數組，右邊還必須是一個真是存在的值； 復制代碼

• 數組、對象的簡單解構賦值

var arr = [1,2,3] var [a,b,c] = arr； // a=>1 b=>2 c=>3var obj = {a:1,b:2} var {a,b} = obj; //對象解構，根據key解構，a=>1,b=>2 var {a:a1,b:b1} = obj;// 對象解構，不用key作為變量名,指定變量名； a1=>1 b1=>2 復制代碼

• 嵌套解構賦值

var arr = [{a:1,b:2},[3,4],5] var [{a,b},[c,d],e] = arr; //結構一樣，a=1 b=2,c=3,d=4,e=5var [obj,ary,n] = arr ; //整合起來賦值，obj= {a:1,b:2} ary=[3,4] n=5復制代碼

• 默認賦值解構；如果能取到值就用取到的，取不到（undefined）時就用默認的值；

var obj = {a:1} var {a,b} = obj; console.log(b)//undefined var {a,b=2} = obj; console.log(b)//2var ary = [1,,3]//ary[1] = undefined var [a = "a", b = "b", c =new Error('C必須指定')] = ary; console.log(a, b, c);// 1,b,3function ajax(options){var method = options.method || 'get'var data = options.data || {}...} 函數聲明形參利用解構賦值+默認賦值 function ajax({method='get',data={}){//函數傳參解構賦值，相當于let了這個變量；console.log(method,data) } ajax({method:'get',data:{id:1} })復制代碼

• 省略賦值

var arr = [1,2,3] var [,,j] = arr; console.log(j)//3 只想取出數組最后一個 復制代碼

模版字符串

• 1.可以嵌套變量
• 2.支持換行
• 3.可帶一個標簽屬性進行描述，因為我們希望有時候在拼接字符串的時候有自己的邏輯

var name = 'xiaoming',age = 9; var str = `${name}今年${age}歲` var str1= `${name} 今年${age}歲 `console.log(str) console.log(str1)//把老數組中的每一個元素應設為新數組中的每一個元素 var users = [{id:1,name:'zfpx1'},{id:2,name:'zfpx2'}] var newUser = users.map(item=>{return `<li>${item.id}:${item.name}</li>` }) let str = (`<ul>${newUser}</ul> `) console.log(str)//描述 //帶標簽的模版字符串就像一個函數調用 //參數：第一個參數是文本的數組，剩下的依次是模版字符串中出現的變量值；可以用剩余運算符收攏起來 //strings 文本的數組 指的是 模版字符串被變量分割出來的數組。 function desc(strings,...rest){let result = '';for(let i =0;i<rest.length;i++){result +=(strings[i]+rest[i])}result += strings[strings.length-1] //strings是被變量分割出來的，所以長度比rest多一個；return result; } var str = desc`${name}今年{age}歲了` //str就是desc的返回值面試：模版字符串(ejs等字符串模版通用原理)的原理:正則匹配-分組捕獲-替換 var name = 'xiaoming',age = 9; var tem = "${name}今年${age}歲了"; function replace(tem){return tem.replace(/\$\{(\w+)\}/g,function(...args){//args[0] 匹配到的整個串//args[1] 第一個分組捕獲的return eval(args[1]);//替換匹配到的整個串}) } console.log(replace(tem))復制代碼

字符串新增的方法

• includes 是否包含
• startsWith 是否以什么開頭
• endsWith 是否以什么結尾
• repeat 重復多少遍，返回新的字符串

let address1 = 'http://www.baidu.com' let address2 = 'ftp://www.baidu.com' if(address1.startsWith('http')){console.log('http網址') }else if(address1.endsWidth('http')){console.log('ftp服務') } let filename = 'avatar.jpg'; if(filename.endsWith('jpg') || filename.endWith('png')){console.log('圖片') }let str = 'zfpx' str.includes('z')//true 包含let str2 = str.repeat(3);// zfpxzfpxzfpx 重復三遍，返回新的字符串復制代碼

func方法（函數傳參、接收參數、剩余運算符、展開運算符）

• 默認參數：可以指定默認值，沒傳的話(undefined)就用默認值；指定必傳參數，不傳報錯；解構賦值參數； function ajax(url=new Error('url不能為空'),method='get',dataType='json'){ console.log(url) console.log(method) console.log(dataType) } function ajax1({url=new Error('url不能為空'),method='get',dataType='json'}){ console.log(url) console.log(method) console.log(dataType) }

ajax('/user') ajax1({ url:'/user' })

• 剩余操作符,函數接收參數時使用，只能作為函數的最后一個接收參數使用；

//求和 function sum(prefix,...rest){let n = rest.reduce((prev,next,nextIndex,origin)=>{return prev+next;})return prefix+n } sum('$',1,2,3,4)//求平均值 function fn(...rest){return rest.reduce((prev,next,nextIndex,origin)=>{let sum = prev+next;if(nextIndex == origin.length-1){return sum/origin.length;}else{return sum;}}) } fn(1,2,3,4)復制代碼

• 展開運算符（淺拷貝、合并對象、函數入參）

//數組 var arr1 = [1,2,3] var arr2 = [4,5,6] var arr3 = [...arr1,...arr2] var arr4 =arr1.concat(arr2)//對象 var obj1 = {a:1,b:2} var obj2 = {c:3,d:4} var obj3 = {...obj1,...obj2 } var obj4 = Object.assign({},obj1,obj2) //函數入參 function sum(a,b,c){return a+b+c } sum(...arr1)Math.max(1,2,3) Math.max.apply(null,arr1) Math.max(...arr1)前端面試擴展： //深拷貝、淺拷貝 淺拷貝: ...展開運算符、Object.assign 深拷貝： JSON.parse(JSON.stringify({home:{city:'beijing'})) function deepClone(origin){let result;if(origin instanceof Array){result = [];for(let i=0;i<origin.length;i++){result.push(deepClone(origin[i]))}}else if(origin instanof Object){result = {};for(let key in origin){result[key] = deepClone(origin[key])}}else{result = origin}return result; }//reduce 的原理 //reduce 支持兩個參數：第一個參數是函數，第二個參數是初始值（不傳的話默認是數組第一項） //主要原理 就是 上一次的執行結果是下一次的初始值。var arr = [1,2,3,4]arr.reduce((prev,next,nextIndex,origin)=>{return prev +next},10) //初始值是10，第一次調用prev是10，next是1，nextIndex是0， 最后得到的結果是20 Array.prototype.myReduce = function(cb,initVal){var prev,nextIndex;if(typeof initVal =='undefined'){//沒傳的話，初始值是數組第一項，next的索引是1prev = this[0];nextIndex = 1;}else{//傳了的話，初始值是傳入的，next的索引是0prev = initVal;nextIndex = 0;}for(var j = nextIndex;j<this.length;j++){prev = cb(prev,this[j],j,this)//執行結果是下一次的初始值。}return prev; }復制代碼

arrow箭頭函數

• this指向上一級作用域的this
• 沒有arguments

var sum = function(a,b){return a+b; } //如果只有返回值，沒有函數題代碼，則可以省略{} var sum1 = (a,b)=>a+b; sum1(1,2)如果有且只有一個參數，可以省略小括號； var double = num =>num*2 console.log(double(2))//this問題, 箭頭函數沒有this,他會使用上級作用域的的this;let obj = {name:'zfpx',getName(){console.log(this.name)//this=>obj}}obj.getName() ------- let obj2 = {name:'zfpx',getName(){//this=>objsetTimeout(function () {console.log(this.name)//this=>window, undefined},1000)} } obj2.getName()--- let obj3 = {name:'zfpx',getName(){//this=>objsetTimeout( ()=> {//箭頭函數沒有this,他會使用上級作用域的的thisconsole.log(this.name)//this=>obj, zfpx},1000)} } obj3.getName()--- let obj4 = {name:'zfpx',getName:()=>{console.log(this.name,11111) //this =>window, undefined} } obj4.getName()//箭頭函數的this是定死的，在定義時就定死了，不管在哪里調，不管誰去調，this都是定義時的外層作用域的this var obj5 = {name:'zfpx',getName:()=>{console.log(this.name) //this =>window, undefined} } var obj6 = {}; obj6.getName = obj5.getName; obj6.getName();復制代碼

總結

以上是生活随笔為你收集整理的20181210-es6(letconst解构模版字符串原理 展开运算符、剩余运算符运用 深拷贝原理 reduce原理 箭头函数)...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。