js变量及数据类型

目录

一、关于console调试常用方法

 二、全局变量和局部变量区别

 三、交换变量（面试常考）

四、JS数据类型 

五、堆和栈简单介绍

六、检查变量数据类型的几种方式 

---

---

个人复习：

一、关于console调试常用方法

console.log("normal");           // 用于输出普通信息
console.dir('inspect');            //用于对一个对象进行检查，并以易于阅读和打印的格式显示
console.info("information");     // 用于输出提示性信息
console.error("error");          // 用于输出错误信息
console.warn("warn");            // 用于输出警示信息
console.clear();              //清空控制台信息

 二、全局变量和局部变量区别

1. 作用域不同：全局变量的作用域为整个程序，而局部变量的作用域为当前函数或循环等

2. 内存存储方式不同：全局变量存储在全局数据区中，局部变量存储在栈区

3. 生命期不同：全局变量的生命期和主程序一样，随程序的销毁而销毁，局部变量在函数内部或循环内部，随函数的退出或循环退出就不存在了

4. 使用方式不同：全局变量在声明后程序的各个部分都可以用到，但是局部变量只能在局部使用。函数内部会优先使用局部变量再使用全局变量。

拓展:

• 局部变量可以与全局变量重名，但是局部变量会屏蔽全局变量。
• 全局变量是编程术语中的一种，源自于变量之分。
• 变量分为局部与全局，局部变量又可称之为内部变量。由某对象或某个函数所创建的变量通常都是局部变量，只能被内部引用，而无法被其它对象或函数引用。
• 全局变量既可以是某对象函数创建，也可以是在本程序任何地方创建。全局变量是可以被本程序所有对象或函数引用。

 三、交换变量（面试常考）

1. 使用第三方变量

   let a=5,b=10;
   let c=a;
       a=b;
       b=c;
   console.log(a,b); //输出为10 ，5

2. 不使用第三方变量

   let a=10,b=5;
   a=a+b;
   b=a-b;
   a=a-b;
   console.log(a,b);// 结果为5，10

3. 利用js高级语言 

   let a=10,b=5;
   
   [a, b] = [b, a];
   
   console.log(a,b)

四、JS数据类型 

         js中变量的数据类型是不确定的，可变化的，只有在赋值之后，才能根据保存的数据来确定数据类型。其中又分为简单数据类型和复杂数据类型。

简单数据类型：
        又称基本数据类型或者值类型，在存储时变量中存储的是值本身。

1. 数字类型(number)
2. 字符串型(string)
3. 布尔值(boolean)
4. undefined
   表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined。
5. null
   返回的是一个空的对象 object，当我们需要一个对象但不知道放什么时，可以用null暂时代替。

复杂数据类型： 

        在存储时变量中存储的仅仅时地址(引用),又称引用数据类型。通过new关键字创建的对象，如：

1. Object
2. Array
3. Date
   ... 

五、堆和栈简单介绍

1.  堆栈空间分配区别
   
   ①栈(操作系统)：由操作系统自动分配释放存放函数的参数值，局部变量的值等。
   
   ②堆(操作系统)：存储复杂类型(如对象)，一般由程序员分配释放，若不释放，由垃圾回收机制回收。
   
   注意：js中并没有堆和栈概念，只是通过堆栈方式便于我们理解代码执行方式。
2. 堆栈在内存中存在形式
   
   

 注意：复杂数据类型，形参和实参保存的是同一地址，也就是说操作的对象是相同的；而简单数据类型形参和实参在栈中所存内存不同，所以分别进行操作时，互不影响。

六、检查变量数据类型的几种方式 

1. typeof 
    

   console.log(typeof '');     // string 
   console.log(typeof 1);     // number
   console.log(typeof true);     // boolean
   console.log(typeof undefined);      // undefined
   console.log(typeof null);      // object
   console.log(typeof {});    // object
   console.log(typeof []);     //  object
   console.log(typeof function(){});   // function

   null 是一个特殊的简单数据类型，它返回的是object对象
   注意：typeof不适合用于判断是否为数组。当使用typeof判断数组和对象的时候，都会返回object 可以使用isArray()来判断是否为数组。

2. instanceof
   判断一个变量是否为所指数据类型，只能用来判断对象和函数，不能用来判断字符串和数字等。判断它是否为字符串和数字 时，只会返回false。

   console.log("" instanceof String);     // false
   console.log(1 instanceof Number);   // false
   console.log(true instanceof Boolean);    // false
   console.log(null instanceof Null);     //报错
   console.log(undefined instanceof Undefined);  //报错
   console.log({} instanceof Object);     //  true
   console.log([] instanceof Array);     //  true
   console.log(function(){} instanceof Function);     //  true
   

3. Object.prototype.toString.call() 
   为了保证兼容性，可以通过Object.prototype.toString.call方法，判断某个对象值属于哪种内置类型， 调用 Object.prototype.toString 同时用 call 方法来改变此方法内部的 this 指向来实现 “借用” Object.prototype 上的 toString 方法。

   // 注意区分大小写
   alert(Object.prototype.toString.call(“字符串”) === ‘[object String]’) -------> true;
   
   alert(Object.prototype.toString.call(123) === ‘[object Number]’) -------> true;
   
   alert(Object.prototype.toString.call([1,2,3]) === ‘[object Array]’) -------> true;
   
   alert(Object.prototype.toString.call(new Date()) === ‘[object Date]’) -------> true;
   
   alert(Object.prototype.toString.call(function a(){}) === ‘[object Function]’) ------->true;
   
   alert(Object.prototype.toString.call({}) === ‘[object Object]’) -------> true;

4. constructor
    constructor 属性返回对创建此对象的数组函数的引用。 在JavaScript中，每个具有原型的对象都会自动获得constructor属性。 

   // String
   var str = "字符串";
   alert(str.constructor); // function String() { [native code] 这是JavaScript的底层内部代码实现，无法显示代码细节。　　}
   alert(str.constructor === String); // true
   
   // Array
   var arr = [1, 2, 3];
   alert(arr.constructor); // function Array() { [native code] }
   alert(arr.constructor === Array); // true
   
   // Number
   var num = 5;
   alert(num.constructor); // function Number() { [native code] }
   alert(num.constructor === Number); // true