JavaScript基础复习(一) 语言特性及数据类型

终于要开始写JS系列了，目标列了好久，导图也做了，但总没有行动，近来无事，总结一下这个系列的学习。

零、是什么

    JavaScript是前端必学语言，和HTML,CSS并称为前端三剑客，是一门运行在浏览器端的脚本语言，功能是操作DOM，处理数据，渲染特效等

 

一、语言特性

1、弱类型

    说白了就是类型定义，对应的就是强类型，比如Java，C等都是强类型语言，在使用变量的时候必须声明是哪种类型的，一旦被定义了数据类型，除非强制类型转换，那么它到销毁的时候都是这个类型的，这样当然是比较安全的。而弱类型就是不需要定义是什么数据类型，它的值就表示了它是什么类型的。如下：

var asd1 = 'have a nice day'   //string
var asd2 = 20                  //number
var asd3 = new Date()          //object
var asd4 = ['1','3','4']       //object
var asd5 = true                //boolean

2、动态性

    可以直接对用户的操作做出相应，不需要通过Web服务器。采用事件驱动的方式进行，比如你点击一个提交按钮就是一个事件，也就是说你执行某种操作的动作，非常常见。当相关事件在触发的时候就会自动执行需要响应的脚本或函数。

3、运行在浏览器端

    js脚本语言不允许访问本地硬盘，也不能存储在服务器上，所以它只能通过浏览器实现数据的展示和动态交互，正是因为这样，保证了数据的安全性。

4、跨平台性

    依赖于浏览器本身，与操作环境无关。只要能运行浏览器的计算机，并安装了支持javascript的浏览器就可以正确执行，从而实现了“编写一次，走遍天下”的梦想。

5、脚本语言

    解释性脚本语言，javascript不需要编译，只需要嵌入到html代码中，由浏览器逐行加载解释执行

 

二、基本数据类型

    JavaScript的基本类型值是保存在栈内存中的简单数据段，按值存储，所以按值访问。基本数据类型有：

            Number、String、Boolean、Null、Undefined、以及ES6的symbol(独一无二的值)。

    用typeof 来检验基本类型，参考弱类型的举例，可以返回这些值：undefined、boolean、string、number、object、function

    这里还有一些有意思的例子：

typeof undefined      //undefined
typeof null           //object
typeof ['1','2','3']  //object
typeof {asd:'sssss'}  //object

   所以不要使用typeof 来区分数组还是对象，因为都返回object。 

   有时需要根据数组或对象里有没有值来判断是否显示。

   如果是数组，arr.length>0。

   如果是对象，可以直接拿属性判断 obj.name。但如果不知道有什么属性，可以使用 Object.keys(obj).length > 0 来判断

   说说null和undefined的区别。

   都表示 无，如果转换为数值        undefined => NaN 有声明，但未赋值或者未初始化

                                                       null => 0 (原型链的终点) 没有，也没有定义，不存在

typeof 未定义值     // undefined
typeof 未初始化值   // undefined

 

 

三、进阶

    JavaScript 的基本知识就是上述，你可能发现好像很简单并不多，那只是基本类型，我们常用到的Object还没有介绍呢，接下来说一下进阶的知识。

1、引用类型

    和基本类型对应，引用类型是保存在堆内存中的对象，值是可变的，在栈中保存对应的指针（一个指向堆的引用地址），指向堆中实际的值。

    类型值：Object（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）

    使用 instanceof 检测引用类型 。      需明确确定是哪种类型，返回 布尔值

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。其意思就是判断对象是否是某一数据类型（如Array）的实例。不能用来判断基本类型

var a = [1,2]
var b = {'a':'asss'}
alert( a instanceof Array)   // true
alert( b instanceof Object)  // true 

  除了使用instanceof ,还可以使用一个方法来返回复杂类型的类型值Object.prototype.toString.call()。

  即使改变对象原型，也会显示正确的数据类型。

var arr = [3,4,5,6,2,1]
var aa = Object.prototype.toString.call(arr)    // '[object Array]'
aa.substr(8,aa.length-9)     // Array

那么基本类型和引用类型有什么区别呢。

var arr = [2,4,6];
var bcc = arr;//传址 ,对象中传给变量的数据是引用类型的，会存储在堆中；
var cxx = arr[0];//传值，把对象中的属性/数组中的数组项赋值给变量，这时变量C是基本数据类型，存储在栈内存中；改变栈中的数据不会影响堆中的数据
alert(bcc);//2,4,6
alert(cxx);//2
//改变数值 
bcc[1] = 6;
cxx = 7;
alert(arr[1]);//6
alert(arr[0]);//2

    从上面我们可以得知，当我改变bcc中的数据时，arr中数据也发生了变化；但是当我改变cxx的数据值时，arr却没有发生改变。

    这就是传值与传址的区别。因为arr是数组，属于引用类型，所以它赋予给bcc的时候传的是栈中的地址（相当于新建了一个不同名“指针”），而不是堆内存中的对象。而cxx仅仅是从arr堆内存中获取的一个数据值，并保存在栈中。所以bcc修改的时候，会根据地址回到arr堆中修改，cxx则直接在栈中修改，并且不能指向arr堆内存中。

   接下来就涉及到比较常用的深拷贝和浅拷贝，我们放在之后来说。

2、类型判断

    在开发的过程中经常会判断值是否相等来进行下一步的操作，在js中有两个方式判断两个值是否相等。

    ==   等于操作符

    js是弱类型语言，在使用 == 操作符的时候，会进行隐式类型转换

""           ==   "0"           // false
0            ==   ""            // true
0            ==   "0"           // true
false        ==   "false"       // false
false        ==   "0"           // true
false        ==   undefined     // false
false        ==   null          // false
null         ==   undefined     // true
" \t\r\n"    ==   0             // true

    因为在隐式类型转换的时候规则比较复杂，所以说使用 == 是一个不好的编程习惯，也会带来性能消耗。

    ===  全等操作符

    不会进行强制类型转换，

""           ===   "0"           // false
0            ===   ""            // false
0            ===   "0"           // false
false        ===   "false"       // false
false        ===   "0"           // false
false        ===   undefined     // false
false        ===   null          // false
null         ===   undefined     // false
" \t\r\n"    ===   0             // false

    所以推荐使用 === 操作符。 

3、类型转换

    所以已经使用了 === 操作符，但是还是会产生很多问题，那么不然我们自己进行类型转换。

   分类：

• 转换函数，如parseInt()/parseFloat()
• 强类型转换  Number()/String()/Boolean()
• 弱类型/隐式转换  使用操作符/==

   转换为 字符类型：    将一个值加上空字符串可以轻松转换为字符串类型

'' + 10 === '10'; // true

   转换为 数字类型:      使用一元的加号操作符，可以把字符串转换为数字。

+'10' === 10; // true

    转换为布尔值：     通过使用 否 操作符两次，可以把一个值转换为布尔型

!!'foo';   // true
!!'';      // false
!!'0';     // true
!!'1';     // true
!!'-1'     // true
!!{};      // true
!!true;    // true

   使用操作符转换的一些奇葩问题：

{} + {}   //Chrome [object object][object object] Firefox: NaN

{} + []   // 0

[] + {}  // [object object]

{}; // undefined  {} 前面没有操作符，后面有分号，会识别成 代码块

{}  // {}    {} 会识别成 对象字面量


Number([])  // 0

Number({})  // NaN

   + 运算符 会将其后的变量转换成数字，Number()

 

       是不是觉得很奇怪呢，这里我们就要说一下 假值

        ''、0、undefined、null、false、NaN 都是假值，返回 false。

       其他的都将是真值，包括对象、数组、正则、函数等。注意 '0'、'null'、'false'、{}、[]也都是真值  。 

      结论： false 0 '' 之间相互比较都是true,null和undefined相互比较是true。其余全是false

      ps: Js好奇葩呀！

拓展：

JavaScript基础复习(二) DOM详解

前端各阶段资源，应有尽有，尽管学，学的完算我输

谈一谈全栈，为什么不建议初学者去做

  参考：http://bonsaiden.github.io/JavaScript-Garden/zh/