当前位置: 首页 > 科技观察

emoji表情还能这么玩?

时间:2023-03-13 00:36:37 科技观察

“表情符号(日语:絵文文/えもじemoji)”是日本无线通信中使用的视觉表情符号。表情指的是图片,文字指的是文字。它可以用来表示各种表情,比如笑脸。笑、蛋糕是食物的意思等等,在我们日常的工作和生活中,我们也经常会用到Emoji表情。以下Emoji表情相信大家都不陌生:使用Emoji表情不仅可以增加聊天的乐趣,还可以玩一些“花样”。例如,在地址栏上实现url动画:在上面的动画中,底部Tab页面显示“音视频播放器的播放进度条”。不仅如此,我们还可以用Emoji表情来实现图文动画:看完上面的动画,你是不是很惊讶——“Emoji还能这么玩”。对于前端工程师来说,我们在日常工作中经常要和数组打交道。使用数组对象上提供的一些方法,我们可以很容易地实现对数组的各种操作。这里我们对JavaScript数组方法做了一个简单的分类和总结,如下图所示:上图中列出的大部分方法,相信在你平时的工作中是有用的。接下来阿宝哥就通过表情符号来帮助大家更好地理解JavaScript数组的“16”个常用方法。1.map方法map方法用于创建一个新的数组,其结果是数组中的每个元素都是调用一次提供的函数后的返回值。consthungryMonkeys=["🐒","🦍","🦧"];constfeededMonkeys=hungryMonkeys.map((m)=>m+"🍌");console.log(feededMonkeys);//['🐒🍌','🦍🍌','🦧🍌']方法使用文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map2.filter方法filter方法会创建一个新数组,通过检查指定数组中所有符合条件的元素来检查新数组中的元素。constguests=["👩👨","👩👩","👨","👩","👨👨"];constsingles=guests.filter((g)=>g.length/2===1);console.log(singles);//['👨','👩']使用文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter3。some方法some方法用于测试数组中是否至少有一个元素通过提供的函数测试。constparticipants=["🔇","🔇","🔊","🔇","🔊"];constisLoud=(p)=>p==="🔊";consttroubles=participants.some(isLoud);console.log(troubles);//true使用文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some4.every方法every方法用于检查数组的所有元素是否满足函数定义的条件。constvisitors=["👨","👽","👨","👨","🤖"];constisHuman=(e)=>e==="👨";constonlyHumans=visitors.every(isHuman);console.log(onlyHumans);//假使用文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every5.push方法push方法用于将一个或多个元素添加到数组末尾并返回新的长度。constanimals=["🐂","🐒","🐔"];animals.push("🐴","🐑");console.log(动物);//['🐂','🐒','🐔','🐴','🐑']文档:https://developer.mozilla。org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push6.concat方法concat方法用于组合两个或多个数组并返回一个新数组。constdogs=["🐶","🐶"];constcats=["🐱","🐱","🐱"];constpets=dogs.concat(猫);console.log(pets);//['🐶','🐶','🐱','🐱','🐱']使用文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat7。unshift方法unshift方法用于将一个或多个元素添加到数组的开头并返回新的长度。lettrain=["🚃","🚃","🚃","🚃"];train.unshift("🚂");console.log(火车);//['🚂','🚃','🚃','🚃','🚃']文档:https://developer.mozilla。org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift8.splice方法splice方法通过删除或替换现有元素或原地添加新元素来修改数组,并返回修改后的内容。letweather=["??","🌧?","??"];weather.splice(1,2,"??");console.log(weather);//['??','??']使用文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice9。slice方法slice方法返回一个数组从头到尾(不包括尾部)部分数组的浅拷贝到一个新的数组对象。constsolutionsOfClassmates=["📃","📑","📄","📝"];constmyOwnSolutionReally=solutionsOfClassmates.slice(2,3);console.log(myOwnSolutionReally);//['📄']使用文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice10。reverse方法reverse方法将数组中元素的位置反转,返回数组。letrabbitWins=["🐇","🦔"];consthedgehogWins=rabbitWins.reverse();console.log(hedgehogWins);//['🦔','🐇']文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse11。sort方法sort方法用于对数组的元素进行排序并返回数组。constbooks=["📕","📗","📕","📒","📗","📒"];books.sort();console.log(books);//['📒','📒','📕','📕','📗','📗']使用文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort12。join方法join方法用于将数组中的所有元素通过指定的分隔符分隔成一个字符串并返回结果字符串。constdevices=["💻","🖥?","🖥?","💻","🖨?"];constnetwork=devices.join("??");console.log(network);//💻??🖥???🖥???💻??🖨?使用文档:https://developer.mozilla。org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join13.includes方法includes方法用于判断一个数组是否包含指定的值。根据情况,如果包含则返回true,否则返回false。constfood=["🥦","🥬","🍅","🥒","🍩","🥕"];constcaught=食物。includes("🍩");console.log(caught);//true使用文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes14.flat方法flat方法用于展平嵌套数组对象。constsavings=["💵",["💵","💵"],[[["💰"]]]];constloot=savings.flat(3);控制台.log(loot);//['💵','💵','💵','💰']文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat15。fill方法fill方法用固定值填充数组中从开始索引到结束索引的所有元素,不包括结束索引。letseeds=["🌱","🌱","🌱","🌱","🌱"];seeds.fill("🌳",1,4);console.log(seeds);//['🌱','🌳','🌳','🌳','🌱']文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill16。from方法from方法用于从类数组或可迭代对象创建一个新的浅数组实例来复制。constwild="🐻🐯🦁";consttamed=Array.from(wild);console.log(tamed);//['🐻','🐯','🦁']文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from看了上面16个方法,是不是有点意犹未尽。最后,阿宝哥分享了文章中使用的数组方法的示例图Promise被玩了四十八招:好吧,我就在这里介绍一下Emoji的一些有趣,有趣和有用的东西。