JS学习笔记(一)

最近开始学习的JS,做这个笔记只是为了记录一下自己的学习情况,也算是督促自己每天多看点书。基本都是书上的内容整理了一下,并不是什么高深莫测的东西。

<h1 id="2">第2章 在HTML中使用JavaScript</h1>
<h2 id="2.1">2.1 script元素</h2>

  • async:表示立即下载脚本,但不应妨碍页面中的其他操作。只对外部脚本文件有效。
  • charset:可选。表示通过src属性指定的代码的字符集。大多数浏览器会忽略它的值,因此很少用。
  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
  • language:已废弃。
  • src
  • type:可选。默认text/javascript。

<h3 id="2.1.2">2.1.2 延迟脚本</h3>

<script>中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。先于DOMContentLoaded事件。最好只包含一个延迟脚本

<h3 id="2.1.3">2.1.3 异步脚本</h3>

与defer不同的是,标记为async的脚本并不保证按照指定它们的先后顺序执行。因此确保两者之间互不依赖非常重要。指定async的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发前或后执行。

<h3 id="2.1.4">2.1.4 在XHTML中的用法</h3>

  • 方法一:用相应的HTML实体(<)替换代码中所有的小于号(<)

  • 方法二:用一个CData片段来包含JavaScript代码。

      <script type="text/javascript"><![CDATA[
          function example(){
             //代码段
          }
      ]]></script>
    
  • 在不兼容XHTML的浏览器中,用JavaScript注释将CData标记注释即可

      <script type="text/javascript">
      //<![CDATA[
          function example(){
             //代码段
          }
      //]]>
      </script>
    

<h1 id="3">第3章 基本概念</h1>
<h2 id="3.3">3.3 变量</h2>

使用var操作符定义的变量将成为定义该变量的作用域中的局部变量。省略var可以定义全局变量(一般不用)。
<h2 id="3.4">3.4 数据类型</h2>

ECMAScript中的5种基本数据类型:Undefined,Null,Boolean,Number,String。1种复杂数据类型:Object
<h3 id="3.4.1">3.4.1 typeof操作符</h3>

  • 返回值:

    • "undefined":如果这个值未定义
    • "boolean":如果这个值是布尔值
    • "string":如果这个值是字符串
    • "number":如果这个值是数值
    • "object":如果这个值是对象或null
    • "function":如果这个值是函数
  • 用法

      var message = "sss";
      alert(typeof(message));//"string"
      alert(typeof message);//"string"
      alert(typeof 95);//"number"
    
  • 因为typeof是操作符不是函数,所以括号不是必须的。

<h3 id="3.4.2">3.4.2 Undefined类型</h3>

Undefined类型只有一个值:undefined(使用var声明变量但未初始化时)

<h3 id="3.4.3">3.4.3 Null类型</h3>

  • Null类型的值:null
  • undefined值派生自null值。因此null和undefined的相等性测试返回true
  • 如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为null

<h3 id="3.4.4">3.4.4 Boolean类型</h3>

  • 值:true和false
  • 转型函数Boolean()
数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空字符串 ""(空字符串)
Number 任何非零数字值(包括无穷大) 0和NaN
Object 任何对象 null
Undefined n/a(不适用) undefined

<h3 id="3.4.5">3.4.5 Number类型</h3>

整数:十进制,八进制(第一位是0),十六进制(前两位是0x)

  1. 浮点数值

    • 如果数值可以转换成整数,就会转换成整数
    • 科学计数法:var floatNum = 3.12e7;//等于31200000
    • 最高精度是17位小数,但其精确度远远不如整数
    • 不要测试某个特定的浮点数值
  2. 数值范围

    • 最小数值:Number.MIN_VALUE=5e-324(-Infinity)
    • 最大数值:Number.MAX_VALUE=1.7976931348623157e+308(+Infinity)
    • 超出数值后自动转换为特殊的Infinity(无穷)值
    • 确定是否在数值之间:isFinite()函数。有穷则返回true
  3. NaN(Not a Number)

    • NaN,即非数值。表示一个本来要返回数值的操作数未返回数值的情况

    • 特点:1.任何涉及NaN的操作都会返回NaNNa。2.与任何值都不相等,包括NaN本身

    • isNaN()函数:确定参数是否“不是数值”。

      • isNaN()接收到一个数值后,会尝试将这个值转换为数值。不能被转换为数值的将返回true

          alert(isNaN(NaN));//true
          alert(isNaN(10)); //false
          alert(isNaN("10"));//false
          alert(isNaN("blue"));//true
          alert(isNaN(true));//false
        
    • isNaN()适用于对象

  4. 数值转换

    • 将非数值转换成数值的三个函数:Number(),parseInt(),parseFloat()

    • Number()函数

      • 可以用于任何数据类型

      • 如果是Boolean值,true和false将分别转换为1和0

      • 如果是数字值,只是简单的传入和返回

      • 如果是null值,返回0

      • 如果是undefined,返回NaN

      • 如果是字符串,遵循下列规则

        • 如果是字符串中只包含数字,则将其转换为十进制数(注意011转换为11,前导零忽略)
        • 如果字符串中包含有效的浮点格式,则将其转换为相应的浮点数值(忽略前导零)
        • 如果字符串中包含有效地十六进制格式,则将其转换为大小相同的十进制整数
        • 如果字符串是空的,则转换为0
        • 如果字符串中包含除上述格式之外的字符,则转换为NaN
      • 如果是对象,则调用对象的valueOf()方法,然后依照前面的规则转换返回的值。如果转换的结果是NaN,则调用对象的toString()方法,然后再次依照前面的规则转换返回的值

    • paeseInt()函数

      • 把字符串转换成数值
      • 忽略字符串前面的空格,直到找到第一个非空字符。如果第一个字符不是数字或符号,则返回NaN;如果是就继续解析,直到解析完所有字符或遇到非数字字符(如1234blue会转换为1234,22.5转换为22)
      • 可以解析十进制,八进制。十六进制
      • 增加一个参数可以指定转换为多少进制parseInt("0xAF",16),也可以省略前面的0x
      • 始终将10作为第二个参数
    • parseFloat()函数

      • 与parseInt()类似
      • 第二个小数点无效
      • 始终忽略前导零
      • 只解析十进制,没有第二个参数
      • 如果字符串包含的是一个可解析为整数的数,会返回整数

<h3 id="3.4.6">3.4.6 String类型</h3>
单引号和双引号都有效,完全相同

  1. 字符字面量(转义字符)

    • 很多
    • 字符串的length属性:获取字符串长度
  2. 字符串的特点

    • ECMAScript中字符串不可变
    • 要改变某个变量保存的字符串,首先要创建一个新的字符串,在这个字符串中填充新的字符,然后销毁原来的字符串
  3. 转换为字符串

    1. toString()方法

      • 数值、布尔值、对象、字符串值有该方法,null和undefined值没有
      • 可以传递一个参数:输出数值的基数。通过传递这个参数可以输出以二进制、八进制、十六进制等有效进制格式表示的字符串
    2. 转型函数String()

      • 可以将任何类型的值转换成字符串
      • 如果值有toString()方法,则调用toString
      • 如果值是null,则返回"null"
      • 如果值是undefined,则返回"undefined"

<h3 id="3.4.7">3.4.7 Object类型</h3>

  1. 新建对象:var o = new Object();

  2. Object实例的属性和方法

    • Constructor:构造函数
    • hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中是否存在,propertyName必须以字符串形式指定
    • isPrototypeOf(Object):用来检查传入的对象是否是另一个对象的原型
    • propertyIsEnumerable(propertyName):用于检查给定的属性是否能用for-in语句来枚举
    • toLocaleString():返回对象的字符串表示。该字符串与执行环境的地区对应
    • toString():返回对象的字符串表示
    • valueOf():返回对象的字符串、数值或布尔值表示,通常与toString()方法的返回值相同

<h2 id="3.5">3.5 操作符</h2>
<h3 id="3.5.1">3.5.1 一元操作符</h3>

  1. 递增和递减操作符

    • 前置型和后置型
    • 执行前置递增和递减操作时,变量的值都是在语句被求值前改变的
    • 后置递增和递减在语句求值后才执行
    • 适用于任何值
      • 在应用于一个包含有效数字字符的字符串时,先将其转换为数字值,再执行加减1。字符串变量变成数值变量
      • 在应用于一个不包含有效数字字符的字符串时,将变量的值设为NaN。字符串变量变成数值变量
      • 在应用于布尔值false时,先将其转换为0再执行加减1。布尔值变量变成数值变量
      • 在应用于布尔值true时。先将其转换为1再执行加减1.布尔值变量变成数值变量
      • 在应用于浮点数值时,执行加减1的操作
      • 在应用于对象时,先调用对象的valueOf()方法以取得一个可供操作的值。然后对该值应用前述规则。如果结果是NaN,则调用toString()方法啊后再应用前述规则。对象变量变成数值变量
  2. 一元加和减操作符

    1. 一元加操作符(+)

      • 放在数值前面不产生任何影响
      • 对非数值应用一元加操作符时。会像Number()转型函数一样对这个值执行转换
    2. 一元减操作符(-)

      • 表示负数
      • 应用于非数值时,与一元加操作符规则相同,只是最后的数值变为负数

<h3 id="3.5.2">3.5.2 位操作符</h3>
对于有符号的整数,32位中的前31位用于表示整数的值,第32位用于表示数值的符号:0表示整数,1表示负数。表示符号的位叫做符号位,符号位的值决定了其他位数值的格式
正数:以纯二进制格式存储
负数:二进制补码

计算二进制补码:1.求这个数值绝对值的二进制码;2.求二进制反码:将0替换为1,1替换为0;3.将得到的二进制反码加1
对数值应用位操作符时:64位——>32位——>64位
特殊的NaN和Infinity会当作0
对非数值应用位操作符时:Number()转换后再应用,得到的是一个数值

  1. 按位非(NOT)

    • 符号:~
    • 结果:返回数值的反码
    • 本质:操作数的负值减1
  2. 按位与(AND)

    • 符号:&
    • 本质:将数值的每一位对齐,执行AND操作(都是1时返回1)
  3. 按位或(OR)

    • 符号:|
    • 本质:有一个1就返回1
  4. 按位异或(XOR)

    • 符号:^
    • 本质:只有一个1时才返回1,两位是1或是0则返回0
  5. 左移

    • 符号:<<
  6. 有符号的右移

    • 符号:>>
    • 本质:是以符号位的值填充空位
  7. 无符号右移

    • 符号:>>>
    • 本质:以0填充空位
    • 会把负数的二进制码当成正数的二进制码

<h3 id="3.5.3">3.5.3 布尔操作符</h3>

  1. 逻辑非

    • 符号:!

    • 规则:

      • 对象,返回false
      • 空字符串,返回true
      • 非空字符串,返回false
      • 数值0,返回true
      • 任意非0数值(包括Infinity),返回false
      • null,返回true
      • NaN,返回true
      • undefined,返回true
    • 两个!可以模拟Boolean()转型函数

  2. 逻辑与

    • 符号:&&
    • 规则:短路操作。即如果第一个操作数能决定结果,那么不会再对第二个操作数求值。可以应用于对象,不一定返回布尔值
      • 如果有一个操作数是null,则返回null
      • 如果有一个操作数是NaN,则返回NaN
      • 如果有一个操作数是undefined,则返回undefined
      • 如果第一个操作数是对象,则返回第二个操作数
      • ......
  3. 逻辑或

    • 符号:||
    • 规则:短路操作。可以应用于对象,不一定返回布尔值
      • 如果第一个操作数是对象,则返回第一个操作数
      • 两个都是null就返回null
      • 两个都是NaN就返回NaN
      • 两个都是undefined就返回undefined
      • ......

<h3 id="3.5.4">3.5.4 乘性操作符</h3>

  1. 乘法

    • 符号:*
    • 规则:
      • 如果操作数都是数值就执行常规的乘法计算。超过ECMAScript数值范围则返回Infinity或-Infinity
      • 如果有一个操作数是NaN,则结果是NaN
      • Infinity*0=NaN
      • Infinity*非0=Infinity/-Infinity
      • Infinity*Infinity=Infinity
      • 不是数值的会先调用Number()将其转换为数值,再应用规则
  2. 除法

    • 符号:/
    • 规则:
      • 如果操作数都是数值就执行常规的除法计算。超过ECMAScript数值范围则返回Infinity或-Infinity
      • 如果有一个操作数是NaN,则结果是NaN
      • Infinity/Infinity=NaN
      • 0/0=NaN
      • 非零/0=Infinity/-Infinity
      • Infinity/非零=Infinity/-Infinity
      • 不是数值的会先调用Number()将其转换为数值,再应用规则
  3. 求模

    • 符号:%
    • 规则:
      • 如果操作数都是数值就执行常规的除法计算
      • 无穷大数值%有限大数值=NaN
      • 有限大%0=NaN
      • Infinity/Infinity=NaN
      • 有限大/无穷大=被除数
      • 0/任何数=0
      • 不是数值的会先调用Number()将其转换为数值,再应用规则

<h3 id="3.5.5">3.5.5 加性操作符</h3>

  1. 加法
    • 符号:+
    • 规则:
      • 如果有一个是NaN,则结果是NaN
      • Infinity+Infinity=Infinity
      • -Infinity+(-Infinity)=-Infinity
      • Infinity+(-Infinity)=NaN
      • +0+(+0)=+0
      • -0+(-0)=-0
      • +0+(-0)=+0
      • 字符串+字符串=俩字符串连起来
      • 字符串+非字符串,先把非字符串转换成字符串,再连接起来
  2. 减法
    • 符号:-
    • 规则:
      • 如果有一个是NaN,则结果是NaN
      • Infinity-Infinity=NaN
      • -Infinity-(-Infinity)=NaN
      • Infinity-(-Infinity)=Infinity
      • -Infinity-Infinity=Infinity
      • +0-(+0)=+0
      • +0-(-0)=-0
      • -0-(-0)=+0
      • 如果有一个操作数是字符串、布尔值、null或undefined,则先在后台调用Number()函数将其转换为数值,然后再根据前面的规则执行减法计算。如果转换的结果是NaN,则减法的结果是NaN
      • 如果有一个操作数是对象,则调用对象的valueOf()方法以取得表示该对象的数值。如果得到的值是NaN,则减法的结果就是NaN。如果没有valueOf()方法,则调用toString()

<h3 id="3.5.6">3.5.6 关系操作符</h3>

  • 符号:<、>、<=、>=
  • 返回布尔值
  • 规则:
    • 如果两个操作数都是数值。则比较
    • 如果都是字符串,则比较字符串对应的字符编码值
    • 如果一个操作数是数值,则将另一个操作数转换为一个数值,然后比较
    • 如果一个操作数是对象,则调用这个对象的valueOf()方法,用得到的结果进行比较;若没有valueOf()方法,就调用toString()方法
    • 如果一个操作数是布尔值,则先将其转换为数值
    • 任何数与NaN进行关系比较结果都是false

<h3 id="3.5.7">3.5.7 相等操作符</h3>
由于相等和不相等操作符存在类型转换问题,为了保持代码中数据类型的完整性,推荐使用全等和不全等操作符

  1. 相等和不相等——先转换再比较

    • 符号:==、!=
    • 会先转换操作数(强制转型),再进行比较
    • 规则:
      • 如果有一个操作数是布尔值,则先转换为数值
      • 字符串比较数值,先将字符串转换为数值
      • 对象比较非对象,调用对象的valueOf()方法,再按照前面的比较
      • null和undefined是相等的
      • 要比较相等性之前,不能将null和undefined转换成其他任何值
      • 如果有一个操作数是NaN,则相等操作符返回false,不相等操作数返回true。即使两个操作数都是NaN,相等操作符也返回false
      • 对象比较对象,则比较他们是不是同一个对象。如果都指向同一个对象,则相等操作符返回true,否则返回false
  2. 全等和不全等

    • 符号:===、!==
    • 不转换,全等操作符只有在两个数未经转换就相等的情况下才返回true
    • null===undefined返回false,它们是不同类型的值

<h3 id="3.5.8">3.5.8 条件操作符</h3>
如:var max = (num1>num2) ? num1 : num2
<h3 id="3.5.9">3.5.9 赋值操作符</h3>

  • 符号:
    • =
    • *=
    • /=
    • %=
    • +=
    • -=
    • <<=
    • >>=
    • >>>=

<h3 id="3.5.10">3.5.10 逗号操作符</h3>

  • 用于声明多个变量

    • var num1=1, num2=2, num3=3;
  • 用于赋值:总是返回表达式中的最后一项

    • var num = (5, 1, 4, 8, 0);//num=0
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容