《你不知道的JavaScript-中卷》第一部分-类型和语法-笔记-1-类型

有人说,JavaScript 是唯一一门可以先用后学的编程语言。

1.2 内置类型

  • 空值(null)
  • 未定义(undefined)
  • 布尔值( boolean)
  • 数字(number)
  • 字符串(string)
  • 对象(object)
  • 符号(symbol,ES6 中新增)

除对象之外,其他统称为"基本类型"。

用 typeof 运算符来查看值的类型,它返回的是类型的字符串值

js 复制代码
typeof undefined === "undefined"; // true

typeof true === "boolean"; // true

typeof 42 === "number"; // true

typeof "42" === "string"; // true

typeof { life: 42 } === "object"; // true

// ES6中新加入的类型
typeof Symbol() === "symbol"; // true

神奇的null

  • 正确的返回结果应该是 "null",但这个 bug 由来已久,在 JavaScript 中已经存在了将近二十年,也许永远也不会修复
js 复制代码
typeof null === "object"; //true

判断null

js 复制代码
        var a = null;
        const isNull = (!a && typeof a === "object");//true
        console.log(isNull);

函数

  • function 是 object的子类型
  • 有一个内部属性 [[Call]],该属性使其可以被调用
  • 还有其他属性,length表示参数的个数
js 复制代码
console.log(typeof function () { } === "function");//true

function funa(a,b,c){}
console.log(funa.length);//3

数组

  • 数组的类型是"object"
  • 数组的length属性是元素的个数
js 复制代码
console.log(typeof [1, 2, 3] === 'object');

1.3 值和类型

JavaScript 中的变量是没有类型的,只有值才有。变量可以随时持有任何类型的值。

在对变量执行 typeof 操作时,得到的结果并不是该变量的类型,而是该变量持有的值的类型,因为 JavaScript 中的变量没有类型。

js 复制代码
        var a = 42;
        typeof a; // "number"
        a = true;
        typeof a; // "boolean"

1.3.1 undefined 和 undeclared

变量在未持有值的时候为 undefined。此时 typeof 返回 "undefined":

  • 已在作用域中声明但还没有赋值的变量,是 undefined 的。
  • 还没有在作用域中声明过的变量,是 undeclared 的。
  • typeof 对于未定义和未声明的变量,都返回"undefined"
js 复制代码
        var a;
        typeof a; // "undefined"
        var b = 42;
        var c;
        // later
        b = c;
        typeof b; // "undefined"
        typeof c; // "undefined"
        
        //未声明的
        d;//ReferenceError: b is not defined
        
        //但是 typeof 处理的很特殊
        typeof d;//"undefined"

1.3.2 typeof Undeclared

安全防范机制:确认是否有全局变量声明,而进行某些业务逻辑的处理

比如全局DEBUG标志

js 复制代码
// 这样会抛出错误
if (DEBUG) {
    console.log( "Debugging is starting" );
}

// 这样是安全的
if (typeof DEBUG !== "undefined") {
    console.log( "Debugging is starting" );
}

比如用户自定义函数(polyfill

js 复制代码
if (typeof atob === "undefined") {
    atob = function() { /*..*/ };
}

其他的常见做法,检查window对象属性

js 复制代码
if (window.DEBUG) {
    // ..
}

if (!window.atob) {
    // ..
}

检查外部函数是否存在,或使用默认实现

js 复制代码
function doSomethingCool() {
    var helper = (typeof FeatureXYZ !== "undefined") ? FeatureXYZ :function() { /*.. default  feature ..*/ };
    var val = helper();
    // ..
}

或将依赖通过参数显式地传递到函数中

js 复制代码
function doSomethingCool(FeatureXYZ) {
    var helper = FeatureXYZ || function() { /*.. default feature ..*/ };
    var val = helper();
    // ..
}
相关推荐
CHU72903518 小时前
社区生鲜买菜小程序前端功能版块设计及玩法介绍
前端·小程序
尤山海18 小时前
深度防御:内容类网站如何有效抵御 SQL 注入与脚本攻击(XSS)
前端·sql·安全·web安全·性能优化·状态模式·xss
前端小趴菜0518 小时前
Windi CSS
前端·css
榴莲omega18 小时前
第7天:网络进阶——TCP/UDP、WebSocket、长连接
javascript·网络·tcp/ip·udp·八股
xuankuxiaoyao18 小时前
VUE.JS 实践 第二章
前端·javascript·vue.js
毕设源码-赖学姐18 小时前
【开题答辩全过程】以 基于Vue的电商管理平台为例,包含答辩的问题和答案
前端·javascript·vue.js
Wayward and pinnacle18 小时前
二次封装多选框组件
前端·javascript·vue.js
咬人喵喵18 小时前
植树节主题核心 SVG 交互玩法 + 品牌 / 账号案例 + 组件 / 教程
前端·css·编辑器·svg·e2编辑器
Sailing19 小时前
🚀AI 写代码越来越快,但我开始不敢上线了
前端·后端·面试
Alair‎19 小时前
Vue 3 基础教程:从入门到精通
前端·javascript·vue.js