JS基础教程
JS
1、js简介
JavaScript是一种基于对象的客户端的脚本语言
是一种弱类型的动态脚本语言
弱类型：对数据类型要求不严格，只有当执行到某一句代码的时候，才去确定这个变量里的数据是什么类型
动态语言：就是指在运行过程当中，可以动态地给对象添加属性和方法
js能做什么
-
网页特效
-
数据验证
-
游戏开发
-
与服务器交互
-
服务端开发
js的历史
1995年诞生，专用于客户端数据验证，叫LiveScript
当时Java很火，为了推广，更名Javascript
1996年，微软发布了自己的Javascript，叫JScript
1997年，ECMA组织规定了Javascript的标准，叫ECMAScript，约束了js的语法和功能
2003年，js被大量用于页面广告，被称为“牛皮癣”
2004年，Google公司推出Ajax技术，拯救了Js
2007年，移动端的出现让js更加得到重视
2010年，H5推出，Canvas和Javascript的结合使用，让js功能更加强大
2011年，nodejs的出现，让js前后端通吃
js的组成
ECMAScript 规定了js的语法规范和所具有的功能
DOM（document object model）文档对象模型：就是js操作页面结构的一套工具（方法）
BOM （browser object model）浏览器对象模型 ：操作浏览器部分功能的一套方法
如何使用js
-
内嵌式
-
外联式
-
行内式(了解)
JS语法
1、注释
让js解释器，忽略注释之后的内容
单行注释 //
多行注释 /* 需要注释的内容 */
作用：解释说明，文档注释
2、常用全局函数
-
alert() 弹出一个提示框，警告框
-
console.log() 在控制台中输出内容
-
document.write() 在页面上输出内容
3、变量
什么是变量？简单的理解为：变量是用来存储数据的容器
深刻的理解变量：变量并不是真正保存数据的地方，真正保存数据的地方是内存，内存存在一个内存地址，变量负责保存内存地址，内存地址指向数据
4、变量的声明和赋值
var 变量名;
声明和赋值可以同时进行 var a = "张三";
声明和赋值可以分开：var a; a = "李四";
变量声明是可以一次声明多个: var a,b,c,d; or var c=1,d=2,e=3;
变量是可以重复赋值: var a = 10; a = 12;
5、变量命名规范
-
字母，下划线，数字，$ 这些可用的字符
-
不能用数字开头
-
不能使用关键字，保留字
-
严格区分大小写
-
建议变量的命名要有意义
-
建议使用驼峰命名法
驼峰命名法：第一个单词的首字母小写，第二个及以后的单词首字母大写
userNameOne
关键字和保留字：
image
保留字：现在还不是关键字，将来有可能成为关键字
image
注意：使用保留字为变量命名是不会报错，但是为了程序的安全性考虑，我们规定不能使用保留字作为变量名
1、js数据类型
基本类型：number数字，string字符串，布尔boolean，undefined，null
引用类型：object
number数字类型
包括所有的数字（浮点数，整数，正数，负数）和 NaN
isNaN （） 方法可判断数据是否为NaN（结果为 true false）
NaN 表示某个结果不是一个数字，但是它归属于Number类型
isNaN() 判断某个数据是否不是一个数字，当数据是数字的时候，返回false，当数据不是数字的时候，返回true
数字的进制：
二进制 满二进一 0-1
八进制 满八进一 0-7
十进制 满十进一 0-9
十六进制 满十六进一 0-9a-f
String字符串类型
格式：使用双引号，或者单引号包起来
字符串不可变性: 在js当中，操作字符串的时候，并不是在原来的字符串上进行修改，而是重新开辟内存，生成新的字符串，把变量重新指向新的字符串，原来的字符串并不会马上消失，而是等待垃圾回收机制进行回收
Boolean布尔类型
只有两个值：ture，false 通常表示对和错，表示条件成立与否 比较运算符
null
空 只有一个值 null 表示不是一个对象
undefined
未定义
只有一个值 undefined
声明变量的时候，如果没有赋值，默认就是赋值为undefined
2、运算符
比较运算符
< >= <= == != 不严格等于: 比较的是内容（值）
=== !== 严格等于: 比较的是内容（值）和类型
当两边都为 String 时，将比较其 ASCII
当两边有一个为number时，左右都必须转换成number类型然后比较
算术运算符
- 二元算术运算符
+ - * / %
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n132" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">+ ：运算
数字相加：得到数字
数字和非数字内容的字符串相加：字符串
数字和数字内容的字符串相加：字符串
-，*，/，% : 运算
数字相运算得到数字
数字和数字内容的字符串运算：得到数字
数字和非数字内容的字符串运算：NaN</pre>
- 一元算术运算符
++，--
前++（--） ++a：先对a进行自增或者是自减，然后以新的值参与运算
后++（--）a++：先以a的值进行运算，然后再进行自增或者自减
逻辑运算符
&& 与 两个条件都是true的时候为true
|| 或 两个条件都是false的时候为false
! 非 颠倒是非 【var c= !a //a转换成bool取反,则c的值为false】
短路运算（短路运算的作用是为了赋值）
&& 短路： 当&&左边为true的时候，结果就跟左边没有关系了，直接得到&&的右边（执行结果）
|| 短路： 当||的左边为false，结果就跟false没关系，直接得到||右边的执行结果 （函数传参取默认值常用）
赋值运算符
= ：最简单的赋值运算
复杂：+=，-=，*=，/=, %= 【 两个符号之间不能空格 】
运算符的优先级
image
3、类型转换
-
将字符串转换为数字
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n157" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">Number() （整体转换：内容为纯数字，则能转换成number,如果内容有非数字的内容，则会转换成NaN）
【 Number 能转换任意类型的数据如 string bool数据类型 等都可以 】
只能转换数字为内容的字符串，否则得到NaN
可以转换浮点数
parseInt() （ 部分转换 ）
【 parseInt只能转换字符串类型的数据不能转换如 bool 不能用该方法转换 】
只能得到整数
会尽可能的尝试转换到第一个非数字的字符为止
parseFloat() （ 部分转换 ）
【 parseFloat 只能转换字符串类型的数据不能转换如 bool 不能用该方法转换】
会尽可能的尝试转换到第一个非数字的字符为止
可以转换浮点数（能取到小数）</pre> -
将其他转换成字符串
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n160" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">1 String() 可以将任意类型转换为字符串
2 .toString() 可以将部分类型转换为字符串，null，undefined不能使用
3 隐式转换：+ ""</pre> -
转换为布尔类型
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n163" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">Boolean()
把其他任意类型转换为布尔
在js当中，有哪些可以转换为false 【只有这个6个值转换成bool时能】
null,undefined,0,""【空字符串】,false,NaN
隐式转换 !!数据 </pre>
类型判断
判断数据的类型 typeof 数据 or typeof(数据)
4、js的语法结构
-
顺序结构
-
选择结构(if-else 和switch-case)
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n173" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">if (条件表达式) {
条件表达式成立的时候执行的语句
}
if (条件表达式) {
条件表达式成立的时候执行的语句
}else {
条件表达式不成立的时候执行的语句
}
if (表达式1) {
表达式1成立时执行的代码
}else if （表达式2）{
表达式2成立时执行的代码
}else if (){
}...
else {
所有的表达式都不成立时执行的代码
}
switch(n) {
case 定值1:
当n和定值1相等的时候执行的代码
break;
case 定值2:
当n和定值2相等的时候执行的代码
break;
case 定值3:
当n和定值3相等的时候执行的代码
break;
default：
当n和所有的定值都不相等的时候执行的代码
}
switch-case和if-else的区别
- if-else 通常用来比较区间值
- switch-case 只能用来比较定值
所以，建议在一个变量和多个定值比较的时候，用switch-case，如果只有一个定值要比较，建议使用if-else，如果是区间值，只能只用if-else
三元表达式：
表达式1 ? 表达式2 : 表达式3
先判断表达式1是否成立，如果成立，执行表达式2，并且返回表达式2的执行结果，如果表达式1不成立，执行表达式3，并且返回表达式3的执行结果，当逻辑处理比较复杂的时候，使用if-else，如果逻辑处理非常简单，使用三元表达式</pre> -
循环结构
什么是循环：重复的去做一件事情 ,重复执行一段代码
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n178" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">while循环
while (条件表达式){
循环体，就是条件表达式成立的时候重复执行的代码
}
do {
循环体
}while(条件表达式)
do-while 和 while 的区别:
while 循环，有可能一次循环体都不执行
do-while 至少执行一次循环体
for循环
for ( 循环的初识值 ; 条件表达式 ; 自增或者自减的步长 ) {
循环体
}
执行顺序：
先初始化初始值，判断条件表达式是否成立，执行循环体，循环体执行完毕之后，自增或者自减，再检查条件是否成立，成立就执行循环体，否则结束循环
for循环和while循环的区别:
while 可以无限次循环，通常用来做未知次数的循环
for 从一开始就指定循环的次数，用来做已知次数的循环</pre>
5、数组
什么是数组
数组就是数据的有序集合，有长度 length，在js当中，数组可以装任意类型的数据
创建数组
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n184" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">构造函数的方式
var arr = new Array(); // 创建了一个空的数组，长度为0
var arr = new Array(100); //创建了一个空的数组，长度为100
字面量表示法:
var arr = []; // 创建了一个空的数组,长度为0</pre>
数组的赋值
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n186" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">使用索引赋值,数组的索引是从0开始
var arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = "ABC";
arr[3] = false;
数组的初始化赋值：
ar arr = new Array(1,2,"abc",false);
var arr2 = [1,2,"abc",false];</pre>
数组的取值
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n188" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">使用索引取值
var str = arr[2]; // 通过索引取值，要使用[]运算符
</pre>
数组的遍历
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n190" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">for(var i = 0; i < arr.length ; i++ ){
console.log(arr[i]);
}
</pre>
6、数组的操作方法
-
concat：连接数组 不会改变原来的数组，而是得到一个新的数组
-
join : 使用某一个字符，连接所有的数组的元素，得到一个字符串
-
push(xx, ....)：向一个数组中添加一个或者多个元素，并且返回数组增加元素之后的长度
会修改原来的数组
-
shift：删除数组的第一个元素，并返回，也会修改原数组
-
pop(): 删除数组中的最后一个元素，并且返回这个元素，会修改原数组
-
indexOf（searchValue [,formindex]）：获取数组中某个元素第一次出现的索引，但是如果规定从哪个索引开始查找，可以查找到任意位置元素
-
slice（start，end） 获取从数组中某个下标开始，到end结束的所有元素，但是不能获取到end
splice() 删除从i(索引值)开始之后的那个元素。返回值是删除的元素
清空数组
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n211" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var arr= [1,2,3,4,5];
// arr.splice(0);
// console.log(arr);
// console.log(arr);
// arr.length = 0;
console.log(arr);
arr = [];
console.log(arr);
</pre>
7、函数
什么是函数
可以在需要的时候执行的，可以重复使用的一段代码 ，思想：代码复用，把不变的放到函数体里面，把改变的变成参数
定义函数
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n218" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">1、使用function关键字声明
function 函数名 ( 参数列表 ) {
函数体
}
2、函数表达式
var 函数名 = function (参数列表) {
函数体
}
</pre>
函数命名
命名规范和变量一样，推荐使用动词，推荐驼峰命名
函数的调用
函数名(参数的列表);
函数的返回值
函数执行完毕之后，得到一个结果，就是函数的返回值
-
如果函数里面没有写return关键字，函数执行完毕之后，会默认的到undefined
-
如果函数里有些return，但是return没有跟任何的东西，函数执行完毕，会默认得到undefined
-
如果函数里有return，并且return后面跟着某个变量或者值，函数执行之后，得到return后面的这个东西
return关键字，除了可以返回函数的返回值之外，还能，终止函数的执行
函数的参数
- 形参
形式参数，就是我们在声明函数的时候写在参数列表里的参数，起到占位的作用，让我们可以在调用函数的时候，传入响应参数，来在函数执行的时候参与运算
- 实参
其实就是我们在调用函数的时候传入参数，是实际参与函数执行的参数。
函数的四种形式
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n249" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">1、无参无返回值
function logError(){
console.log("这里出现了一个错误");
}
2、无参有返回值
function getRandom(){
return Math.random();
}
3、有参无返回值
function log(msg){
console.log(msg);
}
4、有参有返回值
function getSum(n){
var sum = 0;
for (var i = 1; i < n; i++) {
sum += i;
}
return sum;
}
</pre>
函数调用函数的执行过程
当函数去调用另一个函数的时候，会去到那个被调用的函数里执行，被调用的函数执行完毕之后，会回到调用它的位置
函数也是数据类型
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n254" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function fn(){
}
console.log(typeof fn); //得到的结果是输出了：function 是数据类型，就可以当成参数传递
</pre>
匿名函数
没有函数名的函数
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n258" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function （参数列表） {
函数体
}
</pre>
自执行函数
声明结束之后，立刻执行
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n261" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">(function (){
console.log("1");
console.log("2");
})();
</pre>
8、作用域
-
全局作用域
在页面的任意位置都可以访问的作用域，在全局作用域下声明的变量，可以在任意位置访问
-
局部作用域
就是指函数的内部，在函数内部声明的变量就是局部变量，如果在局部作用域内，没有使用var声明的变量，这个变量是一个全局变量 。但是这种做法不推荐
9、预解析
js的执行不是单纯解释一行执行一行，而是有一个预解析的过程，会找到当前作用域下的所有的var和function关键字，把变量的声明和函数的声明提升到当前作用域的最顶端。
变量提升和函数提升
其实就是预解析的时候做的变量的声明提前和函数的声明提前
定时器
setTimeOut
setInterver
10、JS的内置对象
Math对象
就是js提供的一套关于数学的一些方法
-
Math.ceil() 向上取整
-
Math.floor() 向下取整
-
Math.pow(x,y) 求x的y次方
-
Math.max(x,y,z,...) 求两个或多个数字的最大值
-
Math.min(x,y,z...) 求两个或者多个数字的最小值
-
Math.random() 获得[0,1)之间的随机数
-
Math.PI js当中的圆周率
Data对象
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n303" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">创建当前日期的日期对象
var date = new Date();
创建指定日期的日期对象
var date = new Date(2016,10,1); //注意：这里的月份是要从0开始，如果想要得到10月1号则要写9月
获取日期的毫秒数
var ms1 = +new Date();
or
var date = new Date();
console.log(date.getTime());
获取日期对象的每一个部分
var date = new Date();
//获取年份
console.log(date.getFullYear());
//获取月份,获得到的月份是从0开始
console.log(date.getMonth());
//获取日期中日
console.log(date.getDate());
//获取日期中的星期几,要注意的是，星期是从星期日，得到0就是星期日，得到6，就是星期六
console.log(date.getDay());
//获得小时,0到23
console.log(date.getHours());
//获取分钟,0到59
console.log(date.getMinutes());
//获取秒数,0到59
console.log(date.getSeconds());
//获取毫秒数,得到0到999
console.log(date.getMilliseconds());
</pre>
操作字符串的方法
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n305" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var str = "abcdefghijklmn";
得到某一个位置的字符
console.log(str.charAt(0));
console.log(str[5]);
concat用来连接多个字符串的方法
var str2 = "abc";
var str3 = "def";
连接多个字符串，得到一个新的字符串，不会改变原来的字符串
console.log(str.concat(str2,str3));
console.log(str);
slice用来截取从start开始，到end结束的字符
console.log(str.slice(3,7));
substring用来截取字符串，从start开始，到end结束的字符，可以取到start，不能得道end
console.log(str.substring(3,7));
substr(start,length)，意思是从start开始，一共截取length的长度
console.log(str.substr(3,5));
indexOf 查找某一个字符在字符串中的位置,只能找到从某一个位置开始的第一个
console.log(str.indexOf("z"));
var str = "abcabcabc";
console.log(str.indexOf("c",3));
lastIndexOf,从后面开始往前面找，也只能找到第一次出现的位置,除了查找的方向和indexOf不一样，其他都一样
var str = "abcabcabc";
console.log(str.lastIndexOf("a",5));
trim方法，用来去除字符串两边的空格,会得到新的字符串，不会改变原字符串
var str = " abc def hij ";
console.log(str);
console.log(str.length);
console.log(str.trim());
console.log(str);
字符串大小写转换
var str = "abcdef";
大写转换，不会对原来的字符串造成影响
var str2 = str.toUpperCase();
var str3 = str.toLocaleUpperCase();
console.log(str2);
console.log(str3);
console.log(str);
小写转换,不会对原字符串造成影响
var str4 = str2.toLowerCase();
var str5 = str3.toLocaleLowerCase();
console.log(str4);
console.log(str5);
console.log(str2);
console.log(str3);
replace替换字符串里的对应字符,但是只能替换掉匹配的第一个
var str = "abcdeffkfkfff";
var str2 = str.replace("f","g");
console.log(str2);
console.log(str);
split把字符串变成数组,根据的是分割的字符
var arr = [1,2,3,4,5,6];
var str = arr.join("|");
console.log(str);
var newArr = str.split("|");
console.log(newArr);
var str = "abcabcabc";
var arr = str.split("a");
var arr = str.split("");
console.log(arr);
</pre>
对象
在js当中，对象就是无序属性的集合，对象里面包含属性和方法
创建对象
1 构造函数法
var o = new Object();
2 对象的字面量表示法
var o = {};
访问对象的属性
-
使用点的方式
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n321" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">使用点的方式访问对象的属性，获取对应的属性的值
console.log(nokia.brand);
console.log(nokia.name);
</pre> -
通过键的方式
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n324" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">使用键的方式访问对象的属性
console.log(nokia["with"]);
</pre> -
使用for-in的方式遍历对象
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n329" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">for-in 的方式访问对象属性，可以访问到某个对象的所有属性和方法
// for(var 键 in 要访问的对象){
// 循环体
// }
for(var k in nokia){
console.log("对应的键是"+k+"，对应的值是"+nokia[k]);
}
</pre>
自定义对象的构造函数
构造函数本质上也是函数，只不过是专门用来创建对象，并且使用new的方式
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n333" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function Person(name,height,weight,color){
// 在构造函数当中，this关键字，就是构造函数帮我们创建好的对象
this.name = name;
this.height = height;
this.weight = weight;
this.color = color;
this.sayHi = function(){
console.log("你好，我的名字是" + this.name +"，我的身高是" + this.height + "，我的体重是" + this.weight);
}
}
var zs = new Person("张三",150,50,"yellow");
var ls = new Person("李四",180,70,"black");
console.log(zs);
console.log(ls);
</pre>
this关键字
- 在构造函数当中
this关键字在构造函数当中，就是指构造在创建对象时的那个对象
- 在函数或者方法当中
谁调用函数或者方法，this就是谁
new关键字
new 用来创建新的对象
1 先创建了一个自定义对象
2 把this关键字指向刚才创建的对象
3 执行构造函数里的代码，也就是想this（已经创建的对象）添加属相和方法
4 返回this（被创建的对象）
JSON
其实JSON，就是结构化数据格式
1 JSON格式的键，必须是双引号包裹的字符串
2 不支持undefined
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n359" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">{
"name" : "张无忌",
"wugong" : "九阳神功",
"attack" : 999999
// "deadTime" : undefined
}
</pre>
基本类型和引用类型
基本类型（值类型）
是存储在栈空间上，当我们声明多个变量的值都是一样的时候，是分配不同的内存位置，当我们调用函数的时候，会把这些值复制一份进入函数区运行，就不会改变原来实参的值
引用类型
是存储在堆空间里的，只有一份，如果有多个变量指向同一个对象，会在栈空间保存有多个地址，这些地址都是指向这个对象，当我们把这些变量传入函数中运行的时候，其实都是根据变量保存的地址，找到对象，操作同一个对象
