分享ES6 20个经常使用技巧
短信预约 -IT技能 免费直播动态提醒
前言：
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)
// 23213959942233333.反转字符串或者单词
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.将十进制转换为二进制文件或十六进制数
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.=== 和 == 的区别
// == -> 类型转换 (浅比较)
// === -> 无类型转换 (严格比较)
0 == false // true
0 === false // false
1 == "1" // true
1 === "1" // false
null == undefined // true
null === undefined // false7.解构赋值
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) // bears9.字符串
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 oxygen12.从数组中随机选择一个值
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) // 77713.冻结对象
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.123456789
const fixed2 = num.toFixed(2)
const fixed3 = num.toFixed(3)
console.log(fixed2) // 0.12
console.log(fixed3) // 0.12316.清空数组
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.从数组中获取最大值和最小值
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) // -4519.空值合并运算符
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) // 1320.过滤数组中值为 false 的值
const nums = [1, 0 , undefined, null, false];
const truthyNums = nums.filter(Boolean);
console.log(truthyNums) // [1]到此这篇关于分享ES6 20个经常使用技巧的文章就介绍到这了,更多相关ES6 技巧内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
