JavaScript入门笔记2

写在前面

本文是我通过在网易云课堂上学习 叶建华 老师的 撩课-零基础玩转JavaScript 视频教程，整理、精炼其配套笔记总结而来的。附上视频教程地址：

https://study.163.com/course/courseMain.htm?courseId=1005973001

以下是我的所有js入门笔记
JavaScript入门笔记1：https://www.jianshu.com/p/ab044eb35c56
JavaScript入门笔记2：https://www.jianshu.com/p/348805d50b77
JavaScript入门笔记3：https://www.jianshu.com/p/2146931d6706
JavaScript入门笔记4：https://www.jianshu.com/p/e95f00b53343
JavaScript入门笔记5：https://www.jianshu.com/p/97a241434881
JavaScript入门笔记6：https://www.jianshu.com/p/fc091ce8924e
JavaScript入门笔记7：https://www.jianshu.com/p/ea33bfb83da1

以下是本章节的内容
1、运算符
---1.1、定义
---1.2、作用
---1.3、分类
---1.4、运算符的结合性
---1.5、算术运算符
---1.6、赋值运算符
---1.7、自增/自减运算符
---1.8、逻辑运算符
---1.9、关系运算符
---1.10、逗号运算符
---1.11、三目运算符(条件运算符)
---1.12、运算符的优先级
2、基本语法
---2.1、代码块
---2.2、流程控制语句
---2.3、循环
3、对象
---3.1、什么是对象
---3.2、JS中对象的分类
---3.3、如何创建对象
4、对象字面量

1、运算符

1.1、定义

1. 运算符也叫操作符
2. 通过运算符可以对一个或多个值进行运算,并获取运算结果
3. 比如：typeof就是运算符，可以来获得一个值的类型, 它会将该值的类型以字符串的形式返回: number string boolean undefined object

1.2、作用

1. 运算符是告诉程序执行特定算术或逻辑操作的符号
2. 例如告诉程序, 某两个数相加, 相减等

1.3、分类

（1）按照功能划分

算术运算符（+、-、、/、%、++、–）
位运算符 （&、 | 、 ^ 、~ 、<< 、>> ）
关系运算符 (>、<、>=、<=、==、!=、===、!==)
赋值运算符 （=、+=、-=、=、/=、%=）
逻辑运算符（ &&、 ||、 !）

（2）按照操作数个数划分

单目运算 （只有一个操作数 如 : i++ !）
双目运算 （有两个操作数 如 : a+b;）
三目运算 （三目运算也称为问号表达式 a>b ? 1 : 0;）

1.4、运算符的结合性

（1）自左至右,即先左后右

1. 例如表达式: x - y + z;
2. 则y 应先与“-”号结合,执行 x-y 运算,然后再执行+z 的运算。
3. 这种自左至右的结合 方向就称为“左结合性”。

（2）自右至左,即先右后左

1. 例如:如x = y = z = 10;
2. 由于“=”的 右结合性,应先执行z = 10; 再执行y = z 再执行x = y运算。

1.5、算术运算符

1. 非Number类型的值进行运算时，会将这些值
2. 任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作
3. 任何值和NaN做运算都得NaN转换为Number然后在运算
加法运算 Number1 + Number2
减法运算 Number1 - Number2
乘法运算 Number1 * Number2
除法运算 Number1 / Number2
取余运算 Number1 % Number2

1.6、赋值运算符

（1）简单赋值运算符

a = 1;

（2）复合赋值运算符

+= 加后赋值 变量+=表达式 如:a+=1;即a=a+1
-= 减后赋值 变量-=表达式 如:a-=1;即a=a-1
*= 乘后赋值 变量=表达式 如:a=1;即a=a*1
/= 除后赋值 变量/=表达式 如:a/=1;即a=a/1
%= 取模后赋值 变量%=表达式 如:a%=1;即a=a%1

由于赋值运算符是右结合性, 所以会先计算等号右边, 然后再进行复合运算，如: a *= 1 + 2;

由于JavaScript运算符的使用与C、、C++、JAVA等编程语言基本一致，以下只做罗列，不做赘述

1.7、自增/自减运算符

i++、++i、i--、--i

1.8、逻辑运算符

&&(与运算)、||(或运算)、!(非运算)

1.9、关系运算符

1.10、逗号运算符

var a, b;
b = (a=3, --a, a * 5);
console.log(b);  // 10

1.11、三目运算符(条件运算符)

格式: 条件表达式 ? 语句1 : 语句2;

1.12、运算符的优先级

2、基本语法

2.1、代码块

1. 程序是由一条一条语句构成的, 语句是按照自上向下的顺序一条一条执行的, 在JS中可以使用{}来为语句进行分组
2. 同一个{}中的语句我们称为是一组语句，也称为一个代码块。它们要么都执行，要么都不执行。

// 大括号内是一个代码块
{
    var name = 'David Rao'; 
    console.log("David Rao");
    document.write("David Rao");
}

由于JavaScript基本语法与C、C++、JAVA等编程语言基本一致，以下只做罗列，不做赘述

2.2、流程控制语句

if、switch

2.3、循环

while、do-while、for

---

3、对象

3.1、什么是对象

1. 除了5种基本的数据类型，其它的全都是对象
2. Object就是对象的数据类型

3.2、JS中对象的分类

3.2.1、内建对象

由ES标准中定义的对象，在任何的ES的实现中都可以使用

https://blog.csdn.net/qq_34437891/article/details/78292078

3.2.2、宿主对象

由JS的运行环境提供的对象，现在主要指由浏览器提供的对象（比如: BOM对象, DOM对象）

BOM对象
https://www.w3school.com.cn/js/js_window.asp

DOM对象
https://www.w3school.com.cn/js/js_htmldom.asp

BOM和DOM的区别
https://blog.csdn.net/xiao_tommy/article/details/53231165

BOM对象和DOM对象
https://www.w3school.com.cn/js/js_obj_htmldom.asp

DOM的Element对象
https://www.w3school.com.cn/jsref/dom_obj_all.asp

3.2.3、自定义对象

我们自己创建的对象，比如: Person, Dog, ....

3.3、如何创建对象

3.3.1、构造函数

1. 构造函数是专门用来创建对象的函数
2. 使用new关键字调用的函数，可以被称为构造函数(constructor)

var obj = new Object();

操作对象的属性

在对象中保存的值称为属性

向对象添加属性：对象.属性名 = 属性值;
删除对象的属性：delete 对象.属性名;
修改对象的属性值：对象.属性名 = 新值;
读取对象中的属性：对象.属性名;

//新建一个Object类对象
var obj = new Object();
//向obj中添加一个name属性
obj.name = "David Rao";
//向obj中添加一个gender属性
obj.gender = "male";
//向obj中添加一个age属性
obj.age = 20;
//读取obj中的age属性
console.log(obj.age);  // 20
//修改obj中的name属性
obj.name = 'UJ';
console.log(obj.name);  // UJ
//删除obj中的gender属性
delete obj.gender;
console.log(obj.gender);  // undefined

in运算

通过该运算符可以检查一个对象中是否含有指定的属性, 如果有则返回true，没有则返回false
"属性名" in 对象

var obj = new Object();
obj.name = "David Rao";
obj.gender = "male";
obj.age = 20;
console.log(“hobby” in obj);  //false

基本类型和引用类型在堆栈中的表示

涉及到内存的内容，这里不做叙述

4、对象字面量

1. 使用对象字面量，可以在创建对象时，直接指定对象中的属性
2. var 对象 = {属性名:属性值,属性名:属性值....};
3. 对象字面量的属性名可以加引号也可以不加，建议不加, 如果要使用一些特殊的名字，则必须加引号

var obj = { 
    name:"David",
    age:20,
    gender:"男",
    friends:{friend1: "Rao", friend2: "UJ"}
    };  
console.log(obj.friends.friend2);  // UJ            

写在最后

如果您觉得文章对您有帮助，不要吝惜您的“点赞”呀！