JavaScript进阶学习

JavaScript进阶学习

JavaScript学习接受顺序：

1. 熟悉基本概念：变量，数据类型，函数，运算符，表达式，对象（自定义对象，内置对象）。这些基本概念必定要熟悉，熟悉到什么程度，看见一个概念，马上就能写出示例代码，就够了。

2. 熟悉DOM：树状结构，节点分类，添加节点，删除节点，修改属性，绑定事件。

3. 熟悉jQuery：选择器、操做属性和样式、绑定事件、节点操做、动画方法。

4. 用jQuery实现网页上看到的页面效果，好比轮播图，菜单的各类效果，返回顶部等。

5. 试着用原生的js实现jQuery的经常使用方法。好比addClass，removeClass,index这些。

上面5条若是没能作到，就不要想着闭包，原型继承，ES6新特性这些东西了。

总结：学习要按部就班，操之过急轻则影响学习效率，重则因挫败感而放弃学习。但愿你们都能早日学有所成。

---

[熟悉基本概念]

---

一.变量

1. 变量基本概念

装东西的盒子
​
变量是用于存放数据的容器咱们经过变量名获取数据，甚至数据能够修改。
​
程序在内存中申请的一块用来存放数据的空间

2. 变量的使用

   声明变量 赋值

   声明变量 var(声明) /至关于起名/

   赋值 上一步声明的名称 = 保存数据的值

   输出结果 将给的名称输出（ prompt / alert / console.iog ）

3. 变量语法扩展

   一个变量被重复赋值后以最后一个赋值为准

   只声明不赋值默认输出undefined

   不声明不赋值直接输出会报错

   不声明直接赋值可使用（不推荐）

   报错后没法执行下一步操做

   4. 交换变量

      须要临时变量

      把a给临时变量

      把2给1

      把临时变量给2

例：
var a="1";
var b="2";
var c;	//临时变量
c = a;
a = b;
b = c;

---

二.数据类型

1. 数据类型简介
   不一样数据占据数据空间不一样，根据存储空间的不一样因此把数据分红了不一样的数据类型

   变量的数据类型不肯定；要根据变量的赋值来肯定数据类型

   js的变量数据类型是只有程序在运行过程当中，根据等号右边的值来肯定的

   js是动态语言变量的数据类型是能够变得

2. 简单的数据类型

• Number 数字型包含 整型值，浮点型值；如;21/0.21(整数和小数)

  • 数字输出0开头是八进制 0x开头是16进制

  • ​ Number.MAX_VALUE JavaScript中数值的最大值

  • Number.MIN_VALUE JavaScript中数值的最小值

  • NaN 表明一个非数值

  • isNaN 用来判断是否是数字 isNaN（内容）；[是数字显示 false,非数字显示true；]

• Boolean 布尔型 如：true、false、等价于1和0；

• String 字符串类型 语法为加单引号/双引号；相同引号不能互相嵌套
  字符串转义符 字符串都是用\开头，转义符必须写到引号里面
  |转义符|做用|
  |---|--|
  |\n| 换行符|
  |\\ | 斜杠|
  |\' | 单引号|
  |\" |双引号|
  |\t | Tab缩进|
  |\b | 空格|

字符串长度 length属性能够获取整个字符串的长度

字符串的拼接 用“+”进行字符串的拼接；数值相加，字符相连

变量不要写到字符串里，是经过和“+”字符串的方式实现的

3. Undefined和Null

   **一个声明后没有赋值的变量会有一个默认值undefined(若是进行相连或者相加时注意结果)

   一个声明变量给null值，里面存的值为空（注意相连和相加的结果）**

4. 检测数据类型

   输出typeof+数据 显示数据类型（经过typeof来判断数据类型）

   数据类型	含义
   number	数字型
   string	字符型
   boolean	布尔型
   undefined	未定义类型
   object	空类型字面量

5. 数字字面量：一、二、3

   字符串字面量：‘内容’

   布尔字面量：true、false

6. 数据类型的转换(把一种数据类型的变量转换成另外一种数据类型)

   转换为字符串类型

   • toString
     变量.toString
   • tring(变量)[强制变换]
   • 加号拼接字符串（又被称为隐式转换）
     输出（变量+“字符串”）
   • 转换为数字型（string=变量）
     • parselnt(string)函数 将string类型转成【整数数值 】 parselnt（"223"）
       会去除单位
     • ​ parseFloat(string)函数 将string类型转成【浮点数数值型 】
   • 转换为布尔型
     • Boolean()函数 其 他类型转换成布尔型 Boolean('b')|

---

变量数据类型总结

编程语言---->编译器--------->机器语言（二进制）

标识符：就是指开发人员为变量、属性、函数、参数取得名；
关键字：是指js自己已经使用了的字，不能再充当变量、方法名；
保留字：其实是预留的关键字；

交换变量：

临时变量=有值变量（把右边的值给左边）

---

三.运算符

1. 算数运算符 ‘+’、‘-’、‘*’、‘/’、‘%’（取余）【返回除法余数9%2=1】

   • 浮点数（小数）在算数运算符里运算会出现问题；
   • 程序算术运算也有优先级；
   • 表达式和返回值

2. 递增递减运算符（递增递减运算符必须结合变量使用）

   • 递增运算符（++）
     前置递增运算符 ++写在变量的前面
     后置递增运算符 ++写在变量的后面
     **后置变量是先返回原值再自加1 **
     变量++=【变量=变量++ + 1】；此时变量++=变量的值；
     若是此处混淆可查视频 {/*后置递增运算符运算时是先返回变量原值再运算
   • 递减运算符（--）【同上可得】

3. 比较运算符

比较运算符	含义
<	小于号
>	大于号
>=	大于或等于
<=	小于或等于
==	判断(会转型)
!=	不等于
===	全等 要求值和数据类型全都同样
!==	不全等 要求值和数据类型全都不同

4. 逻辑运算符 要注意逻辑中断！！！
   概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中常常用于多个条件的判断
   |逻辑运算符|含义|
   |--|--|
   | && | '逻辑与',简称'与' and|
   |||| '逻辑或',简称'或' or|
   | ！ | '逻辑非',简称'非' not|

5. 赋值运算符

   赋值运算符	含义	例子
   =	赋值运算符	var 变量=赋值；
   +=、-=	加减一个数后赋值	var 变量=10； 变量+=5；输出15
   *=、/=、%=	乘除取模后赋值	var 变量=2； 变量*=5；输出10

---

四 流程控制

来控制代码按照什么结构顺序来执行
	有三种

1. 顺序结构
   按照书写顺序依次执行
2. 分支结构
   根据不一样条件执行不一样路径的代码，从而获得不一样的结果。

• if语句

var number1 = prompt('请输入一个整数');
if（number1 > 50）{
alert('这个数大于50')；
}

执行思路 若是if里面的条件表达式为真（true）则执行大括号里面的语句
若是if表达式结果为假 则不执行大括号里的语句 则执行if语句后面的代码

• if语句 else语句【if（若是）lese（不然）】
  if（条件表达式）{
  /执行语句；
  }else{
  //执行语句；
  }
  例子：

var year = prompt('请输入年份');
  if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
  alert('今年是闰年')；
  }else{
  alert('今年不是闰年')；
  };

• 多分支语句

if（条件表达式1）{
//执行语句1;
}else if（条件表达式2）{
//执行语句2;
}else if（条件表达式3）{
//执行语句3;
}else{
//执行语句4;
}

• 三元表达式
  有三元运算符组成的式子
  语法结构：
  //条件表达式 ？ 表达式1：表达式2
  执行思路：
  若是条件表达式结果为真 则 返回 表达式1 的值 若是条件表达式结果为假 则返回表达式2的值
  例子：(至关于简化版的if~else 语句)

var num = 10; 
   	  				var result = num > 5 ?	'是的' ： '不是的';   //表达式是有返回值的
   	  				console.log(result)

• switch语法结构
  switch 语句也是多分支语句也能够实现多选一
  //语法结构 swith 转换、开关 case （小例子或选项的意思）
  swith(表达式){
  case value1:
  执行语句1;
  break;
  case value2:
  执行语句2;
  break;
  default：
  执行最后的语句;
  }
  //执行思路：利用表达式的值 和 参数后面的选项值相匹配 若是匹配上，
  就执行该case里的语句 若是没有匹配上，那么执行 default里面的语句
  代码：

  <script>
   					switch(1){
   						case 1:
   						console.log('这是1');
   						break;//结束循环
   						case 2:
   						console.log('这是2');
   						break;
   						default:
   						console.log('没有匹配结果');
   					}
   				</script>

  ​ 注意事项
  ​ 在开发里面 表达式常常写成变量
  ​ 值和数据类型同样才能够执行
  ​ break 若是当前case里面没有break 则不会退出swith 是继续执行下一个case

---

switch语句和if else if 语句的区别

1. 通常状况下，他们两个语句能够互相替换
2. switch....case 语句一般处理case比较肯定值的状况，而 if..else...语句更加灵活，经常使用于大范围判断（大于、等于某个范围）
3. switch语句进行判断后直接执行到程序的条件的程序预计，效率高。而if...else语句有几种条件，得判断多少次。
4. 当分支比较少时，if...else 语句的执行效率比switch语句高
5. 当分支比较多时，switch语句的执行效率比较高并且结构更清晰。

---

五 循环结构

循环的目的：能够重复执行某些代码

1. for循环

• for循环 重复执行某些代码，一般跟计数有关系

  for 语法结构
  for(初始化变量;条件表达式;操做表达式){
  //循环体
  }

  • 初始化变量 就是用var 声明的一个普通变量， 一般用于做为计数器使用

  • 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件

  • 操做表达式 是每次循环最后执行的代码常常以哦那个与咱们计数器变量进行更新（递增或者递减）

  • 代码体验 咱们重复打印100句 你好

  for(var i=1;i<=100;i++){
  			console.log('你好');
  		}

  ---

  循环小结：

  1. for循环能够重复执行某些相同代码

  2. for循环能够重复执行些许不一样代码，由于咱们有计数器

  3. for循环能够重复执行某些操做，好比算术运算符加法操做

  4. 随着需求增长，双重for循环能够作更多、更好看的效果

  5. 双重for循环，外层循环一次，内层循环所有

  6. for循环是循环条件和数字直接相关的循环

  7. 分析比写代码更重要

  8. 一些核心算法想不到，但要学会，分析他的执行过程

  9. 触类旁通本身常总结，作一些案例
     while 循环
     while 语句能够在条件表达式为真的前提下，循环执行指定一段代码，直到表达式不为真时结束循环。
     里面要有计数器 初始化变量
     里面还要有操做表达式 完成计数器更新防止死循环
     do while
     执行思路 先执行一次循环体 再判断条件 若是条件表达式结果为真，则继续执行循环体，不然退出循环
     do{
     //循环体
     }while(条件表达式)
     先执行循环体，再判断，do~while语句至少执行一次循环体代码！

     ---

  continue break关键字
  continue 关键字用于当即跳出本次循环，继续下一次循环（本次循环体重的continue以后的代码就会少执行一次）
  break 关键字用于当即跳出整个循环（循环结束）

  ---

六 数组

数组就是一组数字的集合，存储在单个变量的下的优雅方式

• js中建立数组有两种方式：

1. 利用new建立数组
   var arr = new Array();//建立了空的数组

2. 利用数组字面量建立数组
   利用数组字面量建立数组 []
   var arr = [];//建立了一个空的数组
   例如：var arr = [1,2,'不得不'，true];

• 获取数组中的元素
  数组索引
  索引（下标）：用访问数组元素的序号（数组下标从0开始）。
  var arr = ['是否','是否','绑定]；
  索引号： 0 1 2
  //遍历数组：就是把数组的元素从头至尾的访问一次
  var arr = ['red','green','blue'];
  for(var i = 0; i < 3;i++){
  docment.write(arr[i]);
  }
  //1.由于咱们的数组索引号从0开始，因此i必须从0开始
  //2.输出的时候arr[i] i计数器当索引号来用
  数组长度 数组名.length
  var arr = ['red','green','blue'];
  for(var i = 0; i < arr.length;i++){
  docment.write(arr[i]);
  }
  数组名.length 动态监测数组元素的个数
  //求和和平均值
  var arr = [2,6,1,7,4];
  var sum = 0;
  var average = 0;
  for(var i=0;i<arr.length;i++){
  sum += arr[i];
  }
  average = sum / arr.length;
  console.log(sum,average);
  求数组中的最大值 //求数组中的最大值 //声明一个保存最大值的变量 max //默认最大值能够取数组中的第一个元素 //遍历和个数组把里面的每个元素和max相比较 //若是这个数组元素大于max就把这个数组元素存到max里面，不然继续下一轮比较 //最后输出这个max var arr = [2,6,1,77,52,25,7]; var max = arr[0]; for (var i= 1; i<arr.length;i++){ if(arr[i]>max){ max =arr[i]; } } alert('数据中的最大值是'+max);