一篇文章带你学习js数据类型

崔晓明发布于2019-08-26 11:43 / 2413人阅读

摘要：走在前端的大道上本篇将自己读过的相关数据类型文章中，对自己有启发的章节片段总结在这会对原文进行删改会不断丰富提炼总结更新。相当于相当于相当于基础类型不属于包装的对象类型参考文章基础初谈现有的数据类型

走在前端的大道上

本篇将自己读过的相关 javascript 数据类型文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。

数据类型

js 目前有以下几大数据类型

undefined

null

string

boolean

number

symbol (ES6新增)

object

undefined类型

原始值类型. 表示某个变量已经声明, 但是未分配内存空间给予该变量.

var foo; 
console.log(foo); /* 申明变量, 却没有赋值 */

function bar (a) {
  console.log(a); /* 函数形参声明, 却没有对应实参赋值 */
}
bar();

function foo2 () {}
var bar2 = foo2(); /* 函数无return 或者, return 不带任何返回值 */

var o = {foo: "foo"}
console.log(o.bar); /* 在对象中寻找不存在的属性 */

var foo = "foo";
foo = undefined; /* 显示将某个变量指向undefined, 消除引用标记 */

null 类型

原始值类型. 声明变量此时为一个空的原始值. 由于历史原因, 使用typeof null 返回 object表示为一个对象.

如果要验证一个变量是否为null, 可以有以下几种方式

function is_null (o) {
  return o === null;
}

function is_null (o) {
  return Object.prototype.toString.call(o) === "[object Null]";
}

string类型

原始值类型. string属于不可变值类型, 当一个字符串进行相加后, 返回一个新的字符串引用。

var str = "hello world";
str = str + " liyanlong";
// 1. 栈内存 创建一个str变量
// 2. "hello wolrd" 内容存储在堆中， 并将引用赋给 str变量
// 3. 获取str的变量引用， 与新字符串 ` liyanlong` 进行连接操作. 产生新的引用地址并传给str

简单理解： string 类型的内容与 object的内容都存储在堆中。不同的一点是, 无法对string的堆进行修改, 任何连接,分割字符串的操作都会产生一个新的堆引用。

boolean 类型

原始值类型, 只有true, false 两个原始值.

typeof true // boolean
typeof false // boolean

number 类型

原始值类型. 存储一切数值类型, 包括正负数, 整数, 小数, 科学计数.

typeof NaN // number
typeof Infinity // number
typeof 0 // number
typeof 1e2 // number
typeof -0.5 // number

检查一个变量是否可成为无法成为合法的 number 类型

window.isNaN("12") // false
window.isNaN("foo") // true

检查number是否为有限的number(非无穷)值

window.isFinite("123") // true
window.isFinite(Infinity) // false

symbol类型

原始值类型. 属于ES6新增的一种数据类型. ES6允许属性的key 为 symbol类型. 以此可以提供一个私有的属性

let obj = (function () {
    let key = Symbol("你好");
    let obj = {
    };
    obj[key] = "私有变量";
    return {
        get foo () {
            return this[key];
        }
    };
})();
obj.foo = "hello world";
console.log(Object.getOwnPropertyNames(obj)); // ["foo"]
console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(你好)]

let anotherKey = Symbol("你好");
console.log(obj[anotherKey]) // undefined
typeof anotherKey // "symbol"

object类型

引用类型. js中常见的引用对象有Array, Object, Date.

var arr = [];
var o = {};
var date = new Date()
typeof o // object
typeof arr // object
typeof date // object

函数也属于对象类型, 它是一种可调用的对象, 并且能创建调用栈执行内部代码. 只是函数在执行typeof 时,返回的是function

function Foo() {
}

typeof Foo // function 
Foo instanceof Object // true

值类型与引用类型

值类型属于不可变类型, 由于具有固定长度大小, 因此可以存放在栈内存中，而引用类型属于可变类型, 一个对象可以赋予多个属性及值，属性值又可以为一个新的引用对象。因此将引用类型存放在堆中

包装类型

为了方便boolean, number, string 基本类型的处理及调用, 当我们在执行toString(), valueOf(), +操作符以及函数方法的时候, 会隐世转换为Boolean,Number, String对象类型. 执行后返回的又是基本类型。

var bool = true
var number = 1
var string = "hello world"

console.log(bool + number) // 2
// 相当于
console.log(Boolean(bool).valueOf() + number) // 2

console.log(bool + string) // true hello world
// 相当于
console.log(Boolean(bool).toString() + string) // true hello world

string.charAt(0) // h
// 相当于
console.log(String(string).charAt(0)） // h

// 基础类型不属于包装的对象类型
bool instanceof Boolean // false
number instanceof Number // false
string instanceof String // false

参考文章：
1.【JS基础】初谈JS现有的数据类型

云服务器 GPU云服务器这篇文章手把手带你阅读Netty源码【附文章类型机器学习文章有关机器学习的文章

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107446.html

javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

Channe 2019-08-20 17:15 评论0 收藏0
手摸手，带你用vue撸后台系列三(实战篇)

摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台系列一(基础篇)系类文章二：手摸手，带你用vue撸后台系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台系列三(实战篇）系类文章四：手摸手，带你用vue撸后台系列...

zgbgx 2019-08-29 12:46 评论0 收藏0
手摸手，带你封装一个vue component

摘要：灵活性和针对性。所以我觉得大部分组件还是自己封装来的更为方便和灵活一些。动手开干接下来我们一起手摸手教改造包装一个插件，只要几分钟就可以封装一个专属于你的。项目地址：vue-countTo配套完整后台demo地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系列二（登录权限篇）系类文章三：手摸手，带...

pkhope 2019-08-20 15:48 评论0 收藏0