信息发布→ 登录 注册 退出

分享ES6 20个经常使用技巧

发布时间:2026-01-11

点击量:
目录
  • 前言:
  • 1.打乱数组顺序
  • 2.删除数字之外的所有字符
  • 3.反转字符串或者单词
  • 4.将十进制转换为二进制文件或十六进制数
  • 5.合并多个对象
  • 6.=== 和 == 的区别
  • 7.解构赋值
  • 8.交换变量的值
  • 9.字符串
    • 9.1判断回文字符串
    • 9.2判断两个字符串是否为互相排列
  • 10.可选链操作符
    • 11.三目运算符
      • 12.从数组中随机选择一个值
        • 13.冻结对象
          • 14.删除数组重复的元素
            • 15.保留指定位小数
              • 16.清空数组
                • 17.从 RGB 转换为 HEX
                  • 18.从数组中获取最大值和最小值
                    • 19.空值合并运算符
                      • 20.过滤数组中值为 false 的值

                        前言:

                        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 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 // 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); // Bears

                        8.交换变量的值

                        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?.()) // undefined

                        11.三目运算符

                        // condition ? expression if true : expression if false
                        const oxygen = 10
                        const 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.123456789
                        const fixed2 = num.toFixed(2)
                        const fixed3 = num.toFixed(3)
                        console.log(fixed2) // 0.12
                        console.log(fixed3) // 0.123

                        16.清空数组

                        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)) // #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) // 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.过滤数组中值为 false 的值

                        const nums = [1, 0 , undefined, null, false];
                        const truthyNums = nums.filter(Boolean);
                        console.log(truthyNums) // [1]
                        在线客服
                        服务热线

                        服务热线

                        4008888355

                        微信咨询
                        二维码
                        返回顶部
                        ×二维码

                        截屏,微信识别二维码

                        打开微信

                        微信号已复制,请打开微信添加咨询详情!