余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

我不知道还可以用 JS 做的 6 件事(JS能做什么)

xiyangw 2022-11-26 17:04 14 浏览 0 评论

JS 是一种灵活的语言,这种特性让我们经常觉得它是一门最简单的语言,也是最难掌握的语言。我使用 JavaScript 已有很多年了,但我仍然偶然发现一些我不知道的隐藏语法或技巧。

我们来一直看看,我发现了哪些。

我不知道还可以用 JS 做的 6 件事(JS能做什么)

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/

相关推荐

Vue的框架(了解)

前端MVC设计模式MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分Model:模型,指数据模型,这个数据一般来自于服务器View:视图,指页面标签内容Controller:控制...

Vue.js实战 第五章练习一

练习要求:在原有表格基础上,新增一项是否选中该商品的功能,总价变为只计算选中商品的总价,同时提供一个全选的按钮。实现思路:按照vue数据和dom元素双向绑定的特性,定义allCheckStatus变量...

Vue基础到进阶教程之class和style绑定

关于class和style我们并不陌生,这个在学习css的时候就是家常便饭了,操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们,...

深入Vue 必学高阶组件 HOC「进阶篇」

作者:ssh转发连接:https://mp.weixin.qq.com/s/seKoLSIMtTd1sU4uDrgZCA前言高阶组件这个概念在React中一度非常流行,但是在Vue的社区里讨论...

周末大礼包,23道高质量中级前端面试题。金九银十,建议收藏

这套面试题考察的内容比较常见,涉及到JavaScript、ES6、CSS、Vue、简单算法,浏览器相关知识等。题目列表1.JavaScript的数据类型有哪些2.什么是同源策略3.跨域的方法...

vue3.0-摒弃Object.defineProperty,基于 Proxy 的观察者机制

写在前面:11月16日早上,Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作...

程序员都必掌握的前端教程之VUE基础教程(七)

阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到。本篇文章成哥继续带大家来学习前端VUE教程,今天主要讲解VUE的表单处理等知识点。下面我们就一起来学习该块内容吧!01简介在日常开发中,我...

web前端开之网站搭建框架之vue详解

网站搭建框架之vueVue是web前端快速搭建网站的框架之一。它与jQuery有所不同,是以数据驱动web界面(以操作数据改变页面,而jQuery是以操作节点来改变页面),同时,vue还实现了数据的双...

vue3.0尝鲜-基于 Proxy 的观察者机制探索

Vue.js的作者尤大大在VueToronto的主题演讲中预演了Vue.js3.0的一些新特性,其中一个很重要的改变就是Vue3将使用ES6的Proxy作为其观察者机制,取代之前使用...

TypeScript 设计模式之观察者模式

一、模式介绍1.背景介绍在软件系统中经常碰到这类需求:当一个对象的状态发生改变,某些与它相关的对象也要随之做出相应的变化。这是建立一种「对象与对象之间的依赖关系」,一个对象发生改变时将「自动通知其他...

vue面试3

1.单页面应用与多页面应用的去别2.简述一下Sass、Less,且说明区别?他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。变量符不一样,les...

VUE v-bind 数据绑定

动态的绑定一个或多个attribute,也可以是组件的prop。缩写::或者.(当使用.prop修饰符)期望:any(带参数)|Object(不带参数)参数:attrOrP...

vue初学习之自定义选择框实现

v-model简单介绍在使用vue的过程中会经常用到input和textarea这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签...

Vue实现拖拽穿梭框功能四种方式

一、使用原生js实现拖拽打开视频讲解更加详细Vue实现拖拽穿梭框功能的四种方式_哔哩哔哩_bilibili<html><head><meta...

Vue3.x setup 语法糖实现props双向绑定

1.背景为了封装一下Element-Plus的分页插件,需要实现父子组件之间的传值。2.父组件<scriptsetuplang="ts">letqueryPa...

取消回复欢迎 发表评论: