分享ES6?20個經常使用技巧
更新時間:2022年06月06日 17:11:22 作者:Xieyezi
這篇文章主要分享ES6?20個經常使用技巧,作用是使JavaScript語言可以用來編寫復雜的大型應用程序,成為企業(yè)級開發(fā)語言,具體使用詳情需要的小伙伴可以參考下面文章內容
前言:
ECMAScript 6(簡稱ES6)是于2015年6月正式發(fā)布的JavaScript語言的標準,正式名為ECMAScript 2015(ES2015)。它的目標是使得JavaScript語言可以用來編寫復雜的大型應用程序,成為企業(yè)級開發(fā)語言 。
另外,一些情況下ES6也泛指ES2015及之后的新增特性,雖然之后的版本應當稱為ES7、ES8等

1.打亂數(shù)組順序
let arr = ['??', 67, true, false, '55'] arr = arr.sort(() => 0.5 - Math.random()) console.log(arr) // [ '??', '55', 67, false, true ]
2.刪除數(shù)字之外的所有字符
const str = 'xieyezi 23213 is 95994 so hansome 223333' const numbers = str.replace(/\D/g, '') console.log(numbers) // 2321395994223333
3.反轉字符串或者單詞
const sentence = 'xieyezi js so handsome, lol.'
const reverseSentence = reverseBySeparator(sentence, "")
console.log(reverseSentence);
// .lol ,emosdnah os sj izeyeix
const reverseEachWord = reverseBySeparator(reverseSentence, " ")
console.log(reverseEachWord)
// izeyeix sj os ,emosdnah .lol
function reverseBySeparator(string, separator) {
return string.split(separator).reverse().join(separator)
}4.將十進制轉換為二進制文件或十六進制數(shù)
const num = 45 num.toString(2) num.tostring(16)
5.合并多個對象
const city = {
name: 'Chongqing',
population: '1,234,567,890'
}
const location = {
longitude: '116.4',
latitude: '39.9'
}
const fullCity = { ...city, ...location }
console.log(fullCity)
// {
// name: 'Chongqing',
// population: '1,234,567,890',
// longitude: '116.4',
// latitude: '39.9'
// }6.=== 和 == 的區(qū)別
// == -> 類型轉換 (淺比較) // === -> 無類型轉換 (嚴格比較) 0 == false // true 0 === false // false 1 == "1" // true 1 === "1" // false null == undefined // true null === undefined // false
7.解構賦值
const forest = {
location: 'Sweden',
animals: 3,
animalsTypes: ['Lions', 'Tigers', 'Bears'],
};
const { location, animals, animalsTypes } = forest;
const [lions, tigers, bears] = animalsTypes;
console.log(location); // Sweden
console.log(animals); // 3
console.log(lions); // Lions
console.log(tigers); // Tigers
console.log(bears); // Bears8.交換變量的值
let bears = 'bears' let tigers = 'tigers' [bears, tigers] = [tigers, bears] console.log(bears) // tigers console.log(tribes) // bears
9.字符串
9.1判斷回文字符串
const isRevervse = (str1, str2) => {
const normalize = (str) =>
str.toLowerCase()
.normalize('NFD')
.split('')
.reverse()
.join('')
return normalize(str1) === str2
}
console.log(isRevervse('anagram', 'margana')) // true
console.log(isRevervse('rac', 'car')) // true回文字符串: 正著寫和反著寫都一樣的字符串)
9.2判斷兩個字符串是否為互相排列
const isAnagram = (str1, str2) => {
const normalize = (str) =>
str.toLowerCase()
.normalize('NFD')
.split('')
.sort()
.join('')
return normalize(str1) === normalize(str2)
}
console.log(isAnagram('anagram', 'nagaram')) // true
console.log(isAnagram('rat', 'car')) // false
console.log(isAnagram('heArT', 'traEH')) // true判斷兩個字符串是否為互相排列: 給定兩個字符串,一個是否是另一個的排列
10.可選鏈操作符
const player = {
name: 'xieyezi',
rating: 1000,
click: () => {
return 'click'
},
pass: (teammate) => {
return `Pass to ${teammate}`
},
}
console.log(player?.name) // xieyezi
console.log(player?.click?.()) // click
console.log(player?.teammate?.()) // undefined11.三目運算符
// condition ? expression if true : expression if false const oxygen = 10 const diver = (oxygen < 10 ) ? 'Low oxygen' : 'High oxygen' console.log(diver) // High oxygen
12.從數(shù)組中隨機選擇一個值
const elements = [24, 'You', 777, 'breaking', 99, 'full'] const random = (arr) => arr[Math.floor(Math.random() * arr.length)] const randomElement = random(elements) console.log(randomElement) // 777
13.凍結對象
const octopus = {
tentacles: 8,
color: 'blue',
}
Object.freeze(octopus)
octopus.tentacles = 10 // Error, 不會改變
console.log(octopus) // { tentacles: 8, color: 'blue'}14.刪除數(shù)組重復的元素
const animals = ['bears', 'lions', 'tigers', 'bears', 'lions'] const unique = (arr) => [...new Set(arr)] console.log(unique(animals)) // [ 'bears', 'lions', 'tigers' ]
15.保留指定位小數(shù)
const num = 0.123456789 const fixed2 = num.toFixed(2) const fixed3 = num.toFixed(3) console.log(fixed2) // 0.12 console.log(fixed3) // 0.123
16.清空數(shù)組
const numbers = [1, 2, 3, 4, 5] numbers.length = 0 console.log(numbers) // []
17.從 RGB 轉換為 HEX
const rgbToHex = (r, g, b) => {
const toHex = (num) => {
const hex = num.toString(16)
return hex.length === 1 ? `0${hex}` : hex
}
return `#${toHex(r)}${toHex(g)}${toHex(b)}`
}
console.log(rgbToHex(46, 32, 67)) // #2e204318.從數(shù)組中獲取最大值和最小值
const nums = [1, 2, 3, 4, 5, -3, 99, -45, -1] const max = Math.max(...nums) const min = Math.min(...nums) console.log(max) // 99 console.log(min) // -45
19.空值合并運算符
const nullval = null cost emptyString = '' const someNum = 13 const a = nullval ?? 'A default' const b = emptyString ?? 'B default' const c = SomeNum ?? 'C default' console.log(a) // A default console.log(b) // '' // empty string != undefined or null console.log(c) // 13
20.過濾數(shù)組中值為 false 的值
const nums = [1, 0 , undefined, null, false]; const truthyNums = nums.filter(Boolean); console.log(truthyNums) // [1]
到此這篇關于分享ES6 20個經常使用技巧的文章就介紹到這了,更多相關ES6 技巧內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

