js数据类型

WEBYANGxw

已于 2022-12-02 15:13:07 修改

阅读量235

点赞数 2

文章标签： javascript 前端开发语言

于 2022-11-18 18:39:18 首次发布

本文链接：https://blog.csdn.net/WEBYANGxw/article/details/127905873

版权

前言: javaScript 中数据类型分为两大类，一、基本类型；二、引用类型。

一、基本类型：

1、基本数据类型分为（undefined、boolean、number、string、null、symbol）。

2、基本数据类型的值储存在栈内存中（js内存分区为栈、堆）。

3、基本数据类型修改是通过变量 = 值的方式直接修改赋值的，其它任何方式都不能修改其值（因为想要给存于栈中的数据进行赋值只能通过 = ）。

4、基本数据类型的判断是值的判断（也就是存在于栈中的数据的判断。ps: 所以这里就解释了为什么两个一摸一样的对象不相等的原因，因为他们存在于栈中的地址不同）。

1、javaScript 引用类型有：Object、Array、Function、Date、RegExp、基本包装类型。引用类型明显区别于基本类型的点是：引用类型和基本类型值储存在内存中的位置不同，引用类型值存于“堆”中，在“栈”中储存了一个映射地址地址引用堆中的数值，所以顾名思义（引用）。

2、下面对六个引用类型进行单独讲解：

2.1 Object:

2.2 Array:

前言: javaScript 中数据类型分为两大类，一、基本类型；二、引用类型。

一、基本类型：

1、基本数据类型分为（undefined、boolean、number、string、null、symbol）。

2、基本数据类型的值储存在栈内存中（js内存分区为栈、堆）。

3、基本数据类型修改是通过变量 = 值的方式直接修改赋值的，其它任何方式都不能修改其值（因为想要给存于栈中的数据进行赋值只能通过 = ）。

4、基本数据类型的判断是值的判断（也就是存在于栈中的数据的判断。ps: 所以这里就解释了为什么两个一摸一样的对象不相等的原因，因为他们存在于栈中的地址不同）。

const a=1,b=1;

console.log(a==b); // true

console.log(a===b); // true

5、下面对五个基本类型进行单独讲解。

5.1 undefined:

undefined既是JavaScript中的原始数据类型之一，也是一个原始值数据；

var a;
console.log(a) // undefined

undefined不可删、不可重新定义、不可枚举、没有任何方法及属性

// 1、不可删除
delete window.undefined;
console.log(undefined);//undefined

// 2、不可重新定义
Object.defineProperty(window,'undefined',{
  enumerable:true,
  writable:true,
  configurable:true
});
// 报错：Uncaught TypeError: Cannot redefine property: undefined

// 3、不可枚举

for(k in window){
   if(k===undefined){
     console.log(key)//不会输出内容
   }
}

// 4、没有任何属性及方法

var a = undefined;

a.b 
// 报错：VM643:1 Uncaught TypeError: Cannot read properties of undefined (reading 'b')

undefined是全局对象上的一个属性，可通过window.undefined访问到；

出现undefined一般的情况如下：

// 1、已声明的变量但未赋值
var a;
console.log(a) // undefined

// 2、执行没有定义返回值的函数
function fn(){};
function fn1(){
    return
};
console.log(fn()) // undefined
console.log(fn1()) // undefined

a = [1,2,3];
console.log(a.forEach(i=>{})) // undefined


// 3、访问对象、数组、等引用类型中没有的属性

var obj = {};
console.log(obj.length) // undefined

var arr = [];
console.log(arr.a) // undefined

var time = new Date();
console.log(time.length) // undefined

5.2 boolean：

boolean 类型表示一个逻辑实体并且包括两个值：true 和 false，布尔值通常用于条件运算，包括三元运算符、if...else、while 等。

console.log(!false); // true
console.log(!!123); // true
console.log(!!'123'); // true
console.log(!!{}); // true
console.log(!![]); // true
var b = new Boolean(true) ;
console.log(b.valueOf()); // true



console.log(!true); // false
console.log(!123); // false
console.log(!!''); // false
console.log(!!0); // false
console.log(!!-0); // false
console.log(!!NaN); // false
console.log(!!undefined); // false
console.log(!!null); // false
var b = new Boolean(0) ;
console.log(b.valueOf()); // false

5.3 number:

number类型，也就是数字类型。在js中因为内存限制number数字在5e-324～1.7976931348623157e+308之间。

js中number类型也有很多内置方法（这里就不一一举例了）参考：

JavaScript 数字方法

JavaScript 数学

5.4 string:

string类型，也就是字符串类型。得到string的方式如下：

console.log('字符串') // 字符串（string类型）
console.log('1') // 1（string类型）
console.log('1'+1) // 11（string类型）
console.log(String(1)) // 1（string类型）
var a = 123;
console.log(a.toString()) // 123（string类型）
console.log(`123`) // 123（string类型）

js中number类型也有很多内置方法（这里就不一一举例了）参考：

JavaScript 字符串方法

JavaScript 字符串搜索

5.5 null:

null类型是第二个只有一个值的类型，这个特殊值就是null，从逻辑的角度看，null值表示一个空对象指针。一般情况下使用null是为了内存释放，就是在定义一个变量（引用类型）不使用它后变量 = null 强制释放。（js内存释放机制中规定，一个变量在没有任何地方引用到时会自动释放，但是由于一些特殊原因定义的变量一直在被引（内存泄露）用所以这里就可以把变量的值强制设置为null来释放内存。不过一般不建议这样使用，还是希望能找到引用该变量的地方来解决它）。

// 闭包内存释放（内存泄露）

function fn(){
    var count = 0;
    return function(){
        return count++;
    }
}; // 闭包。

var a = fn();// 这里看起来像是垃圾回收器会定期清理掉fn。但是fn函数返回的指针又被a引用了,该函数又引用了fn内部变量，所以更具“垃圾回收机制”:只会释放未被引用的值内存（包括内部定义的变量）。

5.6 symbol:

ES6中新增的一种数据类型, 被划分到了基本数据类型中，普遍用于表示独一无二的健、值。

// 独一无二的值
var a = Symbol(1);
var b = Symbol(1);
console.log(a==b); // false
console.log(a===b); // false

// 独一无二的健

var obj = {a:1,a:2};
console.log(obj) // {a:2},这里a被之后的a覆盖了，因为一个对象中同级重名的话后者会覆盖前者。

obj = {[Symbol('a')]:1,[Symbol('a')]:2};
console.log(obj) // {Symbol(a): 1, Symbol(a): 2}

二、引用类型：

1、javaScript 引用类型有：Object、Array、Function、Date、RegExp、基本包装类型。引用类型明显区别于基本类型的点是：引用类型和基本类型值储存在内存中的位置不同，引用类型值存于“堆”中，在“栈”中储存了一个映射地址地址引用堆中的数值，所以顾名思义（引用）。

引用类型特征如下：

// 这里用Object对象做例子；
// 1、内部值的变化会影响到所有映射到堆中同一个值的变量。

var a = {b:1};

var c = a;

c.b++;

console.log(a, c) // {b:2},{b:2}

// 2、==、===判断中只判断“栈中的地址”；

// 这里用一个基本类型做一个对比;

var a = 2;

var b = 2;

console.log(a==b, a===b) // true, true

// 引用类

var a = {b:1};

var b = {b:1};

var c = a;

console.log(a==b, a===b, a==c, a===c) // false, false, true, true

// 看似引用类a、b的数据完全一样但是不相等，a、c相等；基本数据a、b一样就相等。这里就能
// 说明==和===只是对“栈”中的值判断。引用类a、b，值是一样的单身栈中的引用地址不同所以不相
// 等，a、c引用地址一样所以相等。至于基本类型的 a、b 值是存于“栈”中的，所以a===b，同等
// 于2===2。（所以理解“栈”和“堆”，对理解数据类型有很大的帮助）

2、下面对六个引用类型进行单独讲解：

2.1 Object:

Object是javaScript最顶层的“父类”对象，所有的对象都默认继承Object，所有对象都可以视为Object的实例。

创建 || 访问Object方式如下：

// 1、Object 创建的方式。
var a = {}; //字面量创建

a = new Object() // Object 构造函数创建。

console.log(new Object()) // {}

console.log(new Object(null)) // {}

console.log(new Object({})) // {}

console.log(new Object(undefined)) // {}

console.log(new Object(123)) // Number {123} Number构造函数创建的实例。

console.log(new Object('abc')) // String {123} String构造函数创建的实例。

a = object() // Object 函数创建。

// 2、Object 访问方式。

a = {b:1,c:2};

console.log(a.b) // .访问

console.log(a['b']) // [] 字符串访问

var key = 'b'; 
console.log(a[key]) // [] 变量访问

2.2 Array:

Array数组对象，javaScript中表示数组的对象。

创建 || 访问Object方式及常用方法如下：

// 一、创建方式同等于 object的三种。
var a;
//1、构造函数创建

a = new Array();

//2、函数创建

a = Array();

//3、字面量创建

a = [];

// 二、访问方式。

a[0] // 下标访问


// 三、常用方法
var arr = [1,2,3];
var d;
// 1、forEach:
d = arr.forEach((v, i, d)=>{
    console.log(v); // 数组中的每一项
    console.log(i); // 当前被遍历到的数组下标
    console.log(d === arr); // true 被遍历的数组
})
console.log(d) // undefined

// 2、map:
d = arr.map((v, i, d)=>{
    console.log(v); // 数组中的每一项
    console.log(i); // 当前被遍历到的数组下标
    console.log(d === arr); // true 被遍历的数组
    return v;
})
console.log(d) // 由每一项的返回组成同等原数组长度的新数组；


// 3、find:
d = arr.find((v, i, d)=>{
    console.log(v); // 数组中的每一项
    console.log(i); // 当前被遍历到的数组下标
    console.log(d === arr); // true 被遍历的数组
    return v===2;
})
console.log(d) // 返回值为true的第一项||undefined；

// 3、findIndex:
d = arr.find((v, i, d)=>{
    console.log(v); // 数组中的每一项
    console.log(i); // 当前被遍历到的数组下标
    console.log(d === arr); // true 被遍历的数组
    return v===2;
})
console.log(d) // 返回值为true的第一项的下标||-1；

// 5、filter:
d = arr.filter((v, i, d)=>{
    console.log(v); // 数组中的每一项
    console.log(i); // 当前被遍历到的数组下标
    console.log(d === arr); // true 被遍历的数组
    return v>1;
})
console.log(d) // 返回值为true的每一项组成新的数组||[]；

6、some:
判断数组中是否有一项以上符合条件，有：ture，没有：false；

7、every:
判断数组中是否每一项都符合条件，符合：ture，不符合：false；

8、concat:

console.log(a.concat([5]) // [1,2,3,5];

console.log(a.concat([1]) // [1,2,3,5,1]; 

9、includes:

arr.includes(1); // true 判断数组中是否有该项值，有：true，无：flase;

10、indexOf:

arr.indexOf(2); // 1 找到数组中该值的下标,没有返回-1；

[1,2,3,1].indexOf(1); // 0 若有两个则返回第一个;

11、reduce: //从下标1开始遍历；


[1].reduce((prev, current)=>prev+current) // 1 若数组只有一项，则返回当前那一项


d = arr.reduce((prev, current, currentIndex, arrData)=>{
    console.log(prev); // reduce前一次的返回值;
    console.log(current); // 当前被遍历到的一项
    console.log(currentIndex); // 当前被遍历到的下标
    console.log(arrData); // 被遍历的数组
    return prev + current;
}) // 1+2+3 = 6