JavaScript类型、值和原生函数大揭秘, 前端开发者必看!(上)

简介: JavaScript类型、值和原生函数大揭秘, 前端开发者必看!

JavaScript类型、值和原生函数大揭秘, 前端开发者必看!

类型

  • ECMAScript 一共有七种语言类型:Undefined、Null、Boolean、String、Number、Object、Symbol

内置类型

  • 函数不仅是对象,还拥有属性。在函数中的 length 属性是参数的个数
  • 如下代码:
function a(b,c){
    // do something
}
a.length; // 2
  • typeof [...] 为什么等于 object?
  • 数组也是对象,但确切来说,它是 object 的一个 "子类型"
  • 如下代码:
typeof [1,2,3] === 'object'; // true

值和类型

  • typeof 运算符总是会返回一个字符串
  • 如下代码:
typeof typeof 42; // string
// typeof 42 首先会返回 number, 然后 typeof number 返回 string

小结

  1. 1. 变量没有类型,他们所拥有的值才有类型。
  2. 2. typeof [...] 为什么等于 object?
  • 数组也是对象,但确切来说,它是 object 的一个 "子类型"

数组

  • 使用 delete 操作符不会影响数组长度
let a = ['a', 'b', 'c', 'd'];
delete a[2];
console.log('a ------>', a); // [ 'a', 'b', <1 empty item>, 'd' ]
console.log('a ------>', a.length); // 4
  • 数组索引既可以通过数字索引,也可以通过字符串索引,可以通过像访问对象的建制属性一样访问数组元素。除了通过使用数字索引的方式,其他都不计算进数组长度内
let a2 = [];
a2[0] = 1;
a2['foo'] = 2;
console.log('a2.length ------>', a2.length);  // 1
console.log("a2['foo'] ------>", a2['foo']); // 2
console.log('a2.foo ------>', a2.foo); // 2
  • 如果字符串值被强制转换为十进制数字,数组会被当做数字索引来处理
var a = [];
a['13'] = 42;
a.length; // 14
  • 将类数组转为数组, 还有其他方法: indexOf()、concat()、map().....
var arr = Array.from(arguments);
Array.prototype.slice.call();

数字

  • 数字语法:数字前面的 0 可省略
var a = 0.42;
var b = .42;
  • 由于数字值使用 Number 对象封装,因此数字值可调用 Number.prototype 中的方法。
  • toPrecision(..) 方法用来指定有效数位的显示位数:
var a = 42.59;
a.toPrecision( 1 ); // "4e+1"
a.toPrecision( 2 ); // "43"
a.toPrecision( 3 ); // "42.6"
a.toPrecision( 4 ); // "42.59"
a.toPrecision( 5 ); // "42.590"
a.toPrecision( 6 ); // "42.5900"
  • 注意,对于 . 操作符来说,因为他们是一个有效的数字字符,会被优先识别为数字常量的一部分,然后才是对象属性访问运算符。
// 无效语法:
42.toFixed( 3 );    // SyntaxError
// 下面的语法都有效:
(42).toFixed( 3 );  // "42.000"
0.42.toFixed( 3 );  // "0.420"
42..toFixed( 3 );   // "42.000"
// 注意其中的空格
42 .toFixed(3);  // "42.000"
  • 42.tofixed(3) 是无效语法,因为 . 被视为常量 42. 的一部分(如前所述),所以没有 . 属性访问运算符来调用 tofixed 方法。
  • 42..tofixed(3) 则没有问题,因为第一个 . 被视为 number 的一部分,第二个 . 是属性访问运算符。只是这样看着奇怪,实际情况中也很少见。在基本类型值上直接调用的方法并不多见,不过这并不代表不好或不对。

数值检测方法

  • 能够被"安全"呈现的最大整数是 2^53 - 1,即 9007199254740991,在 ES6 中被定义为 Number.MAX_SAFE_INTEGER。最小整数是 -9007199254740991,在 ES6 中被定义为 Number.MIN_SAFE_INTEGER
  • 要检测一个值是否是整数,可以使用 ES6 中的 Number.isInteger(..) 方法:
Number.isInteger( 42 );     // true
Number.isInteger( 42.000 ); // true
Number.isInteger( 42.3 );   // false
  • 也可以为 ES6 之前的版本 polyfill Number.isInteger(..) 方法:
if (!Number.isInteger) {
    Number.isInteger = function(num) {
        return typeof num == "number" && num % 1 == 0;
    };
}
  • 要检测一个值是否是安全的整数,可以使用 ES6 中的 Number.isSafeInteger(..) 方法:
Number.isSafeInteger( Number.MAX_SAFE_INTEGER );    // true
Number.isSafeInteger( Math.pow( 2, 53 ) );          // false
Number.isSafeInteger( Math.pow( 2, 53 ) - 1 );      // true
  • 可以为 ES6 之前的版本 polyfill Number.isSafeInteger(..) 方法:
if (!Number.isSafeInteger) {
    Number.isSafeInteger = function(num) {
        return Number.isInteger( num ) &&
            Math.abs( num ) <= Number.MAX_SAFE_INTEGER;
    };
}
目录
相关文章
|
5月前
|
JavaScript 前端开发 API
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
142 19
|
5月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
206 8
|
5月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
6月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
5625 24
|
6月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
前端开发 JavaScript
javascript前端开发:阿里巴巴超难面试题让你理解call的用法
关于javascript中的call方法,网上总很难找到全面而通俗的解释,就我个人的理解来说,call有两个作用: 1、继承 2、修改函数运行时的this指针。 下面这段代码来自阿里的前端面试题库 function fn(a,b){ console.
1365 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
236 2
|
10月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
158 1
JavaScript中的原型 保姆级文章一文搞懂
|
10月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
98 0