js笔记
一、简介
JavaScript（缩写：JS）是一门完备的 动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（ Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。
JavaScript 的应用场合极其广泛。简单到幻灯片、照片库、浮动布局和响应按钮点击。复杂到游戏、2D 和 3D 动画、大型数据库驱动程序，等等。
二、js变量创建
//1、var声明变量
var age;
//2、变量的赋值
var age;
age = 18;
//3、同时声明多个变量
var age, name, sex;
age = 10;
name = 'zs';
//4、同时声明多个变量并赋值
var age = 10, name = 'zs';
三、js注释
1、单行注释
// 这是一个变量
var name = 'hm';
2、多行注释
/*注释内容*/用来注释多条代码
/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/
四、js数据类型
1、简单数据类型
Number、String、Boolean、Undefined、Null
2、Number类型
- 数值字面量：数值的固定值的表示法
110 1024 60.5
3、进制
十进制
var num = 9;
进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。
十六进制
var num = 0xA;
数字序列范围：0~9以及A~F
八进制
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
数字序列范围：0~7
如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析
4、浮点数
- 浮点数的精度问题
(1)浮点数
var n = 5e-324; // 科学计数法 5乘以10的-324次方
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);
不要判断两个浮点数是否相等
(2)数值范围
最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity
(3)数值判断
- NaN：not a number
- NaN 与任何值都不相等，包括他本身
- isNaN: is not a number
5、String类型
'abc' "abc"
(1)字符串字面量
'str1'，'str2', "str3"
(2) 转义符
(3)字符串长度
length属性用来获取字符串的长度
var str = ' Hello World';
console.log(str.length);
(4)字符串拼接
字符串拼接使用 + 连接
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
1. 两边只要有一个是字符串，那么+就是字符串拼接功能
2. 两边如果都是数字，那么就是算术功能。
6、 Boolean类型
- Boolean字面量： true和false，区分大小写
- 计算机内部存储：true为1，false为0
7、Undefined和Null
1. undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
2. null表示一个空，变量的值如果想为null，必须手动设置
8、复杂数据类型
Object
9、获取变量的类型
typeof
五、算数运算符与逻辑运算符
1、算数运算符
优先级从高到底
1. () 优先级最高
2. 一元运算符 ++ -- !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符
六、常用语句（if等）
continue和break
break:立即跳出整个循环，即循环结束，开始执行循环后面的内容（直接跳到大括号）
continue:立即跳出当前循环，继续下一次循环（跳到i++的地方）
1、if语句
if (/* 条件1 */){
// 成立执行语句
} else if (/* 条件2 */){
// 成立执行语句
} else if (/* 条件3 */){
// 成立执行语句
} else {
// 最后默认执行语句
}
2、switch语句
break可以省略，如果省略，代码会继续执行下一个case
switch (expression) {
case 常量1:
语句;
break;
case 常量2:
语句;
break;
case 常量3:
语句;
break;
…
case 常量n:
语句;
break;
default:
语句;
break;
}
3、while语句
while (循环条件) {
//循环体
}
4、do...while语句
do..while循环和while循环非常像，二者经常可以相互替代，但是do..while的特点是不管条件成不成立，都会执行一次。
do {
// 循环体;
} while (循环条件);
5、for语句
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
七、js数组Array
1、数组的概念
所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。
2、数组的定义
数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。
创建数组
// 创建一个空数组
var arr1 = [];
//创建方式二
var arr = new Array();
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4];
//方式二
var arr = new Array(1,2,3);
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c'];
// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;
3、获取数组元素
// 格式：数组名[下标] 下标又称索引
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0]; // red
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined
4、遍历数组
for(var i = 0; i < arr.length; i++) { // 数组遍历的固定结构 }
5、数组的增删改查
1、增
例子：
(1)直接使用下标赋值
// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";
(2)、push(可接收任意数量的参数，把它们逐个添加至数组末尾，并返回修改后数组的长度)
arr.push("111")
(3)、unshift（该方法与push()类似，也可接收任意数量的参数，只不过是将参数逐个添加至数组前端）
arr.unshift(100)
(4)、concat（该方法与push()方法有点类似，同样是将元素添加至数组末尾，只不过这个数组已经不是原来的那个数组了，而是其副本，所以concat()操作数组后会返回一个新的数组。）
arr.concat(11) //arr内容不变
(5)、splice（它除了可以添加元素之外还具有删除和替换元素的功能,需要传入至少3个参数： 起始位置、0（要删除的元素个数）和要添加的元素）
arr.splice(3,1,4) //添加或修改下标为3的值为4
2、删
(1)pop(该方法可从数组末尾删除最后一项并返回该项)
var arr = [1,2,3,4]
var item = arr.pop()
item //4
arr //[1,2,3]
(2)shift(该方法可删除数组第一项并返回该项)
var arr = [1,2,3,4]
var item = arr.shift()
item //1
arr //[2,3,4]
(3)slice(该方法同concat()一样是返回一个新数组，不会影响原数组，只不过slice()是用来裁剪数组的)
var arr = [1,2,3,4]
var arr2 = arr.slice(2,);
arr // [1,2,3,4]
arr2 //[3, 4]
(4)splice(删除)
var arr = [1,2,3,4]
arr.splice(2,4);
arr //[1, 2]
3、改
(1)使用下标直接改
var arr = [1,2,3,4]
arr[0] = 11
arr //[11, 2, 3, 4]
(2)splice(改)
var arr = [1,2,3,4]
arr.splice(2,1,3.1,3.2,3.3);
arr //[1, 2, 3.1, 3.2, 3.3, 4]
4、查
(1)indexOf(从数组的开头（位置0）开始向后查找,获取下标位置)
var arr = [1,2,3,4,3]
arr.indexOf(3) //2
arr.indexOf(100)// -1 当找不到该元素时，返回 -1
(2)lastIndexOf(从数组的末尾开始向前查找,获取下标)
var arr = [1,2,3,4,3]
arr.lastIndexOf(3) //4
arr.lastIndexOf(999) //-1
5、数组排序
reverse() //翻转数组
sort(); //即使是数组sort也是根据字符，从小到大排序
6、数组常用函数
(1)join函数：转换并连接数组中的所有元素为一个字符串
如：
a = new Array(0,1,2,3,4);
b = a.join("-"); //b="0-1-2-3-4"
(2)length函数：返回数组的长度
如：
a = new Array(0,1,2,3,4);
b = a.length //b=5
(3)reverse函数：将数组元素顺序颠倒
如：
a = new Array(0,1,2,3,4);
b = a.reverse(); //b = [4, 3, 2, 1, 0]
(4)sort函数：将数组元素重新排序。
如：
a = new Array("X" ,"y" ,"d", "Z", "v","m","r");
b = a.sort() //b = ["X", "Z", "d", "m", "r", "v", "y"]
(5)filter
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。(filter() 不会对空数组进行检测,不会改变原始数组。)
例子：
var arr=[1,2,3,4,5,6];
function f(n) {
return n >= 3;
}
alert(arr.filter(f)); //3,4,5,6
八、js对象
1、对象创建方式
(1)方式一
var o = {
name: 'zs',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
(2)方式二
var person = new Object();
person.name = 'lisi';
person.age = 35;
person.job = 'actor';
person.sayHi = function(){
console.log('Hello,111');
}
(3)工厂函数创建对象
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,everyBody');
}
return person;
}
var p1 = createPerson('张三', 22, 'actor');
(4)自定义构造函数
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everyBody');
}
}
var p1 = new Person('张三', 22, 'actor');
2、内置对象
JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象
JavaScript 提供多个内置对象：Math/Array/Number/String/Boolean...
对象只是带有**属性**和**方法**的特殊数据类型。
学习一个内置对象的使用，只要学会其常用的成员的使用（通过查文档学习）
可以通过MDN/W3C来查询
内置对象的方法很多，我们只需要知道内置对象提供的常用方法，使用的时候查询文档。
3、Math对象
Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供
跟数学相关的运算来找Math中的成员（求绝对值，取整）
Math.PI // 圆周率
Math.random() // 生成随机数
Math.floor()/Math.ceil() // 向下取整/向上取整
Math.round() // 取整，四舍五入
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
Math.sin()/Math.cos() // 正弦/余弦
Math.power()/Math.sqrt() // 求指数次幂/求平方根
九、js常用函数
1.常规函数
alert ：显示一个警告对话框 如：alert(1)
confirm ：显示一个确认对话框 如：confirm(2)
eval ：计算表达式的结果。 如：eval(1+2)
isNaN ：非数字是(true)数字(false) 如：isNaN('sa')
parseFloat ：将字符串转换成符点数字形式 如：parseFloat("10")
prompt ：显示一个输入对话框，提示等待用户输入。例如： prompt("1")
typeof: 返回变量的数据类型。例如：typeof('1')
search:用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
例如：
var str="123456"
str.search(/345/) //2
str.search(/7890/) //-1
2、时间函数
(1)getDate函数：返回日期的"日"部分，值为1～31。
如：
d = new Date(); //当前时间与日期
d.getDate() //当前这个月的“日”，值为1～31
(2)getDay函数：返回星期几，值为0～6，其中0表示星期日，1表示星期一，...，6表示星期六。
(3)getHouse函数：返回日期的"小时"部分，值为0～23。
(4)getMinutes函数：返回日期的"分钟"部分，值为0～59。
(5)getMonth函数：返回日期的"月"部分，值为0～11。其中0表示1月，2表示3月，...，11表示12月。
(6)getSeconds函数：返回日期的"秒"部分，值为0～59。
(7)getTime函数：返回系统时间。(时间戳)
(8)getTimezoneOffset函数：返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差)，单位为分钟。
(9)getYear函数：返回日期的"年"部分。返回值以1900年为基数，例如1999年为99。
(10)parse函数：返回从1970年1月1日零时整算起的毫秒数(当地时间)。
(11)setDate函数：设定日期的"日"部分，值为0～31。
(12)setHours函数：设定日期的"小时"部分，值为0～23。
(13)setMinutes函数：设定日期的"分钟"部分，值为0～59。
(14)setMonth函数：设定日期的"月"部分，值为0～11。其中0表示1月，...，11表示12月。
(15)setSeconds函数：设定日期的"秒"部分，值为0～59。
(16)setTime函数：设定时间。时间数值为1970年1月1日零时整算起的毫秒数。
(17)setYear函数：设定日期的"年"部分。
(18)toGMTString函数：转换日期成为字符串，为GMT格林威治标准时间。
(19)setLocaleString函数：转换日期成为字符串，为当地时间。
(20)UTC函数：返回从1970年1月1日零时整算起的毫秒数，以GMT格林威治标准时间计算。
3、数学函数
1)abs函数：即Math.abs(以下同)，返回一个数字的绝对值。
(2)acos函数：返回一个数字的反余弦值，结果为0～π弧度(radians)。
(3)asin函数：返回一个数字的反正弦值，结果为-π/2～π/2弧度。
(4)atan函数：返回一个数字的反正切值，结果为-π/2～π/2弧度。
(5)atan2函数：返回一个坐标的极坐标角度值。
(6)ceil函数：返回一个数字的最小整数值(大于或等于)。
(7)cos函数：返回一个数字的余弦值，结果为-1～1。
(8)exp函数：返回e(自然对数)的乘方值。
(9)floor函数：返回一个数字的最大整数值(小于或等于)。
(10)log函数：自然对数函数，返回一个数字的自然对数(e)值。
(11)max函数：返回两个数的最大值。
(12)min函数：返回两个数的最小值。
(13)pow函数：返回一个数字的乘方值。
(14)random函数：返回一个0～1的随机数值。
(15)round函数：返回一个数字的四舍五入值，类型是整数。
(16)sin函数：返回一个数字的正弦值，结果为-1～1。
(17)sqrt函数：返回一个数字的平方根值。
(18)tan函数：返回一个数字的正切值。
4、字符串函数
javascript字符串函数完成对字符串的字体大小、颜色、长度和查找等操作，共包括以下20个函数：
(1)anchor函数：产生一个链接点(anchor)以作超级链接用。anchor函数设定的链接点的名称，另一个函数link设定的URL地址。
(2)big函数：将字体加到一号，与...标签结果相同。
(3)blink函数：使字符串闪烁，与...标签结果相同。
(4)bold函数：使字体加粗，与...标签结果相同。
(5)charAt函数：返回字符串中指定的某个字符。
(6)fixed函数：将字体设定为固定宽度字体，与...标签结果相同。
(7)fontcolor函数：设定字体颜色，与标签结果相同。
(8)fontsize函数：设定字体大小，与标签结果相同。
(9)indexOf函数：返回字符串中第一个查找到的下标index，从左边开始查找。
(10)italics函数：使字体成为斜体字，与...标签结果相同。
(11)lastIndexOf函数：返回字符串中第一个查找到的下标index，从右边开始查找。
(12)length函数：返回字符串的长度。(不用带括号)
(13)link函数：产生一个超级链接，相当于设定的URL地址。
(14)small函数：将字体减小一号，与...标签结果相同。
(15)strike函数：在文本的中间加一条横线，与...标签结果相同。
(16)sub函数：显示字符串为下标字(subscript)。
(17)substring函数：返回字符串中指定的几个字符。
(18)sup函数：显示字符串为上标字(superscript)。
(19)toLowerCase函数：将字符串转换为小写。
(20)toUpperCase函数：将字符串转换为大写。
(22)trim函数：去掉字符串的前后空格。
十、数据类型转换
1、字符串String
1、toString
例子：
var num = 5;
num.toString();
2、String( String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。比如：undefined和null)
例子：
String(1)
3、拼接字符串方式
例子：
a=1+"xx" //a="1xx"
2、数值类型Number
1、Number (Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN)
例子：
Number("1")
2、parseInt
例子：
n = parseInt("123.aa") //n=123
n = parseInt("123.aa") //n=NaN
3、parseFloat（把字符串转换成浮点数，如果解析的内容里只有整数，解析成整数）
例子：
parseFloat("111.111") //111.111
3、布尔类型
1、Boolean（0 ''(空字符串) null undefined NaN 会转换成false 其它都会转换成true）
例子：
Boolean(1) //true
