JavaScript的技巧
1. 迭代一个空数组
JavaScript 中直接创立的数组是松懈的，以至于会有许多坑。试着用数组的结构办法创立一个数组，你就会瞬时清楚了。
const arr = new Array(4); [undefined, undefined, undefined, undefined] // 谷歌阅读器中是 [empty x 4]
你会发明，通过一个松懈的数组去轮回调取一些转换是非常难的。
const arr = new Array(4); arr.map((elem, index) => index); [undefined, undefined, undefined, undefined]
想要解决这个问题，你可以使用在创立新数组的时候使用 Array.apply。
const arr = Array.apply(null, new Array(4)); arr.map((elem, index) => index); [0, 1, 2, 3]
2. 给办法传一个空参数
假如你想调取一个办法，并不填其中的一个参数时，JavaScript 就会报错。
method('parameter1', , 'parameter3'); // Uncaught SyntaxError: Unexpected token ,一个我们常用的解决办法是传递 null 或 undefined。
method('parameter1', null, 'parameter3') // or
method('parameter1', undefined, 'parameter3');按照 ES6 中对扩展运算符的介绍，有一个更简约的办法可以将空参数传递给一个办法。正如上面所提到的，数组是松懈的，所以给它传空值是可以的，我们正是用到了这个长处。
method(...['parameter1', , 'parameter3']); // 代码施行了...
3. 数组去重
我不断不清楚为什么数组不供给一个内置函数可以让我们利便的取到去重今后的值。扩展运算符帮到了我们，使用扩展运算符配合 Set可以生成一个不反复的数组。
const arr = [...new Set([1, 2, 3, 3])]; // [1, 2, 3]
4.从后向前猎取数组元素
假如你想从后向前猎取一个数组的元素，可以这样写：
var arr = [1, 2, 3, 4] console.log(arr.slice(-1)) // [4] console.log(arr.slice(-2)) // [3, 4] console.log(arr.slice(-3)) // [2, 3, 4] console.log(arr.slice(-4)) // [1, 2, 3, 4]
5.短路前提句
假如你想在某个前提逻辑值为true时，施行某个函数，就像这样：
if (condition) {
dosomething()
}这时，你可以这模样使用短路：
condition && dosomething()
6.用操纵符 “||” 来设定默许值
假如你必需给一个变量赋默许值，可以简便的这样写：
var a console.log(a) // undefined a = a || 'default value' console.log(a) // default value a = a || 'new value' console.log(a) // default value
7.在相等比力中使用 Object.is()
我们都知道 JavasSript 是弱类型的，并且当我们使用==作比力时，在一些状况下由于类型转换或者说“把两个操纵数中的一个转换成另一个，然后再比力”，会显现意想不到的结果。就像这样：
0 == ' ' //true null == undefined //true [1] == true //true
因此 JavaScript 中给我们供给了全等操纵符 ===, 它比不全等操纵符愈加严厉并且不会发生类型转换。但是用 === 来停止比力并不是最好的解决方案。你大概会得到：
NaN === NaN //false
ES6 中供给了新的 Object.is() 办法，它具有 === 的一些特点，并且更好、更准确，在一些非凡案例中展现的很好：
Object.is(0 , ' '); //false Object.is(null, undefined); //false Object.is([1], true); //false Object.is(NaN, NaN); //true
8.给一个函数 Bind 对象
我们经常需要将一个对象绑定到一个办法的 this 上。在 JS 中，假如你想要调取一个函数并指定它的 this 时可以使用 bind 办法。
Bind 语法
fun.bind(thisArg[, arg1[, arg2[, ...]]])
参数
thisArg
当绑定函数被调取时，该参数会作为原函数运转时的 this 指向。
arg1, arg2, …
当绑定函数被调取时，这些参数将置于实参此前传递给被绑定的办法。
返回值
返回由指定的this值和初始化参数革新的原函数拷贝
JS 中的实例
const myCar = {
brand: 'Ford',
type: 'Sedan',
color: 'Red'
};
const getBrand = function () {
console.log(this.brand);
};
const getType = function () {
console.log(this.type);
};
const getColor = function () {
console.log(this.color);
};
getBrand(); // object not bind,undefined
getBrand(myCar); // object not bind,undefined
getType.bind(myCar)(); // Sedan
let boundGetColor = getColor.bind(myCar);
boundGetColor(); // Red9.猎取文件拓展名
解决办法 1: 正则表达式
function getFileExtension1(filename) {
return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}解决办法 2: String的split办法
function getFileExtension2(filename) {
return filename.split('.').pop();
}这两种解决办法不克不及解决一些边沿状况，这有另一个愈加强大的解决办法。
解决办法 3: String的slice、lastIndexOf办法
function getFileExtension3(filename) {
return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}
console.log(getFileExtension3('')); // ''
console.log(getFileExtension3('filename')); // ''
console.log(getFileExtension3('filename.txt')); // 'txt'
console.log(getFileExtension3('.hiddenfile')); // ''
console.log(getFileExtension3('filename.with.many.dots.ext')); // 'ext'这是怎样实现的呢?
String.lastIndexOf() 办法返回指定值（本例中的'.'）在调取该办法的字符串中最后显现的位置，假如没寻到则返回 -1。
关于'filename'和'.hiddenfile'，lastIndexOf的返回值离别为0和-1无符号右移操纵符(?>) 将-1转换为4294967295，将-2转换为4294967294，这个办法可以包管边沿状况时文件名不变。
String.prototype.slice() 从上面运算的索引处提取文件的扩展名。假如索引比文件名的长度大，结果为""。
10.预防unapply攻击
重写内置对象的原型办法，外部代码可以通过重写代码到达暴漏和修改已绑定参数的函数。这在es5的办法下使用polyfill时是一个严峻的平安问题。
// bind polyfill 示例
function bind(fn) {
var prev = Array.prototype.slice.call(arguments, 1);
return function bound() {
var curr = Array.prototype.slice.call(arguments, 0);
var args = Array.prototype.concat.apply(prev, curr);
return fn.apply(null, args);
};
}
// unapply攻击
function unapplyAttack() {
var concat = Array.prototype.concat;
Array.prototype.concat = function replaceAll() {
Array.prototype.concat = concat; // restore the correct version
var curr = Array.prototype.slice.call(arguments, 0);
var result = concat.apply([], curr);
return result;
};
}上面的函数声明忽略了函数bind的prev参数，意味着调取unapplyAttack之后首次调取.concat将会抛出错误。
使用Object.freeze，可以使对象不成变，你可以防止任何内置对象原型办法被重写。
(function freezePrototypes() {
if (typeof Object.freeze !== 'function') {
throw new Error('Missing Object.freeze');
}
Object.freeze(Object.prototype);
Object.freeze(Array.prototype);
Object.freeze(Function.prototype);
}());11.Javascript多维数组扁平化
下面是将多位数组转化为简单数组的三种不一样办法。
var arr = [[1, 2],[3, 4, 5], [6, 7, 8, 9]];
盼望结果：
[1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案1：使用concat()和apply()
var newArr = [].concat.apply([], arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
解决方案2：使用reduce()
var newArr = arr.reduce(function(prev, curr) {
return prev.concat(curr);
});
// [1, 2, 3, 4, 5, 6, 7, 8, 9]解决方案3：使用 ES6 的展开运算符
var newArr = [].concat(...arr); console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
12. 函数中怎样使用可选参数（包罗可选回调函数）
实例函数中第2个与第3个参数为可选参数
function example( err, optionA, optionB, callback ) {
// 使用数组取出arguments
var args = new Array(arguments.length);
for(var i = 0; i < args.length; ++i) {
args[i] = arguments[i];
};
// 第一个参数为错误参数
// shift() 移除数组中第一个参数并将其返回
err = args.shift();
// 假如最后一个参数是函数，则它为回调函数
// pop() 移除数组中最后一个参数并将其返回
if (typeof args[args.length-1] === 'function') {
callback = args.pop();
}
// 假如args中仍有元素，那就是你需要的可选参数
// 你可以像这样一个一个的将其取出：
if (args.length > 0) optionA = args.shift(); else optionA = null;
if (args.length > 0) optionB = args.shift(); else optionB = null;
// 像正常一样连续：检查可否有错误
if (err) {
return callback && callback(err);
}
// 打印可选参数
console.log('optionA:', optionA);
console.log('optionB:', optionB);
console.log('callback:', callback);
/* 你想做的逻辑 */
}
// ES6语法书写更简短
function example(...args) {
// 第一个参数为错误参数
const err = args.shift();
// 假如最后一个参数是函数，则它为回调函数
const callback = (typeof args[args.length-1] === 'function') ? args.pop() : null;
// 假如args中仍有元素，那就是你需要的可选参数你可以像这样一个一个的将其取出：
const optionA = (args.length > 0) ? args.shift() : null;
const optionB = (args.length > 0) ? args.shift() : null;
// ... 反复取更多参数
if (err && callback) return callback(err);
/* 你想做的逻辑 */
}引荐教程：《JS教程》
以上就是JavaScript的技巧的具体内容，更多请关注百分百源码网其它相关文章！
