(1) 注释
- 单行注释 //
- 多行注释 /**/
(2) 控制输出
- alert(内容) 弹出对话框
- document.write(内容) 输出到页面
- console.log(内容) 输出到控制台
(3) 命名规则(规定)
语法 var 变量名 = 数据；
- 只能是数字、字母、下划线和$
- 不能以数字开头
- 不能使用关键字和保留字
- 区分大小写
(4) 命名风格(建议) 当变量名很长的时候，尽量让名字有意义，建议使用驼峰标识。
var name = "zs";
var color = "red";
风格1 background_color class_name school_name product_title
风格2 backgroundColor className schoolName productTile 驼峰标识(建议)
数据类型
1、基本数据类型
string 字符串 "春夏秋冬"
number 数字 整型和浮点型(123 123.5)
boolean 布尔值 true / false
null 空(什么都没有)
undefined 未定义
2、复合数据类型
对象类型 函数类型 数组 集合 映射 日期 正则 ....
typeof
语法 typeof 变量 或者 typeof 数据（typeof str）
作用 检查数据的类型
注意
1、typeof null == "object" 其实这是JavaScript语言设计的一个错误
2、typeof关键字返回的是指定数据的类型,这个类型本身是字符串类型的
字符串
由0个或者是多个有序字符的组合
注意
1、字符串必须要加上引号
2、字符串有一个length属性，这个属性记录的是字符串中字符的个数(长度)
3、方法：获取字符串中指定的某个字符
[1] str[index]
[2] str.charAt(index)
4、方法：拼接
[1] +
[2] 模板字符串
[3] concat
数字类型
1、整型的数据(整数)
2、浮点型的数据(小数)
3、科学记数法 当数字特别大或者是特别小的时候，可以使用科学记数法
进制
[1] 二进制 0b 0B
[2] 八进制 0o 0O
[3] 十六进制 0x 0X
[4] 默认 十进制
NaN
全称：Not a Number 不是一个数字
什么情况变量的值会等于NaN呢？
当我们需要一个数字，但是却无法得到一个数字的时候，得到的结果就是NaN
注意
[1] NaN和任何的数进行计算得到的结果都是NaN
[2] NaN和任何数据来进行比较都不相等，包括自己
[3] 如何检查一个数据是否是NaN呢？ isNaN（数据）
类型转换
1、parseInt() 解析并且提取数字(整数)
2、parseFloat() 解析并且提取数字(浮点型)
3、toFixed(数字) 取几位小数，输出的是字符串
注意
[1] 强制类型转换
var resultA = num.toFixed(2);
var resultB = Number(resultA);
[2] 隐式类型转换
var resultC = resultA * 1;
运算符
1、算术运算符 加(+)减(-)乘(*)除(/)模(%)
2、逻辑运算符 逻辑与(&&) 逻辑或(||) 逻辑非(!)
3、条件运算符 > < == === >= <=
4、赋值运算符 += -= *= /= %=
5、三元运算符 ？：
数组的创建
1、直接字面量方式来创建数组
语法 var arr=[];
2、通过Array构造函数来进行创建
语法 var arr = new Array();
注意
1、如果通过构造函数的方式来创建数组，没有参数要传递那么()可以被省略
2、如果通过构造函数的方式来创建数组，如果仅仅传递一个数字作为参数，那么这个数字表示的是长度而非数据项
3、如果过构造函数的方式来创建数组并且传递了参数，那么new关键字可以被省略
操作数组的常用方法：
1、在数组的后面添加元素
语法 arr.push(ele1,ele2...)
2、在数组的前面添加元素
arr.unshift(ele1,ele2...)
3、删除数组中最后一个元素
arr.pop();
4、删除数组中第一个元素
arr.shift();
5、合并数组的方法
arrA.concat(arrB)
6、截取数组的方法
arr.slice(startIndex,endIndex)
注意
(1) 该方法可以只传递一个参数，表示从这个位置开始截取直到数组的末尾
(2) 如果没有传递任何参数，那么表示截取整个数组
indexOf（找指定元素的索引）
语法：arr.indexOf(item)
作用：获取数组中指定数据对应的索引(编号)
注意：如果指定的数据在数组中不存在，那么返回的结果总是为-1
indexOf 从左到右检查
lastindexOf 从右到左检查
数组的遍历
1、for
2、forEach
语法：data.forEach(function(item, index) {
console.log(index, item);
});
filter（数组的过滤）
语法：data.filter(function(item, index){}
作用：根据函数中的过滤条件来过滤数组，会把最终的结果返回（返回过滤后的数组）
数组转换为字符串
1、toString
语法：arr.toString()
作用：把数组的每个元素都连接起来组成一个完整的字符串，在链接的时候采用逗号链接
2、toLocalString
作用：同toString()一样
3、join
语法：arr.join() 或 arr.join(" ") 或 arr.join("|")
作用：把数组的每个元素都连接起来组成一个完整的字符串，在链接的时候默认采用逗号链接，否则就采用指定的字符来链接
字符串转换为数组
split
语法：str.split(" ")
作用：用于把一个字符串分割成字符串数组
map（数组的映射）
语法：data.map(function(item, index){}
作用：处理数据
splice（插入、替换、删除）
1、往数组中索引为1的位置插入一个元素，返回一个空数组
var res1 = arr.splice(1, 0, "数据");
往数组中索引为1的位置插入三个元素
arr.splice(1, 0, "数据1", "数据2", "数据3");
2、表示使用测试来替换数组中索引为1的位置的元素
arr.splice(1, 1, "测试");
3、从索引为1的位置开始删除数据，删除两个元素
arr.splice(1, 2);
从索引为2的位置开始删除数据，删除1个元素
arr.splice(2, 1);
删除操作补充
1、splice
2、delete
delete data["1"]; //[10,empty,30,40, 50]
数组的复制
1、通过循环的方式来依次拷贝数组中每个元素
arr1.forEach(function(item, index) {}
2、借助slice方法
arr.slice(startIndex,endIndex)
检查是否是数组
1、Array.isArray()
ES5+ 存在兼容性问题
2、Object.prototype.toString.call(数据) == "[object Array]"
· 通用老版本
数组中的断言函数
1、every() 所有的元素都要满足，那么就返回true
arr1.every(function(item, index) {}
2、some() 只要有一个元素满足，就返回true
arr1.some(function(item, index) {}
数组的排序
1、arr.sort()
默认sort方法如果没有传递参数，那么在排序的时候内部按照ASCII码表排序
2、 arr3.sort(function(x, y) {
return x - y;
})
小-大
3、arr3.sort(function(x, y) {
return y - x;
})
大-小
数组翻转
arr1.reverse();
简单介绍标签相关的事件
(1) onclick 点击
(2) onfocus 获得焦点
(3) onblur 失去焦点
(4) oninput 输入框的内容发生变化
(5) onmouseenter 鼠标移入
(6) onmouseleave 鼠标离开
arguments
接收函数调用时候传递过来的实际参数
arguments 本身是一个类似于数组的结构，伪(假的)数组 , 可以使用for循环来进行遍历操作
this
函数的内部还存在this,this总是指向一个对象
(1) 如果以普通的方式来调用函数，那么函数内部的this默认指向的是window xx() this->window
(2) 如果是标签的事件处理函数，那么函数内部的this默认指向的是当前的标签 oBtn.fxx() this->当前的标签
函数的name
函数的名字是不可以被修改的
函数的length属性
该函数的形参个数
字符串访问字符
1、str.charAt()
2、str.charCodeAt()
3、String.fromCharCode
indexOf
lastIndexOf
查找字符串中指定的字符，如果找到那么就返回索引，否则返回-1
字符串拼接
1、+
2、concat
3、模板字符串
字符串的切割
str.split(",");
字符串的大小写转换
str.toLowerCase() 小写
str.toUpperCase() 大写
字符串的截取
1、str.slice(startIndex,endIndex)
参数是负数
内部在处理的时候会先把负数转换成正数，负数+长度
2、str.substr(from,length)
参数是负数
因为该函数的第二个参数是长度，如果该数据<0,那么会默认被设置为0
3、str.substring(start,end)
参数是负数
该方法的参数不支持负数，如果有负数那么就默认设置为0，又因为要求第一个参数必须比第二个参数小,这里会交换两个参数的位置
字符串方法
1、repeat（） 把字符串重复N遍返回
2、trim() 清理字符串前后的空格
trimLeft()（左）、trimRight()（右）
3、replace（替换前参数，替换后参数）
方法
1、Math.abs() 绝对值
2、Math.min() 最小值
3、Math.max() 最大值
4、Math.pow(n,m) 求n的m次方 幂运算
5、Math.sqrt() 开方
6、Math.rendom() 随机数 0~1之间的数字
7、Math.ceil() 向上取整(获取的是比当前数字大的最小整数)
8、Math.floor() 向下取整(获取的是比当前数字小的最大整数)
9、Math.round() 正常进行四舍五入操作
10、Math.sin（角度 * Math.PI / 180）（弧度制）
11、Math.cos（角度 * Math.PI / 180）（弧度制）
12、Math.tan（角度 * Math.PI / 180）（弧度制）
获取当前的时间
new Date（）
星期（0-6）
月份（0-11）
// getDate: ƒ getDate()
// getDay: ƒ getDay()
// getFullYear: ƒ getFullYear()
// getHours: ƒ getHours()
// getMilliseconds: ƒ getMilliseconds()
// getMinutes: ƒ getMinutes()
// getMonth: ƒ getMonth()
// getSeconds: ƒ getSeconds()
// getTime: ƒ getTime()
// getTimezoneOffset: ƒ getTimezoneOffset()
// getUTCDate: ƒ getUTCDate()
// getUTCDay: ƒ getUTCDay()
// getUTCFullYear: ƒ getUTCFullYear()
// getUTCHours: ƒ getUTCHours()
// getUTCMilliseconds: ƒ getUTCMilliseconds()
// getUTCMinutes: ƒ getUTCMinutes()
// getUTCMonth: ƒ getUTCMonth()
// getUTCSeconds: ƒ getUTCSeconds()
// getYear: ƒ getYear()
// setDate: ƒ setDate()
// setFullYear: ƒ setFullYear()
// setHours: ƒ setHours()
// setMilliseconds: ƒ setMilliseconds()
// setMinutes: ƒ setMinutes()
// setMonth: ƒ setMonth()
// setSeconds: ƒ setSeconds()
// setTime: ƒ setTime()
// setUTCDate: ƒ setUTCDate()
// setUTCFullYear: ƒ setUTCFullYear()
// setUTCHours: ƒ setUTCHours()
// setUTCMilliseconds: ƒ setUTCMilliseconds()
// setUTCMinutes: ƒ setUTCMinutes()
// setUTCMonth: ƒ setUTCMonth()
// setUTCSeconds: ƒ setUTCSeconds()
// setYear: ƒ setYear()
// toDateString: ƒ toDateString()
// toGMTString: ƒ toUTCString()
// toISOString: ƒ toISOString()
// toJSON: ƒ toJSON()
// toLocaleDateString: ƒ toLocaleDateString()
// toLocaleString: ƒ toLocaleString()
// toLocaleTimeString: ƒ toLocaleTimeString()
// toString: ƒ toString()
// toTimeString: ƒ toTimeString()
// toUTCString: ƒ toUTCString()
// valueOf: ƒ valueOf()
/* 总结 */
/* [1] getXXX() getxxx() + getUTCxxx()获取时间*/
/* [2] setXXX() setxxx() + setUTCxxx() 设置时间 */
/* [3] toXXXXString() 转换为特定格式字符串的方法 */
定时器函数
1、setInterval()
每隔固定的时间就执行一次(循环)
2、setTimeout()
等待固定时间，等时间到了之后执行函数(倒计时)
创建对象
1、字面量方式创建对象
var o1 = {
name: "zs",
age: 19
}
2、通过构造函数方式来创建
var o2 = new Object();
对象的基本操作
[1] 点语法
[2] 中括号语法
1、添加新的键值对
o2.class = "H5";
o2["color"] = "red";
2、修改键值对
o2.class = "HTML5";
o2["color"] = "green";
3、读取操作
o2.class
o2["class"]
4、遍历
for (var key in o2) {}
注意
有些特定的情况只能使用[]语法
1、当对象的属性名是一个变量的时候，只能使用[]语法
2、当属性名字比较特殊(中间存在空格)
in
(1) for..in循环
(2) 用来检查对象中是否存在指定的键值对(属性)
语法 "属性名" in 对象 "name" in o
检查对象中是否存在对应的属性，如果存在那么就返回true,否则就返回false
注意
ES6+推出了新的写法
语法：Reflect.has(对象,"属性") Reflect.has(o, "name")
delete
语法：delete 对象["属性名"]
delete 对象.属性 delete o.id
注意 如果使用该关键字删除不存在的属性返回的是true
ES6+提供了新的方法
Reflect.deleteProperty(对象，属性)
Reflect.deleteProperty(o, "price")
BOM Browser Object Model 浏览器对象模型
(提供了JavaScript代码和浏览器窗口交互的部分)，核心对象window.
window的三种弹框
/* 001-弹出对话框,作用是提示用户 alert() */
// alert(123);
/* 002-弹出对话框，拥有取消和确定两个按钮，confirm() */
// var flag = confirm("确定要删除核按钮的密码吗？");
/* 如果点击的是确定，返回true 取消那么返回的是false */
// console.log(flag);
window的核心属性
/* 003 弹出输入框，标题 && 输入框 && 取消 && 确定*/
// var res = prompt("请输入您的昵称？");
var res = window.prompt("请输入您的昵称？", "小妖怪");
/* 确定：输入框的内容 */
/* 取消：null */
/* 建议在使用的时候加上window前缀 */
/* innerWidth|innerHeight:页面可视区域的宽度|高度 */
/* outerWidth|outerHeight:窗口区域的宽度|高度 */
/* scrollX: 水平滚动条的位置(只读)*/
/* scrollY: 垂直滚动条的位置(只读)*/
/* scrollTo(x,y) 设置让页面滚动到指定的目标位置 */
/* scrollBy(offsetX,offsetY) 设置让页面从当前位置开始滚动多少*/
/* 典型应用：吸顶效果 && 楼层效果。 */
window的open
/* window的几个方法介绍 */
/* [1] window.open("") 打开新的页面(了解),很多浏览器默认是禁用的*/
/* [2] window.close() 关闭页面 */
/* [3] window.print() 调出打印机窗口 */
window的history
/* window.history 成员，该成员本身是一个对象，在该对象中提供了前进和回退等操作。 */
console.log(window.history);
/* 默认html->baidu.com->jd.com->taobao.com */
/* window.history.go(2) 前进两个页面 | -2 后退两个页面 */
/* window.history.back() 后退 */
/* window.history.forward() 前进 */
/* window.history.length 历史记录的个数 == 4*/
window的location
/* 获取跟当前网页地址相关的信息：location */
console.log(window.location);
// hash: "" 哈希值
// host: "" 主机地址
// hostname: "" 主机地址名字
// href: 当前网页的地址(URL)
// origin: "file://" 域：协议(决定访问资源 如果是file协议表示要在当前电脑中查找，如果是HTTP表示要在互联网上查找，FTP://要在共享主机上面查找)
// pathname: 资源路径
// port: "" 端口号(默认HTTP的端口号是80 , HTTPS默认的端口号是443)
// protocol: "file:" 协议
// search: "" 查询字符串(queryString)
// replace: ƒ() 替换(加载一个新的页面以替换当前页面)
// reload: ƒ reload() 重新加载(刷新)
onload、onresize、onscroll
/* 001-window.onload 监听页面的加载，等页面加载完才会执行函数中的代码 */
/* 002-window.onresize() 监听页面大的变化，当页面大小发生变化的时候会触发该方法 */
/* 003-window.onscroll() 监听页面滚动，当页面滚动的时候触发该方法 */
原文：https://www.cnblogs.com/imbacool/p/12386492.html