JavaScript数据类型

学习可以到大神的官网学习,http://www.liaoxuefeng.com/ 这里是做的笔记

运行和调试

a. 如何运行javascript
要让浏览器运行JavaScript,必须先有一个HTML页面,在HTML页面中引入JavaScript,然后,让浏览器加载该HTML页面,就可以执行JavaScript代码。
你也许会想,直接在我的硬盘上创建好HTML和JavaScript文件,然后用浏览器打开,不就可以看到效果了吗?
这种方式运行部分JavaScript代码没有问题,但由于浏览器的安全限制,以'file://'开头的地址无法执行如联网等JavaScript代码,最终,你还是需要架设一个Web服务器,然后以'http://' 开头的地址来正常执行所有JavaScript代码。
b. 调试:
使用Google Chrome浏览器,Chrome浏览器对开发者非常友好,可以让你方便地调试JavaScript代码
安装后,随便打开一个网页,然后点击菜单“查看(View)”-“开发者(Developer)”-“开发者工具(Developer Tools)”,浏览器窗口就会一分为二,下方就是开发者工具:
先点击“控制台(Console)“,在这个面板里可以直接输入JavaScript代码,按回车后执行。
要查看一个变量的内容,在Console中输入console.log(a);,回车后显示的值就是变量的内容。
如果你对自己还有更高的要求,可以研究开发者工具的“源码(Sources)”,掌握断点、单步执行等高级调试技巧。

  1. 引入javaScript方法;
    JavaScript代码可以直接嵌在网页的任何地方,不过通常我们都把JavaScript代码放到<head>中;
    1.由<script>...</script>包含的代码就是JavaScript代码,它将直接被浏览器执行。;
    2.把JavaScript代码放到一个单独的.js文件,然后在HTML中通过<script src="..."></script>引入这个文件;
    有些时候你会看到<script>标签还设置了一个type属性:<script type="text/javascript">
    但这是没有必要的,因为默认的type就是JavaScript,所以不必显式地把type指定为JavaScript。

  2. 注释
    1.行注释//...
    2.块注释/..../

  3. 数据类型和变量
    1.注意两个数据;
    NaN;//表示not a number 当无法计算结果时用NAN表示
    Infinity;//表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity
    2.注意相等运算符==JavaScript在设计时,有两种比较运算符;
    1.==//会自动转换数据类型再进行比较,很多时候会得到非常诡异的结果
    2.===//不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较.
    由于JavaScript这个设计缺陷,不要使用==比较,始终坚持使用===比较;
    3.NaN 这个特殊的Number与其他所有的值都不相等包括他自己;NaN===NaN;//false
    唯一能判断NaN的方法是通过isNaN()
    4.注意浮点数的比较:1 / 3 === (1 - 2 / 3); // false
    这不是JavaScript的设计缺陷。浮点数在运算过程中会产生误差,因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等,只能计算它们之差的绝对值,看是否小于某个阈值:
    Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true
    5.null和undefined
    null表示一个空的空,它和0和''不同,0 是一个数值,''表示长度为0的字符串.而null表示空
    undefined表示未定义
    JavaScript的设计者希望用null表示一个空的值,而undefined表示值未定义。事实证明,这并没有什么卵用,区分两者的意义不大。大多数情况下,我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。

    1. strict模式
      JavaScript在设计之初,为了方便初学者学习,并不强制要求用var申明变量。这个设计错误带来了严重的后果:如果一个变量没有通过var申明就被使用,那么该变量就自动被申明为全局变量:
      ,ECMA在后续规范中推出了strict模式,在strict模式下运行的JavaScript代码,强制通过var申明变量,未使用var申明变量就使用的,将导致运行错误。
      启用strict模式的方法是在JavaScript代码的第一行写上:'use strict';
    2. 字符串
      单行字符串 '...' 或者 "..."
      ES6新增:多行字符串 ...
      字符串链接可以用+号
      ES6新增模板字符串:表示方法和上面的多行字符串一样,但是它会自动替换字符串中的变量:这么读取变量的值:$(变量名)
      var name = '小明';
      var age = 20;
      var message = `你好, ${name}, 你今年${age}岁了!`;
    3. 对象
      JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开。注意,最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。
      访问属性是通过.操作符完成的,但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符,就必须用''括起来
      var xiaohong = {
      name: '小红',
      'middle-school': 'No.1 Middle School'
      };
      xiaohong的属性名middle-school不是一个有效的变量,就需要用''括起来。访问这个属性也无法使用.操作符,必须用['xxx']来访问:
      xiaohong['middle-school']; // 'No.1 Middle School'
      xiaohong['name']; // '小红'
      xiaohong.name; // '小红'
      判断一个对象是否拥有某一个属性,可以用in操作符 'name' in xiaohong; //true
      in判断一个属性存在,这个属性不一定是这个对象的,也可能是继承来的.
      要判断一个属性是不是对象自身拥有而不是从父类集成来的用用hasOwnProperty()方法xiaohong.hasOwnProperty('name')
      6.条件判断 如果if的判断语句不是true或者false 怎么办
      var s = '123';
      if (s.length) { // 条件计算结果为3
      //
      }
      JavaScript把null、undefined、0、NaN和空字符串''视为false,其他值一概视为true,因此上述代码条件判断的结果是true。
      7.数组:
      1.访问length属性获取数组长度
      2.与string类似,数组也可以用indexOf()来搜索一个指定元素的位置.存在返回索引(下标),不存在返回-1;
      3.slice()切片 对应于string的substring();截取数组的部分元素,返回一个新的数组,(包括开始索引不包括结束索引)
      如果不给slice()传递任何参数,它就会从头到尾截取所有元素。利用这一点,我们可以很容易地复制一个Array:
      var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
      arr.slice(0, 3); // 从索引0开始,到索引3结束,但不包括索引3: ['A', 'B', 'C']
      arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
      4.push和pop
      push() 向数组末尾添加若干元素,pop()则把Array的最后一个元素删除.
      5.unshift和shift
      unshift向头部添加若干元素,shift删掉第一个元素
      6.sort对数组进行排序
      7.reverse对数据进行翻转
      8.splice修改数组的万能方法,可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素
      var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
      // 从索引2开始删除3个元素,然后再添加两个元素:
      arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
      arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
      // 只删除,不添加:
      arr.splice(2, 2); // ['Google', 'Facebook']
      arr; // ['Microsoft', 'Apple', 'Oracle']
      // 只添加,不删除:
      arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
      arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
      9.concat 把当前数组和另一个数组链接,返回一个新的数组;
      concat()方法并没有修改当前Array,而是返回了一个新的Array。
      实际上,concat()方法可以接收任意个元素和Array,并且自动把Array拆开,然后全部添加到新的Array里:
      10.join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:
      8.Map和Set
      JavaScript的对象可以视为其他语言的Map或者Dictionary,JavaScript的对象键必须是字符串,但实际上Number或者其他数据类型作为键也是非常合理的。
      为了解决这个问题,ES6规范,引入的新的数据类型Map
      Map是一组键值对的结构,具有极快的查找速度。
      初始化Map需要一个二维数组,var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
      或者直接初始化一个空Map。Map具有以下方法:
      var m = new Map(); // 空Map
      m.set('Adam', 67); // 添加新的key-value
      m.set('Bob', 59);
      m.has('Adam'); // 是否存在key 'Adam': true
      m.get('Adam'); // 67
      m.delete('Adam'); // 删除key 'Adam'
      m.get('Adam'); // undefined
      由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:
      Set
      Set和Map类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key。
      要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set:
      var s1 = new Set(); // 空Set
      var s2 = new Set([1, 2, 3]); // 含1, 2, 3
      通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:
      通过delete(key)方法可以删除元素:
      iterable
      遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于iterable类型。
      具有iterable类型的集合可以通过新的for ... of循环来遍历。
      for ... of循环,它只循环集合本身的元素:
      更好的方式是直接使用iterable内置的forEach方法,它接收一个函数,每次迭代就自动回调该函数。以Array为例:
      var a = ['A', 'B', 'C'];
      a.forEach(function (element, index, array) {
      // element: 指向当前元素的值
      // index: 指向当前索引
      // array: 指向Array对象本身
      alert(element);
      });
      forEach()方法是ES5.1标准引入的,你需要测试浏览器是否支持。
      Set与Array类似,但Set没有索引,因此回调函数的前两个参数都是元素本身:
      var s = new Set(['A', 'B', 'C']);
      s.forEach(function (element, sameElement, set) {
      alert(element);
      });
      Map的回调函数参数依次为value、key和map本身:
      var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
      m.forEach(function (value, key, map) {
      alert(value);
      });
      如果对某些参数不感兴趣,由于JavaScript的函数调用不要求参数必须一致,因此可以忽略它们。例如,只需要获得Array的element:
      var a = ['A', 'B', 'C'];
      a.forEach(function (element) {
      alert(element);
      });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,478评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,825评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,482评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,726评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,633评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,018评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,168评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,320评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,264评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,288评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,995评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,587评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,909评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,284评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,862评论 2 339

推荐阅读更多精彩内容