JS练习题

1、把数字转换成中文

1 2	完成将 toChineseNum， 可以将数字转换成中文大写的表示，处理到万级别。 例如 toChineseNum(12345)，返回 一万二千三百四十五。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

const toChineseNum = (num) => { if (num === 0) { return '零'; } const bit = ['', '十', '百', '千']; const unit = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']; const section = ['', '万']; let sectionPos = 0; let resultStr = ''; let piece, needZero = false; function toCNum(n) { let bitPos = 0, rs = '', zeroNum = 0; while (n > 0) { let curNum = n % 10; if (curNum === 0) { zeroNum++; bitPos++; } else { if (bitPos === zeroNum) zeroNum = 0; else if (zeroNum > 0) { rs = '零' + rs; zeroNum = 0; } rs = unit[curNum] + bit[bitPos++] + rs; } n = Math.floor(n / 10); } return rs; } while (num > 0) { piece = num % 10000; resultStr = toCNum(piece) + section[sectionPos] + (needZero ? '零' : '') + resultStr; needZero = piece < 1000 && piece > 0; sectionPos++; num = Math.floor(num / 10000); } return resultStr; } 或 const toChineseNum = (num) => { let str = '零一二三四五六七八九', str2 = ['', '十', '百', '千']; let Clu = Array.from( [...num.toString()].reverse(), (v, i) => str[v] + (i == 4 ? '万' : (v == 0 ? '' : str2[i % 4]))).reverse().join('') .replace(/零+/g, '零') .replace(/(零+$)/, '') .replace(/零+(?=万)/, ''); return　 Clu; } 或 const toChineseNum = (num) => { let unit = ['', '十', '百', '千', '万'] let numArr = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'] let arrNum = num.toString().split("").reverse(); let strArr = arrNum.map((v, i) => { if (i === 4 && parseInt(v) === 0) { return "万" } i = i > 4 ? i - 4 : i; return parseInt(v) === 0 ? numArr[v] : numArr[v] + unit[i - 0] }) return strArr.reverse().join("").replace(/(零(?=零))|(零$)|(零(?=万))/g, '') }

2、循环调节列表

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

页面上有这么一个列表： <ul id='adjustable-list'> <li> <span>1</span> <button class='up'>UP</button> <button class='down'>DOWN</button> </li> <li> <span>2</span> <button class='up'>UP</button> <button class='down'>DOWN</button> </li> <li> <span>3</span> <button class='up'>UP</button> <button class='down'>DOWN</button> </li> </ul> 点击 UP 按钮会使得该 li 元素在列表中上升一个位置，点击 DOWN 按钮会使得该 li 元素下降一个位置。点击最后的元素的 DOWN 按钮会使得元素回到第一个位置，点击第一个元素的 UP 按钮会使其回到最后的位置。 页面上已经存在该列表，你只需要完成 initAdjustableList() 函数，给元素添加事件。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

大专栏  JS练习题an class="line">const initAdjustableList = () => { var ul = document.getElementById('adjustable-list'), btns = ul.getElementsByTagName('button'), lis = ul.getElementsByTagName('li'), len = lis.length; [...btns].forEach(d => { d.onclick = e => { let text = e.target.innerText; [...lis].forEach((d, i) => { if (d.isEqualNode(e.target.parentNode)) { if (text == 'UP') { ul.insertBefore(d, lis[i-1]) } else { ul.insertBefore(d, lis[i+2 > len ? 0 : i + 2]) } } }) } }) }

3、操作 Cookie

1 2 3 4

完成 cookieJar 单例，它有三个方法： set(name, value, days)：设置 cookie 的值，days 为多少天以后过期。 get(name)：获取 cookie 的值。 remove(name)：删除 cookie 的值。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

const cookieJar = { set (name, value, days) { document.cookie=`${name}=${value};expires=${new Date(Date.now()+days*24*3600*1000)}` }, get (name) { let cookie=document.cookie let reg=new RegExp(`${name}=([^;]+)`) var result=reg.exec(cookie) return result[1] }, remove (name) { document.cookie=`${name}=outdate;expires=${new Date(Date.now()-36110000)}` } } 或 const cookieJar = { set (name, value, days) { const d = new Date(); d.setDate(d.getDate() + days) document.cookie = `${name}=${value}; expires=${d}` }, get (name) { const obj = {}; document.cookie.split(';').forEach(s => { s = s.trim(); const key = s.slice(0, s.indexOf('=')); const value = s.slice(s.indexOf('=') + 1); obj[key] = value; }) return obj[name]; }, remove (name) { this.set(name, '', -1) } }

4、实现 js 数据类型的判断

1 2	最新的 Javascript 标准规定了六种基本数据类型(number, null, undefined, string, boolean, symbol) 和基于 Object 衍生的其它原生数据类型 写出 type 函数，它传入一个参数，返回它的数据类型（用小写字母），比如: type(new Date)，返回 date。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

const type = (obj) => { let dataType = { '[object Null]' : 'null', '[object Undefined]' : 'undefined', '[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object String]' : 'string', '[object Function]' : 'function', '[object Array]' : 'array', '[object Date]' : 'date', '[object RegExp]' : 'regexp', '[object Object]' : 'object', '[object Symbol]' : 'symbol', '[object Map]' : 'map', '[object Set]' : 'set', '[object Int8Array]' : 'int8array', '[object Error]' : 'error' } return dataType[Object.prototype.toString.call(obj)] } 或 const type = (obj) => { return Object.prototype.toString.call(obj).slice(8,-1).toLowerCase(); }

5、转换驼峰命名

1 2 3

小科去了一家新的公司做前端主管，发现里面的前端代码有一部分是 C/C++ 程序员写的，他们喜欢用下划线命名，例如： is_good。小科决定写个脚本来全部替换掉这些变量名。 完成 toCamelCaseVar 函数，它可以接受一个字符串作为参数，可以把类似于 is_good 这样的变量名替换成 isGood。 变量名首尾的下划线不需要做处理，中间的下划线全部删除并且处理成驼峰。

1 2 3 4 5 6 7

const toCamelCaseVar = (v) => (/^_+/.exec(v) ? /^_+/.exec(v)[0] : '') + v.replace(/(^_+)|(_+$)/g,'').replace(/_+[w$]/g,x=>x[x.length-1].toUpperCase())+ (/_+$/.exec(v) ? /_+$/.exec(v)[0] : '') 或 const toCamelCaseVar = (variable) => { return variable.replace(/([^_])_+([^_])/g, function (all, b, c) { return b+c.toUpperCase() }) }