前端基础——javascript的内置对象

JavaScript中的数组

如何创建数组

创建数组的基本方式有两种：

1、使用 Array构造函数

语法：new Array()

小括号( )说明：

（1）预先知道数组要保存的项目数量

（2）向Array构造函数中传递数组应包含的项

2、使用数组字面量表示法

由一对包含数组项的方括号[ ]表示，多个数组项之间以逗号隔开。

// 创建一个颜色数组
var color = new Array(3); // 如果已知数组中要放三个元素，则可以Array的（）中写入3
var num = new Array(1,5,8,10,17); // 也可以直接把数组的元素，在创建的时候直接写入
// 第二种创建数组的方法，字面量创建数组
var cols = ["red","blue","green"];

　　

数组元素的读写

读取和设置值时，使用方括号[ ]并提供相应的索引

// 创建一个颜色数组
var colors = new Array(3); // 如果已知数组中要放三个元素，则可以Array的（）中写入3
colors[0]="#f00"; // 可以用数组名+方括号的方式给空数组里加值
colors[1]="#0f0";
colors[2]="#00f";
console.log(colors);

　　

console.log(cols[1]); // 读取cols数组中索引为1的值

说明：索引是从0开始的正整数

数组长度

var arr = ["a", "b", "c", "d"];
//console.log(arr.length); // 4
arr.length = 3; // length 方法还可以用于去掉末尾的值，但不推荐使用
console.log(arr[3]); // undefined

　　

arr[99]="z";
console.log(arr.length); // 100

　　

// 遍历数组
for (var i=0;i<arr.length;i++){
	console.log(arr[i]);
}

　　

语法：array.length

功能：获取数组array的长度

返回值：number

说明：

1、通过设置length可以从数组的末尾移除项或向数组中添加新项。

2、当把一个值放在超出当前数组大小的位置上时，数组就会重新计算其长度值，长度值等于最后一项的索引加1。

push() 非常有用

语法：

arrayObject.push(newele1,newele2,....,neweX)

功能：

把它的参数顺序添加到 arrayObject 的尾部。

返回值：

把指定的值添加到数组后的新长度。

var color = new Array(
	"red",
	"blue",
	"green",
	"yellow"
)
// push
var len = color.push("grey","white","blank"); // push 里面可以加多个添加的值
console.log(color);
console.log(len); // 返回数组新增值后的长度  7　　

unshift()

语法：

arrayObject.unshift(newele1,newele2,....,neweX)

功能：

把它的参数顺序添加到 arrayObject 的开头。

返回值：

把指定的值添加到数组后的新长度。

// unshift
var num = [1,3,6,9,10];
num.unshift(99,66);
console.log(num); // [99, 66, 1, 3, 6, 9, 10]

pop()

语法：

arrayObject.pop()

功能：

删除 arrayObject 的最后一个元素

返回值：

被删除的那个元素

   // pop
   var n=nums.pop();
   console.log(nums);

　　

shift()

语法：

arrayObject.shift()

功能：

删除 arrayObject中的第一个元素

返回值：

被删除的那个元素

   // shift
   var m=colors.shift();
   console.log(m);

　　push()  unshift()  pop()  shift()   叫做数组的栈方法

join() 非常有用

语法：

arrayObject.join(separator)

功能：

用于把数组中的所有元素放入一个字符串。（换句话说，就是把数组转化为字符串的方法）

返回值：字符串。

// join
var num = [2,3,4];
var str = num.join(); // join()默认为空的时候，字符串用 “,”（逗号）隔开
console.log(typeof str); // string
var word = ["border","left","color"]
// 数组转化为这个模式：border-left-color
var wordstr = word.join("-") // border-left-color
console.log(wordstr); 　

reverse()

语法：

stringObject.reverse()

功能：

用于颠倒数组中元素的顺序。（就是把顺序做一个反序）

返回值：数组。

//reverse
var str = ["a","b","c","d"];
var restr = str.reverse();
console.log(restr); // 反序之后为：["d", "c", "b", "a"]
// 返回dcba这个字符串
var dcba_str = restr.join("");
console.log(dcba_str); // dcba

　　

sort()

语法：

arrayObject.sort(sortby)

功能：

用于对数组的元素进行排序。

返回值：数组。

说明：

1、即使数组中的每一项都是数值，sort()方法比较的也是字符串。

2、sort()方法可以接收一个比较函数作为参数。

// sort
var num = [3,5,73,8,40,9];
num.sort();
console.log(num); // 结果： [3, 40, 5, 73, 8, 9]
// 上面的结果为什么没有按照我们想像的去排列呢，原因是sort将元素转化为了字符串，
// 而字符串按照 3,40的4,5,73的7， 8, 9如此排序的，若想解决则需要接收一个比较函数作为参数
num.sort(function(a,b) {return b<a}); // 接收函数，降序排列 降序 return 参数1<参数2
console.log(num);
num.sort(function(a,b) {return a>b}); // 接收函数，升序排列 升序 return 参数1>参数2
// 上面所接手的函数中的参数，a，b，也可以是其他的参数，x，y之类的
console.log(num);

　　小练习：封装一个函数，实现不用reverse()，也能让数组反转

// 封装一个函数，实现不用reverse()，也能让数组反转
function reverseArr(){
	var rev_arr = [];
	var arr = [];
	arr.length = 5;
	for (var i=0; i<arr.length; i++){
		rev_arr.unshift(i+1); // 获得一个靠后的新值，就将它放到最前面，以此类推，越大的越靠前
	}
		return rev_arr;
}

var newArr = reverseArr([1,2,3,4,5,6]);
console.log(newArr);

　　

concat()

语法：

arrayObject.concat(arrayX,arrayX,......,arrayX)

功能：

用于连接两个或多个数组。

返回值：

数组。

// concat
var arr1 = ["d","e","f"],
	arr2 = ["a","b","c",1],
	arr3;
arr3 = arr1.concat(arr2,[33,77]); // 这里可以连多个数组
console.log(arr3);
</script>

　　

slice()

语法：

arrayObject.slice(start,end)

功能：

从已有的数组中返回选定的元素。

参数：

start （必需）规定从何处开始选取，如果是负数，那么它规定从数组尾部开始算起的位置。

end（可选）规定从何处结束选取，该参数是数组片断结束处的数组下标。

说明：

1、如果没有指定end，那么切分的数组包含从 start 到数组结束的所有元素。

2、如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。

返回值：数组

	// slice
	var colors = ["red","green","blue","yellow","orange"];
//	var newColor = colors.slice(1); // 如果只写一个数，表示从1开始，到最后
//	var newColor = colors.slice(1,3); // 第二个参数是数组片断结束处的数组下标
	var newColor = color.slice(-2,4); // 第一个参数从后数第二个，第二个参数从前数第四个,相当于（3,4）
	// 上面的第一个参数，可以用整个数组的长度加上这个负数，也就是5+（-2）=3，第二个参数正常，结果还是（3,4）　　

面试题：

// 完成以下代码段，实现b数组对a数组的拷贝，方法越多越好
  var a=[1,"yes",3],
      b;
  // 1、数组遍历,push
  /*b=new Array();
  for(var i=0;i<a.length;i++){
     b.push(a[i]);
  }*/
  // 2、concat()
  b=[].concat(a);
  // 3、slice();
  b=a.slice(0);
  console.log(b);

　　

splice  数组中功能最强大的方法

删除

语法：

arrayObject.splice(index,count)

功能：

删除从 index 处开始的零个或多个元素。

返回值：

含有被删除的元素的数组。

说明：

count是要删除的项目数量，如果设置为 0，则不会删除项目。

如果不设置，则删除从index开始的所有值。

插入

语法：

arrayObject.splice(index,0,item1,.....,itemX)

功能：

在指定位置插入值

参数：

Index：起始位置

0：要删除的项数

item1…itemX：要插入的项

返回值：数组

替换

语法：

arrayObject.splice(index,count,item1,.....,itemX)

功能：

在指定位置插入值，且同时删除任意数量的项

参数：

Index：起始位置

count：要删除的项数

item1…itemX：要插入的项

返回值：从原始数组中删除的项（如果没有删除任何项，则返回空数组）

// splice 删除操作
var arr = ["a","b","c","d","e","f"];
// 用 splice从数组索引为2的元素开始，删除包含它之后的两个数组元素
console.log(arr); // ["a", "b", "c", "d"]
// 若写一个数值，就删除这个数值到末尾的全部，若第二个值为0，则不删除
var del_arr = arr.splice(2,2); 
console.log(del_arr); // ["c", "d"] 以数组的形式返回被删除的数组元素
// splice 插入操作
// 想要插入的位置，是元素的前面，所以若是想插入元素的后面，需要把数值定位后一个元素的索引
var insert_arr = arr.splice(3,0,"m","n",88); //  ["a", "b", "e", "m", "n", 88, "f"]
console.log(arr);
// splice 替换操作
var replace_arr = arr.splice(3,2,"x","y"); // 替换 m 和 n
console.log(arr); // ["a", "b", "e", "x", "y", 88, "f"]

　　

indexOf()

语法：

arrayObject.indexOf(searchvalue，startIndex)

功能：

从数组的开头（位置0）开始向后查找。

参数：

searchvalue：必需，要查找的项；

startIndex：可选，起点位置的索引。

返回值：

number，查找的项在数组中的位置，没有找到的情况下返回-1。

lastIndexOf()

语法：

arrayObject.lastIndexOf(searchvalue，startIndex)

功能：

从数组的末尾开始向前查找。

参数：

searchvalue：必需，要查找的项；

startIndex：可选，起点位置的索引。

返回值：

number，查找的项在数组中的位置，没有找到的情况下返回-1。

var nums=[1,7,5,7,8,1,6,9];
var pos=nums.indexOf(7,2); // 结果：3
var pos=nums.lastIndexOf(1); // 从后往前找 结果：5
var pos=nums.lastIndexOf(1,2); // 从后往前找 结果：0。 第二个参数表示从索引0到2之间去找1的索引
var pos=nums.indexOf("7"); // 找不到，必须是全等才行 === 结果：-1
console.log(pos);

　　

indexOf() lastIndexOf()的兼容问题 说明

1、在比较第一个参数与数组中的每一项时，会使用全等操作符，

即要求查找的项必须严格相等。

2、数组的位置方法是ECMAScript5为数组实例新增的，所以支

持的浏览器只有：

IE9+、Firefox2+、Safari3+、Opera9.5和Chrome。

// 封装一个方法实现indexOf的功能
   function ArrayIndexOf(arr,value){
      // 检测value在arr中出现的位置
      for(var i=0;i<arr.length;i++){
         if(arr[i]===value){ // 这里要全等
            return i;
         }
      }
      return -1;
   }
   var pos2=ArrayIndexOf(nums,"1");
   console.log(pos2);

　　

JavaScript中的String

charAt()

语法：

stringObject.charAt(index) 

功能：

返回stringObject中index位置的字符。 

charCodeAt()

语法：

stringObject.charCodeAt(index)

功能：

返回stringObject中index位置字符的字符编码。

说明：

ECMAScript5中可使用“方括号加字符索引”来访问字符串中特定的字符，但是IE7及更早的浏览器会返回undefined。所以为了兼容就尽量不要使用中括号了，用charAt吧。

var str = "hello world!";
console.log(str[3]); // ie7以下版本不支持这个写法
console.log(str.charAt(6)); // 返回 w 如果取不到，就会返回一个空字符串
console.log(str.charCodeAt(6)); // 返回 119 字符的 Unicode 编码

　　

indexOf()

语法：

stringObject.indexOf ("o")

功能：

从一个字符串中搜索给定的子字符串，返回子字符串的位置。

返回值：数值

说明：如果没有找到该子字符串，则返回-1。

lastIndexOf()

语法：

stringObject.lastIndexOf ("o")

功能：

从一个字符串中搜索给定的子字符串，返回子字符串的位置

返回值：数值

说明：如果没有找到该子字符串，则返回-1

var email = "javascript@163.com";
// 这里面是有引号的，不仅可以检测一个字符，还可以检测一个子字符串
// 若是找不到，则返回-1
console.log(email.indexOf("va")); 
console.log(email.lastIndexOf("a")); // 从后向前检索

　　

字符串对象的截取方法

slice()

语法：

stringValue.slice(start,end)

功能：

截取子字符串。

参数说明：

1、start：必需，指定子字符串的开始位置。

2、end：可选，表示子字符串到哪里结束，end本身不在截取范围之内，省略时截取至字符串的末尾。

3、当参数为负数时，会将传入的负值与字符串的长度相加。

var str = "hello world";
console.log(str.slice(2,7)) // 不包含最后参数本身
console.log(str.slice(1)) // 最后一个参数省略的时候截取到末尾
console.log(str.slice(-7,-2)) // 参数为负数的时候，其值为字符串长度+该负数 相当于（4,9）
console.log(str.slice(4,9)) // 与console.log(str.slice(-7,-2))的结果相同　

substring()

说明：语法及功能同slice()完全一样。

区别在于：

1、当参数为负数时，自动将参数转换为0。

2、substring()会将较小的数作为开始位置，将较大的数作为结束位置。

var str = "hello world";
console.log(str.substring(2,4)); // 一般情况与slice()功能相同
console.log(str.substring(-2,4)); // 遇到负数的时候将负数转化为0，相当于（0,4）
console.log(str.substring(-2,-4)); // 两个负数的时候，什么都取不出来，相当于（0,0）从0到0中取值，不可能有
console.log(str.substring(2,-5)); // 若负数在后，ECMAScript会认为较小的数值在前，较大数在结束位置，相当于（0,2）

　　

substr()

语法：

stringValue.substr(start,len)

功能：

截取子字符串。

参数说明：

1、start：必需，指定子字符串的开始位置。

2、len：可选，表示截取的字符总数，省略时截取至字符串的末尾。

3、当start为负数时，会将传入的负值与字符串的长度相加。

4、当len为负数时，返回空字符串。

var str = "hello world";
console.log(str.substr(1,3)); // 表示从索引为1开始，向后截取3个字符
console.log(str.substr(-5,4)); // 遇到负数的时候，用字符串长度与该负数相加，相当于（6，4）
console.log(str.substr(3,-4)); // 如果后面的参数是负数或者0，则什么都截取不到

　　

字符串方法的综合应用：

编写js函数，用于获得输入参数的后缀名，如输入abc.txt，返回.txt。

// 获取扩展名
var url = "http://www.baidu.com/index.html";
function getFileFormat(url){
	// 获取.在url中出现的位置
	var pos = url.lastIndexOf(".");
	return url.substr(pos);
}
var formatName = getFileFormat(url);
console.log(formatName);　

编程练习

// 用户输入登陆的邮箱，对邮箱进行解析，解析出邮箱的用户名和邮箱域名
var email = prompt("请输入电子邮箱");
function getname(name){
	var name_index = email.indexOf("@")
	return email.substring(0,name_index);
}
console.log(getname())	

function geturl(url){
	var name_index = email.indexOf("@")
	return email.substr(name_index+1);
}
console.log(geturl())　　

split() 特别有用的方法

语法：

stringObject.split(separator)

功能：

把一个字符串分割成字符串数组。

返回值：Array。

说明：

separator：必需，分隔符。

// split 将字符串转化为数组
var str = "Welcome-to-China";
var str_date = "2017/03/31";
console.log(str.split("-")); // 返回数组 ["Welcome", "to", "China"]
console.log(str_date.split("/")); // ["2017", "03", "31"]　

replace()

语法：

stringObject.replace(regexp/substr,replacement)

功能：

在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

返回值：String

参数：

regexp：必需。规定子字符串或要替换的模式的 RegExp 对象。

replacement:：必需。一个字符串值。

// 替换
var tel = "010-22583609,400-3200-000,021-33567787";
var new_tel = tel.replace(","," ");
console.log(tel); // replace 不会改变原来的字符串
console.log(new_tel); // replace 只替换第一个　

toUpperCase()与toLowerCase()

语法：

stringValue.toUpperCase()

功能：把字符串转换为大写。

var str = "hello world";
var upper = str.charAt(6).toUpperCase(); // 转换某一个字母的方式
console.log(upper); // 返回的是 W 其中的一个字母 不会修改原来的字符串
//console.log(str.toUpperCase()); // HELLO WORLD
console.log(str);　

语法：

stringValue.toLowerCase()

功能：把字符串转换为小写。

var str = "HELLO WORLD!";
console.log(str.toLowerCase()); // hello world!	

实例：大小写转换，很有用

// 实例
// css中设置边框 border-left-color js中 borderLeftColor 驼峰形式
// 封装驼峰形式的函数
// margin-bottom
function camelback(str){
	// 通过-这个分隔符将str拆分成数组
	var arr = str.split("-"),newStr=arr[0]; // 不要在循环中声明，在外部一起声明newStr
	//console.log(arr); // ["border", "left", "color"]
	for (var i=1,len=arr.length;i<len;i++){ // 第一个单词不变，所以循环从第二个开始
		var word = arr[i];
		//console.log(word);
		// 将每个单词的首字母转化为大写，连接剩余字符
		newStr += word.charAt(0).toUpperCase()+word.substr(1); // 每循环一次，连接一次改变的值
		//console.log(newStr);
	}
	return newStr;
}
var camelFormat = camelback("border-left-color");
console.log(camelFormat)　　

JavaScript中的Math

Math.min()

语法：

Math.min(num1,num2…numN)

功能：

求一组数中的最小值。

返回值：Number。

var min = Math.min(5,-4,0,91,200,-66);
console.log(min); // -66
var minStr = Math.min(3,-90,88,300,"abc"); // 如果这组数中出现字符串 则返回NaN
console.log(minStr); // NaN			

Math.max()

语法：

Math.max(num1,num2…numN)

功能：

求一组数中的最大值。

返回值：Number。

var max = Math.max(33,42,938,1,-38,0,-87);
var maxStr = Math.max(33,42,938,1,-38,0,-87,"123");
var maxStr1 = Math.max(33,42,938,1,-38,0,-87," ");
var maxStr2 = Math.max(33,42,938,1,-38,0,-87,"ab");
console.log(max); // 938
console.log(maxStr); // 938  这里会将 "123" 隐式转化为数值
console.log(maxStr1); // 938  空字符串被忽略
console.log(maxStr2); // NaN

Math.ceil()

语法：

Math.ceil(num)

功能：

向上取整，即返回大于num的最小整数。

返回值：Number。

var num = Math.ceil(15.0001);
console.log(num); // 向上取整 16

Math.floor()

语法：

Math.floor(num)

功能：

向下取整，返回num的整数部分。

返回值：Number。

var num = 99.99;
console.log(Math.floor(num)); // 99 返回一个整数部分，舍去小数　　

Math.round()

语法：

Math.round (num)

功能：

将数值四舍五入为最接近的整数。

返回值：Number。

var int1 = 1.03, int2 = 1.93; // Math.round 四舍五入取整
console.log(Math.round(int1)); // 1
console.log(Math.round(int2)); // 2

　　

Math.abs() 很常用 移动端手指滑动的距离出现负数是常用

语法：

Math.abs (num)

功能：

返回num的绝对值。

返回值：Number。

var num = -78;
console.log(Math.abs(num)); // 78　　

Math.random()

语法：

Math.random()

功能：

返回大于等于0小于1的一个随机数。

返回值：Number。

说明：

求n到m之间的随机整数的公式：

random=Math.floor(Math.random()*(m-n+1)+n);

var random = Math.random(); // 注意random的括号中是没有参数的
console.log(random);
// 封装n到m随机数的函数
function getRandom(n,m){
return Math.floor(random*(m-n+1)+n);
}
console.log(getRandom(1,8));　

实例：生成一个n到m之间的随机数  封装一个求n到m之间的随即整数的函数

// 生成一个n到m之间的随机数
//求n到m之间的随机整数的公式：
//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);
var random2 = getRandom(10,88);
console.log(random1);
console.log(random2);

JavaScript中的date对象

如何创建一个日期对象

语法：new Date();

功能：创建一个日期时间对象

返回值：不传参的情况下，返回当前的日期时间对象。

说明：如果想根据特定的日期和时间创建日期对象，必须传入表示该日期的毫秒数或者是一组用逗号隔开的表示年月日时分秒的参数。

var today = new Date(); // 无参数
console.log(today); //Thu Apr 05 2018 14:09:05 GMT+0800 (中国标准时间)

　　

获取年月日时分秒及星期的方法

1、getFullYear()：返回4位数的年份

2、getMonth()：返回日期中的月份，返回值为0-11 0表示1月 11表示12月

3、getDate()：返回月份中的天数

4、getDay()：返回星期，返回值为0-6

5、getHours()：返回小时

6、getMinutes()：返回分

7、getSeconds()：返回秒

8、getTime()：返回表示日期的毫秒数

// 创建一个日期时间对象
var weeks=["日","一","二","三","四","五","六"], // 星期用大写，设置数组
	today = new Date(),
	year = today.getFullYear(),
	month = today.getMonth()+1, // 月份是1月是0,12月是11 所以要加1
	tdate = today.getDate(),
	week = today.getDay(),
	hours = today.getHours(),
	minutes = today.getMinutes(),
	seconds = today.getSeconds(),
	times = today.getTime(); // 表示从1970年1月1日00:00:00开始到现在时间的毫秒数
	time = year+"年"+month+"月"+tdate+"日"+hours+"时"+minutes+"分"+seconds+"秒"+" "+"星期"+weeks[week];
console.log("现在是："+time);
console.log(times);

　　

设置年月日时分秒及星期的方法

1、setFullYear(year)：设置4位数的年份

2、setMonth(mon)：设置日期中的月份，从0开始，0表示1月

3、setDate()：设置日期

4、setDay()：设置星期，从0开始，0表示星期日

5、setHours()：设置小时

6、setMinutes()：设置分

7、setSeconds()：设置秒

8、setTime()：以毫秒数设置日期，会改变整个日期

// 创建一个日期时间对象
var today = new Date();
today.setFullYear(2009); // 这里用的是set去设置时间
console.log(today.getFullYear()); // 2009 这里用get去获取时间 
// setMonth方法用于设置月份。注意：一月为0，十二月为11，现在显示8，实际是9月
today.setMonth(8);
// 变成1了，即浏览器实现以12为基数，当前设置的数值除以12，取余数，再加1是实际月份，年份取整+当前年份
today.setMonth(13); 
console.log(today.getMonth()); 

　

实例：50天之后是星期几

var today = new Date();
//  50天之后是星期几
//  第一种
today.setDate(today.getDate()+50); // 先获取当前天，再加50
console.log(today.getDay());
//  第二种
var year = today.getFullYear();
var month = today.getMonth();
var day = today.getDate();
var weeks=["日","一","二","三","四","五","六"]; // 星期用大写，设置数组
//  创建了一个目标日期对象，年、月、日、时、分、秒。按顺序，有容错，可以自己去算，按月，按年进位
//  表示当前日期后的50天的10点10分0秒，如果不涉及时间，可不不写
//  var temp = new Date(year,month,day+50,10,10,0);
// 这个是50天后，也可以在month后+2，表示两个月后，在year后面+1，表示明年的今天
var temp = new Date(year,month,day+50); 
console.log("50天后的今天是："+temp.getFullYear()+"-"+(temp.getMonth()+1)+"-"+temp.getDate()+"-"+"星期"+weeks[temp.getDay()]);