1.条件语句的优化
// 根据颜色找出对应的水果
// bad
function test(color) {
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
}
test('yellow'); // ['banana', 'pineapple']// good
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
};
function test(color) {
return fruitColor[color] || [];
}// better
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function test(color) {
return fruitColor.get(color) || [];
}2.浮点数转整数
如果希望将浮点数转换为整数，可以使用Math.floor()、Math.ceil()或Math.round()。但是还有一种更快的方法可以使用|(位或运算符)将浮点数截断为整数。
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23|的行为取决于处理的是正数还是负数，所以最好只在确定的情况下使用这个快捷方式。
如果n为正，则n | 0有效地向下舍入。如果n为负数，则有效地向上舍入。更准确地说，此操作将删除小数点后面的任何内容，将浮点数截断为整数。
你可以使用~~来获得相同的舍入效果，如上所述，实际上任何位操作符都会强制浮点数为整数。这些特殊操作之所以有效，是因为一旦强制为整数，值就保持不变。
3.es6数组去重
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]此技巧适用于包含基本类型的数组：undefined，null，boolean，string和number。（如果你有一个包含对象，函数或其他数组的数组，你需要一个不同的方法！）
4.扁平化n维数组
[1,[2,3]].flat(2) //[1,2,3]
[1,[2,3,[4,5]]].flat(3) //[1,2,3,4,5]
[1,[2,3,[4,5]]].toString() //'1,2,3,4,5'
[1[2,3,[4,5[...]]]].flat(Infinity) //[1,2,3,4...n]Array.flat(n)是ES10扁平数组的api,n表示维度,n值为Infinity时维度为无限大
5.排序
[1,2,3,4].sort((a, b) => a - b); // [1, 2,3,4],默认是升序
[1,2,3,4].sort((a, b) => b - a); // [4,3,2,1] 降序sort是js内置的排序方法,参数为一个函数
最大值
Math.max(...[1,2,3,4]) //4
Math.max.apply(this,[1,2,3,4]) //4
[1,2,3,4].reduce( (prev, cur,curIndex,arr)=> {
return Math.max(prev,cur);
},0) //4- Math.max()是Math对象内置的方法,参数是字符串;
- reduce是ES5的数组api,参数有函数和默认初始值;
- 函数有四个参数,pre(上一次的返回值),cur(当前值),curIndex(当前值索引),arr(当前数组)
求和
[1,2,3,4].reduce(function (prev, cur) {
return prev + cur;
},0) //10合并
[1,2,3,4].concat([5,6]) //[1,2,3,4,5,6]
[...[1,2,3,4],...[4,5]] //[1,2,3,4,5,6]
[1,2,3,4].push.apply([1,2,3,4],[5,6]) //[1,2,3,4,5,6]判断是否包含值
[1,2,3].includes(4) //false
[1,2,3].indexOf(4) //-1 如果存在换回索引
[1, 2, 3].find((item)=>item===3)) //3 如果数组中无值返回undefined
[1, 2, 3].findIndex((item)=>item===3)) //2 如果数组中无值返回-1
includes(),find(),findIndex()是ES6的api类数组转化
Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)
Array.prototype.slice.apply(arguments)
Array.from(arguments)
[...arguments]- 类数组:表示有length属性,但是不具备数组的方法
- call,apply:是改变slice里面的this指向arguments,所以arguments也可调用数组的方法
- Array.from是将类似数组或可迭代对象创建为数组
- ...是将类数组扩展为字符串,再定义为数组
对象和数组转化
Object.keys({name:'张三',age:14}) //['name','age']
Object.values({name:'张三',age:14}) //['张三',14]
Object.entries({name:'张三',age:14}) //[[name,'张三'],[age,14]]
Object.fromEntries([name,'张三'],[age,14]) //ES10的api,Chrome不支持 , firebox不要浪费时间写完美代码
一个系统可以维持5年，10年，甚至20年以上，但是代码和设计模式的生命周期非常短，当对一个解决方案使用不同的方法进行迭代的时候，通常只能维持数月，数日，甚至几分钟的时间
Google内部在代码质量上的实践
良好的编程习惯涉及到很多方面，但在软件行业内，大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如，具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义，前者的意义在于可以让代码更易于理解和修改。
减少嵌套，降低代码复杂度
减少嵌套会让代码可读性更好，同时也能更容易的找出bug，开发人员可以更快的迭代，程序也会越来越稳定。简化代码，让编程更轻松！
关于 Google 发布的 JS 代码规范
Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则，而是为了保持源代码编写模式一致的一种选择。
你解决的问题比你编写的代码更重要！
程序员似乎忘记了软件的真正目的，那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好，而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说：如果你拥有的只是一把锤子，那么一切看起来都像钉子一样
tinymce与prism代码高亮实现及汉化的配置
TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大，并且功能配置灵活简单。另一特点是加载速度非常快的。
js函数式编程与代码执行效率
函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程
接手代码太烂，要不要辞职？
朋友发表了一条说说：入职新公司，从重构代码到放弃”，我就问他怎么了？他说，刚进一家新公司，接手代码太烂，领导让我先熟悉业务逻辑，然后去修复之前项目中遗留的bug，实在不行就重构
js高亮显示关键词_页面、搜索关键词高亮显示
页面实现关键词高亮显示：在项目期间遇到一个需求，就是搜索关键词时需要高亮显示，主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词：有一组关键词数组，在数组中筛选出符合关键字的内容并将关键字高亮
写优雅的代码，做优雅的程序员
软件工程学什么？ 学计算机，写程序，做软件，当程序员。听说学计算机很辛苦？ 是的，IT行业加班现象严重。在计算机世界里，技术日新月异，自学能力是程序员最重要的能力之一。选了这个专业，就要时刻保持好奇心和技术嗅觉，不能只满足于完成课内作业。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!