首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Web 开发的新标杆!7 个 JavaScript One-Liners 改变您的编程方式

Web 开发的新标杆!7 个 JavaScript One-Liners 改变您的编程方式

原创
作者头像
zayyo
发布2023-09-24 16:54:07
发布2023-09-24 16:54:07
19000
代码可运行
举报
文章被收录于专栏:zayyo前端zayyo前端
运行总次数:0
代码可运行

条件(三元)运算符

如果三元是处理“if”验证的一种非常简单的方法:

代码:

代码语言:javascript
代码运行次数:0
运行
复制
function validateBetterCommunity(community) {
  // Structure to Verify
  return community === 'devto' ? 'You are right!' : 'You are wrong :(';
}

console.log(validateBetterCommunity('devto'));
// Expected output: "You're right!"

console.log(validateBetterCommunity('another one'));
// Expected output: "You're wrong :("

💡 生成随机字符串 ID

生成一个随机字符串 id 很简单:

代码语言:javascript
代码运行次数:0
运行
复制
// Structure to Generate
const randomIdentifier = Math.random().toString(30).slice(2.5);

console.log(randomIdentifier);
// Output: 'd5ptscfrln7';

💡 检查元素是否有焦点

检查是否有任何element具有只读 activeElement属性的焦点:

代码语言:javascript
代码运行次数:0
运行
复制
const onboarding = document.querySelector('.onboarding');

// Structure to Verify
const onboardingHasFocus = onboarding == document.activeElement;

console.log(onboardingHasFocus);
// Output: false;

💡 传播运算符

通过spread(...)我们得到了“合并”元素的替代方法:

代码语言:javascript
代码运行次数:0
运行
复制
const devToPeople = [
  {
    name: 'Renan',
    id: 'renancferro',
  }
];

const newDevToParticipants = [
  {
    name: 'New User',
    id: 'newUserId',
  },
  ...devToPeople
];

console.log(newDevToParticipants);
// Output: 
//[
//    {
//        name: 'New User',
//          id: 'newUserId',
//    },
//    {
//        "name": "Renan",
//        "id": "renancferro"
//    }
//];

💡 获取一个随机元素

用一行代码获取随机对象元素:

代码语言:javascript
代码运行次数:0
运行
复制
const newDevToParticipants = [
  {
    name: 'New User',
    id: 'newUserId',
  },
  {
    name: 'Renan',
    id: 'renancferro',
  },
];

// Structure to Get
const getRandomUser = (users) =>  users[Math.floor(Math.random() * users.length)];

console.log(getRandomUser(newDevToParticipants));
// Output: {
//    "name": "Renan",
//    "id": "renancferro"
//}

💡 在特定位置插入新对象

如何在对象数组中的特定位置插入新对象:

代码语言:javascript
代码运行次数:0
运行
复制
const newDevToParticipants = [
  {
    name: 'New User',
    id: 'newUserId',
  },
  {
    name: 'Renan',
    id: 'renancferro',
  },
];

// Structure to insert:
const insertNewUser = (originalArray, index, newItem) => [...originalArray.slice(0, index), newItem, ...originalArray.slice(index)];

const newUser = {
    name: 'New User 2',
    id: 'newUser2',
};

console.log(insertNewUser(newDevToParticipants, 1, newUser));
// Output
//[
//    {
//        "name": "New User",
//        "id": "newUserId"
//    },
//    {
//        "name": "New User 2",
//        "id": "newUser2"
//    },
//    {
//        "name": "Renan",
//        "id": "renancferro"
//    }
//]

💡复制到剪贴板

将内容复制到剪贴板的基本且简单的结构:

代码语言:javascript
代码运行次数:0
运行
复制

const copyContentToClipboard = (contentToCopy) => navigator.clipboard.writeText(contentToCopy);

copyContentToClipboard('Do it different!');

我正在参与2023腾讯技术创作特训营第二期有奖征文,瓜分万元奖池和键盘手表

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 条件(三元)运算符
  • 💡 生成随机字符串 ID
  • 💡 检查元素是否有焦点
  • 💡 传播运算符
  • 💡 获取一个随机元素
  • 💡 在特定位置插入新对象
  • 💡复制到剪贴板
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档