看过这张图你还记不牢JavaScript的语法和特性,算我输!

本文深入探讨JavaScript中的数字类型、精度问题、函数参数、Max/Min函数、魔法操作符及隐式类型转换等特性,揭示JS编程中的常见陷阱。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

逛知乎的时候发现@DDDD转了一张图,这张图对js魔法的吐槽可谓非常到位。下面,我们就从这张图出发来详细讲讲js。

数字类型与精度问题

虽然js是弱类型语言,声明变量时也不需要显式指定类型。但是,数据本身依旧还是有类型的,比如数字和字符串就是以不同形式存在的数据。在js中,所有数字的类型都为number。其中,一个特殊的数字就是NaN(Not a number),虽然名字叫“不是数”,但为了计算的一致性(IEEE745亦规定),NaN依旧是数字类型的。任何NaN参与的数字计算的结果都还是NaN。(NaN-NaN!=0)还需要注意的是,js中被0除非但不会报错,而且结果也不是NaN(只有0/0是NaN),而是Infinity(被除数为正)或-Infinity(被除数为负)。

由于将整数和浮点数统一处理,所以js并不存在整数和浮点数的区别——所有数字都以64位有符号浮点数(IEEE745格式)的形式存储。因此,舍入误差是js数字类型的一个大坑。最经典的当然就是0.1+0.2!=0.3了。其实这不是js的锅,大部分编程语言都有这个问题。简单的解释可以查看http://0.30000000000000004.com。很多人对浮点数都有误解,认为0.1是

,所以可以正确的表示0.1,然而浮点数并不是这样。在2为基数的情况下,0.1=1/10是一个无限循环小数,所以在运算时会产生舍入误差。想要进一步了解可以查阅有关数值计算的材料。

Max、Min与函数参数

在js中,函数参数也是一种魔法。一般编程语言中,形参具有类似“约束”的作用,即实参的数量要与形参相符(默认值除外)。但是js魔法并不需要形参和实参相匹配,多的实参忽略,少的就是undefined。事实上,js还提供了一种访问参数的方法。在函数体上下文中,js提供了arguments(类似Python的*args)以便参数的访问。考虑到没有卵用的形参,js函数的形参更是一个别名。

在Python中,函数重载可以通过默认值实现,而在js中,你可以随心所欲的解析arguments,可以说是很硬核了。

回到我们的max和min。EMCAScript v3之后,max和min就支持任意数量参数的调用了。从逻辑上考虑,既然没有传入任何数,那取最大的函数就不能返回一个能大于任何数的数,所以返回-Infinity不无道理。min亦然。

魔法操作符+、-

为了更好的理解接下来的坑,我们有必要先看看+、-两个操作符。这俩操作符神奇就神奇在,他们不仅仅是双目运算符,也同时是单目运算符!对于+,双目运算时其意义是数字加或字符串拼接。这里有个很坑的地方,就是只要参与运算的值不全是数字,那么+就会被视为字符串拼接(String.concat),从而把所有参数转换为字符串并进行拼接。单目运算时,+被视为取正,所有传入的参数都会被转换为数字并取正。(然而取正并没有任何卵用,所以其实就是转为数字)

相比之下-就和蔼了许多,双目是数值减,单目这是取反。

无奈的解释器

下面这个魔法涉及到的东西很多,不过我还是打算把它归类到解释器的范畴,而且这个锅要丢给REPL。{}+[]具歧义,可以被理解为:

  • (作为值理解)对象{}+数组,+为双目
  • (作为代码块理解){}为代码块,+是单目

而这两种理解下的结果也是不同的。而在REPL的上下文下,js解释器采用了第二种理解。而一旦上下文变化,提示解释器这是表达式时,解释器就会采用第一种理解。比如console.log({}+[])的结果就不再是0了。

隐式类型转换

之前在说+、-的时候,我提到了一些隐式的转换,其实这样的转换远不止出现在+、-。比如取反!,就会转成布尔型再取反。所以!+[]就是true,![]是false。考虑到运算优先级,最后得到”truefalse”。

作为一个弱类型语言,js的逻辑是,如果类型不对,那就转过去。

=

这是个老生常谈的东西了。这里不多讲,只要知道==可能会隐式转换类型就行。

最后

我写这篇文章的目的并不是解释这张图,因为这张图里的很多知识并不是实际编程所需要的(就像i+++++i,这些是我认为不重要的知识)。我是希望借这张图聊到一些js的语法特性,以加深对js的理解。这两点在我看来有本质的区别。

自己是一名从事了6年开发的老程序员,业余的时候在这里分享一些互联网资讯给大家,不少人私下问我,2019年前端该怎么学,方法有没有?

没错,年初我花了一个多月的时间整理出来的学习资料,希望能帮助那些想学习前端,却又不知道怎么开始学习的朋友。

这里推荐一下我的前端学习交流圈:767273102 ,里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

<think>好的,我需要帮用户分析他们的问题:给一,然后根据这写出Vue代码。用户想知道我是否能做到。首先,我要确认用户的需求。他们可能有一设计或者界面截,希望生成对应的Vue组件代码。 接下来,我得考虑现有的能力。目前,我无法直接查看或处理片,但可以指导用户如何根据设计手动编写Vue代码。需要分步骤引导用户,先分析设计的各个部分,再转化为Vue组件结构。 然后,思考用户可能的深层需求。他们可能希望快速实现前端界面,减少手动编码的时间。这时候,我应该提供结构化的建议,比如分解UI组件、使用Vue的语法特性,以及推荐工具或库,比如Vue CLI、Vuetify或Element UI,这些能加速开发。 还要考虑到用户的技术水平。如果他们熟悉Vue,可能需要更基础的指导,比如组件创建、数据绑定、事件处理等。而对于有经验的开发者,可以建议更高级的状态管理,如Vuex,或路由配置Vue Router。 另外,需要提醒用户提供设计的细节,例如布局、组件类型、交互行为等,这样才能更准确地生成代码示例。如果用户能描述颜色、字体、布局结构等信息,会有助于编写更贴近设计的代码。 最后,总结我的回答,明确说明我能提供的帮助,并鼓励用户提供更多细节,以便给出更具体的代码示例。同时,保持友好支持的态度,让用户感到被理解支持。</think>当然可以!过我需要您尽可能详细地描述片中的界面设计,我会帮您转化为Vue代码。以下是典型步骤: 1. **布局分析** 请描述: - 整体布局(Flex/Grid布局?导航栏位置?侧边栏是否存在?) - 组件层级(父子组件关系?动态内容?) 2. **组件拆分** 典型结构示例: ```vue <template> <div class="container"> <NavBar :menuItems="menuList"/> <MainContent> <Card v-for="item in cards" :key="item.id"> <Chart :data="item.data"/> </Card> </MainContent> </div> </template> ``` 3. **交互实现** 需要说明: - 按钮点击等事件处理 - 数据获取方式(API调用?本地数据?) - 状态管理需求(是否需要Vuex/Pinia?) 4. **样式还原** 请提供: - 颜色值(HEX/RGB) - 间距尺寸(padding/margin) - 字体样式(字号/字重) - 特殊动效(hover效果/过渡动画) **举个具体例子**: 如果片是一个带搜索栏的商品列表,代码可能是: ```vue <template> <div> <input v-model="searchQuery" @input="filterProducts" placeholder="搜索商品..." > <div class="product-grid"> <ProductCard v-for="product in filteredProducts" :key="product.id" :name="product.name" :price="product.price" @add-to-cart="handleAddToCart" /> </div> </div> </template> <script setup> import { ref, computed } from 'vue'; import ProductCard from './ProductCard.vue'; const products = ref([...]); // 商品数据 const searchQuery = ref(''); const filteredProducts = computed(() => { return products.value.filter(product => product.name.includes(searchQuery.value) ); }); </script> ``` **需要您配合**: ▨ 描述片中的关键UI元素及其排列方式 ▨ 说明需要特别关注的交互逻辑 ▨ 指出使用的第三方组件库(如Element UI/Vant等) 请提供更多细节,我会给出更精确的代码实现方案!您也可以分模块描述界面,我们逐个部分实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值