js

一.JS三个组成部分

• ES: ECMAScript语法
• DOM: document对象模型 = >通过js代码与页面文档(出现在body中的所有可视化标签)
• BOM: borwser对象模型 => 通过js代码与浏览器自带功能进行交互

二.引入方式

• 行间式

出现在标签中的全局事件属性中
this代表该标签, 可以访问全局属性, 再访问具体操作对象(eg: this.style.color = "red")

• 内联式

出现在script脚本标签中
可以通过标签的id唯一标识,在js代码块中操作页面标签
js采用的是小驼峰命名规范, 属于解释性语言(由上至下依次解释执行)

• 外联式

通过script标签的src属性链接外部js文件, 链接后, script标签本身内部的js代码块将会被屏蔽
在任何位置都可以使用this对象,当this对象不指向任意一个标签时,代表的是window对象

• js具体出现的位置

head标签的底部: 依赖性js库
body标签的底部(body与html结束标签的之间): 功能性js脚本

三.变量的定义

四种定义变量的方式
语法: 关键词 变量名 = 变量值

num = 10; // 省略关键词, 定义的为全局变量, 在任何位置定义, 在任何位置都可以访问, 但不建议使用
var num = 10; // var关键词, 无块级作用域, 定义在块级作用域中的变量, 外界也可以访问
let num = 20; // let关键词, 有块级作用域, 定义在块级作用域中的变量, 外界无法访问
const NUM = 30; // const关键词,有块级作用域, 定义在块级作用域中的变量, 外界无法访问, 且变量的值不能再被二次修改, 所以为常量

/* 产生块级作用域的方式
{
    直接书写
}
if语句可以产生
while语句可以产生
for语句也可以产生
*/

// 函数可以产生局部作用域, 除了定义在局部作用域中的全局变量(没有关键字的变量声明), 外界可以访问, 其他定义方式, 外界都不可以访问

// ES5 | ES6
// 是ECMAScript两个语法版本, ES6是ES5之后的一个版本, 但是对ES5向下兼容, ES6中支持ES5语法

// 命名规范
// 变量命名规范
// 可以由哪些组成: 字母, 数字, _, $, 中文(一般不考虑)
// 可以以什么开头: 字母, _, $, 中文
// 不能出现什么: 关键字, 保留字
// 提倡什么书写规范: 小驼峰, 支持_连接语法
好的 = "真好";
console.log(好的);

四.三种弹出框

// 普通弹出框
// alert("你丫真帅!!!");

// 输入框: 以字符串形式接收用户输入内容
// var info = prompt("请输入内容:");
// console.log(info)

// 确认框: 根据用户选择确认或取消, 得到 true | false 两个布尔结果
// var res = confirm("你是猪吗?");
// console.log(res)

五.数据类型

// 值类型
var a = 10;  // Number 10
var a = 'abc';  // String abc
var a = true;  // Boolean true
var a = undefined  // undefined undefined
// 引用类型
var a = function(){}  // function f(){}
var a = {}  // Object {}
var a = null  // Null null

// 其他Object具体体现
Array | Date | RegExp

六.值类型的类型转换

// 1.通过类型声明转换
Number() | String() | Boolean()

// 2.方法(函数)
parseInt('10') | parseFloat('3.14')
123..toString()

// 3.隐式转换
+'10' => 10
'' + 10 => '10'

JS常用类

一、Number

1、常用数字

整数：10
小数：3.14
科学计数法：1e5 | 1e-5
正负无穷：Infinity | -Infinity

2、常用进制

二进制：0b1010
八进制：012
十进制：10
十六进制：0xA

3、NaN

非数字类型，通过isNaN()进行判断

4、常用常量

最大值：MAX_VALUE(1.7976931348623157e+308)
最小值：MIN_VALUE(5e-324)
正负无穷：NEGATIVE_INFINITY | POSITIVE_INFINITY(Infinity | -Infinity)

5、常用实例方法

toExponential(n) => 3.14.toExponential(1) => 1.3e+1 (先科学记数，再确定精度，n为小数精度)
toFixed(n) => 3.14.toFixed(1) => 3.1 (先确定精度，再普通记数，n为小数精度)
toPrecision(n) => 13.14.toPrecision(1|2) => 1e+1|13 (先确定精度，再记数，n为位数进度)
toString() => 

v-hint：经典bug数字13.145

二、时间

1、创建并获取时间

var date = new Date();

2、时间戳

date.getTime();

3、获取时间

年：date.getFullYear()
月：date.getMonth() + 1
日：date.getDate()
星期：date.getDay()
小时：date.getHours()
分钟：date.getMinutes()
秒：date.getSeconds()
毫秒：date.getMilliseconds()

4、常见格式时间

getUTCFullYear()
getUTCDate()
getUTCHours()

三、字符串

1、常用字符串

'string' | "string" | 'my name is "zero"' | "I'm boy" | "I \"love\" you"

2、常用属性

length：字符串长度

3、常用方法

chartAt(n)：指定索引字符，同[n]
concat(str)：将目标字符串拼接到指定字符串之后
indexOf(str)：指定字符串第一次出现的位置
lastIndexOf(str)：指定字符串最一次出现的位置
replace(re, str)：将正则匹配到的字符串替换为指定字符串
substr(n, m)：从索引n开始，截取m个字符长度(m省略代表截取到最后)
substring(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后)
slice(n, m)：同substring(n, m)
split(re)：以指定正则将字符串拆分为数组
toUpperCase()：转换为大写
toLowerCase()：转换为小写
trim()：去除首尾空白字符

四、数组

1、常见数组

[1, 2, 3] | ['1', '2', '3'] | [1, '2', true]

2、常用属性

length：数组元素个数

3、常用基础方法

concat(arr)：将目标数组拼接到指定数组之后
indexOf(ele)：指定元素第一次出现的位置
lastIndexOf(ele)：指定元素最一次出现的位置
reverse()：反转数组
includes(ele, n)：从索引n开始往后，元素ele是否在数组中，做全等匹配，索引从头开始n可以省略(in只做值匹配)
fill(ele)：以指定元素填充整个数组
slice(n, m)：从索引n开始，截取到索引m(m省略代表截取到最后)
join(str)：以指定字符串连接成字符串

4、增删改方法

push(ele)：从尾加
unshift(ele)：从头加

pop()：从尾删
shift()：从头删

splice(begin, length, ...eles)：完成增删改
// begin开始索引
// length长度
// 新元素们(可以省略)

5、回调函数方法

filter(function(value, index){ return true | false})：过滤器
every(function(value, index){ return 条件表达式; })：全部满足条件
some(function(value, index){ return 条件表达式; })：部分满足条件
reduce(function(prev,value,index){ return prev * value; })：累积
sort(function(o, n){ return o > n })：正逆向排序

五、Math

1、常用常量

E：返回算术常量 e，即自然对数的底数（约等于2.718）
LN2：返回 2 的自然对数（约等于0.693）
LN10：返回 10 的自然对数（约等于2.302）
LOG2E：返回以 2 为底的 e 的对数（约等于 1.4426950408889634）
LOG10E：返回以 10 为底的 e 的对数（约等于0.434）
PI：返回圆周率（约等于3.14159）

2、常用方法

abs(x)：返回 x 的绝对值
ceil(x)：向上取整
floor(x)：向下取整
max(...n)：求最大值
min(...n)：求最小值
pow(x,y)：返回 x 的 y 次幂
random()：返回 0 ~ 1 之间的随机数
round(x)：四舍五入

六、正则

1、正则对象

// 构造函数
var re = new RegExp('^\\w', 'igm');
// 字面量
var re = /^\w/igm;

2、修饰符

i：不区分大小写
g：全文匹配
m：多行匹配

3、正则方法

test()：匹配目标字符串，结果为true|false
exec()：匹配目标字符串，结果为第一条结果所有信息的数组

4、字符串方法

match(re)：匹配指定正则，结果为数组(可全文匹配)
search(re)：匹配指定正则，结果为匹配的索引，反之-1
replace(re, newStr)：匹配指定正则，替换匹配的结果(可全文匹配)
split(re, n)：按正则进行拆分，n的值可以决定结果的数组长度(可选参数)