【JavaScript】巧用思维导图来轻松学习JavaScript

前面更新了h5的相关知识，接下来学习js，根据上面的学习可以知道js属于高级语言，而js就是来规范行为的。

首先，我们用思维导图来看一下学完这篇JavaScript你会学到什么？

js的历史由来

js:是运行在客户端的脚本语言。

是由布莱登*艾奇（现在还存在）——用了10天的时间研发出的——研发出来的时候，为livescript在网景公司——由于sun公司收购后（当时sun公司比较流行的语言就是java）所以，更名为JavaScript。
由以上的由来你就可以知道，javascript与Java之间没有任何联系，只是简单的蹭了一个热度。
而JavaScript的组成，分为三部分。1，ECMAscript 2，DOM（页面文档）3，BOM(浏览器)

js书写的位置

1，行内
当写少量的代码的时候，这时候我们可以写在行内。
例如：

<input type="button" value="点我" onclick="alert('X')>//当点击这个按钮的时候，弹窗会弹出X这个值

注：
1，单行或者少量的代码写在HTML的body中，一定要以on开头。
2，关于引号的问题，在书写习惯的时候，写HTML的内容，我们用双引号，写js的内容的时候，我们用单引号。

2，内嵌

写js的相关代码的时候，可以直接写在head里面，但是在写多行的js的代码的时候一定要用script包裹起来。

<script ">alert('X')</script>

3，外部
可以新建一个文件夹用来写js的相关内容，然后再引进来。

<script src="my.js"></script>//中间不能写代码

js的基本语句

alert(msg)     //浏览器弹出小方框
console.log(msg) //  控制台打印出信息
prompt（'info'）//浏览器弹出输入框，用户输入信息

例如：

alert('Hello world')

显示为：

prompt('请输入你的名字')

显示为：

js的变量以及变量命名规范

注：
1，变量（定义）：用于存储数据的容器。
2，首先要声明变量的类型其次在进行赋值。
3，更新变量：当更新变量的时候，以最后一次为准。
4，当声明多个变量的时候，中间使用逗号进行隔开，以分号结尾。

1，只声明不赋值         显示为：undefined
2，不声明不赋值直接用     显示为：报错
3，只赋值不声明          显示为:可以使用但不建议，不符合常用规范

变量命名规范：
1，由字母，数字，下划线以及美元$符号组成
2，严格区分大小写。小写和大写是完全不同的
3，不能以数字开头，不能是关键字以及保留字
4，变量名要有意义，遵守驼峰命名。

驼峰命名：

myFristname(属于驼峰命名法，第一个字母小写第二个字母开始大写)

数据类型 (面试)

数据类型的定义：根据数据占不同的储存空间，所以把数据划分不同的类型。
js的变量数据类型是只有程序在运行的过程中，由等号右边的值所确定的。
即：变量的数据类型是由js引擎根据等号右边的变量值的数据类型进行判断。

数据类型的分类：

1，简单：

number类型 、string类型（字符串类型）、Boolean类型、undefined类型、NUll（空类型）

2，复杂

object类型

注：数据类型是入门的常识一定一定要知道！而且面试也会考！！！

表现形式

Number类型       数字类型                    默认值：0
Boolean类型      布尔类型 值为true或者false   默认值：false
String类型       字符串类型，必须带上引号      默认值：""
undefined        声明变量无值               默认值:undefined
Null          声明 var a = Null，声明a为空值   默认值：null

Number 类型

1，number类型

主要分为二进制，八进制 ，十进制 ，十六进制

举例：

八进制 ： 0 - 7之间，一般数字前面加0表示八进制

十六进制 ：数字0 - 9，字母a - f 之间，比如：#ffffff 表示的是白色，一般数字前面加0X表示十六进制

2，数字范围（了解）

最大：alert（Number.Max_VALUE）//1.709769e + 308
最小：alert（Number.Min_VALUE）// 5e -324

3 ，特殊值（了解 NaN是一个重点）

1，infinity:无穷大

alert（Infinity）

2，负的 infinity 就为无穷小

3，NaN 意思就是 not a Number 代表非数值

例如：

当我们利用prompt让用户传输一个数字的时候，传进来就是一个字符串的形式，没有转换为数字，直接参与运算，返回的值就为NaN

注：

isNaN ( X ) 判断数字：

x为非数字，返回的值是：true
x为数字，返回的值是：false

String类型

String类型表示形式为字符串类型，一般字符串的表现形式为 : 进行加单引号或者双引号

1 ， 字符串转义符：转义符以 \ 开头：

\ n : 换行      \ " : 双引号    \ \ :斜杠 \    \ t : 缩进   \ b :空格

2，字符串的引号嵌套：外双内单 或者 外单内双

3，字符串的长度 ：使用length来获取字符串的长度

var str = 'my name is andy';
console.log( str.length) // 15

4，字符串的拼接

字符串 + 任何类型 = 拼接后的新字符串
注：
1, 结果一定为字符串类型
2, 数值相加，字符相连

var age = 19 ;
console.log('我今年已经'+ 19 +'岁了');//属于字符串类型，符号可巧记为 ：引引加加

undefined 类型

举例：

var str = undefined;
console.log(str + 'pink')//undefinedpink

Null 类型

举例：

var str = Null;
console.log( str + 'pink')//Nullpink

使用typeof检测数据类型

举例：

var num = 10;
console.log( typeof num);//number类型

类型转换

转为字符串 ：
1，变量.toString()

1，变量.toString()   
var num = 10;
alert(num.toString())

2，String变量

var num = 1;
alert(String(num));

3，加号拼接：数字加一个字符串等于一个字符串

var num = 1;
alert(num + '字符串');

转换成数字型
1，parseInt(String)函数

parselnt('18');//转换成整形

2，parseFloat（string）函数

parseFloat('78.21')//转换成浮点型

3，Number(’ ')强制转换

Number('12');

注：
parseInt(’ 120px’) 结果为120 会去掉px, parsefloat类似。
rem(‘120px’) 结果为NAN

4,利用算法运算加 减 乘以及除实现隐式转换
比如：

console.log('12'-0);//双引号的12为字符串类型，当减去零的时候，字符串转换成数字类型，结果为12

4，转换为布尔类型

方式：Boolean( ) 函数

注：
1，当出现 0 、NAN、null、undefind以及空时，出现的值都是false.
2,其余的值为true.

标识符

标识符：开发人员为变量起的名字
关键字：js本身以及使用的名字，不能充当为变量名
保留字：未来可能成为关键字

算数运算符：加、减、乘和除
前置递增运算符：

运算符

++num类似于num = num + 1
先加1在参与运算

后置递增运算符：

num++类似于 num = num + 1
先参与运算后加1

关于等于

一个等于：是进行赋值；
两个等于：判断两边的值是否相等
三个等于：判断两边的值和类型是否完全相等

逻辑运算符

&&：and的作用
||：or的作用
！：not的作用

赋值运算符

= ：直接赋值
+=、-=：加减一个数后再进行赋值
*=、/=、%=:乘除取模后再进行复制

循环

if else循环

if（条件表达式）{
语句1
}
else if(条件表达式){
语句2
}

三元表达式

条件表达式 ? 表达式 1 ：表达式 2
执行思路：
1，当条件表达式为真，则返回到表达式1的值
2，当条件表达式为假，则返回到表达式2的值

倒计时准备——小热身

用户输入数字，若num<10，则前面补0则不补0

var time = prompt("请输入一个0-59之间的数字");
time < 10 ？'0' + time : time

switch语句

switch(表达式){
case value1:执行语句1；
break;
case value2:执行语句1；
break;
case value3:执行语句1；
break;
case value4:执行语句1；
break;

...

default;
执行最后的语句；

}

小面试（switch 与if else if语句的区别）
1, switch:确定某个值的情况，if else确定于某个范围
2，条件判断后直接执行到某一个语句，效率比较高，而if else需要经过多次判断
3，一般情况下，可以互相转换

for循环

for(初始变量；条件表达式1；操作表达式){

}

小面试：
continue与break的区别：
continue：跳出本次循环，继续执行下一次循环
break：立即跳出整个循环

数组

定义数组以及获取数组

var arr = [ ]//定义数组
数组名[索引号]//获取数组里的数

遍历

1，使用for循环来进行遍历数组的元素
2，for循环里面的i表示的是计算器的索引号
3，通过length来获取数组里面的元素，如arr.length

举例：把元素里面的所有数都进行遍历了一遍

var arr = ['red','green','blue'];
for (var i = 0；i < arr.length ; i++）{
console.log(arr[i]);
}

小面试：
如何在数组中增加元素？
通过1，通过修改length的长度；
原因：
1，通过length长度实现数组扩容的目的；
2，length属性有可读写
通过2，索引号增加数组元素；

建议（关于学习数组需要练习的习题的经典例题）：
1，利用数组求最大值
2，筛选数组
3，翻转数组
4，冒泡数组

函数

函数就是封装一段可以被重复的代码块

1，声明函数

function 函数名（ 形参1，形参2）{
//函数体
}
函数名（实参1，实参2）

注：
1，function声明函数的关键字，全部小写
2，函数是做某件事情，函数名一般是动词
3，函数不调用自己不执行

调用函数

函数名（）；//调用函数的时候一定要加小括号

举例：

function cook(aru){
console.log(aru);
}
cook('Hello word')//实参的值hello word传到形参，之后在进行执行下去

函数的返回值return

function 函数名（）{
return 需要返回的结果；
}
函数名（）；

只要函数遇到return就把后面的结果返回到函数的调用者，在实际开发过程中，经常用一个变量来接受函数的返回结果。

函数有return,则返回到return后面的值；
函数没有return，则返回到undefined；

小面试：
break、continue以及return的区别:
1,break:结束当前的循环（比如for循环）
2,continue:结束本次循环，继续执行下一个循环
3,return:不仅可以退出循环，还能够返回到值，同时还结束当前的函数体

argument的使用

在js当中，每一个函数都有一个内置的函数对象，所有函数都有一个内置的argument对象，argument对象中存储了传递的所有实参

function fn(){
console.log(arguments);
}
fn(1,2,3)

其中，fn是以一个伪数组的形式存储，即

argument（3）

argument具有的属性：
1，具有数组的length的属性；
2，按照索引的方式进行存储；
3，没有真正的数组的方法

作用域

变量的作用域根据全局作用域主要分为全局变量以及局部变量（局部变量只能在函数内部进行使用）

全局变量：只有浏览器关闭的时候才会销毁，比较占内存资源。
局部变量：当我们程序执行完毕就会销毁，比较节约内存资源

作用域链

当内部函数访问外部函数的变量，采取的是链式查找方式，决定选取那一个值，采取就近原则

举例：

var num = 10;
function fn(){
var num = 20;
}
function fun(){
console.log(num);//查找上一层是否有num，有num即为20
}
}

预解析

由于js代码是由浏览器中的js解析器来执行，js解析器主要分为预解析以及代码执行

预解析：js引擎会把js里面的所有的var还有function提升到当前作用域的最前面
代码执行：依次从上往下进行执行。

完结

个人总喜欢一首歌为追光者，听这首歌，总能让我有种坚持下去的♥♥♥♥
如果说，你是海上的烟火，我是浪花的泡沫。某一刻，你的光照亮了我

关于我：

好物分享：
html5 看这一篇就够了！！！！.
零基础入门前端《一》.
零基础入门前端《二》.
零基础入门前端《三》.

我是凉心姑娘，欢迎来我的博客！你的一个赞👍，是我写下去的动力！