课程介绍

学习资料

来源：成都天府源码时代IT培训机构时间：2022/7/18 16:07:24

成都天府前端培训机构哪家好

分享 12 个解决日常工作问题的JS 代码片段

在本文中，我将分享 12 个有用的 JavaScript 片段。可以帮助您解决日常开发中的一些问题，希望通过这些代码的学习，加快您的开发速度并节省您的宝贵时间！

1、破坏赋值

在 JavaScript 中，您可以使用析构方法将数组中的值解包并将它们分配给其他变量。

// 1. Destructive Assignmentconst data = ["Paul", "too old", "Software Engineer"]const [name, age, job_title] = data console.log(name, age, job_title) // Paul too old Software Engineer

2、在Array中查找对象

JavaScript find() 方法可用于搜索数组以查找特定对象。

// 2. Find an object in Arrayconst employess = [ {name: "Paul", job_title: "Software Engineer"}, {name: "Peter", job_title: "Web Developer"}, {name: "Harald", job_title: "Screen Designer"},]let sen = employess.find(data => data.job_title === "Software Engineer") console.log(sen) // { name: 'Paul', job_title: 'Software Engineer' }

3、反转字符串

以下代码段可用于在不使用循环的情况下反转任何字符串。

// 3. Reverse a Stringconst reverse = (input) => { return input.split("").reverse().join("");} console.log(reverse("Paul Knulst")) // tslunK luaPconsole.log(reverse("Medium is awesome")) // emosewa si muideM

4、带有占位符的模板文字

如果您使用模板文字，您可以借助 ${} 方法在字符串中包含变量。

// 4. Placeholder in Stringslet placeholder1 = "Engineer";let placeholder2 = "Developer"; console.log(`I'm a Software ${placeholder1}`); // I'm a Software Engineerconsole.log(`I'm a Software ${placeholder2}`); // I'm a Software Developer

5、单行 if-else 语句

对于 JavaScript 中的简单 if-else 语句，您可以使用单行方法来执行它。

// 5. One-Line if-else Statement // normalif (13 > 37) { console.log(true);} else { console.log(false)}// One liner13 > 37 ? console.log(true) : console.log(false)

6、摆脱重复

在 JavaScript 中，有一种简单的方法可以从任何输入数组中去除重复项。当数组中有很多元素并且可能有一些重复项时，这非常方便。

以下代码段将展示如何使用 Set 数据类型来实现此目的

// 6. Get Rid of Duplicatesfunction removeDuplicates(array) { return [...new Set(array)];} const uniqueStr = removeDuplicates(["Paul", "John", "Harald", "Paul", "John"])const uniqueNr = removeDuplicates([1, 1, 2, 2, 3, 3, 4, 5, 6, 7, 7, 7, 9])console.log(uniqueStr) // [ 'Paul', 'John', 'Harald' ]console.log(uniqueNr) // [1, 2, 3, 4, 5, 6, 7, 9]

7、将字符串拆分为数组

如果您想将字符串拆分为数组，可以使用以下代码片段

// 7. Split String to Arrayconst randomString = "Software"const newArray = [...randomString] console.log(newArray) // ['S', 'o', 'f', 't', 'w', 'a', 'r', 'e']

8、捕获右键单击

如果使用 JavaScript 并希望在用户使用时捕获右键单击以执行某些代码。

// 8. Capture Right Click// only usable in HTML/JSwindow.oncontextmenu = () => {console.log("Right Click is Pressed!")}

9、遍历键和值

这个有用的片段可用于迭代字典数据的键（或值）。为此，您可以检索键/值并使用 forEach 函数。

// 9. Looping through Keys and Valuesconst programming_languages = {JavaScript: 1, Kotlin: 2, Python: 3};Object.keys(programming_languages).forEach((key) => { console.log(key);});// JavaScript// Kotlin// PythonObject.values(programming_languages).forEach((key) => { console.log(key);});// 1// 2// 3

10、智能数据过滤

使用 JavaScript 内置的 Filter 方法过滤您的数据。如果您的输入有大量数据并且您只需要输入数组中的特定数据，这很重要。

// 10. Smart Data Filterationconst jobs = ["Frontend Developer", "Backend Developer", "Data Scientist", "Teacher"]const filtered_jobs1 = jobs.filter(data => data.length < 10)const filtered_jobs2 = jobs.filter(data => data.includes("Developer")) console.log(filtered_jobs1) // [ 'Teacher' ]console.log(filtered_jobs2) // [ 'Frontend Developer', 'Backend Developer' ]

11、空合并运算符

空合并运算符 (??) 是一个逻辑运算符，当其左侧操作数为空或未定义时返回其右侧操作数，否则返回其左侧操作数。

// 11. Nullish coalescing operatorconst foo = null ?? 'default string';const baz = 0 ?? 42; console.log(foo); // default stringconsole.log(baz); // 0

12、错误处理

在编程中，开发过程中总会发生错误。为了避免您的程序崩溃，您可以使用 try-catch 语句。这是每个编程语言中的一种众所周知的语法，用于捕获运行时错误。

// 12. Error Handlingfunction getRectArea(width, height) { if (isNaN(width) || isNaN(height)) { throw 'Parameter is not a number!'; }} try { getRectArea(3, "A")} catch (err) { console.log(`There was an error: ${err}`)} finally { console.log("This code block is executed regardless of try/catch results")}// Output:// There was an error: Parameter is not a number!// This code block is executed regardless of try/catch results

🔺免责声明🔺

*本文整理自网络，如有侵权请联系删除*

为什么那么多人选择HTML前端?

Learn HTML5 front end

我要就业

毕业等于失业？学较新前端技能，做较酷的IT人
我要转行

工资低，没上升空间？轻松转行，打开职业前景
我要加薪

天天加班不加工资？提升实力，理直气壮提加薪
我要创业

大前端课程，全面提升能力，为自己打工较佳选择

为什么前端是互联网的不二选择？

应用途径广阔
岗位需求量大
热点区域崛起
薪资情况
涨薪幅度

课程大纲

第 1 阶段
第 2 阶段
第 3 阶段
第 4 阶段
第 5 阶段
第 6 阶段
第 7 阶段

WEB网页基础

· HTML5+CSS3基础入门: 课程内容熟悉HTML5入门基本内容; 项目实战京东登录注册案例（HTML+CSS）

· HTML5+CSS3进阶: 课程内容掌握继承与级、选择器、盒子模型、布局样式等使用方法; 项目实战京东登录注册案例（HTML+CSS）

· Photoshop: 课程内容掌握Photoshop基本操作; 项目实战项目实战企业网站

WEB编程基础

· JavaScript基础: 课程内容了解较前沿JavaScript知识; 项目实战H5音乐播放器、H5小游戏

· BOM+DOM编程: 课程内容BOM+DOM编程; 项目实战通过游戏应用开发

· JavaScript交互及动画效果: 课程内容掌握运动框架的封装(匀速运动缓冲运动多物体运动); 项目实战实现企业站的轮播，选项卡，楼层跳转等常规功能

· jQuery EasyUI: 课程内容熟悉jQueryEasyUI框架环境搭建; 项目实战电子购物网站

响应式网站与项目自动化开发

· HTML5、CSS3进阶: 课程内容掌握HTML5时代多媒体、Web存储等技术; 项目实战H5动效简历，H5原生移动商城

· Bootstrap4: 课程内容掌握来自Twitter工程师开发的目前流行度很高的前端响应式框架; 项目实战电影主题页设计

· 前端依赖管理: 课程内容熟练使用bower来管理前端库，达到一个命令搞定所有项目依赖; 项目实战响应式股票交易平台

· Mysql: 课程内容了解Mysql背景，搭建Mysql环境; 项目实战响应式股票交易平台

Web编程与框架原理

· JavaScript编程: 课程内容掌握JavaScript面向对象思想; 项目实战jQuery对联插件、jQuery表单验证插件

· NodeJS: 课程内容掌握Node服务端编程技术，Expres搭建服务器; 项目实战在线聊天室

· WebSocket: 课程内容掌握HTTP协议; 项目实战在线聊天室

· MVVM架构源码解析: 课程内容掌握MVC、MVP和MVVM架构的演变历史; 项目实战迷你MVC框架、迷你Vue框架

VUE全家桶与多端项目管理

· VUE2，VUE3: 课程内容掌握Vue2框架的环境搭建，指令，表达式等; 项目实战大型超市管理系统

· ElementUI＋Koa2(Node.js)＋Mysql: 课程内容熟练使用基于Vue2的饿了么前端视图框架ElementUI; 项目实战外卖后台管理系统

· TypeScript: 课程内容TypeScript是一种由微软开发的自由和开源的编程语言; 项目实战外卖APP、源码音乐App

· uniapp/Taro微信小程序: 课程内容通过学习了解视图层、逻辑层知识，小程序框架、支付接口等; 项目实战源码电影小程序、四海香美食小程序

React移动混合式开发

· React: 课程内容掌握来自Facebook工程师开发的流行前端框架-ReactJS; 项目实战源码房产App、源码电影App

· React Native/Flutter: 课程内容熟练搭建ReactNative环境、掌握本地化布局和常见组件; 项目实战源码生活APP

赠送课程

· Canvas: 课程内容掌握HTML5绘图API-Canvas，熟练绘制直线、矩形，圆型等图案; 项目实战报表&飞翔小鸟游戏

· Angular1.X: 课程内容掌握emmet语法，angular脚手架等; 项目实战源码商城APP

· React: 课程内容掌握来自Facebook工程师开发的流行前端框架-ReactJs; 项目实战源码房产APP

· PHP: 课程内容了解PHP历史，搭建PHP运行环境; 项目实战响应式金融借贷平台

师资力量

经验丰富老司机带路，“钱”程一片坦荡

EasyJF开源团队成员，蓝源装饰行业信息化ERP总设计师，多年的研发经验和丰富的培训经验，曾负责开发蓝源服务平台淘宝，商场爱蜂巢企业管理平台等大型企业级信息化管理系统的PC端和移动端设计和研发热衷前沿技术的研究及其在实战中的应用。
毕业四川农业大学，10年web开发工作经验，精通PHP、JavaScript、HTML5、CSS3等主流WEB开发技术。参与设计开发SNS交友平台、微博、大型分类信息平台电子商城、企业管理系统。近几年，带领团队负责成都华侨城、首创置业、乐天、荣盛等大型企业OA、CRM、H5应用开发。
同济大学学士，IBM认证工程师，多年项目的研发经验和丰富的培训经验，喜欢研究前沿技术，并且实践于项目中, 对web前端技术体系,数据库，性能优化，算法均有研究。擅长： JavaScript 、Vue 、Angular、Jquery、数据可视化、移动端、跨平台微信技术体系、前端工程化、web全栈开发。
拥有5年大型互联网公司前端开发及管理经验, 热衷前端前沿技术和面向对象脚本语言开发，精通各类前端框架。擅长移动设备和软件与硬件设备结合开发，H5企业级应用开发。在互联网+ 领域有深刻的项目流程控制经验与产品设计思维。课堂生动幽默，授课深入简出。结合时下较流行的元素让课堂气氛活跃，关注学生全面发展。