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

  • 内嵌式

  • 外联式 【 scriptb 标签的 src属性 】

  • 行内式(了解)

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

【 NaN和任意字符 - * / % 结果都为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="n133" 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-a97f87-1566820113674)]

[图片上传失败...(image-9879ef-1566820113674)]

不赋值结果为bool类型，赋值为短路运算

赋值运算符

= ：最简单的赋值运算

复杂：+=，-=，*=，/=, %= 【 两个符号之间不能空格 】

运算符的优先级

image

3、类型转换

  • 将字符串转换为数字

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n162" 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
    可以转换浮点数
    Boolean true--> 1
    false--> 0
    ​
    parseInt() （ 部分转换 ）
    【 parseInt只能转换字符串类型的数据不能转换如 bool 不能用该方法转换 】
    只能得到整数
    会尽可能的尝试转换到第一个非数字的字符为止
    ​
    parseFloat() （ 部分转换 ）
    【 parseFloat 只能转换字符串类型的数据不能转换如 bool 不能用该方法转换】
    会尽可能的尝试转换到第一个非数字的字符为止
    可以转换浮点数（能取到小数）</pre>

  • 将其他转换成字符串

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n165" 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="n168" 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(数据)

typeof(null) -->object

typeof(undefind) -->undefind

4、js的语法结构

  • 顺序结构 （从上到下，从左到右的执行）

    • 选择结构(if-else 和switch-case) 【if里面可以再嵌套if】

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n181" 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的值是定值，而if的值是区间】
    ​
    switch(n) {
    case 定值1:
    当n和定值1相等的时候执行的代码
    break; 【如果没有break,则后面的代码无条件执行，直到遇到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>

    [图片上传失败...(image-3ecaeb-1566820113661)]

    [图片上传失败...(image-9d4e6c-1566820113661)]

  • 循环结构

    什么是循环：重复的去做一件事情 ,重复执行一段代码

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n191" 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>

[图片上传失败...(image-835c69-1566820113673)]

[图片上传失败...(image-598c54-1566820113673)]

[图片上传失败...(image-46174c-1566820113673)]

[图片上传失败...(image-627ddd-1566820113673)]

5、数组

什么是数组

数组就是数据的有序集合，有长度 length，在js当中，数组可以装任意类型的数据

创建数组

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n200" 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="n202" 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>

[图片上传失败...(image-54a0d9-1566820113672)]

数组的取值

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n205" 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 str = arr[2]; // 通过索引取值，要使用[]运算符</pre>

[图片上传失败...(image-dbe9e9-1566820113672)]

数组的遍历**

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n208" 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;">for(var i = 0; i < arr.length ; i++ ){
console.log(arr[i]);
}</pre>

6、数组的操作方法

  • concat：连接数组 不会改变原来的数组，而是得到一个新的数组

  • join : 使用某一个字符，连接所有的数组的元素，得到一个字符串

  • push(xx, ....)：向一个数组最后添加一个或者多个元素，并且返回数组增加元素之后的长度

    会修改原来的数组

    unshift（） 向一个数组最开始添加一个或者多个元素，并且返回数组增加元素之后的长度

    会修改原来的数组

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n221" 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;"> // unshift（）向数组最前面添加元素（至少添加一个元素）
    var aa = [ 1, 112, 'a' ,12 ]
    aa.unshift( 'aac' ,'12a')
    console.log( aa )</pre>

  • shift：删除数组的第一个元素，并返回，也会修改原数组

  • pop(): 删除数组中的最后一个元素，并且返回这个元素，会修改原数组

  • indexOf（searchValue [,formindex]）：获取数组中某个元素第一次出现的索引，但是如果规定从哪个索引开始查找，可以查找到任意位置元素

  • slice（start，end） 获取从数组中某个下标开始，到end结束的所有元素，但是不能获取到end （左闭右开）

    splice（） 删除从i(索引值)开始之后的那个元素。返回值是删除的元素

    splice（index ，howmany，item1，...，item1）

    [图片上传失败...(image-4790ec-1566820113660)]

    说明：

    index： 是删除元素的位置（元素下标） 【必填】

    howmany : 删除元素的个数 【必填】

    item1 ： 如果不写就表示只删除元素。如果写，就表示添加该元素 【选填】

    [图片上传失败...(image-f6c75a-1566820113660)]

[图片上传失败...(image-5e5933-1566820113671)]

[图片上传失败...(image-4ded83-1566820113671)]

[图片上传失败...(image-b0762c-1566820113671)]

清空数组

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n248" 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= [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、函数

什么是函数

可以在需要的时候执行的，可以重复使用的一段代码 ，思想：代码复用，把不变的放到函数体里面，把改变的变成参数

做用：代码的封装和复用

[图片上传失败...(image-6a9d3f-1566820113671)]

定义函数

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n257" 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;">1、使用function关键字声明
function 函数名 ( 参数列表 ) {
函数体
}
​
2、函数表达式 【 需要将函数赋值给一个变量，否则报错 】
var 函数名 = function (参数列表) {
函数体
}</pre>

函数命名

命名规范和变量一样，推荐使用动词，推荐驼峰命名

函数的调用

函数名(参数的列表);

函数的返回值

函数执行完毕之后，得到一个结果，就是函数的返回值

  • 如果函数里面没有写return关键字，函数执行完毕之后，会默认的到undefined

  • 如果函数里有些return，但是return没有跟任何的东西，函数执行完毕，会默认得到undefined

  • 如果函数里有return，并且return后面跟着某个变量或者值，函数执行之后，得到return后面的这个东西

return关键字，除了可以返回函数的返回值之外，还能，终止函数的执行

[图片上传失败...(image-fee598-1566820113670)]

函数的参数

  • 形参

形式参数，就是我们在声明函数的时候写在参数列表里的参数，起到占位的作用，让我们可以在调用函数的时候，传入响应参数，来在函数执行的时候参与运算

  • 实参

其实就是我们在调用函数的时候传入参数，是实际参与函数执行的参数。

函数的四种形式

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n288" 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;">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>

[图片上传失败...(image-5272ef-1566820113670)]

函数调用函数的执行过程

当函数去调用另一个函数的时候，会去到那个被调用的函数里执行，被调用的函数执行完毕之后，会回到调用它的位置

函数也是数据类型

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n293" 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;">function fn(){
}
console.log(typeof fn); //得到的结果是输出了：function 是数据类型，就可以当成参数传递</pre>

[图片上传失败...(image-d9331a-1566820113669)]

匿名函数

没有函数名的函数

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n299" 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;">function （参数列表） {
函数体
}</pre>

[图片上传失败...(image-2e0ebe-1566820113669)]

自执行函数**

声明结束之后，立刻执行

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" 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: 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;">(function (){
console.log("1");
console.log("2");
})();</pre>

[图片上传失败...(image-9cb872-1566820113669)]

[图片上传失败...(image-d4d7d8-1566820113669)]

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="n347" 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="n349" 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(str2.concat(str3));
console.log(str);

slice用来截取从start开始，到end结束的字符
console.log(str.slice(3,7)); //能取到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="n365" 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="n368" 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="n373" 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="n377" 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="n403" 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>

基本类型和引用类型

基本类型（值类型）

是存储在栈空间上，当我们声明多个变量的值都是一样的时候，是分配不同的内存位置，当我们调用函数的时候，会把这些值复制一份进入函数区运行，就不会改变原来实参的值

引用类型

是存储在堆空间里的，只有一份，如果有多个变量指向同一个对象，会在栈空间保存有多个地址，这些地址都是指向这个对象，当我们把这些变量传入函数中运行的时候，其实都是根据变量保存的地址，找到对象，操作同一个对象

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

推荐阅读更多精彩内容

  • 想背包走遍天南地北
    每一次想逃离现实的时候，我都想背着包来一次说走就走的旅行，不用管其他的东西，订一张机票，一路跨越高山与湖泊...
    八月我是瓶中水阅读 138评论 0赞 0
  • 无霾 北京 2016年12月
    有人说，如果你觉得过得很舒服，那是因为有很多人在为你默默付出，如果你觉得过得很安全，那是因为有很多人在为你承担风险...
    kathy121阅读 176评论 0赞 2