网站首页 > 技术文章 正文
JS 是一种灵活的语言,这种特性让我们经常觉得它是一门最简单的语言,也是最难掌握的语言。我使用 JavaScript 已有很多年了,但我仍然偶然发现一些我不知道的隐藏语法或技巧。
我们来一直看看,我发现了哪些。
1. Function 构造函数
Function()构造函数虽然不是很常用,但是了解一下还是很有必要的。
不管是通过函数定义语句还是函数直接量表达式,函数的定义都要使用function()关键字。单函数还可以通过Function()构造函数来定义,比如:
const diff = new Function('a', 'b', 'return a - b');
diff(20,13) // 7
这一行的实际效果和下面的一行代码是等价的:
const diff = function(a, b) {
return a - b
}
diff(20, 13)
2. with 语句
JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式。也就是在指定的代码区域, 直接通过节点名称调用对象。
我们已经知道,用变量的作用域和作用域链(即一个按顺序检索的对象列表)来进行变量名解析,而 with 语句就是用于暂修改作用域链的,其语法为:
with(object)
该语句可以有效地将object添加到作用域链的头部,然后执行statement,再把作用域链恢复到原始状态。
const book = {
author: '前端小智',
title: '我不知道还可以用 JS 做的 6 件事'
}
with(book) {
console.log(author); // 前端小智
console.log(title); // 我不知道还可以用 JS 做的 6 件事
}
使用 with语句的 JavaScript 代码很难优化,因此它的运算速度比不使用with语句的等价代码要慢得多。而且,在with语句中的函数定义和变量初始化可能会产生令人惊讶的、相抵触的行为,因此我们避免使用with`语句。
3. + 操作符
我们可以使用+运算符将字符串转换为数字。除非你想解析为特定的数字类型,否则不需要使用诸如 parseInt() 或 parseFloat() 之类的函数。
const nr = +'1.5';
nr + 1; // 2.5
4. 给函数赋值属性
我们可以给函数赋属性。接着,可以通过为函数分配特定的属性来创建可配置的函数。
function sayHello() {
if (sayHello.country = 'US') {
return alert('Hi there!');
}
if (sayHello.country = 'FR') {
return alert('Bonjour !');
}
if (sayHello.country = 'GR') {
return alert('Guten Tag !');
}
return alert('Hi');
}
sayHello.country = 'FR';
sayHello(); // alert('Bonjour !');
外,我们可以使用这些函数属性作为计数器或“静态变量”。
5. arguments.callee.caller
我们可以使用arguments.callee.caller来查看哪个函数调用了当前函数。argumentsJS 普通函数的默认值。arguments.callee.caller告诉我们谁调用了该函数。类似于只有一层 console.trace()。
function sayHello() {
console.log(arguments.callee.caller) // [Function: start]
}
(function start() {
sayHello()
})()
另外arguments.callee表示引用当前正在运行的函数。
function sayHello() {
console.log(arguments.callee) // [Function: sayHello]
}
(function start() {
sayHello()
})()
6. void 操作符
void 运算符 对给定的表达式进行求值,然后返回 undefined。
void(1); // undefined
void(true); // undefined
void(false); // undefined
void({}); // undefined
如果你问为什么只需要返回undefined而不是返回就需要一个特殊的关键字undefined:原因是在ES5之前,实际上可以命名一个全局变量undefined,就像这样:var undefined = "hello"或var undefined = 23,大多数浏览器都可以接受它;undefined不会保证标识符实际上是不确定的。因此,要返回实际的未定义值,请使用void运算符。它不是一个非常流行的运算符,并且很少使用。
人才们的 【三连】 就是小智不断分享的最大动力,如果本篇博客有任何错误和建议,欢迎人才们留言,最后,谢谢大家的观看。
作者:Daniel 译者:前端小智 来源:js-craft
原文:http://www.js-craft.io/blog/6-things-i-didnt-know-you-can-do-in-javascript/
猜你喜欢
- 2024-12-18 比较 JavaScript 对象的四种方式「实践」
- 2024-12-18 什么是 JavaScript? 什么是首发经济
- 2024-12-18 10 个常问的 JS 面试题 js面试题库
- 2024-12-18 理解 Next.js 中的 CSR、SSR、SSG、ISR 以及 Streaming
- 2024-12-18 逆天,纯 Go 编写的 ECMAScript/JS 引擎 Goja 火了
- 2024-12-18 JS 图片简易压缩【实践】 js压缩图片到指定大小
- 2024-12-18 技术分享 | 想做App测试就一定要了解的App结构
- 2024-12-18 好程序员web前端教程分享web前端都学些什么
- 2024-12-18 要深入 JavaScript,你需要掌握这 36 个概念
- 2024-12-18 帮你彻底搞懂 JS 中的 prototype、__proto__与constructor
你 发表评论:
欢迎- 最近发表
-
- 前端流行框架Vue3教程:13. 组件传递数据_Props
- 前端必看!10 个 Vue3 救命技巧,解决你 90% 的开发难题?
- JAVA和JavaScript到底是什么关系?是亲戚吗?
- Java和js有什么区别?(java和javascript的区别和联系)
- 东方标准|Web和Java的区别,如何选择这两个专业
- 前端面试题-JS 中如何实现大对象深度对比
- 360前端一面~面试题解析(360前端笔试)
- 加班秃头别慌!1 道 Vue 面试题,快速解锁大厂 offer 通关密码
- 焦虑深夜刷题!5 道高频 React 面试题,吃透 offer 稳了
- 2025Web前端面试题大全(整理版)面试题附答案详解,最全面详细
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端md5加密 (49)
- 前端路由 (55)
- 前端数组 (65)
- 前端定时器 (47)
- 前端懒加载 (45)
- 前端接口 (46)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle查询数据库 (45)
- oracle约束 (46)
- oracle 中文 (51)
- oracle链接 (47)
- oracle的函数 (57)
- mac oracle (47)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)