javaScript学习笔记【尚硅谷】

这是我在看尚硅谷的前端大神超哥视频时，所记录的笔记！

文章目录

javaScript学习笔记【尚硅谷】
- @[TOC](文章目录)
- 1、javaScript基本知识
- - 1.2、JS编写位置
  - 1.3、JS基本语法
  - 1.4、变量与字面量
  - 1.5、标识符
  - 1.6、数据类型
  - - 1.6.1、Number详解
    - 1.6.2、布尔值
    - 1.6.3、Null 和undefined
  - 1.7、强制类型转换
  - - 1.7.1、将其他的数据类型转换为String
    - 1.7.2、将其他数据类型转换为Number
    - 1.7.3、将其他进制转换成布尔类型
    - 1.7.4、其他进制的数字
  - 拓展：严格检查模式
- 2、算数运算符
- - 2.1、一元运算符
  - 2.2、自增与自减运算符
  - 2.3、逻辑运算符
  - - 2.3.1、布尔判断
    - 2.3.2、非布尔判断
  - 2.3.3、判断运算符
  - 2.3.4、转义字符
  - 2.3.5、相等运算符
  - 2..3.6、三目运算符（三元运算符）
  - 2.3.7、运算符优先级
- 3、代码块
- 4、流程控制
- - 4.1、if语句
  - 4.2、switch语句
  - 4.3、while循环语句
  - 4.4、for循环
- 5、自定义对象
- - 5.1、对象的属性
  - 拓展章节：基本数据类型与引用数据类型
  - 5.2、对象字面量
  - 5.3、函数
  - - 5.3.1、函数的参数
    - 5.3.2、函数的返回值
    - 5.3.3、匿名函数
    - 5.3.4、函数的方法
  - 5.4、对象的方法
  - 5.5、this（上下文对象）
  - 5.6、arguments
  - 5.7、工厂动态创对象
  - 5.8、构造函数
  - - 5.8.1、构造函数进阶
  - 5.9、原型对象
  - 5.10、toString()方法
  - 拓展1：枚举对象中的属性
  - 拓展2：垃圾回收(GC)
  - 拓展3：class关键字
- 6、作用域
- 7、内建对象
- - 7.1、数组
  - - 7.1.1、**length**
    - 7.1.2、**数组字面量**
    - 7.1.3、**数组中的元素可以是任意数据类型**
    - 7.1.4、数组中常用方法
    - 7.1.5、数组的遍历
  - 7.2、Date对象
  - 7.3、Math工具类
  - 7.5、包装类
  - 7.6、String对象常用方法
- 8、正则表达式
- - 8.1、正则表达式字面量方式
  - 8.2、字符串&正则表达式
  - 8.3、正则表达式语法1
  - 8.3、正则表达式语法2
- 9.DOM简介
- - 9.1、DOM查询
  - - 9.1.1基本知识
    - - 节点
      - 节点的属性
      - 获取元素节点
      - 元素节点的子节点
      - 获取父节点和兄弟节点
    - 9.1.2、查询剩余属性、方法
  - 9.2、DOM删除
  - 9.3、操作样式
  - - 9.3.1、操作内联样式
    - 9.3.2、获取元素当前显示样式
    - 9.3.3、其他样式操作的属性
  - 9.4、事件
  - - 9.4.1、事件
    - 9.4.2、事件对象
    - 9.4.3、事件的冒泡
    - 9.4.4、事件的委派
    - 9.4.5、事件的绑定
    - 9.4.6、bind()函数
    - 9.4.7、事件的传播
    - 9.4.8、拖曳
    - 9.4.9、鼠标滚轮事件
    - 9.4.10、键盘事件
- 10、BOM简介
- - 10.1、Navigator
  - 10.2、History
  - 10.3、Location
  - 10.4、定时器简介
  - - 10.4.1 定时器练习
    - 10.4.2 div随键盘移动·改进
  - 10.5、延迟调用
  - 10.6、应用
  - - 10.6.1、定时器的应用
    - 10.6.2、轮播图功能实现
  - 10.7、类的操作
- 11、JSON
- 完结

javaScript概述

JavaScript 是一种基于对象和事件驱动并具有安全性能的脚本语言。

JavaScript 官方名称是 “ECMAScript” （ECMA是欧洲电脑商制造协会）。

JavaScript 特点：

一种弱脚本语言
基于对象、动态性的
简单易用性、安全
跨平台性、改善用户体验
它是一种解释性程序语言。编译一行执行一行，而不像java一样，时完成了整个编译，然后再执行。

由来

网景公司想在原来的静态页面的基础上添加一些动态的效果，让用户体验更好，所以让布兰登·艾奇着手开发此功能。这位牛人仅用10天时间，便写出了javaScript。

这里不多赘述，感兴趣的朋友可以搜索一下哟！

1、javaScript基本知识

javaScript的Helloword

alert：控制浏览器弹出一个警告框
document.write(“ ”)：向body中输出一个内容
console.log(“ ”):向控制台输出一个内容

代码演示

<script>alert("helloWord");console.log("helloWord");document.write("helloWord");
</script>

1.2、JS编写位置

方式一：在标签中写（不推荐）

<a href="javascript:alert('太帅了！')">点我</a>
<button onclick="alert('真帅！')">点一下</button>

方式二：script标签中

<script type="text/javascript">alert("真帅！");</script>

方式三：外联js样式【写到外部的js文件，然后用script的src引入】推荐！！！

<script  type="text/javascript" src="外部的js文件.js"></script>

注意：
script标签一旦用于引用外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略。如果你还需要，则可以在创建一个新的script标签用于编写内部代码

 <script src="one.js">alert("do")</script>

如上，即使alert了，但不会有效果！

1.3、JS基本语法

JS严格区分大小写
以;号结尾
会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

1.4、变量与字面量

字面量：不可改变

1,2,3……n

变量

用var来声明一个变量
注意：可以把字面量赋值给变量

var age =23;//变量
80 //字面量

局部变量

前提：idea需要设置ES6语法
建议都用let取定义局部变量（之前定义局部变量都是直接i=1），现在要let i =1

1.5、标识符

标识符：在JS中所有的可以由我们自主命名的都可以称为标识符

-例如：变量名、函数名、属性名都属于标识符

标识符命名规则：
1.标识符中可以含字母、数字、_、$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字
4.标识符一般用驼峰命名
5.JS底层保存标识符实际上采用Unicode编码，所以理论上讲，所有的 utf-8中含的内容都可以作为标识符

1.6、数据类型

数据类型：字面量的类型

JS的6中数据类型

数据类型	释意
String	字符串
Number	数值
Boolean	布尔值
Null	空值
Undefined	未定义
Object	对象

拓展：其中String Number Boolean Null Undefined为基本数据类型，Object属于引用数据类型

1.6.1、Number详解

在JS中所有的数值都是Number类型,包括整数和浮点数（小数）

JS中可以表示数字的最大值和最小值

Number.MAX_VALUE;
1.7976931348623157e+308Number.MIN_VALUE //大于0的最小值
5e-324

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

Infinity表示正无穷

-Infinity表示负无穷

使用typeof检查Infinity也会返回number
NaN 是一个特殊的数字，表示Not A Number

使用typeof检查一个NaN也会返回number

拓展：typeof检查变量的类型

 let i =1;//局部变量声明用letalert(typeof i);//返回number

注意：

如果使用JS进行浮点运算，可能得到一个不精确的结果

所以，千万不要使用JS进行对精确要求比较高的运算

console.log((1/3)==(1-2/3));//这里会返回false，尽管数值都为1/3，尽量避免使用小数计算

1.6.2、布尔值

布尔值只有两个，主要用来做逻辑判断

true

表示真

false

表示假

使用typeof检查一个布尔值，返回boolean

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>布尔值</title><script>var bool  =true;console.log(bool);console.log(typeof bool)</script>
</head>
<body></body>
</html>

1.6.3、Null 和undefined

Null(空值)类型的值只有一个，就是null

null这个值专门用来表示一个为空的对象

使用typeof检查一个null值时，返回object
undefined(未定义)类型的值只有一个，就undefind

当声明一个变量，但是并不给变量赋值时，它的值就是undefined
使用typeof检查一个undefined时也是undefined

1.7、强制类型转换

强制类型转换

– 指将一个数据类型强制转换为其他的数据类型

– 类型转换主要指，将其他的类型，转换为String、Number、Boolean

1.7.1、将其他的数据类型转换为String

方式一：

调用被转换数据类型的toString（）方法
该方法不会影响原变量，它会将转换的结果返回
但是注意：

null 和 undefined 这两个值没有toString（）方法，如果调用他们的方法会报错

方式二：

调用String（）函数，并将被转换的数据作为参数传递给函数
使用String函数做强制转换时；
- 对于Number和Boolean实际上就是调用的toString（）方法
- 但是对于Null和undefined，就不会调用toString（）方法
  - 它会将null 直接转换为“null”
  - 将undefined直接转换为“undefined”

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>强制类型转换</title><script>// 方式一：var a =123;a =a.toString();console.log(typeof a);console.log(a);var b =true;b =b.toString();console.log(typeof b);console.log(b);//方式二：a2 =String(a);console.log( typeof a2);console.log(a2);var d =null;d =String(d);console.log(typeof d);console.log(d);</script>
</head>
<body></body>
</html>

1.7.2、将其他数据类型转换为Number

转换方式一：使用Number（）函数

字符串-------》数字

如果是纯数字的字符串，则直接将其转换为数字
如果字符串中有非数字的内容，则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串，则转换为0；

其他--------》数字

类型	数字
true	1
false	0
null	0
undefined	数字NaN

转换方式二：

这种方式专门用来处理字符串，如果对非字符串使用parseInt（）或parseFloat（），它会先将其转变为String类型，再操作

parseInt(参数) 把一个字符串转换为一个整型数
parseFloat(参数) 把一个字符串转换为一个浮点数

1.7.3、将其他进制转换成布尔类型

使用Boolean（）函数

数字 ======》布尔
- 除了0和NaN，其余都是**true**
字符串 ====》布尔
- 除了空串，其余的都是true
其他类型
- null和undefined都会转换false
- 对象也会转换为true

1.7.4、其他进制的数字

在JS中，

如果需要表示16进制的数字，则需要以0x开头

var a =0x10;
console.log(a); //16

如果需要表示8进制的数字，则需要以0开头

var a =010;
console.log(a); // 8

如果需要表示2进制的数字，则需要以0b开头，但不是所有的浏览器都支持

var a =0b10;
console.log(a); //2

拓展：

如你想解析字符串为数字，"070",有些浏览器会当成8进制解析，有些则会当成10进制解析。为了避免你可能这里式10进制解析，那里又是8进制解析，我们在使用parseInt（）时，一般指定进制。

格式如下：parseInt(参数,指定进制)

var a =070;
a =paseInt(a,10);//指定为10进制
a =paseInt(a,2);//指定2进制

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>其他进制的数字</title><script>//16进制var a ="0x70";console.log(a);//8进制var b ="070";console.log(b);//2进制var c ="0B10";//并不是所有浏览器就支持console.log(c);var str ="=====================";console.log(str);var d ="070";d =parseInt(d,10);console.log(d);d =parseInt(d,8);console.log(d)d =parseInt(d,2);console.log(d);</script>
</head>
<body></body>
</html>

拓展：严格检查模式

IDEA需要设置支持ES6语法，'use strict';严格检查模式，预防javaScript的随意性导致的一些问题.
前提：idea需要设置支持ES6语法。

2、算数运算符

当对非Number类型的值进行运算时，会将这些值转换Number然后在运算

任何值和NaN做运算都得NaN

+
+可以对两个值进行加法运算，并将结果返回

如果对两个字符串进行加法运算，则会进行拼串处理：会将两个字符串拼接成一个字符串，并返回

任何的值和字符串做加法，都会先转换为字符串，然后再和字符串做拼串操作

-

-可以对两个值进行减法运算，并将结果返回

*

可以对两个值进行乘法运算

/

可以对两个值进行除法运算

注意：

任何值做- * / 运算时都会自动转换为Number

我们可以利用这个特性做隐式的类型转换

可以通过为一个值 - 0 *1 /1来将其转换为Number

原理和Number（）函数一样，使用起来更简单

同理：

也可以利用任何的值和字符串做加法都会先转换为字符串，然后再和字符串做拼串操作的特点，来进行隐式类型转换。

可以通过数字+""来将其转换为字符串。原理也和String（）函数一样，使用起来更简单。

其他类型

true	1
false	0
null	0
undefined	NaN

2.1、一元运算符

一元运算符：只需要一个操作数

+正号

不会对数字产生任何影响

-负号

负号可以对数字进行符号的取反

注意：

对于非Number类型的值

它会将类型先转换为Number，然后在进行运算

可以对一个其他的数据类型使用+，来将其转换为Number

它的原理和Number（）函数一样、

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>一元运算符</title><script>var a =true;a =-a;console.log(a)//-1var b ="123";b =+b;console.log(b);//123var c =1 + +"2" +3+ +"4";console.log(c)//10</script>
</head>
<body></body>
</html>

2.2、自增与自减运算符

自增

自增可以使变量在原值的基础上自增1
自增使用++
自增可以使用a++，与++a
无论是++a还是a++动员会立即使原变量自增1
- 不同的式++a和a++的值式不同的
  - ++a的值是变量的新值（自增后的值）
  - a++的值是变量的原值（自增前的值）

自减

自减可以使变量在原值的基础上自减1
- 自减使用 --
- 自减可以使用--a与a--
- 无论是--a 还是a--都会立即使原变量自减1
  - 不同的是–a和a–的值
    - --a的值是变量的新值（自减后的值）
    - a--的值是变量的原值（自减前的值）

2.3、逻辑运算符

JS中为我们提供了三种逻辑运算符

2.3.1、布尔判断

！ 非
- ！可以用来对一个值进行非运算
- 所谓非运算就是值对一个布尔值进行取反操作
  - true便false false 便true
- 如果对一个值进行两次取反，它将不会发生变化
- 如果对非布尔类型的元素进行取非，它将会转换为布尔值在取反
  - 所以我们可以利用该特点，来将一个其他的数据类型转变为布尔类型
  - 可以为一个任意数据类型取反两次，来将其转换为布尔值
  - 原理和Boolean()函数一样
&& 与
- &&可以对符号两侧的值进行与运算并返回结果
- 运算规则
  - 两个值中只要有一个值为false就返回false
    - 只有两个值都为true时，才会返回true
- JS中的”与“属于短路与
  - 如果第一个值为false，则不会去看第二个值
|| 或
- || 可以对符号两侧的值进行或运算并返回结果
- 运算规则：
  - 两个值只要有一个true，就返回true
    - 如果两个值都为false，才会返回false
- JS中的”或“属于短路的或
  - 如果第一个值为true，则不会检查第二个值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>逻辑运算符</title><script>true || alert("我是天下第一");//因为第一个是true了，无论第二个是不是true，// 结果都会放回true，所以它不会去管第二个值，false && alert("我是天下第一");//&& 这个是短路与， 一旦第一个值为false，就不回去管第二个值了true && alert("我是天下第一");//因为这个是第一个值且为true，它会去看第二个值，以来判断整段表达式</script>
</head>
<body></body>
</html>

2.3.2、非布尔判断

&& 与 || 非布尔值的情况

对于非布尔值进行与或运算时，会对其转换为布尔值，然后在运算，并且返回原值

与运算
- 如果第一个值时true，则必然返回第二个值
- 如果第一个值时false，则之间返回第一个值
或运算
- 如果第一个值是true，直接返回第一个值
- 如果第一个值是false，则返回第二个值

 //           false  false//第一个为false了，不用看第二个直接返回第一个var result = NaN && 0;console.log(result)var c =0 && NaN;console.log(c)//     TRUE     FALSE//  第一个是正确的，那么整段逻辑表达式取决于第二个值，所以它会直接返回第二个值var a =true && false;console.log(a);

2.3.3、判断运算符

非数值的情况

对于非数值进行比较时，会将其转换为数字然后再比较
如果符号两侧都是字符串是，不会将其转换为数字进行比较，而是会分别比较字符串中字符的Unicode编码，一个字符一个符的比

2.3.4、转义字符

在HTML中转义，用&#编码;

编码为10进制的数制

  var a ="\u2620";//\为转义，u标明输出为unicode字符集console.log(a);

在JS中用\u,\代表转义，u指明输出的字符集

<h1 style="font-size: 1000px " align="center">☠</h1>

2.3.5、相等运算符

想等运算符用来比较两个值是否相等，如果相等会返回true，否则返回false

使用==来做相等运算
- 大部分使用==来比较两个值是，如果值的类型不同，则会继续自动类型转换，将其转换为相同的类型，然后比较
不相等！=
- 不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
- 使用！=来做不相等运算
- 不相等也会对变量进行自动类型转换，如果转换后相等，则返回false，不相等则返回true
全等
- 用来判断两个值是否相等，它和相等类似，不同的是它不会做自动类型转换，如果两个值的类型不同直接返回false
不全等
- 用来判断两个值是否不全等，和不等类型，不同的是它也不会自动转换类型。如果两个值的类型不同，直接返回true

拓展：

NaN不和任何值相等，包括他本身
undefined衍生自null，所以这两个值做相等判断时，会返回true，所以我们在做变量值是否为NaN时，**不能用== 而是用isNaN()**函数
尽量不要用== 来做判断，类型不一样，值一样也会返回true

2…3.6、三目运算符（三元运算符）

语法：

条件表达式？语句1：语句2；

执行的流程：
- 条件运算符在执行时，首先对条件表达式进行求值
  - 如果该值为true，则执行语句1，并返回执行结果
  - 如果该值为false，则执行语句2，并返回执行结果
- 如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后再运算

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>三元运算符</title><script>var a = 10;var b = 20;var c = 50;var max = a > b ? alert("a大") : alert("b大");max = max > c ? max : c;console.log(max);//不建议，这么写var max = a > b ? (a > c ? a : c) : (b > c ? b : c);console.log(max);</script>
</head>
<body></body>
</html>

2.3.7、运算符优先级

就像数学中一样，在JS中运算符也有优先级

比如：先乘除，后加减

在JS中有一个运算符优先级的表，

在表中越靠上优先级越高，优先级越高越优先计算，如果优先级也有，则从左往右计算。

查看优先级：运算符优先级 - JavaScript | MDN (mozilla.org)

优先级	运算符类型	结合性	运算符	高低
21	圆括号	n/a（不相关）	( … )	高 ↑
20	成员访问	从左到右	… . …
需计算的成员访问	从左到右	… [ … ]
new（带参数列表）	n/a	new … ( … )
函数调用	从左到右	… ( … )
可选链（Optional chaining）	从左到右	?.
19	new（无参数列表）	从右到左	new …
18	后置递增	n/a	… ++
后置递减	… –
17	逻辑非 (!)	从右到左	! …
按位非 (~)	~ …
一元加法 (+)	+ …
一元减法 (-)	- …
前置递增	++ …
前置递减	– …
typeof	typeof …
void	void …
delete	delete …
await	await …
16	幂 (**)	从右到左	… ** …
15	乘法 (*)	从左到右	… * …
除法 (/)	… / …
取余 (%)	… % …
14	加法 (+)	从左到右	… + …
减法 (-)	… - …
13	按位左移 (<<)	从左到右	… << …
按位右移 (>>)	… >> …
无符号右移 (>>>)	… >>> …
12	小于 (<)	从左到右	… < …
小于等于 (<=)	… <= …
大于 (>)	… > …
大于等于 (>=)	… >= …
in	… in …
instanceof	… instanceof …
11	相等 (==)	从左到右	… == …
不相等 (!=)	… != …
全等 (===)	… === …
不全等 (!==)	… !== …
10	按位与 (&)	从左到右	… & …
9	按位异或 (^)	从左到右	… ^ …
8	按位或 (\|)	从左到右	… \| …
7	逻辑与 (&&)	从左到右	… && …
6	逻辑或 (\|\|)	从左到右	… \|\| …
5	空值合并 (??)	从左到右	… ?? …
4	条件（三元）运算符	从右到左	… ? … : …
3	赋值	从右到左	… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… \|= …
… &&= …
… \|\|= …
… ??= …
2	yield	从右到左	yield …
yield*	yield* …
1	逗号 / 序列	从左到右	… , …	低

图示

3、代码块

我们的程序由一条条语句构成的，语句是按照自上而下的顺序一条条执行。

在JS中可以使用{}来进行分组，它们要么都执行，要么都不执行。一个{}中的语句，我们称为一个代码块，在代码块后，不需要写;了。

JS的代码块，只具有分组作用，没有其他用途（这里与java不一样）

4、流程控制

4.1、if语句

与java中的if语法一样

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>流程控制</title><script>alert("请输入三个不相等的数字")var imput1 =prompt("请输入第一个数值");//prompt 返回值 是String型var imput2 =prompt("请输入第二个数值");var imput3 =prompt("请输入第三个数值");if(isNaN(imput1) || isNaN(imput1) ||isNaN(imput1)){alert("数字为NaN")}else {if(imput1>imput2){if(imput1>imput3){alert(imput1);}else {alert(imput3);}}else{if(imput2>imput3){alert(imput2);}else {alert(imput3);}}}</script>
</head>
<body>
</body>
</html>

4.2、switch语句

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>switchEx</title><script>//方式一：与java一样var score = 55;switch (parseInt(score / 10)) {case 10 :case 9 :case 8 :case 7 :case 6 :console.log("及格");break;default:console.log("不合格")break;}//方式二：JS中独有switch (true) {case score >= 60: {console.log("合格");break;}default: {console.log("不合格");break;}}</script>
</head>
<body></body>
</html>

4.3、while循环语句

while

  var num =1;while (num<=10){document.write(num++ +"<br/>");//如果用javascipt的document.write("\n")输出到html内，只是一个换行符，并不能起到真正换行的作用。}

do while循环

 var num =1;do{document.write(num++ +"<br/>");}while (num<=0);

4.4、for循环

 for (var i = 100; i <1000 ; i++) {var bai =parseInt(i/100);var shi =parseInt((i-bai*100)/10);var ge =i%10if(bai*bai*bai+shi*shi*shi+ge*ge*ge == i){console.log(i);}}

5、自定义对象

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

对象的分类：

内建对象
- 由ES标准中定义的对象，在任何的ES的实现中都可以使用
- 比如：Math String Number Boolean Function Object……
宿主对象
- 由JS的运行环境提供的对象，目前来讲主要指浏览器提供的对象
- 比如：BOM DOM
自定义对象
- 由开发人员自己创建的对象

创建对象

var obj =new Object();

给对象属性赋值

obj.name ="李天启";

注意：

这个不像java中一样，不需要再上面定义，你直接.属性名这样就可以定义。但这时没赋值的！

删除属性

delete obj.age;//删除对象属性

5.1、对象的属性

对象的属性名不强制要求遵守标识符的规范，意味着什么乱七八糟的名字都可以使用，但是我们使用还是要按照标识符规范去做。

如果要使用特殊的属性名，不能采用.属性名的方式来操作，而是需要采用另一种方式：

语法：对象["属性名"]=属性值

obj[123] = 789;//1
obj["123"] = 456;//2
console.log(typeof obj["123"]);//其实1和2要说明的是同一个属性，它会自动类型转换为数字

注意：

使用[]这种形式去操作属性，更加灵活，再[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性

var n ="I love You";
obj["I love You"] ="谢谢";
console.log(obj[n]);//输出谢谢

拓展：

in运算符

通过此运算符可以检查一个对象中是否含有指定的属性
- 有返回true，没有返回false

语法："属性名" in 对象

         console.log( "name" in obj);console.log( ["I love You"] in obj);

切记：

你在用in的时候要用""括起来，如果它是字符串类的就不用了。

拓展章节：基本数据类型与引用数据类型

在JS的变量都是保存到栈内存中，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响其他变量

对象是保存到堆内存中的，没创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用时，当其中一个通过一个变量修改属性时，另一个也会受到影响。

对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用时，当其中一个通过一个变量修改属性时，另一个也会受到影响。

图示

5.2、对象字面量

使用对象字面量，可以在创建对象时，直接指定对象的属性

var obj ={};//对象字面量,这样写和new Object（）这样，本质是一样的。
var obj1 ={name:"李白",age:21,sex:"男",ability:{xingNeng:"超神"}
};

语法：

{属性名：属性值,属性名：属性值,属性名：属性值……}

对象字面量的属性名可以加引号也可以不加，<font color='red'>建议不加</font>；如果要使用一些特殊的名字，则必须加引号。

属性名与属性值

属性名和属性值是一组一组的名值堆结构

名和值之间使用：连接，多个名值对之间用,隔开

如果一个属性之后没有其他的属性了，就不要写，

5.3、函数

函数
- 函数也是一个对象
- 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
- 该函数中可以保存一些代码在需要的时候调用
- 使用typeof检查一个函数对象时，会返回function
创建一个函数对象
- 可以将要封装的代码以字符串的形式传递给构造函数
- 封装到函数中的代码不会立即执行
- 函数中的代码会在函数调用的时候执行
- 调用函数语法：
  
  函数对象();
- 当调用函数时，函数封装的代码会按照顺序执行

 var fun =new Function ("console.log('这是我第一个函数');");//注意：log括号后要加上;，因为它是一个语句，只不过被封装了而已fun();

注意：其实我们在开发的时候极少，甚至不使用这种利用构造函数创建一个函数

使用函数声明来创建一个函数（推荐）

语法：

function 函数名([形参1,形参2,……形参N]){

语句……

}

     //方式一：var fun = new Function("console.log('这是我第一个函数');");//注意：log括号后要加上;，因为它是一个语句，只不过被封装了而已，一般不用fun();//方式二：function fun2() {// 推荐console.log("我要加油！")}fun2();//方式三：var fun3 = function(){console.log("我是匿名函数");};//这里是个赋值语句，所以要加分号fun3();

5.3.1、函数的参数

可以在函数的()中指定一个或多个形参（形式参数）
多个形参之间使用,隔开，声明形参就相当于在函数声明了对应的变量，但是并不赋值
在调用函数时，可以在（）中指定实参（实际参数），实参将会赋值给函数中对应的形参

注意：

调用函数时，解析器不会检查实参的类型。【所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对实参进行类型的检查】
调用函数时，解析器也不会检查实参的数量，多余的实参不会被赋值
如果实参的数量少于形参的数量，则没有对应实参的参数将是undefined
实参可以是任意类型。

代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函数的参数</title><script>function sum (a,b){console.log("a="+a);console.log("b="+b);console.log(a+b);}sum(123,456);sum(123);//因为b没有赋值，所以它是undefined，两者相加变成了NaNsum(123,"abc");sum(123,789,"abc",true);sum(true,false);</script>
</head>
<body>
</body>
</html>

5.3.2、函数的返回值

可以使用return来设置函数的返回值

语法：

return 值

注意：

return后的值将会作为函数的执行结果返回，可以定义一个变量来接收该结果
函数返回声明result的值就是什么
return后的语句不会执行
如果函数中不写return，则会返回undefined
如果函数后不带值，也会返回undefined
return后的值可以是任意类型

代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函数的返回值</title><script>function sum(a,b,c){var d =a+b+c;}var result =sum(1,2,3);console.log(result);//因为sum函数中没有写return，则result的结果将是undefinedfunction sum1(a,b,c){var d =a+b+c;return;}var result1 =sum(1,2,3);console.log(result1);//因为return后不加任何值，将会返回undefinedfunction sum2(a,b,c){var d =a+b+c;return d;}var result3 =sum2(1,2,3);console.log(result3);//实参可以任何类型，可以是一个对象，也可以是一个函数function sayHello(obj) {console.log("我叫" + obj.name + ",来自" +                          obj.address);}sayHello(obj);</script>
</head>
<body></body>
</html>

注意：

mianji()
// -调用函数
// -相当于使用函数的返回值
mianji
// -函数对象
// -相当于直接使用函数对象
==================================================function fun1(){return fun4();}fun1();function fun4(){console.log("我是fun4");}function  fun(){return fun4;}fun1()();//这里相当于直接调fun4var a =fun1();a();//这里于上面写法一样

5.3.3、匿名函数

立即执行函数
- 函数定义完，立即被调用，这种函数叫做立即调用函数
- 立即执行函数往往只会调用一次

 (function (){console.log("我是立即执行函数");})();(function (a,b){console.log(a+b);})(123,456);

5.3.4、函数的方法

call（）和 apply（）

这两个方法都是函数对象的方法，需要通过函数对象来调用

当对函数调用call（）和apply（）都会调用函数执行对象

在调用call（）和apply（）可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this

call（）方法可以将实参在对象之后依次传递

apply（）方法需要将实参封装到一个数组中统一传递

实参的个数由函数的形参确定
this的情况：
- 以函数形式调用时，this永远都是window
- 以方法的形式调用时，this是调用方法的对象
- 以构造函数的形式调用时，this新创建的那个对象
- 使用call和apply调用，this时指定的那个对象

5.4、对象的方法

函数也可以称为对象的属性
- 如果一个函数作为一个对象的属性保存那么我们称这个函数是这个对象的方法
- 届时，调用函数就说：调用对象的方法
- 但它们只是名称上的区别，没有其他的区别

var obj ={name:"李天启",sayName:function (){console.log(obj.name);}}obj.sayName();
==============================var obj1 =new Object();obj1.name="神";obj1.sayName=function (){console.log(obj1.name);}obj1.sayName();

5.5、this（上下文对象）

解析器在调用函数时，每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就时this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象。

根据函数的调用方式的不同，this会指向不同的对象
1. 以函数的形式调用时，this永远都是window
2. 以非法的形式调用时，this就是调用方法的那个对象

var name ="全局";
function fun(){console.log(this.name);
}
var obj1 ={name:"												

											
javaScript学习笔记【尚硅谷】相关推荐	

						MySQL学习笔记——尚硅谷李玉婷经典版MySQL基础笔记（一）
		MySQL学习笔记--尚硅谷李玉婷经典版MySQL基础笔记(一) MySQL学习笔记目录 MySQL学习笔记--尚硅谷李玉婷经典版MySQL基础笔记(一) 一.基础知识 1.MySQL的语法规范 2. ...
		
						maven学习笔记——尚硅谷
		文章目录 maven学习笔记--尚硅谷 第一章 Maven概述 第一节 为什么要学习Maven 1.Maven 作为依赖管理工具 1.1 jar 包的规模 1.2 jar 包的来源 1.3 jar 包 ...
		
						Rabbitmq学习笔记(尚硅谷2021)
		Rabbitmq学习笔记 (尚硅谷) 1.MQ 的概念 1.1 什么是 MQ? 1.2 为什么要用 MQ? 削峰 解耦 异步 1.3 MQ 的分类 ActiveMQ Kafka RocketMQ Ra ...
		
						【HBase学习笔记-尚硅谷-Java API shell命令 谷粒微博案例】
		HBase学习笔记 HBase 一.HBase简介 1.HBase介绍 2.HBase的逻辑结构和物理结构 3.数据模型 4.基本架构 二.快速入门 1.配置HBase 2.命令 三.API 1.获取 ...
		
						Java学习笔记 | 尚硅谷项目三详解
		该笔记基于B站视频:尚硅谷Java入门视频教程 目录 1,目标 2,需求说明 2.1,功能实现 2.1,菜单显示 2.2,添加功能 2.3,删除功能 2.3,查看团队成员 3,软件设计结构 4,具体实 ...
		
						javaWeb学习笔记(尚硅谷旧版+新版)
		HTML基础 目录 HTML基础 HTML书写规范 HTML标签 简介  特殊字符 a标签 列表标签 img标签 table标签 跨行跨列表格 iframe标签 表单标签 关于GET和POST请求 ...
		
						Elasticsearch7学习笔记(尚硅谷)
		文章目录 一.ElasticSearch概述 1.ElasticSearch是什么 2.全文搜索引擎 3.ElasticSearch 和 Solr 3.1 概述 3.2 比较总结 二.Elastics ...
		
						[Java]Maven学习笔记(尚硅谷2022)
		文章目录
		
						Springboot学习笔记 | 尚硅谷雷神
		一.springboot入门 1.导入依赖 导入springboot版本仲裁中心 <parent><groupId>org.springframework.boot</g ...
		
						[Vue]Vue3学习笔记(尚硅谷)
		文章目录
		
		

					
最新文章	

						Android开发——回调（Callback）
		
						pytorch_lightning Default process group is not initialized
		
						golang中struct字段
		
						大象喝水c语言程序,实现大象喝水(c语言)
		
						idea 快捷键整理
		
						js反序列化html编码,JavaScript实现的反序列化json字符串操作示例
		
						C# DataTable用法详解
		
						P6271 [湖北省队互测2014]一个人的数论（莫比乌斯反演 + 伯努利数）
		
						运动基元_发现大量Java基元集合处理
		
						php parse url ctf,【SSRF】如何绕过filter_var(), preg_match() 和 parse_url()
		
						基于hadoop架构的企业数字化转型，阿里数据中台实战案例
		
						sqlserver2008安装报错 “Previous releases of Microsoft Visual Studio 2008″ failed.
		
						[转载] 2011 ScrumGathering大会简要记录 - 周金根
		
						深入理解C语言（转载）
		
						服务器系统更新失败进不了系统,第五人格更新后进不去怎么办 更新连接服务器失败...
		
						极速办公（PPT）字体如何设置斜体
		
						Mysql基础(超详细)
		
						推荐16个超棒的国外免费PSD资源素材网站
		
						真牛！如何才能更容易拿到大厂Offer？挥泪整理面经
		
						2021-IEEE论文-深度神经网络在文档图像表格识别中的应用现状及性能分析
		
		
	

热门文章	

									二元函数matlab画图_matlab心形图大全，几个经典的函数图像，有趣的函数图像，matlab画图...
			
						MVX Android设计架构浅析-MVP
			
						七月观荷 -  江湖一剑客
			
						12，verilog移位操作
			
						Android TextView更换字体
			
						RNA-seq那些事儿
			
						myeclipse设置黑色主题
			
						yii ccaptcha php模块,yii验证码无法显示
			
						读史使人明智，二混子带你漫画学历史~
			
						vue websocket实现消息推送和语音提醒功能