前端实用的 JavaScript 代码片段

本篇文章给大家分享个前端常用的JS代码片段。希望可以帮助到大家~~~

1、获取数组中的最大值和最小值

var arr = [1, 2, 3];
var max = Math.max(...arr);//3
var min = Math.min(...arr);//1

2、将字符串拆分成数组

① 使用split()方法

var str="Welcome";
var n=str.split("");
console.log(n);

输出：

["W","e","l","c","o","m","e"]

 ② 使用Array.from()方法

Array.from()方法是javascript中的一个内置函数，它从给定的数组创建一个新的数组实例。对于字符串，字符串的每个字母表都会转换为新数组实例的元素；对于整数值，新数组实例将获取给定数组的元素。

var str="Welcome";
var n=Array.from(str);
console.log(n);

输出：

["W","e","l","c","o","m","e"]

 ③ 使用扩展运算符

var str="Welcome";
var n=[...str];
console.log(n);

输出：

["W","e","l","c","o","m","e"]

3、三元操作符

当想写if...else语句时，使用三元操作符来代替。

const x = 20;
let str;
if (x > 10) {
   str = '1';
} else {
   str = '2';
}

简写：

const str = x > 10 ? '1' : '2';

4、声明变量简写方法

let x;
let y;
let z;

简写方法：

let x, y, z=1;

5、判断数组中的元素是否都相等

const allEqual = arr => arr.every(val => val === arr[0]);

allEqual([1, 2, 3); // false
allEqual([1, 1, 1]); // true

6、数组去重

① 利用ES6 的Set

function unique(arr) {
   return [...new Set([3,4,4,4,4,5])]
}
console.log(unique(arr)); 

简写方法：

var unique = (a) => [...new Set([3,4,4,4,4,5])];
console.log(unique); 

输出：

[3,4,5]

② 利用filter

var array = [3,4,4,4,4,5]; 
function unique(array) { 
var res = array.filter(function(item, index, array){ 
return array.indexOf(item) === index; 
}) 
return res; 
} 
console.log(unique(array));

输出：

[3,4,5]

③ 利用sort

先对数组进行排序sort()，排好序，然后把数组的当前项和后一项进行比较，相同则使用数组的splice(相同的位置，1)，但是为了防止数组塌陷，每次删除数组元素的时候要把i的值减一。

 var ary = [3,4,4,4,4,5];
 ary.sort(function(a,b){ 
return a-b; 
});//返回的是排好序的数组 
for(var i=0;i<ary.length;i++){
 if(ary[i]===ary[i+1]) 
{ 
ary.splice(i,1); i--;//为了防止数组塌陷 
} 
}

7、循环简写

for (let i = 0; i < arr.length; i++)

简写：

for (let index in arr)

或：

function logArrElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}

arr.forEach(logArrElements);

8、将类数组转换为数组

export const formArray = (arrO) => {
    var arr = [];
    if (Array.isArray(arrO)) {
        arr = arrO;
    } else {
        arr = Array.prototype.slice.call(arrO);
    };
    return arr;
}

9、数字类型判断

export const isNumber = (o) => {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
}

10、判断null

export const isNull = (o) => {
    return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
}

  

内容如果有错，欢迎纠正 ~~~