2019-06-24JavaScript的数据类型

前头的话：

算是重学吧，以前只图快，加上不爱写博客，忘得差不多了！这一系列文章是跟着w3school文档撸的，只是为了让自己手抄一遍，加深记忆，非完全原创。

JavaScript语言与Java语言的关系：类似于雷锋与雷峰塔的关系。

什么是语言：

计算机是一个由人来控制的机器，人要他干啥它就得干啥。那么人如何告诉计算机该去干嘛呢？——语言
语言的发展：
纸带机：机器语言——汇编语言：符号语言——现代语言：高级语言

JavaScript简介

JavaScript诞生于1995年，用于网页的前端验证，所谓前端验证就是指检查用户输入的内容是否符合一定的规则（例如用户名或者密码的长度，邮箱的格式），但时至今日，网页上所有的动态效果全由JavaScript完成


image.png

有空看看书——《浪潮之巅》
ECMAScript只是定义了标准，由各大浏览器厂商去实现，每个厂商分别用不同的JS引擎去实现。以谷歌用的v8速度最快。

JavaScript的组成：BOM，DOM，ECMAScript。这三部分也是我们要学习的内容

JS的特点:

解释性语言：写完了直接运行，不用去编译
类似于 C 或Java的语法结构
动态语言：变量可以保存仁和类型的值
基于原型的面向对象：（学习的主要关注点）

JS编写位置

所有的语言都是在向计算机发命令，要么，我们JS的命令是写在哪儿的呢？
我们的JS代码写在网页中，用一个script标签包裹起来。script标签可以写在head标签中，可以写在body标签里面，也可以写在整个文档的最后面，也可以写在一些标签的一些属性（如button标签的onclick，a标签的href属性）里面（不推荐，属于行为和结构的耦合，不方便维护），也可以单独的建立一个script文件，在需要使用的html文件里通过<script type="text/javascript" src="url"></script>标签引入、也可以利用浏览器的缓存机制（推荐使用方式）。
script标签只要是用于引入外部script文件了，里面写的JavaScript代码浏览器不会解析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.css">
    <script></script>
</head>
<body>
    <div class="container">
        <script type="text/javascript"></script>
    </div>
    <a href="javascript:alert('点击事件')">这是一个超链接</a>
    <!--这种形式经常用到，点超链接不会刷新 / 跳转页面，我们通过JS代码再赋给它一些别的功能！-->
    <a href="javascript:;">这是一个超链接</a>
    <button onclick="alert('点击事件！')">这是一个Button</button>
</body>
</html>
<script>
    /**
     * 推荐这种写法
     * type属性可要，可不要
     */

//   这就是一句JS代码，让浏览器弹出弹框，弹框里的内容为"Hello World!"
     alert("Hello World!");
//     向  body标签  中输出一个内容！
    document.write("这是一串字符串！");
//    向控制台输出一个内容
    console.log(111,"8888");
    console.log("控制台里面输出一个内容！");
</script>

注意，JS代码是从上到下依次解析执行的。
我们上面的例子中的语句又可以叫做输出语句。

JS输出

JavaScript 不提供任何内建的打印或显示函数。

  • window.alert() 写入警告框
  • document.write() 写入 HTML 输出
    在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
  • innerHTML 写入 HTML 元素
  • console.log() 写入浏览器控制台

基本语法

JavaScript 语句构成：值、运算符、表达式、关键词和注释。
JS注释：

//    JS语法
//    当行注释，快捷键：ctrl + /

    /**
     * 多行注释
     */

JS严格区分大小写
JS中每一条语句以;结尾。如果不写分号，浏览器会自动添加，这样会消耗一些系统资源，而有的时候，浏览器会加错分号。
JS中会忽略多个空格和换行，我们可以利用这一特点对我们的代码进行格式化

JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构（ 如何声明变量， 如何赋值，如何计算值）
如何声明变量：var （关键词）
如何赋值：=（赋值运算符）
如何计算值：+ - * /（算数运算符）

字面量和变量

字面量，都是一些不可改变的值，比如：1,2,3，“hello”。
字面量都是可以直接去使用的，但我们一般都不会直接使用！因为有可能很多地方都会使用到它，而他有可能非常不好记忆与理解！
变量：可以用来保存我们的字面量。他的值可以改变。程序中使用他更方便！

JS声明一个变量：var关键字

var a;

这个时候，a变量的值为undifined，我们不能使用，除非我们给他赋值。

a = 123;

我们也可以这样写，通过变量对我们的字面量进行描述

var age = 80;

标识符

在JS中，所有的可以由我们自主命名的都可以称作标识符。
例如：变量名，函数名，属性名。

我们命名标识符是需要遵守的规则：

  • 1.标识符中可以包含 字母、数字、_ 、$
  • 2.标识符不能以数字开头（为了轻松区分标识符和数值）

  • 3.指标识符不能是ES中的关键字，或者保留字


    一些常见的关键字和保留字
  • 4.标识符一般采用驼峰式命名法（首字母小写，每个单词的开头字母大写，其他字母小写。如：myAge）

ES底层保存标识符时实际上是采用的Unicode编码，所以理论上讲，所有的UTF-8中含有的内容都可以作为标准！

    var 我的年龄 = 12;
    console.log(我的年龄);

这么写，会正常执行，但强烈不建议这么写！

JS中进制的表示

  • 二进制： 0b开头
  • 八进制：0开头
  • 十六进制：0x开头

JS中的数据类型

数据类型指的就是字面量的数据类型！
JS中的数据类型有6种：String（字符串），Boolean（布尔值），Number（数值），Object（对象），Null（空值），Undefined（未定义），Object（对象）。
String，Boolean，Number，Null，Undefined属于基本数据类型。Object属于引用数据类型。

ECMAScript 的 Boolean 值、数字和字符串的原始值是伪对象，具有属性和方法。
ECMAScript 定义所有对象都有 toString() 方法，无论它是伪对象，还是真对象。

String

属性：length
方法：toString()
将字符串“我是一个字符串！”赋值给str变量。

    var str = "我是一个字符串！";
    var words = "我说：'今天天气真好啊！'";
    var words = '我说："今天天气真好啊！"';

注意：
字符串需要通过引号（单引号或者双引号）引起来。
不要混用单引号与双引号
引号不能嵌套：单引号里面不能嵌套单引号，双引号里面不能嵌套双引号！
但是双引号里面嵌套单引号。

在字符串中，我们可以使用\作为转义字符
即是，当你就想要在双引号里面嵌套双引号的时候，可以这么做：

    var str = "我说：\"今天天气真好啊！\""

常用的转义字符：

\":   "
\':   '
\n:   换行
\t:   制表符
\\:   \

Number

属性：
方法：toString()
在JS中，所有的数值都是Number类型，包括整数和浮点数。

    var str = "123";
    var num1 = 123;
    var num2 = 1.1
    console.log(typeof (str));  //string
    console.log(typeof (num1));  //number
    console.log(typeof num2);  //number
    console.log(str == num1);   // true
    console.log(str === num1);  //false

typeof 运算符来检查一个变量的类型
语法：typeof 变量
问题：
通过输出可以看到，str与num1是不同的数据类型，但使用==的时候却返回true
===则返回了false
回答：
==涉及到了类型转换，后面会详细介绍

Number中的某些特殊数字

  • Number.MAX_VALUE
  • Number.MIN_VALUE
    console.log(Number.MAX_VALUE);// 1.7976931348623157e+308
    console.log(Number.MIN_VALUE);  //5e-324

如果使用Number表示的数字超过了JS的最大值，会返回Infinity

  • Infinity：正无穷，是一个字面量
  • -Infinity：负无穷
    使用 typeof 返回 number
  • NaN
    NaN 也是一个数字，表示Not a Number，也是个字面量
    NaN不等于他本身
    var a = "abc" * 10;
    console.log("a",a);  //a NaN
    console.log(typeof a);  //number

说到了数字，就离不开运算，来看看JS中Number的运算吧！

  • 整数之间的运算基本不会出错
  • 浮点数运算可能得到一个不精确的结果，所以不要用JS来进行对精确度要求比较高的运算
    所有的语言都有这个问题，原因就是二进制没办法完全正确的表示一些浮点数（有些语言自己会有一套解决方案，但JS没有）。

Boolean

布尔值只有两个值，主要用来做逻辑判断
true：真
false：假

    var bool = true;
    var str = "true";
    console.log(typeof bool);  //boolean
    console.log(bool == str);  //false
    console.log(bool === str);  //false

需要注意的是，这里使用==返回了false

Null

Null类型的值就只有一个——null
null常用于表示一个为空的对象

    console.log(typeof  null);  //object

Undefined

Undefined的值只有一个——undefined
表示未定义的。
undefined 实际上是从值 null 派生来 undefined == null 返回true

    var a;
    console.log(a);  //undefined
    console.log(typeof a); //undefined

Object

类型转换：(暂不讨论Object)

指将一个数据类型强制转换为其他数据类型。
类型转换主要指将 其他的数据类型 转换为 String ， Number， Boolean 类型

其他数据类型转换为 String 类型：

  • 调用 toString()方法
    toString()方法不会影响原数据，返回一个新数据
    Number 类型的 toString() 方法两种模式，即默认模式和基模式。
    null和undefined没有toString方法，调用时会报错。
    var a = 0.01;
    console.log(typeof a);  //number
    // a.toString(); 这样写的话不会转换成功
    a = a.toString();
    console.log(a);  //0.01
    console.log(typeof a);  //string

var iNum = 10;
alert(iNum.toString(2));    // "1010"
alert(iNum.toString(8));    // "12"
alert(iNum.toString(16));   // "A"
var iNum1 = 10;
var iNum2 = 10.0;
alert(iNum1.toString());    // "10"
alert(iNum2.toString());    // "10"
  • 调用String()函数，将要转换的数据作为参数传入
    String()函数不会影响原数据，返回一个新数据
    对于Boolean和Number，调用toString()方法
    对于null和undefined，分别返回“null”和“undefined”的字符串形式
    var b = true;
    b = String(b);
    console.log(typeof b); //string
    b = null;
    b = String(b);
    console.log(typeof  b);  //string
  • 使用+ 操作符
    是一种隐式转换，由浏览器完成，实际上是使用了String()函数。
    console.log(undefined + ""); //"undefined"
    console.log(1 + "");   //"1"

其他数据类型转换为 Number类型：

有很多种情况，纯数字的字符串，完全没有数字的字符串，以数字开头的不是纯数字的字符串，不是以数字开头的不是纯数字的字符串，true，false，null，undefined等等等等。

使用Number函数

我们可以直接在控制台写JS代码

空字符串

转换为0

    var a = Number("");
    var b = Number("    1");
    var c = Number("    ");
    console.log(a,typeof a);  //0 number
    console.log(b,typeof b);  //1 number
    console.log(c, typeof c);  //0 number

纯数字字符串转为数字：

不管是整数，还是浮点数，都能正确转换

    // 纯数字的字符串
    var a = Number("123.456");
    console.log(a);  //123.456
    console.log(typeof a);  //number
    var b = Number("123");
    console.log(b);  //123
    console.log(typeof b);  //number

完全没有数字的字符串转为数字：

转换为NaN

//    完全没有数字的字符串
    var a = Number("adb.c%");
    var b = Number("$%^*)(");
    var c = Number("          w12");
    console.log(a);  //NaN
    console.log(b);  //NaN
    console.log(c);  //NaN
    console.log(typeof a);  //number
    console.log(typeof b);  //number

以数字开头的不是纯数字的字符串：

转换为NaN
注意，c不是一个数字，因为一个数字只能有一个小数点。

//    以数字开头的不是纯数字的字符串
    var a = Number("123.0adg");
    var b = Number("123.456asd");
    var c = Number("456.123.2");
    console.log(a,b,c); //NaN NaN NaN

不是数字开头的不是纯数字的字符串：

可以预见，也是转换为NaN

    var a = Number(".adg123");
    var b = Number("asd123.456");
    var c = Number("uio.123");
    console.log(a,b,c); //NaN NaN NaN

true和false：

true:转换为1
false:转换为0


图片.png

null 和 undefined：

null：0
undefined: NaN

    var a = Number(undefined);
    var b = Number(null)
    console.log(a,typeof a)  //NaN number
    console.log(b,typeof b)  //0 number

使用parseInt() 和parseFloat()函数转为Number

parseInt()：将一串字符串从左到右解析，直到找到一个字符是无效数字为止，小数点也是无效数字。
parseFloat()：将一串字符串从左到右解析，直到找到一个字符是无效数字为止，第一个小数点是有效的，第二个小数点是无效数字。
parseInt() 方法有基模式，parseFloat()则没有。
对于parseInt("010")，有的浏览器会当成10进制去解析，有的会当成八进制解析，最好采用基模式

    console.log(parseInt("12345red"));  //12345
    console.log(parseInt("0xA"));   //10
    console.log(parseInt("56.9"));  //56
    console.log(parseInt(""));  //NaN
    console.log(parseInt("010"), parseInt("010",8), parseInt("010",10));  //10 8 10
//对于parseInt("010")，有的浏览器会当成10进制去解析，有的会当成八进制解析，最好采用基模式

    console.log(parseFloat("12345red"));    // 12345
    console.log(parseFloat("0xA")); // 0
    console.log(parseFloat("11.2"));    // 11.2
    console.log(parseFloat("11.22.33"));    // 11.22
    console.log(parseFloat("0102"));    // 102
    console.log(parseFloat("red")); // NaN
    console.log(parseFloat(" "));  // NaN

总结：

1.使用Number函数

  • 纯数字的字符串转为对应数字
  • 非纯数字的字符串转为NaN
  • 空串或者全是空格的字符串，转换为0
  • true转为 1，false 转为 0
  • null转为0，undefined:转为NaN

2.parseInt()

3.parseFloat()

4.隐式的转换：A-0，A/1，A*1 ，+A（一元运算符的加号）
相当于调用了Number()函数

其他数据类型转换为 Boolean类型：

总的规则：

  • 除了空字符串，其余都是true
  • 除了0 和NaN，其余都是true
  • null和undefined，转为false
  • 对象转换为true
   var a = "";  //false
    var b = "  ";  //true
    var c = 0;  //false
    var d = 1;  //true
    var e = "0";  //true
    var f = "1p";  //true
    var g = "eee"; //true
    var h = true;  //true
    var i = Infinity;  //true
    var j = NaN;  //false
    var k = {};  //true
    var l = null;  //false
    var m = undefined;  //false
    console.log(Boolean(a), Boolean(b), Boolean(c), Boolean(d), Boolean(e),
    Boolean(f), Boolean(g),Boolean(h), Boolean(i), Boolean(j), Boolean(k), Boolean(l), Boolean(m));
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,826评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,968评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,234评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,562评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,611评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,482评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,271评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,166评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,608评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,644评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,249评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2赞 354

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,485评论 1赞 45
  • 走进JavaScript
    网页是什么 网页 = Html+CSS+JavaScript Html: 网页元素内容 CSS: 控制网页样式 J...
    e81bcd463937阅读 894评论 0赞 6
  • JavaScript的历史
    title: JavaScript的历史layout: pagecategory: introductiondat...
    ichengzi阅读 4,452评论 0赞 23
  • JavaScript历史
    JavaScript 语言的历史 诞生 JavaScript 因为互联网而生，紧跟着浏览器的出现而问世。回顾它的历...
    hnscdg阅读 484评论 0赞 0
  • Day13Dream～
    我们都曾有过小小的梦想，在寒冷的岁月中，或放弃、或遗忘、或相信有一天能看到梦想与现实交汇时的光芒！
    001cyf阅读 152评论 0赞 3