ES6对String字符串类型做的常用升级优化，ES6对Array数组做的升级优化

ES6对String字符串类型做的常用升级优化

1.优化部分

ES6新增了字符串模板，在拼接大段字符串时，用反引号(`)取代以往的字符串相加的形式,能保留所有空格和换行，使得字符串看起来更加直观、优雅。

var x=100

div1.style.width=x+'px'

//用ES6模板字符串

div1.style.width=`${x}px`

//传统写法，不允许换行，读写性差

 li.innerHTML= '<div class="topPipe" style="height: '+topHeight+'px">
<img src="img/up_pipe.png" alt="">
</div> 
<div class="bottomPipe" style="height: '+bottomHeight+'px"> 
<img src="img/down_pipe.png" alt=""> 
</div>'

//ES6模板字符串，允许换行和空格，读写性强
li.innerHTML = 

 `<div class="topPipe" style="height: ${topHeight}px">    <img src="../public/img/up_pipe.png" alt="">    </div>    <div class="bottomPipe" style="height: ${bottomHeight}px">    <img src="../public/img/down_pipe.png" alt="">    </div>`

  <div class="topPipe" style="height: ${topHeight}px">
  <img src="../public/img/up_pipe.png" alt="">
  </div>
  <div class="bottomPipe" style="height: ${bottomHeight}px">
  <img src="../public/img/down_pipe.png" alt="">
  </div>

2.升级部分

ES6在String原型上新增了includes（）方法，用于取代传统只能用indexOf查找包含字符串的方法（indexOf返回-1表示没查到，不如includes（）返回false更明确，语义更清晰），此外还新增了startsWith（）、endsWith（）、padStarts（）、padEnd（）、repeat（）等方法，可更加方便的用于查找、补全字符串。

let str='Hello,world!'

//console.log(str.indexOf('m'))// -1

//console.log(str.includes('o'))//true

//startsWith判断是否以某字符串开始
console.log(str.startsWith('Hello'))//true
//正则方式判断是否某字符串开头
console.log(/^Hello/.test(str))//true


//endsWith判断是否以某字符串结束
console.log(str.endsWith('!'))//true
//正则方式判断是否某字符串结尾
console.log(/!$/.test(str))//true

//endStart是前面填充
const arr=[]
for(let i=1;i<=12345;i++){
	arr.push((i+'').padStart(5,'0'))
	//padStart(位数，填充物)
}
console.log(arr)

//padend是后面填充，与上述类似

//repeat()
//将字符串自我复制n次

console.log(str.repeat(4))
//Hello,world!Hello,world!Hello,world!Hello,world!

ES6对Array数组做的升级优化

1.优化部分

数组的解构赋值

ES6可以直接以下形式进行变量赋值

在声明较多变量时，不需要再写很多let（或var），且映射关系清晰，支持赋默认值。

let [a,b,c]=[1,2,3]

console.log(a,b,c)//a,2,3

//传统
let arr=[1,2,3]

let a=arr[0]，

    b=arr[1]，

    c=arr[2]

扩展运算符

ES6新增的扩展运算符（...），可以轻松的实现数组和松散序列（比如集合等）的相互转换，可以取代arguments对象和apply方法，轻松获取未知参数个数情况下的参数集合。（尤其是在ES5即传统js中，arguments不是一个真正的数组，而是一个类数组的对象，但是扩展运算符的逆运算却可以返回一个真正的数组）。扩展运算符还可以轻松实现数组的复制和解构。

let arr=[1,2,3]

let brr=arr

brr[0]='a'

console.log(arr)//['a',2,3]
//这样仅把指针赋值给新变量，arr和brr都指向内存上的同一个数组
//ES6 copy一个数组

let crr=[...arr]
crr[0]='c'
console.Log(arr,crr)

//传统copy一个数组

var drr=[]]

/*for （var i = arr.length ` 1；i ≥ θ；i--）{//反序性能略优于正序

drr.unshift(arr[i])

//[3]
//[2,3]
//['a',2,3]
}*/
for (var i = @;icarr.length;i）{
  drr,push(arr[i])
}
drr[1]='d’
console.log(arr,drr)

const err=[1,2,3,4]
const [a,b...c]=err
console.log(a,b,c)

2.升级部分

ES6在Array原型上新增了find（）方法，用于取代传统只能indexOf()查找数组项目的方法，且修复了indexOf查找不到NaN的bug

[1,2,3,NaN,5].indexOf(NaN)==-1//true

此外，还新增了copyWithin()、includes()、fill()、flat()等方法，可方便用于数组的查找，补全，和转换等。

const arr=['a','b','c','d','e','f','g']

//用b、c把e、f替换掉
/*arr[4]=arr[1]
arr[5]=arr[2]
*/

//arr.copyWithin(指定插入目标位置索引，从哪里开始复制，复制到哪里结束)
arr.copyWithin(4,1,3)

console.log(arr)//[a,b,c,d,b,c,g]

//fill()
const arr=['a','b','c','d','e','f','g']

//用'y'把def替换掉
arr.fill('y',3,6)
console.log(arr)

//flat()多维数组降维
const arr=['a','b',['c','d'],'e','f','g']
console.log(arr.flat())//['a', 'b', 'c','d', 'e', 'f','g']

const brr=['a','b',['c','d',['e','f'],'g']]
console.log(brr.flat())//[ 'a', 'b', 'c', 'd', [ 'e', 'f' ], 'g' ]
console.log(brr.flat().flat())//['a', 'b', 'c','d', 'e', 'f','g']

console.log(brr.flat(Infinity))//['a', 'b', 'c','d', 'e', 'f','g']