JavaScript--我发现，原来你是这样的JS（基础概念--灵魂篇，一起来学js吧）

2023-02-24 13:07:12

一、介绍

这是红宝书（JavaScript高级程序设计 3版）的读书笔记第三篇（灵魂篇介绍），有着剩下的第三章的知识内容。
红宝书这本书可以说是难啃的，要看完不容易，挺厚的，要看懂更不容易，要熟练js更是难，中间需要不断的积累与重温。
本书不是读一两遍就能把这书吃透，需要多读，可谓温故而知新，可以为师矣。

很多人看这些厚的书都是三天打鱼两天晒网，很少能看下去，能记住的东西往往前3章的内容，所以我写博客就是为了能和大家一起来读这本书，一起学JS。

二、基本概念（灵魂篇）

上一篇是躯壳篇讲的是一些了解性的东西，而接下来便说内涵（数据类型和操作符），换作中文来看就如同让你理解词和含义，语句的含义，就像将这些字和语句注入灵魂。

同系列：

第一篇：JavaScript--我发现，原来你是这样的JS（初识）

第二篇：JavaScript--我发现，原来你是这样的JS（基础概念--躯壳篇）

三、数据类型

js的数据结构有6种，5种基本类型和一种复杂类型。js中不支持任何自定义的数据类型，所以说就这6种就够了。

5种基本数据类型：

Undefined
Null
Boolean
Number
String

1种复杂类型：

Object类型

1.1 typeof操作符

该操作符可以检测某变量是什么数据类型。

typeof返回的值：

"undefined" -- 表示这个值没有被定义
"string" -- 表示这是一个字符串
"number" --表示这是一个数字类型
"boolean" --表示是一个布尔型
"object" --表示这是一个对象
"function " --表示这是一个函数

特别：对于null，typeof null 会返回"object",因为null表示的是一个空对象的引用

typeof使用例子：

var str = "hello";

var a;

console.log(typeof str)  //"string"

console.log(typeof 666)  //"number"

console.log(typeof a)  // "undefined"

console.log(typeof null)  // "object"

1.2 Undefined类型

undefined 类型的值只有一个，undefined。当使用var对变量声明但没有进行初始化的时候默认的值就是undefined。

var value ;

console.log(typeof value);   // "undefined" 

//特别:对于没有声明的变量typeof 返回的值也是undefined,例如：

//下面的a没被声明

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

1.3 Null类型

Null类型也是只用一个值null，null是一个空对象指针。所以使用typeof检测时会返回object。

console.log(typeof null);   //"object"

注意点：

1.null的使用：在定义的变量将会用来保存一个对象时，那初始化为null，这样我们就知道该变量将来会引用一个对象。

2.实际上undefined值是派生值null的，因此对他们进行相等性测试会返回true：

console.log(null == undefined);  //true

1.4 Boolean类型

boolean类型有两个值 true和false，其他类型的值都有与这两个值等价的值，就是说其他类型的值都能转成这两值中的其中一个。通过转型函数Boolean()

注意点：

任何类型的数据都可以调用Boolean()方法，都能返回一个true或false，至于返回什么，有一定的规则，规则如下：

//对于Undefined

console.log(Boolean(undefined));  //false

//对于String，非空字符串返回true，空字符串返回false

console.log(Boolean(""));   //false

console.log(Boolean("hahaha"));   //true

//对于Numble类型，任何非0数字返回true，0和NaN返回false

console.log(Boolean(123));  //true

console.log(Boolean(0));  //false

//对于Object，任何对象都返回true

console.log(new Array());  //true

1.5 Number类型

Number 类型就是数字的类型，各种数字都是该类型，包含整数，浮点数。

常见的数字：

//整数

var intNum = 10;

//八进制0开头

var num1 = 066;

//十六进制0x开头

var num2 = 0xA;

//浮点数

var floatNum = 0.6;

//极大的数4123000,使用科学表示法e，e6表示10的6次方

var floatNum2 = 4.123e6;

//最大值

Number.MAX_VALUE;   //1.7976931348623157e+308

//最小值

Number.MIN_VALUE;   //5e-324

//超出最大值时，表示为正无穷

Infinity

//超出最小值时，表示为负无穷

-Infinity

//NaN (Not a Number) 非数值

NaN

//判断非数值的函数isNaN()

console.log(isNaN(10))  //false

console.log(isNaN("10")) //false,isNaN()会尝试将字符串转为数字，此处"10"能转为10

console.log(isNaN("bey"));  //true , "bey"不能被转成数字

1.6 String类型

String用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。

字符串由单引号（' '）或双引号（" "）包含。但首尾不能是不同的引号，比如一单一双。

错点:

//这样会报错

var str = 'javasritp";

特点：

1.拼接字符串使用'+'号

var str1 = "hello";

var str2 = str1 + "world";

console.log(str2); // "hello world"

2.其他类型的数据转换为字符串使用toString()函数

var num = 123;

var str = num.toString();  //数字123通过toString转为了字符串

console.log(str);  //"123"

//使用""拼接其他数据类型可以转换成String

var s = 23+"";  //"23"

1.7 Object类型

ECMAScript中的对象其实就是一组数据和功能的集合。通过new操作符后跟要创建的对象类型的名称来创建。

//创建一个Object对象

var  o = new Object();

关键：

这里的Object相当于祖宗一样，创建Object的实例并没有什么用处。他像是java中java.lang.Object 对象一样。

特点：

每个Object类型的实例共有的属性和方法：

constructor：保存着用于创建当前对象的函数。
hasOwnProperty：用于检测给定的属性在当前对象的实例中是否存在。
isPrototypeOf ：用于检查传入的对象是否是当前对象的原型
propertyIsEnumerble ：用于检查给定属性能否使用for-in来枚举
toLocaleString() : 返回对象的字符串表示。
toString() : 返回对象的字符串表示。
valueOf() : 返回对象的字符串，数值，或布尔表示。通常和toString() 返回的值相同。

四、操作符（运算符）

接下来是操作数据值的操作符。包含算术操作符，位操作符，关系操作符，相等操作符。

1一元操作符

只能操作一个值的操作符称为一元操作符。

1.1递增与递减：

形式: 这就是自增自减，使用两个加号(++)或两个减号(--)

var num = 5;

num++;   //相当于num = num+1; 此时num = 6;

num--;   //相当于num = num-1; 此时num = 5;

注意点：递增减的前置型（加减号在数值前面）和后置型（加减号在数值后面）；

1.没区别的情况：当只有唯一一条递增或递减操作时，前后不影响结果



var num1 = 5;

var num2 = 5;

num1++;   //执行后num1的值会变成6

++num2;   //执行num2的值会变成6

2.有区别情况：当操作数在一条语句中进行不仅仅是递增或递减操作时

var val1= 5;

var val2 = 5;

var val3 = 20;

var sum1 = val1-- + val3;   //sum1等于25

var sum2 = --val2 + val3;   //sum2等于24

//此处的val1 和 val2 的值相同但最后结果不同.

//val1是后置，通俗点讲就是放到最后才进行自减操作.所以顺序是原来的val1值(5)和val3相加后赋值给sum1，最后val1才自减。

//val2是前置，通俗点讲前置最大，先进行了自减操作。所以顺序是val1自减，后和val3相加最后赋值给sum2

1.2一元加号和减号

形式：在一个数值前使用一个加号或减号。

var num = 100;

//用+正数还是正数，负数还是负数

+num;  //100

//用减号就变成相反数

-num;  //-100

注意点：当操作的不是数字时，使用+,-可以使其执行转换，类似于Number() 函数。

//对于+号

var str = "10";

str = +str;  //值会变成数字10

var str2 = "hello";

str2 = +str2 //值为NaN，因为不能转为数字

var boo = false;

boo = +false;  //值变为0

//对于-号，也差不多，只是变成相反数

var s = "100";

s = -s; //值为-100

2.加性/乘性运算符（加，减,乘，除，取模）

1.加号（+）：进行加法运算

2.减号（-）：进行减法运算

3.乘号（*）：进行乘法运算

4.除号（/）：进行除法运算

5.求模（%）：求余数

30+20;  //50

30-10;  //20

30*20;  //600

30/10;  //3

25/6 ;  //1`

3.布尔操作符

布尔操作符有三个：非，与，或

3.1逻辑非

1.符号：!

2.功能：非操作会返回一个布尔值，功能对布尔值取非，即相反。它会对值转成布尔值。

console.log(!false);  //true

console.log(!0);  //0的布尔转换是false，进行非操作后就是true

console.log(!"hh")  //非空字符串布尔是true，进行非操作后就是false

//小技巧，使用两!!可以类似于Boolean函数，对任何数值进行布尔转换

console.log(!!"hello");  //true

console.log(!!0);  //false

3.2逻辑与

1.符号：&&

2.功能：进行与操作需要两个值，当两个值布尔值都为true时才会返回true，否则返回false，并且它是一个短路操作符（当第一个值为false时，就不用再判断第二个值）

console.log(false&&true); //false

console.log(false&&false); //false

console.log(true&&false); //false

console.log(true&&true); //true

3.注意点： &&（与）操作不一定回返回布尔值一下是特殊情况：

如果第一个操作数是一个对象的时候，返回第二个操作数
如果第一个操作数是null，返回null
如果第一个操作数是NaN，返回NaN
如果第一个操作数是undefined，返回undefined。

//数组对象

var arr = new Array();

//字符串

var str = 'hello';

console.log(arr&&str) //'hello'

console.log(null&&str) // null

console.log(NaN&&str)  //NaN

console.log(undefined&&str) //undefined

3.3逻辑或

1.符号：||

2.功能：进行与操作需要两个值，当存在有一个值的布尔值为true则返回true，否则false，或操作也是短路操作符，放当第一个操作值为true时，直接返回true，不用检查第二个操作值。

3.注意点：如果有一个操作数不是布尔值， ||（或）操作不一定回返回布尔值一下是特殊情况：

如果第一个是对象，则返回第一个操作数
如果第一个数是false，则返回第二个数
如果两个数都是对象，返回第一个操作数
如果两个操作数是NaN，返回NaN
如果两操作数是undefined，返回undefined。

var arr  = new Array();

console.log(arr||"str");  //返回arr空数组[]

console.log(NaN||NaN) ; //NaN

console.log(false || "str") //"str"

4 关系操作符

1.关系操作符有，大于(>)，小于(<)，小于等于(<=)，大于等于(>=)

2.注意点：

//1.对于数值转换，直接进行比较，返回true或false

34>23;  //true

//2.对于两个字符串比较，是通过从前往后逐个比较其字符编码值（ascll码）大小

"Biasd"<"adsf";  //true， 因为B字符编码为66小于a字符编码97

//3.对于字符串和数字比较，会将字符串转为数字

"23"<3;  //false ， "23"会转成23,然后和3比较

"a"<3 //false  , "a"转为NaN，NaN和任何操作数比较都为false

5.相等操作符

相等操作符有相等()和不相等(!=)，全等(=)和不全等(!==)

相等和不相等是先转换后比较，而全等和不全等是仅比较不转换

5.1相等和不相等转换重点：

//1.如果有一个操作值为布尔值，则将该布尔值转为数值，true转为1，false转为0

true == 1 ;  //true

//2.null 和 undefined相等

null == undefined ; //true

//3.有一个操作数为NaN时，一定返回false

NaN == 1;  //false

//4.两个NaN比较也返回false

NaN == NaN ;  //false

//5.两个值是对象时，若不是指向同一对象就返回false

5.2全等和不全等重点：

可以看出全等是3个等号，所以比较严格，不会像相等一样进行转换。通俗的说：你不是就不是。

//相等和全等的比较

"55" == 55 ;  //true,相等情况下，"55"可以转换

"55" === 55 ;  //false,全等情况，"55"不转换为数字，所以数据类型不同，直接返回false

//关于null 和 undefined，上面相等比较时时两个值相等，但全等比较就不等

null === undefined ;  //false

6.条件操作符(三元操作符)

1.模板：表达式1?表达式2:表达式3。

2.使用说明：当表达式1为true时，返回冒号前的表达式2的结果，false就返回冒号后表达式3

//例子:

var num = 3>2?1:0;   //num的值为1

7.赋值操作符

1.简单的赋值操作由（=）号表示

var val = 10;  //对val赋值为10

2.复合赋值操作

var num = 10;

num = num+10;

//上面那句可以用下面一句替代

num += 10;

8.逗号操作符

1.使用逗号操作符可以在一条语句执行多条操作；

2.使用逗号操作符进行赋值，赋值时总会返回表达式最后一项

//同时对三个变量声明并赋值

var num=1, num2 = 2 , num3 = 3;

//赋值时总会返回表达式最后一项

var n = (32,12,5,1,2);   //最后n被赋值为2

五、最后几句

这次的博客篇幅比较多介绍数据类型和操作符，可以多看几次，也可以专看注意点，重点等，已经特别标出。看完这里基本概念已经完了。接下来还会继续更新笔记，敬请关注。写一篇博客不容易，花费很多心思，如果觉得写得好，关注一下，给个赞吧，让我有动力继续写博，哈哈。

本文出自博客园：http://www.cnblogs.com/Ry-yuan/

作者：Ry（渊源远愿）

欢迎访问我的个人首页：我的首页

欢迎访问我的github:https://github.com/Ry-yuan/demoFiles

欢迎转载，转载请标明出处，保留该字段。

码农公寓

一、介绍

二、基本概念（灵魂篇）

三、数据类型

1.1 typeof操作符

1.2 Undefined类型

1.3 Null类型

注意点：

1.4 Boolean类型

注意点：

1.5 Number类型

1.6 String类型

错点:

特点：

1.7 Object类型

关键：

特点：

四、操作符（运算符）

1一元操作符

1.1递增与递减：

1.2一元加号和减号

2.加性/乘性运算符（加，减,乘，除，取模）

3.布尔操作符

3.1逻辑非

3.2逻辑与

3.3逻辑或

4 关系操作符

5.相等操作符

5.1相等和不相等转换重点：

5.2全等和不全等重点：

6.条件操作符(三元操作符)

7.赋值操作符

1.简单的赋值操作由（=）号表示

2.复合赋值操作

8.逗号操作符

五、最后几句

相关文章