javascript(6)
内置对象
JS内置对象就是指Javascript自带的一些对象,供开发者使用,这些对象提供了一些常用的的功能。
常见的内置对象有Math、String、Array、Date等
内置对象有很多,我们主要是记下这些内置对象的用法即可。但是同学们也不可能一下子记住这么多的方法,因此当同学们忘了某个方法该如何使用的时候,可以通过以下方式查看。
- 火狐开发者网站MDN
- W3School网站
- 离线文档
- 笔记
如何学习一个方法 ?
- 方法的功能
- 参数的意义和类型
- 返回值意义和类型
- demo进行测试
Math对象
Math对象中封装很多与数学相关的属性和方法。
-
π
Math.PI
-
最大值/最小值
Math.max(); Math.min();
-
取整(★) [1.1 , 1.9, -1.1 , -1.9 , 1.5]
Math.ceil();//天花板,向上取整 Math.floor();//地板,向下取整 Math.round();//四舍五入,如果是.5,则取更大的那个数
-
随机数(★★)
Math.random();//返回一个[0,1)之间的数,能取到0,取不到1 // 一般情况看下,我们不是要求随机小数,一般整数,例如速记点名
-
绝对值 (abs absolute 绝对)
Math.abs();//求绝对值
-
次幂和平方 (pow power 幂 sqrt:开方 )
Math.pow(num, power);//求num的power次方 Math.sqrt(num);//对num开平方
-
练习
//1. 0-3的随机整数
// 0-6的随机整数
// 6-8的随机整数
//2.封装一个函数 随机生成一个rgb颜色?
//2.1 0-255 取整
//2.2
function randomRGB() {
var red = parseInt( Math.random() * 256 );
var green = parseInt( Math.random() * 256 );
var blue = parseInt( Math.random() * 256 );
// return 'rgb(20,30,43)'
return 'rgb('+ red + ',' + green + ',' + blue + ')';
}
## Date对象
> Date对象用来处理日期和时间
+ 创建一个日期对象
```javascript
var date = new Date();//使用构造函数创建一个当前时间的对象
var date = new Date("2017-03-22");//创建一个指定时间的日期对象
var date = new Date("2017-03-22 00:52:34");//创建一个指定时间的日期对象
var date = new Date(2017, 2, 22, 0, 52, 34);
var date = new Date(1523199394644);//参数:毫秒值
Date构造函数的参数
1. 毫秒数 1498099000356 new Date(1498099000356)
2. 日期格式字符串 '2015-5-1' new Date('2015-5-1')
3. 年、月、日…… var date = new Date(2017, 2, 22, 0, 52, 34);月份从0开始
-
日期格式化(了解)
date.toLocalString();//本地风格的日期格式 date.toLocaleDateString(); // 获取日期 date.toLocaleTimeString(); // 获取时间
-
获取日期的指定部分 (★)
getMilliseconds();//获取毫秒值 getSeconds();//获取秒 getMinutes();//获取分钟 getHours();//获取小时 getDay();//获取星期,0-6 0:星期天 getDate();//获取日,即当月的第几天 getMonth();//返回月份,注意从0开始计算,这个地方坑爹,0-11 getFullYear();//返回4位的年份 如 2016 //思考: //封装一个函数,返回当前的时间,格式是:yyyy-MM-dd HH:mm:ss (2018-01-01 01:20:12) function getD() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); function addZero(num) { return num < 10 ? '0'+num : num; } return year+ '-'+ addZero(month) +'-'+ addZero(day) +' '+ addZero(h) +':' + addZero(m) + ':' + addZero(s); }
-
时间戳
-
实际项目中,用的最多的就是时间戳,,因为这个好计算,其他的都不好算
var date = +new Date();//1970年01月01日00时00分00秒起至现在的总毫秒数
//思考
//如何统计一段代码的执行时间? 打印10000次
// 开始
var start = +new Date();
for ( var i = 1 ; i <= 1000 ; i++) {
console.log(i);
}
// 结束
var end = +new Date();
console.log('时间戳 :' + (end-start));
## Array对象
> 数组对象在javascript中非常的常用
+ 数组转换(★)--- **join**
```javascript
//语法:array.join(分隔符)
//作用:将数组的值拼接成字符串,并且返回字符串
var arr = [1,2,3,4,5];
arr.join();//不传参数,默认按【,】进行拼接
arr.join("");//按【"】进行拼接
arr.join("-");//按【-】进行拼接
-
数组的增删操作(★)
var arr = ['zs','ls','ww'] array.push(元素);//从后面添加元素,返回新数组的length array.pop();//从数组的后面删除元素,返回删除的那个元素 array.unshift(元素);//从数组的前面的添加元素,返回新数组的长度 array.shift();//从数组的最前面删除元素,返回删除的那个元素 //总结: //1. shift 在前面 ,所以处理数组前面的 //2. p+ 在后面,所以是处理后面的 //3. unshift 比 shift 多个un,,所以就是加 //4. 添加的都是返回长度 //5. 删除的都是返回删除的元素 //6. 添加要说明添加什元素,,删除直接删除 //练习1 var arr = ["刘备"]; //添加数据后变成:["赵云","马超","刘备","关羽","张飞"] //删除数据后变成:["关羽","张飞"] //练习2 var arr = ["赵云","马超","刘备","关羽","张飞"]; //把数组的最后一个元素变成数组的第一个元素 //把数组的第一个元素变成数组的最后一个元素
-
数组的翻转与排序
array.reverse();//翻转数组 array.sort();//数组的排序,默认按照 字母/首字符 顺序排序 => 1 11 2 3 var arr1 = ['a','d','b','c']; var arr2 = [3, 6, 1, 5, 10, 2,11]; //sort方法可以传递一个函数作为参数,这个参数用来控制数组如何进行排序 arr.sort(function(a, b){ //如果返回值>0,则交换位置 return a - b; }); 记忆 : b比a高
//思考: //将[3, 6, 1, 5, 10, 2,11]从小到大排列
var arr = [3, 6, 1, 5, 10, 2,11];
//将字符串数组按照字符长度从小到大排列
var arr = ['b','a','c','u','z','e'];
//将学生数组按照年龄从大到小排列
var arr = [18,34,21,20,66];
+ 数组的拼接与截取
```javascript
//1. concat:数组合并,不会影响原来的数组,会返回一个新数组。
var newArray = array.concat(array2);
//2. slice:截取出来,既然是截取`出来`,,肯定要有个东西接收
//原来的数组不受影响,
// - slice() 全部截取出来
// - slice(begin) 从第begin往后截取出来
// - slice(begin, end) 从第begin开始删除,,不包括end [start, end)
var arr = ['zs','ls','ww','zl','xmg'];
var newArray = array.slice(begin, end);
//3. splice : 数组任意地方删除或者添加元素
var arr = ['zs','ls','ww','zl','xmg'];
// 原来的数组影响
//- splice(start, deletedCount) 删除元素
// - start 开始
// - deletedCount 删除个数
//- splice(start, deletedCount , item) 删除+添加, 第三个参数是在原来删除的位置上新加几个元素
//- 特殊 :
// splice(start, 0 , item) 就是在某个位置新加元素
-
数组的方法
forEach(function(item, index, arr){}) 专门用来遍历数组 第一个参数: 数组中的每一项 第二个参数: 每一项对应的下标 第三个参数: 数组本身 filter(function(item, index, arr){}) 过滤器 every(function(item, index, arr){}) 如果数组中每一项都符合要求就返回true,否则返回false some(function(item, index, arr){}) 如果数组中有一项符合要求就返回true,都不符合才返回false
-
forEach使用
var arr=['a','b','c','d','a','b','c','d','e']; arr.forEach(function(item, index){ console.log(item); //起到遍历数组的作用 因为是item所以输出的是数组的每一项,index则输出下标 });
-
fileter使用
var arr=['a','b','c','d','a','b','c','d','e']; var newArr=[]; for(var i=0;i<arr.length;i++){ if(arr[i]==='a'){ newArr.push(arr[i]) } } console.log(newArr); var result=arr.filter(function (item,index) { return item==='a'&&index===0; }); //此方法与上面方法相同目的是输出值为a的项放在新数组中 index=0是我加的 console.log(result);
-
every使用
var arr=['a','b','c','d','a','b','c','d','e']; var flag=true; for(var i=0;i<arr.length;i++){ if(arr[i]<'a'){ flag=false; } } console.log(flag); var result1= arr.every(function (item) { return item>='a'; }); //如果数组中全都大于a则返回true否则返回false 与上面一样的效果 console.log(result1);
-
some使用
var arr=['a','b','c','d','a','b','c','d','e']; var result2=arr.some(function (item) { return item ==='c'; });//数组中只要有一项等于c就返回true console.log(result2);
-
find使用
//找数组中满足条件的第一个元素 vara id=1; var temp=data.find(function(v,i){ return v.id==id; })
6,map使用
//想要获取一个新数组,新数组的元素是arr中的元素的两倍 var arr=[1,3,4,5,6,7] var newArr=arr.map(function(v,i){ return v*2; })
7,findIndex使用
const index=this.data.list.findIndex((item,index)=>{ return item.id=id })
-
//练习:
var arr = ["赵云","马超","刘备","关羽","张飞"];
//截取["刘备","关羽"]
//在刘备前面增加 马腾
//删除关羽
+ 数组查找元素
```javascript
//indexOf方法用来查找数组中某个元素 `第一次`出现的位置,如果找不到,返回-1
array.indexOf(search, [fromIndex]);
//lastIndexOf()方法用来查找数组中某个元素 `最后一次`出现的位置,如果找不到,返回-1
array.lastIndexOf(search, [fromIndex]);
var arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
主要配合if语句的多
-
清空数组
//1. array.splice(0,array.length);//删除数组中所有的元素 //2.array.length = 0;//直接修改数组的长度 //3.array = [];//将数组赋值为一个空数组,推荐
-
数组综合练习
var arr = ["c", "a", "z", "a", "x", "a", "a", "z", "c", "x", "a", "x"] //1. 找到数组中第一个a出现的位置 //2. 找到数组中最后一个a出现的位置 //3. 找到数组中每一个a出现的位置 //4. 数组去重,返回一个新数组 //5. 获取数组中每个元素出现的次数 // 新方法 : if(arr[i] in obj) {} 判断元素是否在对象中 var obj = {}; for ( var i = 0 ; i < arr.length ; i++) { if (arr[i] in obj) { obj[arr[i]] += 1; } else { obj[arr[i]] = 1; } } console.log(obj);
基本包装类型
简单数据类型是没有属性和方法的。为了方便操作基本数据类型,JavaScript还提供了三个特殊的引用类型:String/Number/Boolean。
基本包装类型:把基本类型包装成复杂类型。
var str = “abc”;
var result = str.indexOf(“a”);
//发生了三件事情
1. 把简单类型转换成复杂类型:var s = new String(str);
2. 调用包装类型的indexOf方法:var result = s.indexOf(“a”);
3. 销毁刚刚创建的复杂类型
总结 : js为了我们使用方便,浏览器允许使用简单类型直接调用方法,会自动把简单类型转换成复杂类型。
Number对象
Number对象是数字的包装类型,数字可以直接使用这些方法
toFixed(2)//保留2位小数
toString();//转换成字符串
Boolean对象
Boolean对象是布尔类型的包装类型。
toString( );//转换成字符串
undefined和null没有包装类型,所以调用toString方法会报错
String对象
字符串可以看成是一个字符数组(伪数组)。因此字符串也有长度,也可以进行遍历。String对象很多方法的名字和和Array的一样。可以少记很多的单词。
注意: 注意 : 操作字符串的方法都不会改变原来的字符串,,所以需要返回
-
查找指定字符串
//indexOf:获取某个字符串第一次出现的位置,如果没有,返回-1 //lastIndexOf:获取某个字符串最后一次出现的位置。如果没有,返回-1
-
去除空白
trim();//去除字符串两边的空格,内部空格不会去除
-
大小写转换
//toUpperCase:全部转换成大写字母 //toLowerCase:全部转换成小写字母
-
字符串拼接与截取
//字符串拼接 //可以用concat,用法与数组一样,但是字符串拼串我们一般都用+ //`字符串截取`的方法有很多,记得越多,越混乱,因此就记好用的就行 //slice :截取出来 从start开始,end结束,并且取不到end。 `和 substring一样` //substring :从start开始,end结束,并且取不到end //substr : :从start开始,截取length个字符。 == 数组的 splice() 总结 :优先使用 substr
-
字符串切割
//split:将字符串分割成数组(很常用) //功能和数组的join正好相反。 var str = "张三,李四,王五"; var arr = str.split(",");
-
字符串替换
var str = 'abcedabc' str = str.replace(/a/g,'c') replace(searchValue, replaceValue) // replace(old, new) //参数:searchValue:需要替换的值 replaceValue:用来替换的值
-
遍历、获取
-
var str1 = 'abcoefoxyozzopp' for ( var i = 0 ; i < str1.length ; i++) { console.log(str1[i]); } str[0] == str.charAt(0)
-
-
练习
//1. 截取字符串"我爱中华人民共和国",中的"中华" //2. "abcoefoxyozzopp"查找字符串中所有o出现的位置 //3. 把字符串中所有的o替换成! //4. 把一个字符串中所有的空格全部去掉 //5. 统计一个字符串中每个字符出现的次数