(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" ] });