01 初识 JavaScript

作为在码农圈混迹了 四五年的老码畜来说,学习一门新的语言,就仿佛是老司机开新车一样 轻车熟路。

为什么会这么快呢?

因为各种套路啊~

任何一种计算机语言的最开始都是和 数据类型 这个东西分不开,那么今天,我们就从 JavaScript 的数据类型开始

一、JavaScript 的数据类型

   因为对于很多的 jser 的初学者而言,或者说说对于很多代码初学者而言,数据类型是让人疑惑的地方。那么一定要解除这个疑虑。

JavaScript 一共有 八种数据类型。其中包含了 基本数据类型 和 引用数据类型

其中基础数据类型有: string 、 number 、 Boolean 、 null、 undefined

其中 引用类型有: array 、 function 、 object

一共就这么8种数据类型,每一种类型都会有各自的属性或者方法,从而构建了这个丰富多彩的 JavaScript 世界。

那我们常常需要判断 这个参数的数据类型从而进行下一步的操作。 那么这个时候 typeOf 就是一个不错的选择,但是也有一些问题,咱们下面接着聊。
const strA = 'xxx==='
const numberB = 123
const boolC = false const nullD = null
const undedfinE = undefined const arrayF = [1,2,3]
const funcG = function() {
let a = '123'
console.log(a)
}
const objH = {
a: 1,
getName: function() {
console.log(this.a)
}
} const result = function(x) {
return typeof x
}
console.log(result(strA)) // string
console.log(result(numberB)) // number
console.log(result(boolC)) // boolean
console.log(result(nullD)) // object
console.log(result(undedfinE)) // undefined
console.log(result(arrayF)) // object
console.log(result(funcG)) // function
console.log(result(objH)) // object

二、 区分容易混淆的 数据类型

TIPS: 看完上面的八种 数据类型的 读取。是不是发现有三种数据还是让人有点迷糊,分别就是 null、array、Object 。 这三个数据类型的 typeof 都是 object。 那如何再次区分呢?

typeof null  		// object
typeof [123,133] // object
typeof {a:1} // object // 这个时候就无法判断了, 如何操作了? const testArray = [11,22,33,44]
const testNull = null
const testObj = {a:1} const testObjectFun = function(x) {
return Object.prototype.toString.call(x)
} console.log( testObjectFun(testArray)) // [object Array]
console.log( testObjectFun(testNull)) // [object Null]
console.log( testObjectFun(testObj)) // [object Object]

TIPS: 目前来看,Object.prototype.toString.call(xxx) 是一个很好判断当前对象为 什么的方法。

三、 判断 当前对象为 数组的方法


const arr = [1,2,3] // es6
Array.isArray(arr)
arr instanceof Array
arr.constructor === Array
// es5
Object.prototype.toString.call(arr) === '[object Array]'
在 ES5、6 中提供了一系列的 判断当前对象为 数组的方法. 可以作为一个炫技的存在了。

四、章节总结

在 JS 这门语言中,常见的数据类型在上文中已经作出了 展示,而且也展示了一些判断当前数据类型的方法,由于 JS 是一门弱类型语言,所谓弱类型语言其实是指 数据的类型可以根据上下文的变化 发生改变。 在下一个章节 我们会介绍下 数据类型的改变方法。

Github 地址,欢迎Star

《前端之路》之 初识 JavaScript的更多相关文章

  1. 《前端之路》之 Javascript 模块化管理的来世今生

    目录 第二章 - 04: Javascript 模块化管理的来世今生 一.什么是模块化开发 1-1.模块化第一阶段 1-2.封装到对象 1-3. 对象的优化 二.模块化管理的发展历程 2-1.Comm ...

  2. 《前端之路》之 JavaScript 进阶技巧之高阶函数(下)

    目录 第二章 - 03: 前端 进阶技巧之高阶函数 一.防篡改对象 1-1:Configurable 和 Writable 1-2:Enumerable 1-3:get .set 2-1:不可扩展对象 ...

  3. 《前端之路》之 JavaScript 高级技巧、高阶函数(一)

    目录 一.高级函数 1-1 安全的类型检测 1-2 作用域安全的构造函数 1-3 惰性载入函数 1-4 函数绑定 1-5 函数柯里化 1-6 反函数柯里化 一.高级函数 1-1 安全的类型检测 想到类 ...

  4. 《前端之路》之 JavaScript原型及原型链详解

    05:JS 原型链 在 JavaScript 的世界中,万物皆对象! 但是这各种各样的对象其实具体来划分的话就 2 种. 一种是 函数对象,剩下的就是 普通对象.其中 Function 和 Objec ...

  5. 《前端之路》之四 JavaScript 的闭包、作用域、作用域链

    04:JavaScript 的闭包 一.定义: 常规定义: 闭包的定义: 有权利访问外部函数作用域的函数. 通俗定义: 1.函数内部包含了函数.然后内部函数可以访问外部函数的作用域. 2.内部函数可以 ...

  6. 初识JavaScript(一)

    初识JavaScript(一) 最近由于工作的需要的原因,我从一个写后台的现在让我转到写前端,再加上我的js部分特别的差,所以我现在开始学习js部分的知识. 我的第一篇博文就这样开始写了.俗话说,千里 ...

  7. 《前端之路》之二:数据类型转换 && 隐式转换 || 显式转换

    目录 02:数据类型转换 && 隐式转换 || 显式转换 02:数据类型转换 && 隐式转换 || 显式转换 在上一个章节中,我们介绍了 JavaScript 的基本的 ...

  8. 《前端之路》- TypeScript(二) 函数篇

    目录 一.定义函数方法 二.定义函数传参 三.可选传参 四.默认传参 五.传递剩余参数 六.函数重载 七.箭头函数 八.总结 一.定义函数方法 在 es5 中定时函数的方法有 命名函数和函数表达式(匿 ...

  9. 《前端之路》- TypeScript (三) ES5 中实现继承、类以及原理

    目录 一.先讲讲 ES5 中构造函数(类)静态方法和多态 1-1 JS 中原型以及原型链 例子一 1-2 JS 中原型以及原型链中,我们常见的 constructor.prototype.**prot ...

随机推荐

  1. GO语言.树莓派.环境安装和测试

    Go是Google开发的一种静态强类型.编译型.并发型,并具有垃圾回收功能的编程语言.为了方便搜索和识别,有时会将其称为Golang 记录一下如何在树莓派上安装语言环境 第一步: 下载安装包 http ...

  2. Node.js + MySQL 实现数据的增删改查

    通过完成一个 todo 应用展示 Node.js + MySQL 增删改查的功能.这里后台使用 Koa 及其相应的一些中间件作为 server 提供服务. 初始化项目 $ mkdir node-cru ...

  3. 【EXCEL-折线图】百折不挠 | 用EXCEL画出与众不同的折线图(曲线图)

    很多熟悉EXLCE的朋友都知道EXCEL在生成统计图表方面的强大功能,我们在写各类总结.报告.方案等文档时常涉及到各类统计数字,将统计数字用图表的形式展示出来,既直观又美观.下面我分享一种不一样的折线 ...

  4. 使用强类型实体Id来避免原始类型困扰(一)

    原文地址:https://andrewlock.net/using-strongly-typed-entity-ids-to-avoid-primitive-obsession-part-1/ 作者: ...

  5. css属性分类介绍

    css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position ...

  6. 强化学习(十八) 基于模拟的搜索与蒙特卡罗树搜索(MCTS)

    在强化学习(十七) 基于模型的强化学习与Dyna算法框架中,我们讨论基于模型的强化学习方法的基本思路,以及集合基于模型与不基于模型的强化学习框架Dyna.本文我们讨论另一种非常流行的集合基于模型与不基 ...

  7. 程序员如何巧用Excel提高工作效率

    作为一名程序员,我们可能很少使用Excel,但是公司的一些职能部门,比如HR,财务等,使用Excel真的是太熟练了,以至于一些系统开发出来,导入和导出功能是使用最频繁的,哈哈. 其实在程序开发的过程中 ...

  8. git入门手册:git的基本安装,本地库管理,远程上传

    前言: git是分布式的版本库控制系统,它能方便你将自己的代码寄存于远程服务器上,从而实现集体合作开发.git有GUI 图形界面,然而使用终端命令仍是主流.以下基于Ubuntu系统操作git(其方式也 ...

  9. postgresql 添加uuid扩展

    去年用EF Core做数据迁移到psql数据库的时候遇到了缺失uuid的错误,当时帅气的脸蛋突然懵逼了.现记录一下 以备参考. 环境:Centos7.2  psql  Xshell Xshell连接C ...

  10. [20190130]删除tab$记录的恢复.txt

    [20190130]删除tab$记录的恢复.txt --//网上提到许多删除tab$的案例,主要原因在于没有从官方正规渠道下载oracle版本,还有一些来自工具里面带有一些脚本删除tab$记录. -- ...