PS: 2018/04/30 新增多個數組玩法
PS: 2018/05/07 新增四, 應用函數系列, 防抖函數,節流函數
PS: 2019/03/04 新增CSS3實現進度條javascript
第一步最基本的:分紅6組ABCDEF分別比賽決出名次;(6次了)
這一下能夠幹掉每組後三名,一下刷掉一半參賽賽車了36/2=18css
第二部順勢的:各組頭名比賽決出名次(7次了)
這一下把後三名所在組幹掉18-3*3=9,
假設按組別名次命名,可知A1>B1>C1,因此毫無懸念的排除掉第一的A1跟不可能前三的C2,C3,9-3=6,
其實還有B3也不可能的,不過反正不超過六位,只要加多一次就夠了(8次)html
第一步:計算每人工做效率,a = 1/18,b = 1/24, c = 1/30;
第二步:模擬整數值,假設工做量n = 360, abc每小時工做效率分別爲20,15,12;
第三部:寫個遍歷java
var n = 360, a = 20, b = 15, c = 12; for (var i = 0; i < n; i++) { if (n - (a + b + c) * i < 0) { console.log(i); break; } }
因此每人7個小時以後還剩360-47*7=31.根據效率能夠知道(31-20)/15 = 0.733...面試
(當時我就走到這步,而後開始有點偏了,根據題主的答案說A, B, C的順序輪流砌,但沒規定誰第一個.....o(≧口≦)o!我就蒙了,還玩閱讀理解了????)
若是按這邏輯的話:
a先上:結果就上面說的那樣0.733...,
b先上:滿8個小時,
c先上:輪不到b了,7個小時算法
這個真的有點蒙,繞得我暈,直接上答案segmentfault
function swap(a, b) { b = b - a; a = a + b; b = a - b; console.log(a, b); } swap(10, 20);
不懂就笨方法列出來唄
b = b - a,
a = a + b - a,
b = a + b - a - b + a.
這麼一看就清晰了,膜拜這答案.數組
極致濃縮寫法:瀏覽器
function swap(a, b) { a = [b, (b = a)][0]; console.log(a, b); } swap(10, 20);
其實通常的算法都是考察你對字符串,數組等方法使用技巧跟思路.例如這裏我就先想到數組的reverse()倒序,須要經過類型轉換做比較;app
function checkPalindrom(str) { console.log(str == str.split('').reverse().join('')) } checkPalindrom('德韋恩韋德'); checkPalindrom('德維恩韋德');
這些思路都大同小異,詳情能夠參考我以前寫的文章js實現數組去重方法及效率對比
基本功能都實現了,例如查詢分差那些無非就多加個math.max()方法而已
後面看到統計字符串有個更加高逼格的寫法,附上
function statistics(str) { var obj = str .split('') .reduce( (previousValue, currentValue) => ( previousValue[currentValue]++ || (previousValue[currentValue] = 1), previousValue ), {} ); console.log(obj); } statistics('abcdaabc164984616464646464AAWEGAWGAG');
最短的代碼實現數組去重,Es6的東西
[...new Set([1, "1", 2, 1, 1, 3])]
先把0-9[a-z]所有列出來;而後經過Math.random()隨機選擇範圍.遍歷入參數次就成了
function randomString(n) { var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', tmp = '', i = 0, l = str.length; for (; i < n; i++) { tmp += str.charAt(Math.floor(Math.random() * l)); } console.log(tmp); } randomString(20);
後來發現有更牛逼的寫法以下:
console.log(Math.random().toString(16).substring(2))//14位 console.log(Math.random().toString(36).substring(2))//11位
實際就是返回以指定進製表示的字符串
特殊字符本身想辦法搞吧,我是用輸出法表情弄出來的,至於數量自行調整
function evaluate(n) { console.log('★★★★★☆☆☆☆☆'.slice(5 - n, 10 - n)); } evaluate(3);
缺點就是儲存的值變成字符串形式了
var ary = [[1, 5], [11, 17], [21, 22, 27, 29, 30]]; function changeAry(ary) { return ary.join(',').split(','); } console.log(changeAry(ary));
第一步先確保轉換成一維數組
第二步再找出其中最大最小值
function findMinAndMax(items) { items.join(',').split(','); return { min: Math.min.apply(null, items), max: Math.max.apply(null, items), }; } console.log(findMinAndMax([995, 350, 796, 297, 686, 900, 10, 795, 53, 359]));
1, 慣例最糟糕的遍歷字符串生成插入;
2, 我當時想到的ES6新方法fill(),一種寫法兩種思路,注意的是第一種寫法是鏈接字符串,生成的字符串數量是數組長度-1;
console.log(new Array(10).fill().join('<=>')) console.log(new Array(10).fill('<=>').join(''))
3, 後面找到的一種方法,其實也是一個思路,可是兼容性好
console.log(new Array(10).join('<=>'))
var str = 'Hello ${name},you are so ${praise}', obj = { name: '高圓圓', praise: 'goodly', }; console.log( str.replace(/\$\{([^{}]+)\}/g, function(match, key) { return obj[key]; }) );
var ary = [123, 512, 515, 125, 123, 124, 125, 151]; console.log(ary[Math.floor(Math.random() * ary.length)]); // 隨機公式 console.log(ary[Math.floor(Math.random() * (max - min +1)) + min]);
var ary = [123, 512, 515, 125, 123, 124, 125, 151]; console.log(ary.sort(() => Math.random() - 0.5));
console.log(' fwf 124 14fq fq f '.replace(/^\s+|\s+$/g,''));
var ary = [123, 512, 515, 125, 123, 124, 125, 151]; ary.length = 0; console.log(ary);
也能夠用這方法來截取數組.
若是是刪除數組成員,delete只是把該位置成員設置成undefined,想完全刪除應該使用splice();
若是是對象會完全刪除該屬性;
var ary = [123, 512, 515, 125, 123, 124, 125, 151]; obj = { a: 1, }; delete ary[0]; ary.splice(1, 1); delete obj.a; console.log(ary, obj);
console.log(123.321.toFixed(2) +1.2345); console.log(Math.floor(+123.321.toFixed(2) +1.2345));
關鍵點幾個:
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>無標題文檔</title> <style type="text/css"> * { font-size: 44px; line-height: 44px; margin: 0; padding: 0; vertical-align: middle; } </style> </head> <body></body> <script language="javascript"> function graph(line, rank) { var i = 0, j = 0; for (i; i < rank; i++) { var str = ''; for (j = 0; j < line; j++) { str += (Math.floor((Math.random() * 2) % 2)) ? '╲' : '╱'; } document.write(str + "<br>") } } graph(20, 20) </script> </html>
這個看起來複雜,實際代碼量不多很簡單,而後你寫起來發現仍是好些坑的.
因此我不知道大家看到怎樣子,起碼我如今看起來長這樣子
function List() { this.length = 0; } var list = new List(); list.push(1); console.log(list[0]); //1
當時想法就是內部用一個對象模擬數組方法
function List() { this.length = 0; this._obj = {}; } List.prototype.push = function(val) { this._obj[this.length] = val; this.length++; }; var list = new List(); list.push(1); console.log(list);
可是不行,由於中間還隔着一層_obj屬性,不過思路應該能夠的,再進一步就不要對象直接保存在this上.
function List() { this.length = 0; } List.prototype.push = function(val) { this[this.length] = val; this.length++; }; var list = new List(); list.push(1); console.log(list[0]); //1
效果達到了,不過若是有更好的寫法歡迎說出來.
var num = 0123456789.32; /** * [利用slice切割數字組合] * @param {[type]} param [字符串數字或數字] * @return {[type]} [格式字符串] */ function numberFormat(param) { //簡單過濾無效入參,非字符串數字或數字入參 if ( !param || (Array.prototype.toString.call(param) !== '[object String]' && /^\d*$/g.test(param)) || Array.prototype.toString.call(param) !== '[object Number]' ) return param; //轉成字符串,切割整數小數 var ary = (param + '').split('.'), int = ary[0], result = ''; //每次判斷整數長度>3動態添加逗號加入result,同時整數截掉對應數字 while (int.length > 3) { result = ',' + int.slice(-3) + result; int = int.slice(0, int.length - 3); } //這裏計算能夠避免int以0開頭 return int + result + (ary[1] ? '.' + ary[1] : ''); } console.log(numberFormat(num));
var num = 0123456789.32; /** * [利用數組切割數字組合再合併] * @param {[type]} param [字符串數字或數字] * @return {[type]} [格式字符串] */ function numberFormat(param) { //簡單過濾無效入參,非字符串數字或數字入參 if ( !param || (Array.prototype.toString.call(param) !== '[object String]' && /^\d*$/g.test(param)) || Array.prototype.toString.call(param) !== '[object Number]' ) return param; //轉成字符串,切割整數小數 var ary = (param + '').split('.'), int = ary[0], result = [], i = int.length - 1, //結果長度 count = 0; //每次判斷結果長度整被3整除而且整數長度不等於零狀況先加逗號,不然直接添加到頭部 for (; i >= 0; i--) { count++; result.unshift((count % 3 === 0 && i !== 0 ? ',' : '') + int[i]); } //這裏計算能夠避免int以0開頭 return result.join('') + (ary[1] ? '.' + ary[1] : ''); } console.log(numberFormat(num));
var num = 0123456789.32; /** * [前置補零直接加逗號再替換掉] * @param {[type]} param [字符串數字或數字] * @return {[type]} [格式字符串] */ function numberFormat(param) { //簡單過濾無效入參,非字符串數字或數字入參 if ( !param || (Array.prototype.toString.call(param) !== '[object String]' && /^\d*$/g.test(param)) || Array.prototype.toString.call(param) !== '[object Number]' ) return param; //轉成字符串,切割整數小數 var ary = (param + '').split('.'), //須要補幾個零 len = Math.ceil(ary[0].length / 3) * 3 - ary[0].length + 1, //不能被3整除補零 int = Array(len).join(0) + ary[0], //提取出3位一組數據再合併而且替換前置0或逗號 result = int .match(/\d{3}/g) .join(',') .replace(/^[0,]+/g, ''); //這裏計算能夠避免int以0開頭 return result + (ary[1] ? '.' + ary[1] : ''); } console.log(numberFormat(num));
主要代碼參數過程註釋都能看到了,只是我的思路寫法.
/** * 防抖函數就是在必定時間內,再次觸發函數就會清除定時器從新設置延遲時間執行,適用於非高頻率操做。 * @param {Function} fn [執行函數] * @param {Number} [interval=1000] [間隔時間] * @param {Boolean} [immediate=false] [是否當即執行] * @return {[type]} [function] */ function debounce(fn, interval = 1000, immediate = false) { //定時器 let timer; return function() { const self = this, //保存參數 args = arguments; if (timer) clearTimeout(timer); //是否當即執行 if (immediate) { fn.apply(self, args); immediate = false; } timer = setTimeout(() => { fn.apply(self, args); }, interval); }; }
下面是執行實例,要注意的是[color=#ff4753]若是頁面初始化的時候滾動條高度不爲零(例如滑動以後刷新頁面),也會自動觸發一次監聽事件.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> </ul> <script type="text/javascript"> /** * 防抖函數就是在必定時間內,再次觸發函數就會清除定時器從新設置延遲時間執行,適用於非高頻率操做。 * @param {Function} fn [執行函數] * @param {Number} [interval=1000] [間隔時間] * @param {Boolean} [immediate=false] [是否當即執行] * @return {[type]} [function] */ function debounce(fn, interval = 1000, immediate = false) { //定時器 let timer; return function () { const self = this, //保存參數 args = arguments; if (timer) clearTimeout(timer); //是否當即執行 if (immediate) { fn.apply(self, args); immediate = false; } timer = setTimeout(() => { fn.apply(self, args); }, interval) } } //初始化函數 const fun = debounce((now) => { console.log(now); }, 1000); window.onload = () => { //監聽滾動條 document.addEventListener('scroll', () => { console.log('觸發滾動'); fun(new Date()) }, false) } </script> </body> </html>
/** * 節流函數就是隻容許一個函數在必定時間內執行一次,適用於高頻率事件。 * @param {Function} fn [執行函數] * @param {Number} [interval=1000] [間隔時間] * @return {[type]} [function] */ function throttle(fn, interval = 2000) { let timer, preTime = +new Date(); return function() { const self = this, args = arguments, curTime = +new Date(); if (timer) clearTimeout(timer); //超過間隔時間執行,並記錄當前時間是新的時間點 if (curTime - preTime >= interval) { preTime = curTime; fn.apply(self, arguments); } else { //間隔時間內設置定時器,保證即便中止操做也至少執行一次 timer = setTimeout(() => { fn.apply(self, args); }, interval); } }; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> <li>124124</li> </ul> <script type="text/javascript"> /** * 節流函數就是隻容許一個函數在必定時間內執行一次,適用於高頻率事件。 * @param {Function} fn [執行函數] * @param {Number} [interval=1000] [間隔時間] * @return {[type]} [function] */ function throttle(fn, interval = 2000) { let timer, preTime = + new Date(); return function () { const self = this, args = arguments, curTime = + new Date(); if (timer) clearTimeout(timer); //超過間隔時間執行,並記錄當前時間是新的時間點 if (curTime - preTime >= interval) { preTime = curTime; fn.apply(self, arguments); } else { //間隔時間內設置定時器,保證即便中止操做也至少執行一次 timer = setTimeout(() => { fn.apply(self, args); }, interval) } } } //初始化函數 const fun = throttle((now) => { console.log(now); }, 1000); window.onload = () => { //監聽滾動條 document.addEventListener('scroll', () => { console.log('觸發滾動'); fun(new Date()) }, false) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <title></title> <style> body { position: relative; width: 100%; padding: 50px; background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%); background-size: 100% calc(100% - 100vh + 5px); background-repeat: no-repeat; z-index: 1; } body::after { content: ""; position: fixed; top: 5px; left: 0; bottom: 0; right: 0; background: #fff; z-index: -1; } </style> </head> <body> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> <p>11111111111111111111111111111111111111111111111111111111111111111</p> </body> </html>