目录
目录
前言: javaScript 中数据类型分为两大类,一、基本类型;二、引用类型。
1、基本数据类型分为(undefined、boolean、number、string、null、symbol)。
2、基本数据类型的值储存在栈内存中(js内存分区为栈、堆)。
3、基本数据类型修改是通过 变量 = 值的方式直接修改赋值的,其它任何方式都不能修改其值(因为想要给存于栈中的数据进行赋值只能通过 = )。
4、基本数据类型的判断是值的判断(也就是存在于栈中的数据的判断。ps: 所以这里就解释了为什么两个一摸一样的对象不相等的原因,因为他们存在于栈中的地址不同)。
前言: 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类型也有很多内置方法(这里就不一一举例了)参考:
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类型也有很多内置方法(这里就不一一举例了)参考:
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