慕课前端入门-js内置对象
1. 数组
js数组特点:
- 可以保存各种类型的元素
- 同一个数组,元素类型可以不同
- 数组的大小,是可以动态调整的
1.1 创建数组
创建数组的基本方式有2种:
- 使用Array构造函数 new Array()
说明:
1.预先知道数组要保存的元素数量
2.向Array构造函数中传递数组应包含的元素
var colors = new Array(3);//指定数组长度
var nums = new Array(1,3,6,9);//指定元素
- 使用数组字面量表示法
由一对包含数组元素的方括号[] 表示,多个元素之间用逗号隔开
var colors = ["red", "yellow", "green"];
1.2 数组元素的读写
读取和设置值时,使用方括号[]并提供相应的索引
说明:索引是从0开始的正整数
array[index]=value
1.3 数组长度length
//说明通过设置length可以从数组的末尾移除元素或向数组中添加元素,不建议这样使用
var arr = ["a","b","c","d"];
console.log(arr.length);//3
//当把一个值放在超出当前数组大小的位置上时,会重新计算数组长度值,长度值等于最后一个元素的索引+1
arr[99]="z"
arr.length;//100
1.4 数组的栈方法
方法 | 说明 | 示例 |
---|---|---|
push | 语法:arrayObject.push(el1, el2...); 功能:向数组中追加元素 返回值:操作后,数组的长度 | var color = ["green", "yellow"]; |
unthift | 语法:arrayObject.unshift(el1, el2...); 功能:把它的参数顺序添加到数组的开头 返回值:操作后,数组的长度 | |
pop | 语法:arrayObject.pop() 功能:删除数组的最后一个元素 返回值:被删除的那个元素 | |
shift | 语法:arrayObject.shift() 功能:删除数组的第一个元素 返回值:被删除的那个元素 | |
join | 语法:arrayObject.join(separator) 功能:用于把数组中的所有元素合并为一个字符串 返回值:字符串 | |
reverse | 语法:arrayObject.reverse() 功能:将数组中元素的反序 返回值:数组 | |
sort | 语法:arrayObject.sort(sortby) 功能:用于对数组的元素进行排序 返回值:数组 说明:
| |
cancat | 语法:arrayObject.concat(arrayX,arrayX...); 功能:用于连接两个或多个数组 返回值:数组 | var arr1=['a','b','c'],arr2=[1,2,3]; |
slice切片 | 语法:arrayObject.slice(start,end) 功能:从已有的数组中返回特定的元素 参数:
| var arr = "hello world".split(""); |
splice | 语法:arrayObject.splice(index, count, el1, el2...) 功能:删除、替换、插入 参数:
|
var arr = "abcdefghijk".split(""); |
index() lastIndexOf() | 语法:arrayObject.indexOf(searchValue, startIndex) 功能:指定位置开始查找 参数:
arrayObject.lastIndexOf(searchValue,startIndex)与indexOf相反 | var nums = [1,7,5,7,8,1,6,9]; |
1.5 示例,如何复制一个数组
var arr = "hello world".split(""),newArr=[];
//方法1
for(var i=0;i<arr.length;i++){
newArr.push(arr[i]);
}
console.log(newArr);
//方法2
newArr=[].concat(arr);
console.log(newArr);
//方法3
newArr = arr.slice(0);
console.log(newArr);
1.6 封装一个方法实现indexOf的功能
function ArrayIndexOf(arr, value){
//检测value在arr中出现的位置
for(var i=0;i<arr.length;i++){
if(arr[i]===value){
//此处使用全等操作符,即要求查找的元素必须和值完全相等
return i;
}
}
return -1;
}
2. String
方法 | 说明 | 示例 |
---|---|---|
charAt | 语法:stringObject.charAt(index); 功能:返回字符串中指定位置的字符;没有结果,返回空字符串 说明:ECMAScript5中可用[index]来访问字符串中特定的字符,但是IE7及更早的浏览器会返回undefined | var a = "hello world"; |
charCodeAt | 语法:stringObject.charCodeAt(index); 功能:返回字符串中指定位置的字符编码 |
|
indexOf | 语法:stringObject.indexOf("or") 功能:返回子串在字符串中第一次出现的位置;没有找到,返回-1 |
|
lastIndexOf | 语法:stringObject.lastIndexOf("or") 功能:返回子串在字符串中最后一次出现的位置;没有找到返回-1 |
|
slice | 语法:stringObject.slice(start, end) 功能:截取字符串 参数:
说明
|
|
substring | 语法同slice 区别:
|
|
substr | 语法:stringObject.substr(start, len); 功能:截取字符串 参数说明:
|
|
split | 语法:stringObject.split(separator) 功能:把一个字符串分割成字符串数组 返回值:Array |
|
replace | 语法:stringObject.replace(regexp/substr, replacement) 功能:替换 返回值:string 参数:
|
|
toUpperCase | 语法:stringObject.toUpperCase() 功能:把字符串转换为大写 |
|
toLowerCase | 语法:stringObject.toLowerCase() 功能:把字符串转换为小写 |
2.1 示例:获取文件名后缀
function getFileFormat(fileName) {
// body...
var pos = fileName.lastIndexOf(".")+1;
return fileName.slice(pos);
}
console.log(getFileFormat("test.sh")); //sh
2.2 示例:将下划线替换为驼峰
function getHumpName(str){
var arr = str.split("_");
var result = arr[0];
for(var i=1;i<arr.length;i++){
result += arr[i].slice(0,1).toUpperCase()+arr[i].slice(1);
}
return result;
}
console.log(getHumpName("back_left_border")); //backLeftBorder
3. Math
方法 | 说明 | 示例 |
---|---|---|
min | 语法:Math.min(num1,num2...) 功能:返回一组数中的最小值 说明:只要这组数中出现一个非数字,就返回NaN |
console.log(Math.min(1,2,5,6,0));//0 |
max | 语法:Math.max(num1,num2...) 功能:返回一组数中的最大值 |
|
ceil | 语法:Math.ceil(num) 功能:向上取整,即返回大于num的最小整数 |
|
floor | 语法:Math.floor(num) 功能:向下取整,返回num的整数部分 |
|
round | 语法:Math.round(num) 功能:将数值四舍五入为最接近的整数 |
|
abs | 语法:Math.abs(num) 功能:返回num的绝对值 |
|
random | 语法:Math.random() 功能:返回[0,1)之间的一个随机数 |
3.1 示例
利用random,取固定区间的随机整数
//公式:random = Math.floor( Math.random() * (m-n+1) + n );
function getRandom(n,m){
var choise = m -n + 1;
return Math.floor(Math.random() * choise + n);
}
var random1 = getRandom(2,6);
console.log(random1)
4. Date
4.1 创建Date对象
- new Date
- new Date(year, month, day, hours, minutes, seconds, milliseconds) year和month必需;一个参数会将毫秒数处理
- new Date(millisecond)
- new Date(string)
var day1 = new Date();
var day2 = new Date(2020,8,5,17,56,32,0);
var day3 = new Date(1234567890);
var day4 = new Date("2020-08-17 12:56:17");
4.2 获取和设置Date
获取 | 设置 | 示例 |
---|---|---|
getFullYear()获取年份 | setFullYear(year)设置年份 | function toDate(dateObject){ |
getMonth()获取月份0-11 | setMonth(mon)设置月份 | |
getDate()获取月份中的某一天 | setDate()设置日期 | |
getDay()返回周几,0-6 | setDay()设置周几 | |
getHours()获取小时 | setHours()设置小时 | |
getMinutes()获取分 | setMinutes()设置分 | |
getSeconds()获取秒 | setSeconds()设置秒 | |
getTime()获取毫秒数 | setTime()设置毫秒数 |
日期设置具有容错能力。以示例来说:
a.setFullYear(2011);//2011年
a.setMonth(13);//13-12=1,加1年,即2012年2月
a.setDate(32);//32-29=3,加1个月,转换后2012年3月3日
a.setHours(25);//25-24,加1天,2012年3月4日1点
a.setMinutes(61);//61-60=1,加1小时,2012年3月4日2点1分
a.setSeconds(61);//61-60=1,加1分钟,2012年3月4日2点2分1秒
4.3 Date日期运算
//日期加减操作
//方法1
var b = new Date();
b.setDate(b.getDate()+50);
toDate(b);
//方法2
var c = new Date();
var year = c.getFullYear();
var month = c.getMonth();
var day = c.getDate();
var temp = new Date(year, month, day+50);
toDate(temp)