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;
    };
}
相关文章
|
3天前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
3天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
13 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
4天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
15 4
|
2天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
2天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
2天前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
3天前
|
存储 JavaScript 前端开发
js的基础类型和引用类型
【10月更文挑战第29天】理解 JavaScript 中的基础类型和引用类型的区别对于正确地编写代码和理解程序的行为非常重要。在实际开发中,需要根据具体的需求合理地选择和使用不同的数据类型,以避免出现一些意想不到的错误和问题。同时,在处理引用类型数据时,要特别注意对象的引用关系,避免因共享引用而导致的数据不一致等问题。
|
6天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
14 1
|
7天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
11 0
|
10天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
18 0