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

版权声明:本文已在我的公众号 :【FEvivi】 ,原创首发, 欢迎关注~!如需转载,请注明出处 https://blog.csdn.net/zr15829039341/article/details/83864383

终于要开始写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 检测引用类型 。      需明确确定是哪种类型,返回 布尔值

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

  除了使用instanceof ,还可以使用一个方法来返回复杂类型的类型值。

var arr = [3,4,5,6,2,1]
var aa = Object.prototype.toString(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[2]);//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、类型转换

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

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

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

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

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

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

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

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

        ''、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/

关注我获取更多前端资源和经验分享

                                                                       

关注后回复    vivi     获取我的微信号,望不吝赐教,pps:可轻撩哈哈

感谢大佬们阅读,希望大家头发浓密,睡眠良好,情绪稳定,早日实现财富自由~

猜你喜欢

转载自blog.csdn.net/zr15829039341/article/details/83864383