接上篇 最全js个人总结（适合小白选手）后续详情1-10

1,JavaScript的基本介绍

历史简介

JavaScript的组成

• ECMAScript

  • 基本语法

• DMO

  • 操作文档

• BOM

  • 操作浏览器

基本语法格式

• 内联/行内样式
• 内部样式
• 外部样式

基本语法

• 1,严格区分大小写
• 2,程序执行有顺序要求
• 3,每行JavaScript程序最好用分号结束

2,JavaScript的变量

1,概念

• 存储在内存之中的带有名称的数据信息,其中存储的数据在程序执行过程中是可变的

• 内存存储,是临时存储,如果一旦断电或者程序关闭,存储内容会消失

• 存储数据的容器

  • 在计算机程序中,数据是不能独立存在的,必须要有存储的容器
  • 在前端中,html,存储数据的方式是键值对,在键中存储数据

2,语法

• var int = 100;

• var

  • 关键字
  • 第一次声明/定义变量时,必须有var关键词,之后使用变量,不需要关键词

• int

  • 变量的名称

  • 命名规范

    • 严格区分大小写

    • 只能是数字,字母,下划线_,并且不能以数字开头

    • 不能使用JavaScript的关键词和保留词

    • 小驼峰命名法

      • 除首单词之外,其他单词的首字符大写

    • 见名知意

• =

  • 赋值符号
  • 将右侧的表达式的执行结果,赋值给左侧变量

• 100

  • 赋值的数值

3,重复赋值

• 对一个变量,重复赋值,后赋值的数据会覆盖之前赋值的数据
• var int = 100;
  int = 200;
  此时后赋值的数据200,覆盖之前赋值的数据100,最终存储的数据是200

3,数据类型

根据变量中存储的数据,在计算机程序中的存储方式不同,进行分类,称为数据类型

变量只是容器,容器是没有类型的,只有存储的数据,才有类型之分

分类

• 基本数据类型

  • 布尔类型 boolean / bool

    • true
    • false

  • 数值类型 number

    • 整数 intent / int

      • 安全范围 2的53次方

      • 其他进制存储方法

        • 二进制

          • 0b / 0B

        • 八进制

          • 0

        • 十进制

          • 直接写

        • 十六进制

          • 0x / 0X

    • 浮点数 float

      • 17位有效数值

      • 科学计数法

        • 2e3

          • 2000

        • 2e-3

          • 0.002

    • NaN

      • 不是数值

  • 字符串类型 string / str

    • 必须包裹在引号中

    • JavaScript的字符串无法解析变量

    • 字符串的拼接

      • • 加号
      • 符号两侧有字符串,执行拼接操作,都是数值,执行加法操作

  • null

    • 是一种特殊的数值,表示,空

  • undefined

    • 表示没有被正确赋值

• 引用数据类型

  • 对象 object / obj

    • 数组 array / arr
    • 函数 function
    • 对象 object / obj

转化

• 自动转化

  • 计算机程序执行时,自动进行的转化

  • 其他数据类型转化为布尔值

    • if()语句

    • false

      • 0

        • 数值0

      • 0.0

      • ‘’

        • 空字符串

      • null

      • undefined

      • NaN

    • true

      • 其他数值都转化为true

  • 其他数据类类型转化为数值

    • 算术运算时

    • 布尔类型

      • true

        • 1

      • false

        • 0

    • 字符串

      • 转化字符串内容完全符合数值规范

        • 直接转化为数值
        • ‘12345’
        • ‘123.45’
        • ‘1e3’

      • 不符合数字规范的,转化为NaN

        • 只要有NaN参与的运算,结果都是NaN

  • 其他类型转化为字符串

    • 字符串拼接时
    • 布尔类型,数值类型,null,undefined,都直接转化为字符串形式

• 强制转化

  • 人为进行的转化

  • 转化为数值类型

    • Number()

      • 与自动转化原则相同

    • parseInt()

      • 获取整数部分

      • 数值,只获取整数

      • 布尔类型

        • NaN

      • 字符串

        • 从左起,只获取整数部分

          • 100a — 100
          • 1e3 ---- 1

        • 字符头转化为NaN

    • parseFloat()

      • 获取浮点数部分

      • 数值,获取浮点数部分,只识别一个小数点

      • 布尔类型

        • NaN

      • 字符串

        • 从左起,只获取浮点数部分

          • 100a — 100
          • 1e3 ---- 1000

        • 字符头转化为NaN

    • 非加法的运算

      • 一般用作将数字字符串转化为数值类型
      • 变量 - 0 变量*1 变量/1

  • 转化为字符串类型

    • String()

      • 与自动转化原则相同

    • 变量.toSting()

      • ()中设定转化的数值进制
      • 将其他进制到的数值,转化还原输出
      • var int = ob001110011;
        console.log(int.toString(2))

    • +字符串拼接

4,运算符

按照功能划分

• 算术运算符

  • • 如果有字符串参与,就是字符串拼接运算符

  • /

  • %

    • 结果的符号与被除数相同
    • 整除的结果,余数是0

  • **

    • 尽量少用

• 赋值运算符

  • =

    • 将右侧表达式结果赋值给左侧变量

  • +=

    • 在左侧变量存储原始数据的基础上,再加上右侧表达式的结果,将最终的结果赋值给左侧变量
    • 如果有字符串参与,是字符串拼接操作

  • -=

    • 在左侧变量存储原始数据的基础上,再减去右侧表达式的结果,将最终的结果赋值给左侧变量

  • *=

    • 在左侧变量存储原始数据的基础上,再乘以右侧表达式的结果,将最终的结果赋值给左侧变量

  • /=

    • 在左侧变量存储原始数据的基础上,再除以右侧表达式的结果,将最终的结果赋值给左侧变量

  • %=

    • 在左侧变量存储原始数据的基础上,再对右侧表达式的结果求余数,将最终的结果赋值给左侧变量

  • **=

    • 左侧变量存储的原始数据为底数,右侧表达式的执行结果为指数,进行幂运算,将最终结果赋值给左侧变量

• ++ / –

  • 每执行一次,变量存储的数值,改变1

  • 前缀

    • ++变量

      • 当前位置,先完成自增,再参与程序的执行
      • 参数执行时的数值,是自增之后的数值

  • 后缀

    • 变量++

      • 当前位置,先完成其他程序的执行,再完成自增,下一个位置,体现自增的结果
      • 参数执行时的数值,是存储的原始数值

• 比较运算符

  • 结果是布尔类型,只能判断一个条件

  • <

  • =

  • <=

  • ==

    • 先转化数据乐行,在判断数值是否相同

  • ===

    • 不转化数据类型
    • 数据类型和数值必须都相同

  • !=

  • !==

• 逻辑运算符

  • &&

    • 逻辑与

    • 两个条件都是true,结果是才是true,见false,就是false

    • 第一个条件结果是false,第二个条件不执行

    • 逻辑赋值

      • $int = 表达式1 && 表达式2
      • 表达式1,为true,表达式2执行,最终值为表达式2
      • 表达式1,为false,表达式2不执行,最终数值为表达式1

  • ||

    • 逻辑或

    • 两个条件都是false,结果才是false,见true,就是true

    • 第一个条件,结果是true,第二个条件不执行

    • 逻辑赋值

      • $int = 表达式1 || 表达式2
      • 表达式1,为true,表达式2不执行,最终数值为表达式1
      • 表达式2,为false,表达式2执行,最终数值为表达式2

  • !

    • 对结果取反
    • 最好对取反的对象添加()

  • 短路求值

    • 如果第一个表达式已经可以决定整个逻辑运算符的最终结果,第二个表达式就不再执行了,为了提高程序的执行效率

    • 逻辑与 &&

      • 第一个表达式为fasle

    • 逻辑或 ||

      • 第一个表达式为true

按照参与单元划分

• 一元

  • ++ – !

• 二元

  • 大部分都是二元运算符

• 三元

  • ? :
  • 表达式1 ? 表达式2 : 表达式3 ;
  • 表达式1,为true,执行表达式2
  • 表达式1,为false,执行表达式3

5,分支结构语句

if判断

• if(){}

• if(){}else{}

• if(){}else if(){}esle{}

switch()语句

总结

• 1,if语句多用于判断条件,switch()语句多用于判断是否是某个值
• 2,if语句多用于嵌套
• 3,在JavaScript语言中,switch()判断依据是 === 全等判断

6,循环控制语句

while()语句

• 循环逻辑

  • 1,定义循环变量并且赋值初始值
  • 2,判断是否符合进入循环的条件
  • 3,执行循环体
  • 4,执行步长
  • 12(true)34—2(true)34—2(true)34—2(false)终止循环

• 基本语法

  • var i = 0; // 初始值
  • while(i <= 10){ // 判断进入循环条件
  • console.log(i); // 循环体
  • i++; // 步长
    }
  • while()语句中,循环体和步长的顺序是可以改变的

for()语句

• 循环逻辑

  • 1,定义循环变量并且赋值初始值
  • 2,判断是否符合进入循环的条件
  • 3,执行循环体
  • 4,执行步长
  • 12(true)34—2(true)34—2(true)34—2(false)终止循环

• 基本语法

  • for(var i = 0 ; i <= 10 ; i++){
  • console.log(i)
    }
  • 执行原理和执行顺序与whie()语句完全相同

do…while语句

• 一种特殊的while,先执行循环体和步长,再判断是否继续循环
• 循环变量初始值;
  • do{
    • 循环体;
    • 步长;
      }while(判断进入循环的条件)
• 可以确保,循环体和步长至少执行一次

break和continue

• break

  • 终止当前循环,break之后的程序执行,以及break执行之后,剩余的循环次数

• continue

  • 终止当前循环,continue之后的程序执行,但是会继续执行之后的循环次数

总结

• 1,for()循环更适合于循环嵌套
• 2,while()语句更适合于,未知循环次数或者是死循环

循环嵌套

• 循环之中,循环体也有另一个循环
• 1,内层循环定义循环时,往往会与外层循环有关联
• 2,内层执行循环时,外层循环变量数值保持不变的
• 3,外层循环执行一次,内层循环执行所有

算法

• 冒泡排序

  • 冒泡排序
    两个单元,存储的数据进行比较,交换存储的数据

循环排序的次数,数组单元个数-1
for(var i = 0 ; i <= arr.length-1 ; i++){

// 每次执行,完成一次排序,选出一个最大值,存储在位置是数组的最后
// 每次只循环到需要比较的倒数第二个数值
// 每次循环,之前确定的数值,不再参与比较
for(var j = 0 ; j <= arr.length-1-i ; j++){

// 当前存储的数值,大于下一位存储的数值,交换存储的数据
if(arr[j] > arr[j+1]){
  var intM = 0;
  intM = arr[j];
  arr[j] = arr[j+1];
  arr[j+1] = intM;
}

}
}
- 核心

	- 相邻的两个单元,比较存储数值的大小,交换单元那中存储的数值
	- 优化

		- 比较出一个最大值

			- 循环只要循环至倒数第二个单元
			- 已经比较出的最大值,不再参与下一次比较

		- 完成所有比较

			- 最后一个单元时,不再比较

• 选择排序

  • var arr = [5,4,3,2,1];

// 选择排序
// 比较出最小值的索引下标,如果与默认位置的索引下标不同,两个索引下标中存储的数据交换

// 定义排序执行的次数 数组单元那个数-1
for(var i = 0 ; i <= arr.length-1 ; i++){

// 完成一次的选择排序
// 默认起始位置,是当前排序的起始位置的下一个单元
// 已经排序好的单元,不再参与排序

// 默认最小值是当前循环的第一个单元
var result = i;
//for(var j=i;j<=arr.length;j++)
for(var j = i+1; j <= arr.length-1 ; j++){
// 判断当前单元与默认单元的数值,如果当前单元数值小,存储当前单元的索引下标j
if(arr[result] > arr[j]){
result = j;
}
}

// 当循环结束,判断result的值,是不是还是i
// 不是i,将i索引下标的数值,与result索引下标的数值(某次的j),数值交换

if(index != i){
var intM = 0;
intM = arr[result];
arr[result] = arr[i];
arr[i] = intM;
}
}
- 核心

	- 找到最小值单元的索引下标,如果与默认位置不同,交换两个位置存储的数值

		- 默认第一个单元的数值是最小数值,存储第一个单元的索引下标,存储的单元的索引下标,获取的数值,与之后的单元,存储的数值比较,如果过之后的单元数值较小,存储这个单元的索引

如果最终存储的索引与默认位置的索引不同,两个位置,交换存储的数据

	- 优化

		- 比较出一个最大值

			- 从默认单元的下一个位置开始循环
			- 已经比较出的最大值,不再参与下一次比较

		- 完成所有比较

			- 最后一个单元时,不再比较

7,数组的简单操作

定义

• 存储数据单元的集合
• 可以存储多个数据单元

语法

• var arr = [ 1,2,3,4,5, ];
• 使用[]定义数组,多个数据单元之间使用逗号间隔
• 数组单元存储的数据,可以是任意类型的数据

数组的属性

数组的操作

• 操作单元数据

  • arr[索引下标]

• 修改单元数据

  • 索引下标必须是已经存在索引下标
  • arr[索引下标] = 数值

• 新增单元数据

  • 索引下标是不存在的

  • 索引下标必须是连续的

    • 一般定义为
      arr[arr.length] = 数据

  • arr[索引下标] = 数值

• 删除单元数据

  • 定义数值的长度属性,数值不能小于0
  • 只能定义长度,不能删除某个特定的单元
  • arr.length = 数值

数值的循环遍历

• 通过for循环,生成所有的索引下标

  • 循环变量是 从 0 至 最后一个单元的索引下标 arr.length-1

• 通过for…in循环,遍历数组

  • for(var 自定义变量 in 数组){
    循环体;
    }
  • 自定义变量中存储数组单元的索引下标
  • 使用for…in循环,会获取到数组中JavaScript定义的数组操作方法
  • 一般不推荐使用for…in循环数组,一般使用使用for…in循环对象

• 通过 forEach()循环,遍历数组

  • 数组.forEach(function(形参1,形参2,形参3){
    循环体
    })

  • 形参1

    • 存储数组单元的数据

  • 形参2

    • 存储数组单元的索引下标

  • 形参3

    • 存储原始数组

  • 数组,推荐使用forEach()循环遍历

8,函数

函数的概念

• 实现功能的代码块

  • 将实现功能的代码进行封装调用

• 优点

  • 简洁

    • 封装的作用

  • 任意位置都可以调用

  • 重复使用

函数的定义

• 基本语法

  • 关键词

    • function

  • 函数的名称

    • 命名规范与变量的命名规范相同

  • 函数的执行体

  • 函数的参数和返回值

• 语法形式

  • 声明式

    • function 函数名称(){}
    • 因为函数的预解析,可以在程序的任意位置调用使用,可以先调用后定义

  • 赋值式 / 匿名函数

    • var 变量 = function(){}
    • 不能先调用,后定义

函数的封装和调用

• 函数的封装

  • 函数在封装阶段,并没有执行,只是定义函数

    • 名称
    • 参数
    • 执行体
    • 返回值

  • 1,开辟一个存储空间,计算机系统,给这个空间定义一个内存地址

  • 2,将定义的程序,存储在这个存储空间中

  • 3,将这个存储空间的地址存储在函数名称或者变量中

• 函数的调用

  • 1,通过变量冲存储的内存地址,找到存储空间
  • 2,给形参赋值实参
  • 3,预解析函数中的程序
  • 4,执行函数中定义的程序

函数的参数

• 是函数执行时,需要外部输入的数据

• 形参

  • 定义在函数内部的参数,没有实际的数值,只是形式上的参数

  • 可以定义默认值

    • 一般定义默认值的想形参都定义在形参的最后

• 实参

  • 函数被调用时,赋值的实际数值

函数的返回值

• return定义

  • 如果没有定义函数的返回值,函数的返回值是undefined
  • 一个函数只能有一个返回值

• return的作用

  • 定义返回值

    • 定义的返回值,在函数执行时,可以被操作或者使用

  • 终止函数中,之后的程序执行

arguments

• JavaScript的关键词

• 是一个伪数组

  • 可以会用length属性,可以使用[索引下标]语法
  • 不能使用数组的操作方法

• 作用

  • 以数组的形式存储所有的实参
  • 在函数内部通过循环遍历的方式,使用调用所有的实参
  • function fun(){
    console.log(arguments);

  var sum = 0;
  for(var i = 0 ; i <= arguments.length-1 ; i++){
  sum += arguments[i];
  }

  return sum;
  }

console.log(fun(1,2,5,6,100,200,-1000)) ;

递归函数

• 函数内部调用函数自己

• 语法简单,但是执行程序,占用大量内存,执行效率低

• 程序简单,执行次数少的情况,使用递归函数

• 特别注意

  • 进入递归是从外至内,结束递归,是从内至外

9,变量的作用域

作用域

• 变量的作用范围

• 全局作用域 / 全局变量

  • 定义在函数之外的变量

• 局部(私有)作用域 / 局部(私有)变量

  • 定义在函数内部的变量

作用域的基本原则

• 全局变量可以在函数内部直接使用,局部变量默认只能在函数内部使用

函数中变量的使用原则

• 调用使用

  • 1,优先使用当前作用域中存储的变量
  • 2,如果当前作用域没有这个变量,去父级作用域中,找这个变量
  • 3,如果当前作用域和所有的父级作用域都没有这个变量,执行结果是undefined
  • 4,不会去子级作用域找变量

• 赋值

  • 1,优先对当前作用域的变量进行赋值
  • 2,如果当前作用域没有这个变量,去父级作用域中,找这个变量
  • 3,如果当前作用域和所有的父级作用域都没有这个变量,赋值语句升级为声明变量语句,并且声明的是一个全局变量
  • 4,不会去子级作用域找变量

JavaScript的预解释

• JavaScript是一门弱类型的,解释型的脚本语言

• 在一个JavaScript的程序中(在一个script标签中),要执行程序,会先对两个关键词,进行预解释 var function

• 如果先调用,后定义的变量,执行结果是undefined

• 如果先调用,后定义的函数,可以正常执行

• 预解释的无底线

  • 不会执行的程序中,有var 或者 function,也会预解释

• 函数执行时,也有预解释

10,对象的简单介绍

语法

• 字面量

  • var obj = {}

• 构造函数语法

  • var obj = new Object();

操作语法

• 对象.属性

  • 点语法,不解析变量

• 对象[属性]

  • 可以解析变量
  • 属性必须是字符串形式,除非是个变量

基本操作方式

• 与数组的基本操作方式相同

基本数据类型和引用数据类型的存储

• 栈

  • 数据有序存放,先写入的数据,存放在下方
  • 存储基本数据类型
  • 存储应用数据类型的变量名称,变量名称中存储内存地址

• 堆

  • 数据无序存放
  • 存储引用数据类型的数据内容,生成一个内存地址

• 数据的调用

  • 基本数据类型在栈中,直接通过调用变量名称,调用变量中存储的数据
  • 引用数据类型,通过栈中存储的,变量名称中存储的内存地址,找到堆中对应的空间,调用其中存储的数据或者程序