js再次学习

作者: 聂叼叼 | 来源:发表于2018-04-12 15:36 被阅读0次

    新进的公司,又要把我们js(前端)再培训一次,也就顺带学习一次。也收获不少,书读百遍,其义自见。

    1、JavaScript显示数据

    JavaScript 可以通过不同的方式来输出数据:

    (1)、使用window.alert()弹出警告框。(window可以省略)

    (2)、使用document.write()方法将内容写到 HTML 文档中。

    (3)、使用innerHTML写入到 HTML 元素。

    (4)、使用console.log()写入到浏览器的控制台。

    2、JavaScript注释

    (1)单行注释://单行注释

    (2)多行注释:/*多行注释*/

    3、JavaScript 数据类型

    字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。

    因为js中数据的类型很奇怪,而且语法不算很严谨,学习起来总是觉得很难受,个人觉得。

    来看一下定义一个数组:

    第一种:通过new来定义一个数组,然后通过下标来对数组赋值

    第一种方式new

    第二种:new的同时,直接赋值

    第三种:不用new关键字

    接下来再看一下js中的对象,来看一下对象的定义:

    对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

    然后对象寻址主要有两种,有点像java中对象的属性。

    第一种是利用[]括号,里面写对应属性名:对象名[属性名]

    第二种就是类似java中对象的属性,对象名.属性名

    最后再来说一下Undefined 和 Null的联系或者说区别吧:

    Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。

    Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。

    接下来几个经典的例子看下:

    这段代码显示为true,代表flag的值即为undefined,因为我们没有初始化它。

    当页面上不存在id为"notExistElement"的DOM节点时,这段代码显示为"true",因为我们尝试获取一个不存在的对象。

    下面来看一下这两种数据类型的类型,有点拗口。。。。。。通过typeof关键字来判断一个变量所属的类型

    第一行代码很容易理解,undefined的类型为Undefined;第二行代码却让人疑惑,为什么null的类型又是Object了呢?其实这是JavaScript最初实现的一个错误,后来被ECMAScript沿用下来。在今天我们可以解释为,null即是一个不存在的对象的占位符,但是在实际编码时还是要注意这一特性。

    再来一个比较经典的undefined与null的题目:

    ECMAScript认为undefined是从null派生出来的,所以把它们定义为相等的。

    使用typeof方法在前面已经讲过,null与undefined的类型是不一样的,所以输出"false"。而===代表绝对等于,在这里null === undefined输出false。

    4、JavaScript 函数

    js中的函数是用关键字function定义的,可以有函数名,也可以没有函数名的。

    讲到函数,我就要想说一件js中较其他语言不同的一点:js中能形成作用域的只有函数。下面举例子来看看:

    像这种,明明i是定义在for里面的,应该是个局部变量,但是输出的时候i是等于10.这个很重要。

    这时候,运行时控制台会报错,Uncaught ReferenceError: i is not defined,就是说i没有定义。因为i是定义在函数里面的,这也就说明js中形成作用域的只有函数。这点勿忘。

    注:

    JavaScript 变量的生存期

    JavaScript 变量的生命期从它们被声明的时间开始。

    局部变量会在函数运行以后被删除。

    全局变量会在页面关闭后被删除。

    JavaScript 变量生命周期

    JavaScript 变量生命周期在它声明时初始化。

    局部变量在函数执行完毕后销毁。

    全局变量在页面关闭后销毁。

    相关文章

      网友评论

        本文标题:js再次学习

        本文链接:https://www.haomeiwen.com/subject/kswxkftx.html