0

0

很重要的9个使用技巧(附代码)

php中世界最好的语言

php中世界最好的语言

发布时间:2018-06-12 09:40:45

|

1316人浏览过

|

来源于php中文网

原创

这次给大家带来很重要的9个使用技巧(附代码),JS使用的注意事项有哪些,下面就是实战案例,一起来看一下。

1. 删除数组尾部元素

一个简单的用来清空或则删除数组尾部元素的简单方法就是改变数组的length属性值。

const arr = [11, 22, 33, 44, 55, 66];
// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2.使用对象解构来模拟命名参数

如果你需要将一系列可选项作为参数传入函数,那么你也许倾向于使用了一个对象(Object)来定义配置(Config)。

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
	const foo = config.foo !== undefined ? config.foo : 'Hi';
	const bar = config.bar !== undefined ? config.bar : 'Yo!';
 	const baz = config.baz !== undefined ? config.baz : 13;
 	// ...
}

这是一个陈旧、但是很有效的方法,它模拟了JavaScript中的命名参数。不过呢,在doSomething中处理config的方式略显繁琐。在ES2015中,你可以直接使用对象解构。

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
 // ...
}

如果你想让这个参数是可选的,也很简单。

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
 // ...
}

3. 使用对象解构来处理数组

可以使用对象解构的语法来获取数组的元素:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4. 在switch语句中用范围值

可以使用下面的技巧来写满足范围值的switch语句:

function getWaterState(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = 'Solid';
   break;
  case (tempInCelsius > 0 && tempInCelsius < 100): 
   state = 'Liquid';
   break;
  default: 
   state = 'Gas';
 }
 return state;
}

5. await多个async函数

在使用async/await的时候,可以使用Promise.all来await多个async函数。

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. 创建一个纯(pure)对象

你可以创建一个100%的纯对象,他不从Object中继承任何属性或则方法(比如,constructor,toString()等等)。

const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined

7. 格式化JSON代码

JSON.stringify不止可以将一个对象字符化,还可以格式化输出JSON对象。

const obj = { 
 foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
};
// The third parameter is the number of spaces used to 
// beautify the JSON output.
JSON.stringify(obj, null, 4); 
// =>"{
// =>  "foo": {
// =>    "bar": [
// =>      11,
// =>      22,
// =>      33,
// =>      44
// =>    ],
// =>    "baz": {
// =>      "bing": true,
// =>      "boom": "Hello"
// =>    }
// =>  }
// =>}"

8. 从数组中移除重复元素

ES2015中,有了集合的语法。通过使用集合语法和Spread操作,可以很容易将重复的元素移除:

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);
//=> [42, "foo", true]

9. 平铺多维数组

使用Spread操作,可以很容易去平铺嵌套多维数组:

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

可惜,上面的方法仅仅适用于二维数组。不过,通过递归,我们可以平铺任意维度的嵌套数组。

unction flattenArray(arr) {
 const flattened = [].concat(...arr);
 return flattened.some(item => Array.isArray(item)) ? 
  flattenArray(flattened) : flattened;
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

就这些啦!我希望这些小技巧可以帮你写出更加漂亮的JS代码!如果还不够,那么不妨用Fundebug做你的辅助!

精选评论

Ethan B Martin: 这个switch的写法很巧妙,不过不推荐。请不要鼓励开发者用这种方式去写JS代码。我们曾经有一个工程师这么写,后来在代码review的时候,造成了很大的阅读苦难。好在我们及时将其重构为更加容易读懂的代码。不妨对比一下用swtich和if的区别:

function getWaterState1(tempInCelsius) {
 let state;
 
 switch (true) {
  case (tempInCelsius <= 0): 
   state = 'Solid';
   break;
  case (tempInCelsius < 100): 
   state = 'Liquid';
   break;
  default: 
   state = 'Gas';
 }
 return state;
}
function getWaterState2(tempInCelsius) {
 if (tempInCelsius <= 0) {
  return 'Solid';
 }
 if (tempInCelsius < 100) {
  return 'Liquid';
 }
 return 'Gas';
}

第二种写法有几点优势:
A) 代码量更少,更加易读;B) 你不需要声明一个局部变量,读者不会一直要去追踪你如何对这个变量做了更改;C) switch(true)真的会让人莫名其妙。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

本地环境操作node服务器跨域用法总结

威博仿淘宝多用户商城程序
威博仿淘宝多用户商城程序

威博仿淘宝多用商城程序于4月底发布公测以来,得到了广大用户的关注和支持,陆续有很多意见和建议反馈到威博网络技术部。广泛的关注与支持,也是威博仿淘宝多用商城程序不断进步的一个重要原因。威博网络有这么多忠实的支持者才会有今天的成绩。经过一个多月的在线测试,威博仿淘宝多用商城程序有望于6月底正式对外发布销售!这套购物网站源代码/购物网站系统免费下载--威博网络是在多用户网上商城系统的基础上,全面整合仿淘

下载

如何获取DOM文档树内所有数据

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

178

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

35

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

79

2026.01.28

php怎么写接口教程
php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程,助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2

2026.01.28

php中文乱码如何解决
php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

4

2026.01.28

Java 消息队列与异步架构实战
Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用,涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理,以及在高并发系统中的异步解耦设计。通过实战案例,帮助学习者掌握 使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

8

2026.01.28

Python 自然语言处理(NLP)基础与实战
Python 自然语言处理(NLP)基础与实战

本专题系统讲解 Python 在自然语言处理(NLP)领域的基础方法与实战应用,涵盖文本预处理(分词、去停用词)、词性标注、命名实体识别、关键词提取、情感分析,以及常用 NLP 库(NLTK、spaCy)的核心用法。通过真实文本案例,帮助学习者掌握 使用 Python 进行文本分析与语言数据处理的完整流程,适用于内容分析、舆情监测与智能文本应用场景。

24

2026.01.27

拼多多赚钱的5种方法 拼多多赚钱的5种方法
拼多多赚钱的5种方法 拼多多赚钱的5种方法

在拼多多上赚钱主要可以通过无货源模式一件代发、精细化运营特色店铺、参与官方高流量活动、利用拼团机制社交裂变,以及成为多多进宝推广员这5种方法实现。核心策略在于通过低成本、高效率的供应链管理与营销,利用平台社交电商红利实现盈利。

122

2026.01.26

edge浏览器怎样设置主页 edge浏览器自定义设置教程
edge浏览器怎样设置主页 edge浏览器自定义设置教程

在Edge浏览器中设置主页,请依次点击右上角“...”图标 > 设置 > 开始、主页和新建标签页。在“Microsoft Edge 启动时”选择“打开以下页面”,点击“添加新页面”并输入网址。若要使用主页按钮,需在“外观”设置中开启“显示主页按钮”并设定网址。

72

2026.01.26

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Rust 教程
Rust 教程

共28课时 | 5万人学习

Vue 教程
Vue 教程

共42课时 | 7.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号