(1)
for···of循環。ps:可以使用break,找到合適的值后不再執行后面的循環,若想獲得下標,可使用for(let v of arr.keys())
for (let i of 'foo') {
console.log(i)
}
//f
//o
//o
for...of循環不會循環對象的key,只會循環出數組的value,因此for...of不能循環遍歷普通對象,對普通對象的屬性遍歷推薦使用for...in
如果實在想用for...of來遍歷普通對象的屬性的話,可以通過和Object.keys()搭配使用,先獲取對象的所有key的數組然后遍歷:
var student={
name:'zhangsan',
age:20,
address:{
country:'china',
city:'shenzhen',
}
}
for(var key of Object.keys(student)){
//使用Object.keys()方法獲取對象key的數組
console.log(key+": "+student[key]);
}
(2)
includes() 返回布爾值,表示是否找到了參數字符串。
startsWith() 返回布爾值,表示參數字符串是否在源字符串的頭部。
endsWith() 返回布爾值,表示參數字符串是否在源字符串的尾部。
var str = 'Hello world!';
str.startsWith('Hello') // true
str.endsWith('!') // true
str.includes('o') // true
這三個方法都支持第二個參數,表示搜索的位置。endsWith的行為與其他兩個方法有所不同。它針對前n個字符,而其他兩個方法針對從第n個位置直到字符串結束。
str.endsWith('Hello', 5) // true
str.includes('Hello', 6) // false
(3)
repeat() 返回一個新字符串,表示將原字符串重復n次。參數如果是小數,會被取整(取小)。
str.repeat(n)
(4)
padStart() 用于頭部補全
padEnd() 用于尾部補全
'abc'.padEnd(5,'x') //abcxx
var year = new Date().getFullYear();
var month = (new Date().getMonth() + 1)>9?(new Date().getMonth() + 1) : '0'+(new Date().getMonth() + 1);
var day = new Date().getDay()>9?new Date().getDay() : '0'+new Date().getDay();
console.log('2'.padStart(10,year+'-'+month+'-'+day)); //2017-06-02
console.log('2-24'.padStart(10,year+'-'+month+'-'+day)); //2017-02-24
console.log('09-16'.padStart(10,year+'-'+month+'-'+day)); //2017-09-16
console.log('17-09-16'.padStart(10,year+'-'+month+'-'+day)); //2017-09-16
(5)模板字符串
var name = "樂美";
document.getElementById('wrap1').innerHTML = `<div>${name},知道嗎,這樣就不用
<span style="color:red;">引號和加號</span>了
</div>`;
document.getElementById('wrap2').innerHTML = (`
<ul>
<li>li1</li>
<li>li2</li>
</ul>`.trim());//.trim()去掉換行
function fn(){
return 'hellow'
}
console.log(`${fn()} world`)
(6) 模板編譯(實例)
function compile(template){
var evalExpr = /<%=(.+?)%>/g;
var expr = /<%([\s\S]+?)%>/g;
// .(點)查找單個字符,除了換行和行結束符。
// \s(小寫s)是指空白,包括空格、換行、tab縮進等所有的空白,而\S(大寫S)剛好相反。[\s\S]這樣一正一反,表示所有的字符,完全的,一字不漏的。
// ?(問號)表示懶惰模式,只找到一個就停下來。其實上面的正則evalExpr 只要帶上‘?’,就可以直接換成用[\s\S]匹配,沒必要用‘.+’,因為他只要找到第一個‘%>’就會停下來。
template = template
.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')
.replace(expr, '`); \n $1 \n echo(`');//$1 表示正則里面 第一個小括號里面的內容,類似還有$2,$3
template = 'echo(`' + template + '`);';
var script =
`(function parse(data){
var output = "";
function echo(html){
output += html;
}
${ template }
return output;
})`;
return script;
}
var template = (`<ul>
<% for(var i=0;i<data.supplies.length;i++){ %>
<li><%= data.supplies[i] %></li>
<% } %>
</ul>`)
var parse = eval(compile(template));
document.getElementById('wrap3').innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });