ES6的使用技巧有哪些

这篇文章主要介绍“es6的使用技巧有哪些”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ES6的使用技巧有哪些”文章能帮助大家解决问题。

前言：

ECMAScript 6（简称ES6）是于2015年6月正式发布的javascript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言  。

另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等

1.打乱数组顺序

let arr = ['????', 67, true, false, '55']arr = arr.sort(() => 0.5 - Math.random())console.log(arr)// [ '????', '55', 67, false, true ]

2.删除数字之外的所有字符

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 izeyeixconst reverseEachWord = reverseBySeparator(reverseSentence, " ")console.log(reverseEachWord)// izeyeix sj os ,emosdnah .lolfunction reverseBySeparator(string, separator) {  return string.split(separator).reverse().join(separator)}

4.将十进制转换为二进制文件或十六进制数

const num = 45num.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.=== 和 == 的区别

// ==   ->  类型转换 (浅比较)// ===  ->  无类型转换 (严格比较)0 == false // true0 === false // false1 == "1" // true1 === "1" // falsenull == undefined // truenull === 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); // Swedenconsole.log(animals); // 3console.log(lions); // Lionsconsole.log(tigers); // Tigersconsole.log(bears); // Bears

8.交换变量的值

let bears = 'bears'let tigers = 'tigers'[bears, tigers] = [tigers, bears]console.log(bears) // tigersconsole.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')) // trueconsole.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')) // trueconsole.log(isAnagram('rat', 'car')) // falseconsole.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) // xieyeziconsole.log(player?.click?.()) // clickconsole.log(player?.teammate?.()) // undefined

11.三目运算符

// condition ? expression if true : expression if falseconst oxygen = 10const diver = (oxygen < 10 ) ? 'Low oxygen' : 'High oxygen'console.log(diver) // High oxygen

12.从数组中随机选择一个值

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.删除数组重复的元素

const animals = ['bears', 'lions', 'tigers', 'bears', 'lions']const unique = (arr) => [...new Set(arr)]console.log(unique(animals)) // [ 'bears', 'lions', 'tigers' ]

15.保留指定位小数

const num = 0.123456789const fixed2 = num.toFixed(2)const fixed3 = num.toFixed(3)console.log(fixed2) // 0.12console.log(fixed3) // 0.123

16.清空数组

const numbers = [1, 2, 3, 4, 5]numbers.length = 0console.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)) // #2e2043

18.从数组中获取最大值和最小值

const nums = [1, 2, 3, 4, 5, -3, 99, -45, -1]const max = Math.max(...nums)const min = Math.min(...nums)console.log(max) // 99console.log(min) // -45

19.空值合并运算符

const nullval = nullcost emptyString = ''const someNum = 13const a = nullval ?? 'A default'const b = emptyString ?? 'B default'const c = SomeNum ?? 'C default'console.log(a) // A defaultconsole.log(b) // '' // empty string != undefined or nullconsole.log(c) // 13

20.过滤数组中值为 false 的值

const nums = [1, 0 , undefined, null, false];const truthyNums = nums.filter(Boolean);console.log(truthyNums) // [1]

关于“ES6的使用技巧有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。