令你瞠目结舌的 JavaScript 代码技巧

1.星星评分

我们一般写星星评分时，使用的是图片的切换，在这里我们可以考虑利用字符串的截取方法slice，slice可以接受两个参数，表示截取从第一个参数所对应的索引开始，到第二个参数所对应的索引结束，不包括第二个参数所对应的索引位。

"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);

rate的取值可以为1-5，分别表示1到5颗星

2. 数组去重

var arr = [1,1,2,2,2,3];

我们可以利用set（集合）结构值不能重复的特点，以及扩展运算符

arr = new Set[arr];

arr = [...arr];

3. 给数组添加取一个最大值和最小值的方法

var arr = [1,5,7,9];

所有的数组都是Array的实例，我们可以在Array原型对象上添加getMinVal和getMaxVal方法

结合Math.min和Math.max两个方法，可以得到如下代码

Array.prototype.getMinVal = function(){

return Math.min.apply(null,this);//这里的this指具体的实例，如上的arr

}

Array.prototype.getMaxVal = function(){

return Math.max.apply(null,this);

}

4. 深拷贝

令你瞠目结舌的 JavaScript 代码技巧

var a = [1,2,3,4];

var b = a;

将a 赋值给b，拷贝的是引用，任何一个变量的值发生改变都会影响到另一个变量

我们可以使递归的方式解决，代码如下

function deepCopy(obj){

if(Array.isArray(obj)){

var newObj = [];

}else{

var newObj = {};

}

for(var i in obj){

if(typeof obj[i] == "object"){

newObj[i] = deepCopy(obj[i]);

}else{

newObj[i] = obj[i]

}

return newObj;

}

但这种方式稍微有些繁琐

我们可以利用JSON.stringify()和JSON.parse()方法解决

var b = JSON.parse(JSON.stringify(a));

将a转换为字符串，这样就不会涉及到引用类型了，也就不必考虑堆栈存储了

5. 利用三元运算符求三个数的最大值最小值

var a = 5;

var b = 10;

var c = 1;

var max = (a>b)?(a>c?a:c):(b>c?b:c);

先比较第一个小括号是true,就执行第二个小括号里的内容;(如果是false就执行第三小括号); 括号里还有比较,true就执行a,false就执行c;a不大于c是false所有就走c

6. 作用域安全的构造函数

function Person(name, age, job) { this.name = name; this.age = age; this.say= function (){

console.log(this.name)

} }

var p1 = new Person("Nicholas", 34, 'software Engineer');

在写代码时容易漏写new，造成this指向错误，所以可以换成如下写法

function Person(name, age, job) {

//检测this对象是否是Person的实例

if(this instanceof Person) { this.name = name; this.age = age; this.say= function (){

console.log(this.name)

}} else { return new Person(name, age, job); } }

来源：千锋HTML5

令你瞠目结舌的 JavaScript 代码技巧

1.星星评分

相关推荐