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