慕课前端入门-js内置对象

1. 数组

js数组特点:

  1. 可以保存各种类型的元素
  2. 同一个数组,元素类型可以不同
  3. 数组的大小,是可以动态调整的

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"];
console.log(color.push("hello", "world"));//4

console.log(color.unshift("java", "python"));//6

console.log(color.pop());//world

console.log(color.shift());//java

console.log(color.join("_"));

//python_green_yellow_hello

console.log(color.reverse());

//["hello", "yellow", "green", "python"]

console.log(color.sort());

//["green", "hello", "python", "yellow"]

var nums = [8,5,9,6,7,"a"];

console.log(nums.sort());
//[5, 6, 7, 8, 9, "a"]
unthift语法:arrayObject.unshift(el1, el2...);
功能:把它的参数顺序添加到数组的开头
返回值:操作后,数组的长度
pop语法:arrayObject.pop()
功能:删除数组的最后一个元素
返回值:被删除的那个元素
shift语法:arrayObject.shift()
功能:删除数组的第一个元素
返回值:被删除的那个元素
join语法:arrayObject.join(separator)
功能:用于把数组中的所有元素合并为一个字符串
返回值:字符串
reverse语法:arrayObject.reverse()
功能:将数组中元素的反序
返回值:数组
sort语法:arrayObject.sort(sortby)
功能:用于对数组的元素进行排序
返回值:数组
说明:
  1. 即使数组中的每一项都是树枝,sort()方法比较的也是字符串
  2. sort()方法可以接受一个比较函数作为参数
cancat语法:arrayObject.concat(arrayX,arrayX...);
功能:用于连接两个或多个数组
返回值:数组
var arr1=['a','b','c'],arr2=[1,2,3];
console.log(arr1.concat(arr2));
console.log(arr1.concat(arr2,"hello","world"));
slice切片语法:arrayObject.slice(start,end)
功能:从已有的数组中返回特定的元素
参数:
  1. start,必选:起始位置,包含
  2. end:可选,结束位置,不包含
  3. 如果没有指定end,切分的数组包含从start到数组结束的所有元素
  4. 参数为负数,则用参数的长度加上负数来确定相应的位置
  5. 没有结果,就返回空数组
返回值:数组
var arr = "hello world".split("");
console.log(arr.slice(5));
console.log(arr.slice(5,7));
console.log(arr.slice(-7,-5))
splice语法:arrayObject.splice(index, count, el1, el2...)
功能:删除、替换、插入
参数:
  1. index:起始位置,必填
  2. count:删除元素数量。删除选填,插入为0,替换不为0
  3. el1,el2...:有是替换和插入;没有是删除
返回值:删除元素组成的数组,没有,就返回空数组。
var arr = "abcdefghijk".split("");
//delete 删除从index开始count个元素;
//count不填,删除从index处开始的所有值;
//count为0,不会删除元素
console.log(arr.splice(4,2)); //["e", "f"]
console.log(arr.splice(1));
//["b", "c", "d", "g", "h", "i", "j", "k"]
//insert count=0
console.log(arr.splice(1,0,5,6,7)); //[]
console.log(arr); //["a", 5, 6, 7]
//替换 count!=0
console.log(arr.splice(1,2,'x','y'));// [5, 6]
console.log(arr); //["a", "x", "y", 7]
index()
lastIndexOf()
语法:arrayObject.indexOf(searchValue, startIndex)
功能:指定位置开始查找
参数:
  1. searchValue:必需,要查找的元素
  2. startIndex:可选,起始位置
返回值:number 找到返回索引;未找到,返回-1
arrayObject.lastIndexOf(searchValue,startIndex)与indexOf相反
var nums = [1,7,5,7,8,1,6,9];
console.log(nums.indexOf(7));//1
console.log(nums.lastIndexOf(7));//3

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";

console.log(a[1]);//e

console.log(a.charAt(2));//l

console.log(a.charCodeAt(3));//108

console.log(a.indexOf("or"));//7

console.log(a.lastIndexOf("o"));//7

console.log(a.slice(7));//orld

console.log(a.slice(-5, -2));//wor

console.log(a.substring(2, -5));//he

console.log(a.substr(6,3));//wor

console.log(a.substr(-5,4));//worl

console.log(a.split(""));
//["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

console.log(a.replace("o","z"));//hellz world

"hello".toUpperCase();//HELLO

"HELLO".toLowerCase();//"hello"
charCodeAt 语法:stringObject.charCodeAt(index);
功能:返回字符串中指定位置的字符编码
indexOf 语法:stringObject.indexOf("or")
功能:返回子串在字符串中第一次出现的位置;没有找到,返回-1
lastIndexOf 语法:stringObject.lastIndexOf("or")
功能:返回子串在字符串中最后一次出现的位置;没有找到返回-1
slice 语法:stringObject.slice(start, end)
功能:截取字符串
参数:
  1. start:必需,指定开始位置
  2. end:可选,表示结束位置。没有默认到最后

说明
  1. end不在截取范围内
  2. 当参数为负数时,会将传入的负值与字符串的长度相加
substring 语法同slice
区别:
  1. 当参数为负数时,自动将参数转换为0
  2. 会把较小的数作为起始位置,将较大的数作为结束位置
substr 语法:stringObject.substr(start, len);
功能:截取字符串
参数说明:
  1. start:必需,指定子字符串的开始位置。
  2. len:可选,表示截取的字符总数,省略时截取到字符串的末尾。
  3. 当start为负数时,会将传入的负值与字符串的长度相加。
  4. 当len为负数时,会返回空字符串。
split 语法:stringObject.split(separator)
功能:把一个字符串分割成字符串数组
返回值:Array
replace 语法:stringObject.replace(regexp/substr, replacement)
功能:替换
返回值:string
参数:
  1. regexp:必需,规定子字符串或要替换的模式的正则表达式
  2. replacement:必需,字符串
缺点:只能替换第一个
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
console.log(Math.max(1,2,5,6,0));//6
console.log(Math.ceil(1.8));//2
console.log(Math.floor(1.8));//1
console.log(Math.round(1.8));//2
console.log(Math.random());//随机数
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对象

  1. new Date
  2. new Date(year, month, day, hours, minutes, seconds, milliseconds) year和month必需;一个参数会将毫秒数处理
  3. new Date(millisecond)
  4. 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){	
  var weeks=["日","一","二","三","四","五","六"],
    year=dateObject.getFullYear(),
    month=dateObject.getMonth()+1,
    date=dateObject.getDate(),
    week = weeks[dateObject.getDay()],
    hours=dateObject.getHours(),
    minutes=dateObject.getMinutes(),
    seconds=dateObject.getSeconds(),
    times=dateObject.getTime(),
    time=year+"年"+month+"月"+date+"日"+hours+"时"+minutes+"分"+seconds+"秒 星期"+week;
    console.log(time);
    console.log(times);
}
toDate(new Date());
var a = new Date();
a.setFullYear(2011);
a.setMonth(13);
a.setDate(32);
a.setHours(25);
a.setMinutes(61);
a.setSeconds(61);
toDate(a);
getMonth()获取月份0-11setMonth(mon)设置月份
getDate()获取月份中的某一天setDate()设置日期
getDay()返回周几,0-6setDay()设置周几
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)
posted on 2020-09-12 20:12  singleSpace  阅读(202)  评论(0编辑  收藏  举报