内建对象
由 ES 标准中定义的对象,在任何ES的实现中都可以使用。比如:Math String Number Function…
数组
数组也是一个对象,他和普通的对象功能类似,也是用来存储一些值的。不同的是,普通对象是使用字符串作为属性名,而数组使用的是数字作为索引。
索引:从0开始的整数就是索引。
- 数组的存储性能比普通对象要好,所以在开发中经常使用数组来存储一些数据。
- 使用
typeof
检查一个数组
是会返回object
创建和使用数组
创建数组的第一种方式
var arr = new Array(); // 创建一个数组对象
创建数组的第二种方式
使用字面量来创建数组
var arr = []
可以在创建时就指定数组中的元素
var arr = [1,2,3,4,80];
// 使用字面量来创建一个数组
var arr = ["张三","李四","王五",...];
向数组中添加元素
语法:array[index] = 值;
var arr = new Array(); // 创建一个数组对象
//添加元素
arr[0] = "张三";
arr[1] = "李四";
arr[2] = "王五";
读取数组中的元素
语法: array[index]
注意: 如果读取不存在的索引,不会报错会返回 undefined
var arr = new Array(); // 创建一个数组对象
//读取数组中的元素
arr[0] = "张三";
arr[1] = "李四";
arr[2] = "王五";
console.log("数组中的第一个元素为:" + arr[0]);
console.log("数组中的第二个元素为:" + arr[1]);
console.log("数组中的第三个元素为:" + arr[2]);
console.log("数组中没有的元素:" + arr[3]); // 返回 undefined
控制台的运行结果
获取数组的长度
array.length
可以使用length 属性
来获取数组的长度(元素的个数)
-
对于连续的数组,使用
length
可以获取到数组的长度(元素的个数) -
对于非连续的数组,使用
length
会获取到数组的最大的索引 +1,尽量不要创建非连续性的数组。 -
如果修改的
length
大于原长度,则多出的部分会空出来。 -
如果修改的
length
小于原长度,则多出的元素会被删除。 -
向数组的最后一个位置添加元素。
array[array.length] = 10;
// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("数组的长度为:" + nameList.length); // 输出数组的长度
控制台的运行结果
遍历数组
所谓的遍历数组就是将数组中的所有的元素都取出来。
// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
//使用 for 循环来遍历数组
for(var i = 0;i < nameList.length;i++){
console.log("数组中的第 "+ i +"个值为:" + nameList[i]);
}
控制台的运行结果
数组中的方法
push()
该方法可以向数组的末尾添加一个或多个元素,并返回数组新的长度
可以将要添加的元素作为方法的参数传递,这样这些元素就会自动添加到数组的末尾
// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("数组的长度为 :" + nameList.length); // 输出数组的长度
console.log("原数组:" + nameList); // 输出原数组
var newLength = nameList.push("白骨精"); //返回数组新的长度,用一个变量来接收这个值
console.log("数组的新长度为 :" + newLength); // 输出数组的新长度
console.log("新数组:" + nameList); // 输出新数组
控制台的运行结果
pop()
该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("原数组:" + nameList); // 输出原数组
var deleteValue = nameList.pop(); //删除数组的最后一个元素
console.log("删除的元素为 :" + deleteValue); // 输出删除的元素
console.log("新数组:" + nameList); // 输出新数组
控制台的运行结果
unshift()
向数组的开头添加一个或多个元素,并返回数组新的长度,向前边插入元素以后,其他的元素索引会依次调整。
// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("数组的长度为 :" + nameList.length); // 输出数组的长度
console.log("原数组:" + nameList); // 输出原数组
var newLength = nameList.unshift("观音菩萨","如来佛祖"); //返回数组新的长度,用一个变量来接收这个值
console.log("数组的新长度为 :" + newLength); // 输出数组的新长度
console.log("新数组:" + nameList); // 输出新数组
运行结果
shift()
可以删除数组的第一个元素,并将删除的元素作为返回值返回。
// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("原数组:" + nameList); // 输出原数组
var deleteValue = nameList.shift(); //删除数组的第一个元素
console.log("删除的元素为 :" + deleteValue); // 输出删除的元素
console.log("新数组:" + nameList); // 输出新数组
运行结果,感觉干掉大师兄有点 emm…
slice()
可以用来在数组中提取指定的元素
需要两个参数
- 第一个参数表示截取开始的位置的索引(含左不含右)
- 第二个参数表示截取结束的位置的索引
第二个参数可以省略不写,此时会截取从开始索引往后的所有元素。 - 索引可以传递一个负值,如果传递一个负值,则从后往前计算。
- 该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回
var arr = ["孙悟空","猪八戒","沙和尚","唐僧"];
var newArr = arr.slice(0,3); // 把徒弟们都提出来,返回一个新的数组,所以定义一个新的变量来接收这个值
console.log(newArr);
运行结果
splice
可以用于删除数组中的指定元素
参数:
- 第一个参数表示开始位置的索引
- 第二个参数表示删除的数量
- 第三个及以后的参数可以传递一些新的元素,这些元素将会插入到开始位置索引的前边。
注意: 使用 splice
会影响到元素组,会将指定元素从原数组中删除,并将被删除的元素作为返回值返回。
// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("原数组:" + nameList); // 输出原数组
var deleteValue = nameList.splice(1,1); //从索引1的位置开始删除,删除1个
console.log("删除的元素为 :" + deleteValue); // 输出删除的元素
console.log("新数组:" + nameList); // 输出新数组
运行结果
指定第三个参数
// 创建一个数组
var nameList = ["孙悟空","猪八戒","沙和尚","唐僧"];
console.log("原数组:" + nameList); // 输出原数组
var deleteValue = nameList.splice(1,1,"红孩儿"); //删除 猪八戒,并将 红孩儿 添加到猪八戒的那个位置。
console.log("删除的元素为 :" + deleteValue); // 输出删除的元素
console.log("新数组:" + nameList); // 输出新数组
运行结果
concat()
可以连接两个或多个数组,并将新的数组返回
该方法不会对 原数组
产生影响
var arr = ["孙悟空","猪八戒"];
var arr2 = ["唐僧","沙和尚"];
var newArr = arr.concat(arr2); // 连接两个数组
console.log("新数组为:" + newArr);
运行结果
join()
该方法可以将数组转换为一个字符串
该方法也不会对原数组产生影响,而是将转换后的字符串作为结果返回。
在 join
中可以指定一个字符串作为参数,该字符串将会成为数组中元素的连接符。如果不指定链接符,则默认使用,
作为链接符。
var arr = ["孙悟空","猪八戒","沙和尚","唐僧"]; // 创建一个数组
var result = arr.join(); // 返回一个字符串,不指定分隔符则默认使用 , 分隔
console.log(typeof result); // 检查一下数据类型
console.log(result); // 返回的结果
var result1 = arr.join("-"); // 返回一个字符串,指定用 - 分隔
console.log(typeof result); // 检查一下数据类型
console.log(result1); // 返回的结果
运行结果
reverse()
该方法用来反转数组,该方法会直接修改原数组。
var arr = [1,2,3,4,5]; // 创建一个数组
console.log("原数组为:" + arr); // 输出原数组
console.log("反转后:" + arr.reverse()); // 反转数组
运行结果
sore()
可以对数组中的元素进行排序,默认会按照
Unicode
编码进行排序。该方法也会直接修改原数组
即使对于纯数字的数组,使用 sort()
方法也会根据 Unicode 编码
进行排序。所以对数字进行排序时,也可能会得到一个错误的结果。
自定义排序规则
我们可以在 sort 中添加一个回调函数,来指定排序规则。
回调函数中需要定义两个形参。
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素去调用不确定,肯定的是 在数组中,第一个参数一定在第二个参数前边。
浏览器会根据回调函数的返回值来决定元素的顺序,如果返回一个大于 0 的值,则元素会交换位置。
如果返回一个小于 0 的值,则元素的位置不变。
如果返回 0 则认为两个元素相等,也不交换位置。
如果需要升序排列,则返回 a-b
如果需要降序排列 则返回b-a
sort(function(a,b){
return a - b; // 升序排序
});
sort(function(a,b){
return b - a; // 降序排序
});
Date (日期时间对象)
在 JS 中,使用 Date 对象来表示一个时间
创建 Date 对象
使用构造函数创建
如果直接使用构造函数来创建一个 Date
对象,则封装称为当前代码执行的时间。
var d1 = new Date(); // 使用构造函数来创建一个 Date 对象
console.log(d1); // 输出当前的时间对象
运行结果
创建一个指定的对象
需要在构造函数中传递一个表示时间的字符串当做参数。
// 日期的格式:月/日/年 时:分:秒
var d2 = new Date("06/03/2016 16:28:30");
console.log(d2); // 输出时间对象
运行结果
Date 对象的一些常用方法
getDate()
获取当前日期对象是 几号
// 创建一个时间对象 2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取几号
var n = d2.getDate();
console.log("那天是:" + n + "号!");
运行结果
getDay()
获取当前日期对象是 周几
会返回一个 0-6 的值 0 表示周日,1 表示周一
// 创建一个时间对象 2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取周几
var day = d2.getDay();
console.log("那天是周:" + day);
运行结果
getMonth()
可以获取当前时间对象的月份,返回 0-11 之间的值 0 表示 1月,1 表示2月。
// 创建一个时间对象 2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取月份
var month = d2.getMonth();
console.log(month + 1 + "月!"); // 获取到月份 + 1 才是中国的月份!
运行结果
getFullYear()
获取当前日期对象的年份
// 创建一个时间对象 2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取年份
var year = d2.getFullYear();
console.log("今年是 " + year + "年");
getTime()
获取当前日期对象的时间戳
时间戳指的是从格林威治标准时间的1970年1月1日0时0分0秒到当前日期所花费的毫秒数。1秒 = 1000 毫秒
// 创建一个时间对象 2016年06月03日 16:28:30
var d2 = new Date("06/03/2016 16:28:30");
// 获取年份
var time = d2.getTime();
console.log("从1970年到当前日期对象的时间戳为:" + time);
运行结果
// 获取当前的 1970 年到当前的一个时间戳
var time = Date.now();
console.log("当前的时间戳为:" + time);
运行结果
Math
Math 和其他的对象不同,不是一个构造函数,属于一个工具类,它里边封装了数学运算的属性和方法。
Math.PI
表示圆周率
//定义一个函数,返回圆的面积
// r :表示半径
function area(r){
return Math.PI * r * r;
};
//调用这个函数
var result = area(3); //计算半径为 3 的园的面积
console.log("圆的面积为 : " + result);
运行结果
abs()
可以用来计算一个数的绝对值
var result = Math.abs(1); // 计算 1 的绝对值
console.log("绝对值为:" + resiult );
运行结果
ceil()
可以对一个数进行向上取整,小数位只要有值,就自动向上进1
var a = 5.2;
console.log("原值为:" + a);
console.log("向上取整后为:" + Math.ceil(a));
运行结果
floor()
可以对一个数进行向下取整,小数部分会别省掉。
var a = 5.99;
console.log("原值为:" + a);
console.log("向上取整后为:" + Math.floor(a));
运行结果
round()
可以对一个数进行四舍五入取整
var a = 5.5; // 6
var b = 5.4; // 5
console.log("原值: a = " + a +",b = " + b);
console.log("四舍五入后: a = " + Math.round(a) +",b = " + Math.round(b));
运行结果
random()
可以生成一个 0 ~ 1
之间的随机数(不会出现 0,也不会出现 1)
// 生成 10 个 0~1 之间的随机数
for(var i = 0;i < 9;i++){
console.log(Math.random());
}
运行结果
// 生成 0~x 之间的随机数
Math.round(Math.random() * x);
// 生成 x~y 之间的随机数
Math.round(Math.random() * (y - x)) + x;
max()
可以获取多个数之间的最大值
// 定义一个函数,返回数组中最大的值
function max(arr){
// 定义一个临时变量,存放最大值
var max = arr[0]; //假设数组的第一个元素是最大值
for(var i = 0;i < arr.length;i++){
if(arr[i] > max){ // 如果 arr[i] 的值大于最大值,则他就是最大最
max = arr[i];
}
}
return max; // 返回最大值
};
// 创建一个数组
var arr = [32,44,32,12,80,64];
//调用函数,返回最大值,用 result 接收
var result = max(arr);
console.log("数组中的最大值为:" + result);
运行结果
min()
可以获取多个数中的最小值
// 定义一个函数,返回数组中最小的值
function max(arr){
// 定义一个临时变量,存放最小值
var min = arr[0]; // 假设数组的第一个元素是最小值
for(var i = 0;i < arr.length;i++){
if(arr[i] < min){
min = arr[i];
}
}
return min; // 返回最小值
};
// 创建一个数组
var arr = [32,44,32,12,80,64];
//调用函数,返回最小值,用 result 接收
var result = min(arr);
console.log("数组中的最大值为:" + result);
运行结果
pow()
pow(x,y) 可以返回 x 的y次方(次幂)
// 输出 2 的三次方
console.log("2 的三次方为:" + Math.pow(2,3));
运行结果
sqrt()
对一个数进行开方运算
// 36 的开方
console.log("36 的开方为:" + Math.sqrt(36));
运行结果
包装类
在JS 中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为 对象
- String() 可以将一个基本数据类型的字符串,转换为对象。
- Number() 可以将一个基本数据类型的数值,转换为一个 Number 对象
- Boolean() 可以将一个基本数据类型的 boolean 转换为 Boolean 对象
注意: 在实际应用中不会使用基本数据类型的对象。
如果使用基本数据类型的对象做一些比较的时候,可能就会有一些不可预期的结果。
字符串的属性和方法
length 属性
可以获取字符串的长度
var str = "hello,this is a String.";
var length = str.length; // 获取字符串的长度,并存放到变量 length 里
console.log("字符串的长度为:" + length);
运行结果
charAt()
可以返回字符串中指定位置的字符(根据索引获取指定的字符)
索引从 0 开始
var str = "hello,this is a String.";
var result = str.charAt(6); // t
console.log("第 6 个字符为:" + result);
运行结果
charCodeAt()
获取指定位置字符的字符编码(Unicode 编码)
var str = "hello,this is a String.";
var result = str.charCodeAt(6); // 116
console.log("第 6 个字符Unicode编码为:" + result);
运行结果
fromCharCode()
可以根据字符编码获取字符(Unicode)
console.log(String.fromCharCode("116"));
运行结果
concat()
可以连接两个或多个字符串
var str = "我是第一个字符串";
console.log(str.concat("我是第二个字符串"));
运行结果
indexOf()
该方法可以检索一个字符串中是否含有指定的内容
- 如果字符串中含有该内容,则会返回其第一次出现的索引
- 如果没有找到指定的内容则返回 -1
- indexof()可以接收 的第二个参数,指定开始查找的位置。
var str = "hello,this is a String.";
console.log(str.indexOf("is")); // 8
运行结果
lastIndexOf()
该方法的作用和 indexof()
一样,不同的是 indexof
是从前往后找,而lastIndexof
是从后往前找。
同样也可以指定开始查找的位置。
var str = "hello,this is a String.";
console.log(str.lastIndexOf("is")); // 11
运行结果
slice()
可以从字符串中截取指定的内容,不会影响原字符串,而是将截取的内容返回。
参数:
- 开始位置的索引(包括开始位置)
- 结束位置的索引(不包括结束的位置)
第二个参数可以省略,如果省略,则会截取后边所有的值。 - 也可以传递一个负数作为参数 - 1, 表示倒数第一个
var str = "hello,this is a String.";
var result = str.slice(6,); // 从第 6 个字符开始截取到最后
console.log(result);
运行结果
substring()
可以用来截取一个字符串,和slice()
类似
也是有3个参数
- 表示开始位置的索引(包括开始位置)
- 表示结束位置的索引(不包扩结束位置)
- 而且会自动调整参数的位置,如果第二个参数小于第二个,则自动交换位置
注意: 但是和slice()
不同的是,这个方法不能传递一个复制作为参数,如果传递了一个负值,则默认使用 0
var str = "hello,this is a String.";
var result = str.substring(6,); // 从第 6 个字符开始截取到最后
console.log(result);
控制台运行结果
splite()
可以将一个字符串拆分为数组。
需要一个字符串作为一个参数,将会根据该字符串进行拆分数组。
如果参数是一个 “” 则会将每个字符都拆分为数组中的元素。
var str = "大家好,我是孙悟空";
var arr = str.split("");
console.log(arr.length); // 输出数组的长度
// 遍历数组
for(var i = 0;i < arr.length;i++){
console.log(arr[i]);
}
toUpperCase()
和 toLowerCase()
toUpperCase() 一个字符串转换为大写并返回。
toLowerCase() 一个字符串转换为小写并返回。
var str1 = "ABCDEFG";
var str2 = "abcdefg";
console.log(str1.toLowerCase());
console.log(str2.toUpperCase());
运行结果
正则表达式
正则表达式用于定义一些字符串的规则。计算机可以根据正则表达式来检查一个字符串是否符合规则,或者将字符串中符合规则的内容提取出来。
创建和使用正则表达式
使用构造方法创建正则表达式的对象
使用 typeof
检查正则对象会返回 object
在构造函数中可以传递一个“匹配模式”当做第二个参数,可以是 i,可以是 g
i 表示忽略大小写
g 表示全局匹配模式
语法:
var 变量 = new RegExp("正则表达式","匹配模式");
// 创建一个正则表达式的对象
var reg = new RegExp();
console.log(typeof reg); //检查一下 数据类型
使用字面量创建正则表达式
语法: var 变量 = /正则表达式/匹配模式
// 使用字面量创建一个正则表达式
var reg = /abc/i;
正则表达式的测试方法
test()
使用这个方法可以用来检查字符串是否符合正则表达式的规则,如果符合则返回 true
否则返回false
var str = "this is a regExp";
// 创建一个 正则表达式,匹配是否含有字母 a
var reg = /a/;
console.log(reg.test(str));
var str = "this is a regExp";
// 创建一个 正则表达式,匹配是否含有字母 a
var reg = /ccc/;
console.log(reg.test(str));
正则表达式的语法
使用|
表示或者的意思
[]
里边的内容也是 或的关系
[a-z]
表示任意的小写字母
[A-Z]
表示任意的大写字母
[A-z]
表示任意字母
[^ ]
除了
[0-9]
表示任意数字
字符串和正则相关的方法
split()
可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数,这样方法就会根据正则表达式去拆分字符串。
例如: split(/[A-z]/);
这个方法即使不指定全局匹配,也会全部拆分。
var str = "大家好a,我是b孙悟空C,大家都叫d我E齐天大圣";
var arr = str.split(/[a-z]/i); // 按照字母拆分字符串,i 表示不区分大小写
console.log(arr.length);
// 遍历数组
for(var i = 0;i < arr.length;i++){
console.log(arr[i]);
}
运行结果
search()
可以搜索字符串中是否含有指定内容
- 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到,则返回-1
- 可以接受一个正则表达式作为一个参数,然后根据正则表达式来检索字符串。
- 只会查找第一个,即使设置全局匹配也没有用。
var str = "大家好,我是孙悟空,大家都叫我齐天大圣孙悟空.";
var result = str.search(/孙悟空/); // 匹配孙悟空
console.log("索引为:" + result);
运行结果
match()
可以根据正则表达式从一个字符串中将符合条件的 内容提取出来。
默认情况下mathc()
只会找到第一个符合条件的内容,找到以后就停止检索,我们可以设置正则表达式为 全局匹配模式,这样就会匹配到所有的内容。
可以为一个正则表达式设置为多个匹配模式,且顺序无所谓。 (gi / ig)
var str = "1c2b3C4d5E6f7g8H9i";
var result = str.match(/[a-z]/ig); // 提取所有的字母 , 不区分大小写,全局匹配
console.log("str: " + str);
console.log("result: " + result);
运行结果
replace()
可以将字符串的指定内容替换为新的内容。
需要两个参数
第一个参数表示被替换的内容,可以接受一个正则表达式
第二个参数表示新的内容
默认只会替换第一个,如果需要全部替换则需要指定 g
全局匹配。
var str = "大家好,我是孙悟空,大家都叫我孙悟空";
var result = str.replace(/孙悟空/g,"唐僧"); // 把孙悟空 替换成 唐僧
console.log("结果为:" + result);
运行结果
量词
通过量词可以设置一个内容出现的次数,量词只对前边的一个内容起作用
/a/
出现一次
/a{3}/ {n}
正好出现 n 次
{m,n}
出现 m 到 n 次
{m,}
m次以上
+
至少一个,相当于{1,}
*
0个或多个,相当于{0,}
?
0个或1个,相当于{0,1}
^
表示开头 (^a
表示以a开头)
$
表示结尾 (a$
表示以a结尾)
如果在一个字符串中同时使用 ^ $
则要求字符串完全符合正则表达式。
.
表示任意字符
在正则表达式中使用/
表示转义字符
\.
表示 .
\\
表示 \
注意:使用构造函数时,由于参数是一个字符串,而 \ 是字符串的转义字符,如果要使用 \ 则需要使用 \
\w
表示任意字母数字和_
(相当于[A-z0-9_]
)
\W
表示任意除了字母数字和_
(相当于 [A-z0-9_]
)
\s
表示空格
\S
除了空格
\b
单词边界 (独立的单词)
\B
除了单词边界
\d
表示任意数字 (相当于 [0-9]
)
\D
除了数字 (相当于[^0-9]
)