1、使用數(shù)組拼接出如下字符串 ，其中styles數(shù)組里的個(gè)數(shù)不定
var prod = {
name: '女裝',
styles: ['短款', '冬季', '春裝']
};
function getTpl(data){
//todo...
};
var result = getTplStr(prod); //result為下面的字符串
<dl class="product"><dt>女裝</dt><dd>短款</dd<dd>冬季</dd><dd>春裝</dd></dl>
備注：
<dl> 標(biāo)簽定義了定義列表（definition list）。
<dl> 標(biāo)簽用于結(jié)合 <dt> （定義列表中的項(xiàng)目）和 <dd> （描述列表中的項(xiàng)目）。
用法：
<dl>
<dt>計(jì)算機(jī)</dt>
<dd>用來(lái)計(jì)算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺(jué)方式顯示信息的裝置 ... ...</dd>
</dl>
很多情況下我們經(jīng)常需要把一個(gè) 從服務(wù)端獲取的json 格式的數(shù)據(jù)展示到頁(yè)面上，一般的做法是
- 獲取數(shù)據(jù)
- 構(gòu)造 html 字符串
- 放到頁(yè)面上
其中第2步就是我們這里的問(wèn)題。對(duì)于題目中的數(shù)據(jù)，其中對(duì)象里包含name和styles兩個(gè)屬性，一般來(lái)說(shuō)這是固定的。styles里是個(gè)數(shù)組，數(shù)組里的條目卻是可變的，所以我們需要遍歷數(shù)組。
構(gòu)造 HTML字符串最終的目的是要放到頁(yè)面上，所以字符串里不需要\n來(lái)表示換行（否則放到頁(yè)面上后 html 里就有了\n這個(gè)字符串，這不是我們希望看到的）
答案
var product = {
name: '女裝',
styles: ['短款', '冬季', '春裝']
}
function getTpl(product) {
//不需要 \n，我們只需要 html 字符串就好
// 字符串里面的空格可以不加，主要是讓 html 縮進(jìn)看的更清晰一些
var str = '<dl>'
str += ' <dt>' + product.name + '</dt>'
for(var i = 0; i < product.styles.length; i++) {
str += ' <dd>' + product.styles[i] + '</dd>'
}
str += ' </dl>'
return str;
}
function getTpl2(product) {
var htmls = []
htmls.push('<dl>')
htmls.push(' <dt>' + product.name + '</dt>')
for(var i = 0; i < product.styles.length; i++) {
htmls.push('<dd>' + product.styles[i] + '</dd>')
}
htmls.push('</dl>')
return htmls.join('');
}
console.log(getTpl(product))
console.log(getTpl2(product))
2、寫(xiě)出兩種以上聲明多行字符串的方法 這個(gè)能干什么？？？
例如：
var str ='abcdeabcdeabcdeancdeabcdeabcdeabcdeancdeabcdeabcdeabcdeancdeabcdeabcdeabcdeancde'
這段字符串很長(zhǎng)，如何多行優(yōu)雅的顯示
//tip: 如果是要拼接 html 字符串，最好讓 html 對(duì)齊展示工整，這樣可讀性更好，多點(diǎn)空格沒(méi)關(guān)系
//方法1,字符串拼接
var str1 = ''
str1 += '<ul>'
str1 += ' <li>1</li>'
str1 += ' <li>2</li>'
str1 += '</ul>'
console.log(str1)
//方法2, 數(shù)組 join
var str2 = []
str2.push( '<ul>')
str2.push( ' <li>1</li>')
str2.push( ' <li>2</li>')
str2.push( '</ul>')
console.log(str2.join(''))
//方法3, 用\來(lái)轉(zhuǎn)義換行符號(hào)，\后面沒(méi)空格
var str3 = '<ul>\
<li>1</li>\
<li>1</li>\
</ul>'
console.log(str3)
//方法4, ES6的多行字符串表示方法
var str3 = `<ul>
<li>1</li>
<li>2</li>
</ul>`
console.log(str3)
3、寫(xiě)一個(gè)函數(shù)，判斷一個(gè)字符串是回文字符串，如 abcdcba是回文字符串, abcdcbb不是
//判斷一個(gè)字符串是不是回文， 那這個(gè)函數(shù)的命名一般為 isXXX
//函數(shù)的返回值一般是 true 或者 false
function isPalindrome(str) {
return str === str.split('').reverse().join('')
}
function strCheck(str){
var o=str.split('').reverse().join('');
if(o===str){
return str +" is "+true;
}else{
return str +" is "+false;
}
}
4、過(guò)濾如下數(shù)組，只保留正數(shù)，直接在原數(shù)組上操作
var arr = [3,1,0,-1,-3,2,-5]
function filter(arr){
}
filter(arr)
console.log(arr) // [3,1,2]
splice用法 直接在原數(shù)組上操作
var arr = [3,1,0,-1,-3,2,-5];
arr.splice(3,1);
//結(jié)果是[-1]
console.log(arr)
//結(jié)果是(6) [3, 1, 0, -3, 2, -5]
5、過(guò)濾如下數(shù)組，只保留正數(shù)，原數(shù)組不變，生成新數(shù)組 不是很了解
var arr = [3,1,0,-1,-3,2,-5]
function filter(arr){
}
var arr2 = filter(arr)
console.log(arr2) // [3,1,2]
console.log(arr) // [3,1,0,-1,-2,2,-5]
var arr = [3,1,0,-1,-3,2,-5]
function filter(array){
return array.filter(function (argument) {
return argument > 0
})
}
var arr2 = filter(arr)
console.log(arr2)//[3, 1, 2]
console.log(arr)//[3, 1, 0, -1, -3, 2, -5]
6、寫(xiě)一個(gè)深拷貝函數(shù)，用兩種方式實(shí)現(xiàn)
//方法一
function deepCopy(oldObj) {
var newObj = {};
for(var key in oldObj) {
if(typeof oldObj[key] === 'object' && oldObj[key] !== null ) {
newObj[key] = deepCopy(oldObj[key]);
}else{
newObj[key] = oldObj[key];
}
}
return newObj;
}
//方法二
//優(yōu)點(diǎn)：簡(jiǎn)單方便，大多數(shù)時(shí)候可以滿足需求
//缺點(diǎn)：1.無(wú)法復(fù)制函數(shù) 2.原型鏈沒(méi)了，對(duì)象就是object，所屬的類沒(méi)了。
function deepCopy2(oldObj) {
var newObj = {}
newObj = JSON.parse( JSON.stringify(oldObj) )
return newObj
}
