JavaScript常用技巧汇总

1.JavaScript反向字符串

const stringReverse = str => str.split('').reverse().join('');
console.log(stringReverse('hello world')); //dlrow olleh

2.滚动到页面顶部

const scrollToTop = () => window.scrollTo(0,0);
scrollToTop();

3.删除数组中的重复项

const removeDuplicate = (arr) => [...new Set(arr)];
console.log(removeDuplicate([1,2,3,4,4,2,1])); // [1,2,3,4]

4.获取数组中的随机项

const randomItemArray = (arr) => arr[Math.floor(Math.random() * arr.length)];
console.log(randomItemArray(['a','b','c',1,2,3]));

5.获取数组中的最大数

const maxNumber = (arr,n=1) => [...arr].sort((a,b)=>b-a).slice(0,n);
console.log(maxNumber([4,9,5,7,2])); // [9]

6.获取数组中的最小数

const minNumber = (arr,n=1) => [...arr].sort((a,b)=>a-b).slice(0,n);
console.log(minNumber([3,5,9,7,1])); // [1]

7.获取数组中的平均数

const averageNumber = arr => arr.reduce((a,b)=>a+b) / arr.length;
console.log(averageNumber([1,2,3,4,5])); //3

8.检查是否为数字类型

function isNumber(num){
	return !isNaN(parseFloat(num)) && isFinite(num);
}
console.log(isNumber('hello')); //false
console.log(isNumber(123)); //true

9.检查类型为空

const checkNull = val => val === undefined || val === null;
console.log(checkNull(123)); //false
console.log(checkNull()); //true
console.log(checkNull('hello')); //false

10.检查元素的类型

const checkType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
console.log(checkType(true)); //boolean
console.log(checkType('hello world')); //string
console.log(checkType(123)); //number

11.计算数组中元素的出现次数

const countOccurrences = (arr,val) => arr.reduce((a,v)=>(v === val ? a+1 : a),0);
console.log(countOccurrences([1,2,2,4,5,6,2], 2)); // 3

12.使用JavaScript获取当前URL

const getCurrentURL = () => window.location.href;
console.log(getCurrentURL());

13.大写字符串中的字母

const capitalizeString = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
console.log(capitalizeString('niem vui lap trinh')); //Niem Vui Lap Trinh

14.将RGB转换为十六进制

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
console.log(rgbToHex(52, 45, 125)); //#342d7d

15.将数字转换为数组

const numberToArray = n => [...`${n}`].map(i => parseInt(i));
console.log(numberToArray(246)); //[2, 4, 6]
console.log(numberToArray(357911)); //[3, 5, 7, 9, 1, 1]

16.从 HTML 中获取内容

const getTextInHTML = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
console.log(getTextInHTML('<h2>Hello World</h2>')); //Hello World
console.log(getTextInHTML('<div><p>title </p><h2>Hello World</h2></div>')); //title Hello World
var strTemplate = `<div>
		               <p>hello</p>
		               <span>tom<span>jack</span></span>
		               <h2>Hello World</h2>
		           </div>`;
console.log(getTextInHTML(strTemplate));
// hello
// tomjack
// Hello World

17.在JS中分配多个变量

var [a,b,c,d] = [1,2,'hello',false];
console.log(a,b,c,d); // 1 2 "hello" false

18.空数组

let arr = [1,2,3,4,5];
arr.length = 0;
console.log(arr); // []

19.在JS中复制对象

const obj = {
    name:'niem vui lap trinh',
    age:12
};
const copyObject = {...obj};
console.log(copyObject); // {name: 'niem vui lap trinh', age: 12}

20.检查偶数和奇数

const isEven = num => num % 2 === 0;
console.log(isEven(1)); //false
console.log(isEven(2)); // true

21.合并两个或多个数组JS

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const arrs = arr1.concat(arr2);
console.log(arrs); // [1, 2, 3, 4, 5, 6]

22.将内容复制到剪贴板

const copyTextToClipboard = async (text) => {
  await navigator.clipboard.writeText(text)
}

23.从一系列值中选择一个随机数

var max = 10;
var min= 1;
var numRandom = Math.floor(Math.random() * (max-min+1)) + min;
console.log(numRandom);

24.检查元素是否聚焦

const elementFocus = (el) => (el === document.activeElement);
// elementIsInFocus(element);
/*if true element is focus*/
/*if false element is not focus*/

25.用 JS 测试苹果设备

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);
/*if true element is apple devices **/
/*if false element is not  apple devices*/

26.将字符串转换为数组

const str = "Hello";
const arrss = [...str];
console.log(arrss); /* ['H', 'e', 'l', 'l', 'o'] */

27.捕获右键单击

window.oncontextmenu = () => {console.log("Right Click is Pressed!")}

28.空合并运算符

空合并运算符 (??) 是一个逻辑运算符，当其左侧操作数为空或未定义时返回其右侧操作数，否则返回其左侧操作数。

const foo = null ?? 'default string';
const baz= 0 ?? 42;
console.log(foo); // default string
console.log(baz); // 0

29.在Array中查找对象

find()方法可用于搜索数组以查找特定对象。

const employess = [
	{name:'paul',job_title:'software Engineer'},
    {name:'peter',job_title:'web Developer'},
    {name:'harald',job_title:'screen Designer'},
]
let sen = employess.find(data => data.job_title === 'software Engineer');
console.log(sen); //{name: "paul", job_title: "software Engineer"}

30.智能数据过滤

使用 JavaScript 内置的 Filter 方法过滤您的数据。如果您的输入有大量数据并且您只需要输入数组中的特定数据，这很重要。

const jobs = ["Frontend Developer", "Backend Developer", "Data Scientist", "Teacher"]
const filtered_jobs1 = jobs.filter(data => data.length < 10)
const filtered_jobs2 = jobs.filter(data => data.includes("Developer"))
console.log(filtered_jobs1) // [ 'Teacher' ]
console.log(filtered_jobs2) // [ 'Frontend Developer', 'Backend Developer' ]

31.if判断是否有数据

// var testVal = ''; // 2222
// var testVal = []; // 1111
// var testVal = {}; // 1111
// var testVal = 0; // 2222
// var testVal = null; // 2222
// var testVal = undefined; // 2222
// var testVal = '0'; // 1111
if(testVal){
    // []   {}
    console.log('1111')
}else{
    // ''  0  null  undefined
    console.log('2222')
}

32.获取对象长度

var testObjVal = {name:'tom',age:12}
console.log(Object.keys(testObjVal)) //["name", "age"]
console.log(Object.keys(testObjVal).length) //2
console.log(Object.values(testObjVal)) //["tom", 12]
console.log(Object.values(testObjVal).length) //2
console.log(Object.entries(testObjVal)) // [ ["name", "tom"], ["age", 12] ]
console.log(Object.entries(testObjVal).length) //2

6种JavaScript实现单词首字母大写的方法汇总

（1）for循环

var a = 'Hi, my name\'s Han Meimei, a SOFTWARE engineer';
function titleCase(s){
    var i,ss = s.toLowerCase().split(/\s+/);
    for(i=0;i<ss.length;i++){
        ss[i] = ss[i].slice(0,1).toUpperCase() + ss[i].slice(1);
    }
    return ss.join(' ');
}
console.log(titleCase(a)); //Hi, My Name's Han Meimei, A Software Engineer

（2）for循环+replace

function titleCase1(str){
    var converToArray = str.toLowerCase().split(' ');
    for (var i = 0; i < converToArray.length; i++) {
        var char = converToArray[i].charAt(0);
        converToArray[i] = converToArray[i].replace(char,function replace(char){
            return char.toUpperCase();
        })
    }
    return converToArray.join(' ');
}
console.log(titleCase1(a)); //Hi, My Name's Han Meimei, A Software Engineer

（3）正则+replace

function titleCase2(s){
 	return s.toLowerCase().replace(/\b([\w|']+)\b/g, function(word) {
        return word.replace(word.charAt(0), word.charAt(0).toUpperCase());  
    });
}
console.log(titleCase2(a)); //Hi, My Name's Han Meimei, A Software Engineer

（4）数组+map

function titleCase3(s) {  
    return s.toLowerCase().split(/\s+/).map(function(item, index) {  
        return item.slice(0, 1).toUpperCase() + item.slice(1);  
    }).join(' ');  
}  
console.log(titleCase3(a)); //Hi, My Name's Han Meimei, A Software Engineer

（5）数组+reduce

function titleCase4(s) {  
    return s.toLowerCase().split(/\s+/).reduce(function(prev, item, array, array) {  
        return prev + (prev.trim() && ' ') + item.slice(0, 1).toUpperCase() + item.slice(1);  
    }, '');  
}  
console.log(titleCase4(a)); //Hi, My Name's Han Meimei, A Software Engineer

（6）ES6写法

function titleCase5(str) {  
    return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase());  
}  
console.log(titleCase5(a)); //Hi, My Name's Han Meimei, A Software Engineer