JavaScript 随意整理

08.11

# JavaScript 基础
### 编程语言 
* 机器语言
* 汇编语言
* 高级语言
    * 编译型
    * 解释型

### JavaScript 发展
* ECMA3  确定了地位
* ECMA5  
* ECMA6 (ECMA2015  ECMA2016  ECMA2017)


###客户端 JavaScript 组成
* ECMAScript (核心 基本语法)
* BOM (浏览器模型)
* DOM  (文档对象模型)

###客户端 JavaScript 组成
* ECMAScript (核心 基本语法)
* BOM (浏览器模型)
* DOM  (文档对象模型)



# JavaScript 基本语法
### 在HTML中的使用
* 使用 script 标签引入 js文件
* 把js代码写在 script 标签中

### JavaScript 注释
* 单行注释   // 注释
* 多行注释  /*  注释  */

### JavaScript 指令结束符
* 换行
* 分号


### JavaScript 的输出
* 控制台输出  console.log()
* 弹框输出    alert()
* 输出到页面  document.write()

# JavaScript 变量
### 直接量
###变量: 装数据的容器
### 变量的命名规则
*  不能以数字开头
*  有 数字、字母、下划线 组成
*  不能使保留字
###命名方式
*  小驼峰   userAge
*  大驼峰   UserAge
*  匈牙利   user_age
### 声明变量
        
        var 变量名 = 值;
        var var01=val,var02=value;  //同时声明多个变量

# JavaScript 数据类型
### 原始类型
* Number  数字
* String     字符串
* Boolean   布尔
* Null          空
* Undefined   未定义


### 对象类型
* Date
* Array
* Object
* .....


### 检测函数
* typeof()



#  Number类型
### 分类
* 整型        整数
* 浮点型    小数

### 直接量表示
* 十进制的整数或小数  19.9
* 八进制表示    010
* 十六进制表示  0x65
* 科学计数法   7e6

### 特殊的Number
* inFinity 正无穷
* -inFinity  负无穷

### 非数字值 NaN (not a number)
* 与任何数字进行计算 结果是NaN
* 跟任何值都不相等


### 数值函数
* isNaN()  判断是否是 NaN   true/false
* isFinite()  是否无穷



# String 字符串
### 定义字符串
* 双引号
* 单引号

### 转义字符
\"
\'
\n   换行
\r    回车
\t    制表符Tab
\v   垂直制表符
\f    换页符
\b   退格符
\\ 

### 字符串连接符
* +

 

08.14

# 数据类型转换
### 自动转换(在某种运算环境下)
* Number环境
* String环境
* Boolean环境

### 强制类型转换
* Number()
    *  字符串: 纯数字字符和空字符转为正常数字,其他NaN
    *  布尔值: ture:1  false:0
* String()
    
* Boolean()
    *  转换为false:  数字0,  空字符串, null 和 undefined
    *  转换为true:  值表示有东西
* parseInt()
    *  转换为整数
    *  与Number的区别: 一数字开头的字符串, 不会转换为NaN
* parseFloat()
    *   转换为小数或整数
    *  与Number的区别: 一数字开头的字符串, 不会转换为NaN



# JS操作 HTML
### 事件
* onclick

### 函数
* 声明函数 

        function 函数名(){
            代码;
        }
* 调用函数

        函数名()


### 获取元素
* document.getElementById("")
* js代码写在 html元素的后面

### JS 操作html元素的属性以及css数据
* 元素对象.属性名
* 元素对象.style.属性名
* css属性名用小驼峰命名法。 只有写在元素style中的css属性,才可以被获取
* innerHTML属性 获取或设置双标签内的内容



# 表达式
* 简单表达式; 变量、直接量
* 复杂表达式; 运算符与简单表达式的组合
* 函数调用表达式 



# 运算符
### 算术运算符
* 加号运算符  +
* 减号运算符  -
* 乘号运算符  *
* 除号运算符  /
* 取余运算符(取模)   %
* 负数运算符   -
* 正数运算符  +
* 递增运算符  ++
* 递减运算符  --


### 比较运算符
* 相等运算符  ==
* 不等运算符  !=
* 全等运算符  ===
* 不全等运运算符  !==
* 小于运算符  <
* 小于等于运算符  <=
* 大于运算符  >
* 大于等于运算符 >=
* in运算符

### 逻辑运算符
* 逻辑与 (并且)   &&
* 逻辑或 (或者)      ||
* 逻辑非               !

### 位运算符
* 按位与    &
* 按位或    |
* 按位非   ~
* 按位异或   ^
* 左移   <<
* 右移   >>


### 赋值运算符
* =
*  +=
*  -=
*  *=
*  /=
*  %=


### 其他运算符
* 字符串连接符 +
* ,运算符
* typeof 运算符
* 比较运算符   表达式 ? 表达式1 : 表达式2
 

# 运算符优先级

 

 

08.15

# 分支结构  条件语句
### 单向分支
    
    if (){
        
    }

### 双向分支
    
    if () {
    
    } else {
    
    }

### 嵌套分支
    
    if (){
        if (){
        }
    } else {
    
    }

### 多项分支 if else if
    
    if (){
        
    } else if (){
    
    } else if (){
    
    } else {
        
    }

### 多项分支  switch case
    
    switch (表达式) {
        case 值: 表达式; break;         
        case 值: 表达式; break;     
        case 值: 表达式; break;     
        case 值: 表达式; break;     
    }


# 循环结构
### while 语句
    
    while (表达式) {
        循环体    
    }

### do while 语句
    
    do {
        循环体
    } while (表达式);


### for 语句
    
    for (定义循环变量; 条件判断; 循环变量变化) {
        循环体
    }



# 跳转语句
* continue
* break
* return

# 其他语句
* debugger;
* with
* use strict  严格模式

 

08.16

# 函数
### 函数的优势
* 提高代码重用性
* 代码可读性
* 程序的可维护性

### 函数的组成
* 函数名
* 函数体
* 参数 (形参 和 实参)
* 返回值 (结束函数, 作为函数调用表达式整体的值)


### 函数的声明方式
* 关键字方式

        function 函数名([参数列表]) {
            函数体
        }

* 表达式方式(匿名函数方式)

        var 函数名 = function([参数列表]) {
            函数体
        }

* 构造函数方式

        var 函数名 = new Function("参数", "函书体)


### 函的参数问题
* 形参和实参的数量
  
    形参数量<实参数量  多余的 实参被忽略

    形参数量>实参数量  没有赋值的形参会自动赋值undefined

* 参数的默认值
    *  ECMA6语法(不兼容IE)  function 函数名(参数1, 参数2=默认值)
    *  有默认值的参数要写在后面
    *  有默认值的参数称之为可选参数
    *  兼容处理参数默认值问题, 在函数体判断 参数值是否是undefined

* 可变参数数量的函数
    *  arguments


### 函数的作用域
* 全局变量  在函数外面定义的变量
* 局部变量  在函数里面定义的变量
* 在函数内,不使用var声明的变量时全局变量(不推荐使用,严格模式不允许)


### 递归函数

 

08.18

# 数组
### 数组的概念
* 数组是值的有序集合
* 数组中的每个值 称之为 元素
* 每个元素可以是任意数据类型的值
* 每个元素都有索引(下标)
* 元素的索引从0开始,按照顺序递增。 元素最大的索引 2^32-2

### 创建数组
* 直接量 `[]`
* 构造函方式  `new Array()`

### 读写数组中的元素
* 数组名[索引]


### 稀疏数组
* js数组的索引是连续的
* 没有连续的给元素赋值 , 没有赋值的元素会自动赋值 undefined


### 添加和删除 数组的元素
* 添加数组元素
    *  指定索引来添加元素
    *  把数组长度当做新元素的索引  `arr[arr.length] = value`
    *  在数组的最后添加元素 push()  `arr.push()`
    *  在数组的前面添加元素 unshift()  `arr.unshift()`
    *  在数数组的任意位置添加元素  splice(index, 0, value)  

* 删除数组的元素
    *  改变数组的length属性  `arr.length -= 1;  arr.length -= 2`
    *  删除最后面的一个元素  pop()
    *  删除数组的第一个元素  shift()
    *  删除指定位置的指定个数的元素   splice(index, length)


### 数组遍历
* for 循环
* for in  


### 多维数组

### 数组的方法
* join([间隔符号])   把数组的每个元素拼接成一个字符串   返回字符串
* slice(start, end)   截取数组中的一部分, 返回一个新数组
* concat(arr, arr....)   合并数组. 返回一个新数组
* toString()   把数组转换为字符串
* reverse()  翻转数组 副作用
* sort()    排序  副作用
* push() pop()  副作用
* shift()  unshift()  副作用


### 类数组对象
* arguments
* Elementcollection    元素的集合 
        
         document.getELementsByTagName()
         element.getElementsByTagName()



### 作为数组的字符串
* 字符串具有部分数组特性
* 字符串也有length属性 获取字符串的长度
* 也可以通过[索引值] 取出字符串中的一个字符

 

08.21

# Object
###Object 的概念
* 对象可以看做是属性的无序集合

### 创建对象Object
* 直接量 {}
* 构造函数 new Object()

### 对象属性的操作
* 运算符  .
* 运算符 []
* 属性检测  in
* 删除属性 delete

### 方法
* 方法也是属性


### Object 遍历
* for  in
* [] 运算符

###原型

 

08.22

# 原型
### 定义
* 每一个对象都有原型
* 原型仍然是一个对象
* 模拟实现面向对象的继承性

### 原型链
* 对象的原型还有原型
* 对象除了可以使用自有属性还可以继承原型上的属性

### 获取原型
* 对象.__proto__
* 构造函数.prototype

### 操作原型的属性
* 原型本身就是对象,同操作对象

### 判断属性是自有的还是原型继承的
* hasOwnProperty()

### ECMA5中创建对象并指定对象的原型
* Object.create();



# Boolean
### 创建方式
* 直接量
* 转换函数
* 构造函数

### 属性
* constructor

### 方法
* toString()
* valueOf()  返回原始值



# Number
### 创建方式
* 直接量
* 转换函数
* 构造函数

### 属性
* Number.MAX_VALUE
* Number.MIN_VALUE

### 方法
* toFixed()   保留指定位数的小数, 默认保留整数
* toExponential()  用科学计数法形式来表示
* toString()  转为字符串。 可以把十进制转换为任意进制的字符串


# String
### 创建方式
* 直接量
* 转换函数
* 构造函数

### 属性
* length   字符串长度

### 方法
* charAt(index)   返回指定位置的字符,可以用[]运算符代替
* charCodeAt(index)  返回指定位置的字符的编码
* String.fromCharCode()  把unicode编码转换为 字符
* concat()    连接一个或多字字符串,可以被+运算符代替
* indexOf()   返回字符(串)在字符串中第一次出现的位置
* lastIndexOf()  返回字符(串)在字符串中最后一次出现的位置
* substr(start [, length])   截取字符串
* substring(start [, end])  截取字符串
* slice()    同 substring
* split()   把字符串分割成数组 根数组方式 arr.join() 相反
* toUpperCase()  把字符串转换为大写
* toLowerCase()  把字符串转换为小写
* trim()   去除字符串两边的空格
* replace()
* match()
* search()



# Date
### 创建date
* 构造函数

### 方法
* getYear()
* getFullYear()  公元纪年
* getMonth()   从0开始
* getDay()
* getDate()
* getHours()
* getMinutes()
* getSeconds()
* getMilliseconds()
* getTime()   从1970年1月1日0时0分0秒 至今的毫秒数
* getTimezoneOffset()  与标准时区的偏移量单位是分钟
* getUTC.....
* set...
* setUTC...
* toUTCStirng()


### 时间戳
* 从Unix元年至今的秒数或毫秒数
* Unix元年  1970年



# Math
### 属性
* PI   圆周率

### 方法
* abs()  求绝对值
* sqrt()  求平方根
* pow()  求几次方
* max()  求最大值
* min()   求最小值
* round()  四舍五入取整
* floor()    舍一取整
* ceil()     进一取整

 

08.23

# 定时函数
### 多次定时
* setInterval()
* clearInterval()

### 单次定时
* setTimeout()
* clearTimeout()


# Array
### 属性
* length

### 方法
* concat()
* join()
* slice()
* reverse()
* push()
* pop()
* shift()
* unshift()
* splice()
* sort()

###ECMA5 新增的方法
* forEach()
* map()
* filter()
* every()
* some()
* indexOf()
* lastIndexOf()

 

08.24

# 内置对象 Function
### 属性
* length   形参的数量

### 方法
* apply()
* call()
* bind()  ECMA5新增

 

08.25

# 正则表达式
### 定义
* 对字符串进行描述的

### 作用
* 表单验证
* 验证 邮箱/电话/邮编 ....
* WEB编辑器
* 爬虫、数据抓取、小偷程序

### 定义正则表达式
* 直接量
* 函数
* 构造函数

# 正则表达式基础
### 原子
* 正则表达式的最小组成单位
* 普通的字母、数字、符号 都是原子
* 转义字符
* 字符类

### 字符直接量(原子)
* 原子的重要组成
* 普通的字母、数字、符号
* \n
* \t
* \r
* \v
* \f
* \\
* \b  退格符
* \x00
* \u0000

### 字符类(原子)
* \d   数字    [0-9]
* \D   除了数字之外的字符   [^0-9]
* \w   数字、字母、下划线     [0-9a-zA-Z_]
* \W  除了数字、字母、下划线 之外的字符  [^0-9a-zA-Z_]
* \s   空白符     [\n\t\v\r\f ]
* \S   除了空白符之外的字母   [^\n\t\v\r\f ]
* .     除了换行外所有的字符   [^\n\r]
* [...]   
* [^...]
* [\b] 匹配退格符


### 重复(对原子的数量修饰)
* +  表示前面原子出现1次或多次  {1,}
*  ?  表示前面的原子出现0次或1次   {0,1}
*  *  表示前面的原子出现0次1次或多次  任意次  {0,}
*  {m}  前面的原子出现m次
*  {m,n} 前面的原子出现m到n次
*  {m,}   前面出现的原子个数m次以上  


### 指定匹配的位置 (对原子位置的修饰)
* \b   单词边界
* \B   不是单词边界
* ^    字符串开始边界
* $     字符串结束边界

 

 

08.28

#### 边界的修饰
* 先行断言(正向预查)   (?=)
* 负向先行断言(负向预查)  (?!) 


#### 选择修饰符
* |

#### 模式单元  ()
* 改变优先级
* 把多个原子当做一个原子
* 把模式单元匹配的内容暂存内存   (?:) 可以取消暂存内容
* 暂存内存的内容可以被反向引用



## 修饰符(模式修正符)
* i  正则表达式不区分大小写
* m  允许多行(换行被当做字符串结束符)
* g   全局匹配



# 正则的使用
### RegExp对象
* test()   true/false
* exec()   数组/null

### String对象
* search()  匹配成功(第一次满足正则的位置)  匹配失败(-1)
* match()   匹配成功(返回数组 全局匹配影响)  失败(null)  
* replace()  替换  
* split()       把字符串分割为数组

 

 

posted @ 2017-08-14 19:21  说一是二  阅读(260)  评论(0编辑  收藏  举报