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>