温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ES6的使用技巧有哪些

发布时间:2022-06-07 09:20:16 来源:亿速云 阅读:143 作者:zzz 栏目:开发技术

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

    前言:

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

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

    ES6的使用技巧有哪些

    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]

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

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    es6
    AI