从零开始学_JavaScript_系列(15)——js系列<4>(数值、字符串、对象、数组、函数、日期的基本方法)

简介: 注:$("#a").text( 内容 ) 是jquery的方法,可以理解为在 <div id="a"></div>  添加内容变为: <div id="a">内容</div> (6)数值 注意,Math的M需要大写 ①绝对值:Math.abc(x)         获得x的绝对值(之后的意思都类似,非特殊不再说明)   ②

注:$("#a").text( 内容 ) 是jquery的方法,可以理解为在

<div id="a"></div> 

添加内容变为:

<div id="a">内容</div>


(6)数值

注意,Math的M需要大写

①绝对值:Math.abc(x)         获得x的绝对值(之后的意思都类似,非特殊不再说明)

 

②求四舍五入后结果:

Math.round(1.9) = 2;

Math.round(1.1)=1;

 

③向上取整:

Math.ceil(1.1)=2;

Math.ceil(-1.1)=-1;

 

④向下取整:

Math.floor(1.9)=1;

Math.floor(-1.9)=-2;

 

⑤求最大值:

Math.max(1,2,3,4) = 4;

 

⑥求最小值

Math.min(-1,-2,-3,-4) = -4;

 

⑦随机数:

0 <= Math.random() < 1

 


第二个是e的多少次方,第三个是log,第四个是对x进行开方,第五个是x是y次方。

e指的是自然对数(以常数e为底数的对数叫做自然对数记作ln N(N>0).

第一个是指弧度,弧度=2*π/360*角度;

 

 

⑨对字符串进行处理变为数字:

变为整数:

parseInt(string, radix);              //第二个参数表示输出几进制的数字可略

从第一个数字来开始识别,识别到不能识别为止。

例如:(注意,实际运用中,应该加引号,如 parseInt("1a11.1")这样)

1            1

1.1        1

1.1a             1

1a11.1        1

a1.1             NaN

 

变为浮点数:

同理上面

parseFloat("1.2a11.1")            1.2

 

转为数值:

Number(" 字符串 ")

值:

1.1        1.1

1.1a             NaN

 

保留指定位小数:

num.toFixed(digits);           输出的是 字符串

例如:

(100.111).toFixed(2); 输出是100.11

(100.1).toFixed(2)              输出的是100.10

(0).toFixed(2)                输出的是0.00

 

 

 

 

(7)字符串

假设字符串为str,例如str="aaa";

str.length           返回字符串的长度(字符数)汉字是1个字符

 

②得到输入框(input)的长度:var str = input.value;

得到输入框:document.getElementById("#input");     ——这里假设输入框ID为input

 

str.charAt(index)           得到字符串索引值(index)位置的字符

示例:"abc".charAt(0) 的值 "a";

最后一个字符是str.charAt(str.length-1);

 

str.indexOf(字符串, 从哪个index开始找)          //第二个参数可以省略

用处返回字符串第一个字符所在的位置(如果没有,则为 -1 ——注意,-1不是false);

可以用于判断字符串是否在str里。

 

str.search(regexp)              参数是正则表达式

返回字符串里是否有符合要求的,如果有,返回位置,如果没有,返回-1

例如:str.search(/[0-9]/)        查找字符串里是否有0~9的数字

       var str="abc1";

       $("#a").text(str.search(/[0-9]/));

输出为3

       var str="abc";

       $("#a").text(str.search(/[0-9]/));

输出为-1

 

str.match(regexp)  参数是正则表达式

返回匹配到的正则表达式的值,返回值是一个数组

例如:

       varstr="abc1332d";

       $("#a").text(str.match(/[0-9]/));

返回值是1

例如:(加/g返回全部的)

       varstr="abc1332d";

       $("#a").text(str.match(/[0-9]/g));

返回值是:1,3,3,2

如果找不到,返回值是null

 

str.replace(正则表达式|字符串被替换的字符串|函数)

例如:

       var str="abc21";

       $("#a").text(str.replace(/[0-9]/g,'q'));

返回值是:abcqq(两个数字都被替换为了q)

若不加g,那么则返回的是abcq1(第二个数字没有被替换)

 

str.substring(索引1, 索引2)             返回索引1~索引2之间的字符串

前包含后不包含,例如:

       var str="abc21";

       $("#a").text(str.substring(1,2));

输出的是b

假如索引2被省略,那么一直输出到字符串的结尾

例如:

       var str="abc21";

       $("#a").text(str.substring(1));

输出:bc21

 

str.slice(开始索引, 结束索引)          和上面功能一样,额外功能是,结束索引可以是负数。

假如是负数,那么从后往前数第n个,同样不包含结尾的。例如:

       var str="abc21";

       $("#a").text(str.slice(1,-1));

输出bc2(从下标1输出到下标倒数第1个但不包含倒数第一个)

       var str="abc21";

       $("#a").text(str.slice(-1));

输出1(因为从最后一个开始,到结尾,因此只有一个)

 

str.substr(开始索引, 长度)          从开始输出,输出指定长度的

       var str="abc21";

       $("#a").text(str.substr(1,2));

输出c(从第二个c开始取1个)

 

11str.split( 分隔符, 输出几个)          以分隔符为分割,输出数组

例如:

       varstr="a1b1c1d";

       $("#a").text(str.split("1"));

输出:数组a,b,c,d

分隔符也可以是正则表达式

       var str="a1b1c1d";

       $("#a").text(str.split(/[0-9]/));

输出不变

 

12str.toLowerCase()             将字符串变为小写

       var str="ABC";

       $("#a").text(str.toLowerCase());

返回值是abc

 

13str.toUpperCase()             将字符串变大写

       var str="aaaAs";

       $("#a").text(str.toUpperCase());

返回值是:AAAAS

 

14String(被转对象)             转为字符串

例如:

       var str = 111;

       str = String(str);

       $("#a").text(typeofstr);

返回值是:string

又例如:

       var str = true;

       str = String(str);

       $("#a").text(str);

返回值是:

true

这里是true是字符串true,而不是bool类型

又例如:

       var str =function(){alert("1")};

       str = String(str);

       $("#a").text(str);

输出:

function (){alert("1")}

 

 

15》转义字符

例如:

       var str ="a\"a";

       $("#a").text(str);

输出:a"a

转义后              转义前

\"                        "

\\                         \

\t                         tab按键

其他略

 

(8)对象

①创建对象:

var obj = newOjbect{};

或者是

var obj = {};

 

②增加对象的方法:

ojb.name ="John";

就是给加一个name属性,其值为John,同理可以加函数。

 

③删除对象方法:

deleteobj.name;

就是删除obj的name属性

 

④查看某个对象的类型:

obj.constructor;

例如:

       var str ={};

       str.name="John";

       str.age=10;

       if(str.constructor ==Object)

              $("#a").text("111");

是能输出111的

 

obj.toString()    将对象字符串(但并不是所有对象都可以)

例如:

       var str ={};

       str.name="John";

       str.age=10;

       var p = new Number(123);

       $("#a").text(p);

如果是p就可以输出123;如果是str就会输出Object

 

obj.valueOf()           获取某个对象的原始值

function abc(){this.a=1};

给其加一个属性abc.prototype.b=2;

此时输入abc.valueOf();

显示:function abc(){this.a=1};

 

 

obj.hasOwnProperty(参数 )             返回参数是否存在于对象的属性中。

可以用于验证属性是否从继承而来。如果是继承,返回依然是false。

 

例如:

       var str ={};

       str.name="John";

       str.age=10;

       $("#a").text(str.hasOwnProperty("name"));

输出true

 

 

 

 

(9)数组

①创建数组:

var array = new Array();

或者是:

var array =[];

例:var array = [1, 3, 5];

数组里可以是数字、字符串、对象、数组、bool值

 

以下假设数组为arr

arr.length           数组的长度(空为0

 

arr[x]            数组下标为x的成员

 

④修改数组元素,可以通过③中的直接修改。

 

arr.indexOf(元素, 从哪里索引开始)

第二个参数一般不用。返回值是索引值(和之前的indexOf用法一样);

 

arr.forEach(回调函数参数2)               遍历数组,回调函数遍历到每个成员都会执行。参数2可省略(貌似是什么this替代的什么的,不懂

回调函数的参数有三个:第一个是遍历到的元素,第二个是该元素的索引,第三个是这个数组本身。

例如:

$(document).ready(function(){

       var arr = [1, 3, 5 ,7];

       var result = new String();

       arr.forEach(function(item,index, array){

              item += 1;

              item =item.toString();

              result += item+"的索引是" + index + " ";

       })

       $("#a").text(result);

});

输出是:

2的索引是0 4的索引是1 6的索引是2 8的索引是3 

 

arr.reverse()            将数组的元素顺序颠倒一次

上代码即可:

$(document).ready(function(){

       var arr = [1, 3, 5 ,7];

       var result = new String();

       arr.reverse();

       arr.forEach(function(item,index, array){

              item =item.toString();

              result += item+"的索引是" + index + " ";

       })

       $("#a").text(result);

});

输出:

7的索引是0 5的索引是1 3的索引是2 1的索引是3 

 

arr.sort(回调函数       排序

不传回调函数的话,默认升序。

对字符串,按照Unicode码从第一个字符开始逐字符比较,然后排列。

例子:

$(document).ready(function(){

       var arr = [1, 3, 5, 7, 2,4, 6, 8];

       arr.sort(function(a,b){

              return b - a;            //b-a为降序,a-b为升序

       });

       $("#a").text(arr);

});

输出8,7,6,5,4,3,2,1

 

arr.push(元素1, 元素2, .....)           给已有数组加元素,加到最后位置。

arr.unshift( 元素1, 元素2, ...)              给已有数组添加,加到最前面

 

arr.shift()            获取数组第一个元素,并且从数组第一个元素中移除他。

如代码:

$(document).ready(function(){

       var arr = [1, 3, 5, 7, 2,4, 6, 8];

       alert(arr.shift());           //输出1

       $("#a").text(arr);         //从3开始输出

});

arr.pop()           类似上面,但从最后一个拿

 

11arr.splice( 从哪个索引开始删除多少, 插入的新元素);            可以用于添加、删除、替换等

       var arr = [1, 3, 5, 7];

       arr.splice(1,0,4);    //位置1开始删除0个再添加4

       $("#a").text(arr);

输出:1,4,3,5,7

var arr = [1, 3, 5, 7];

arr.splice(1,1);        //位置1删除1个于是剩下1,5,7

 

12arr.slice(开始索引, 结束索引)              返回值是数组的拷贝,开始位置包含结束不包含,注意这里没有p

       var arr = [1, 3, 5, 7];

       var b = arr.slice(1,2);          //从3开始5结束(不包含5)

       $("#a").text(b);

输出3

第二个参数没有就表示到结束。

arr.slice(0);              效果是拷贝所有

 

13arr.concat( 1, 2, .....)              可以把几个数组连在一起,arr数组是第一个,值1是第二个。(注意,参数不一定是数组,也可以是其他类型)

例如:

       var arr = [1, 3, 5, 7];

       var arr1 = [2,4,6];

       var str = "aa";

       var b = arr.concat(arr1,str);

       $("#a").text(b);

输出:1,3,5,7,2,4,6,aa

 

14arr.join( 分隔符 );

将数组以分隔符链接起来,输出字符串(前面有将字符串拆成数组);

如:

       var arr = [1, 3, 5, 7];

       arr = arr.join(" +");     //注意,这步的返回值才是我们想要的

       $("#a").text(arr);

输出:

1 + 3 + 5 + 7

如果没有参数,则默认是逗号,如果参数是"",那么无分隔符

 

15arr.map( 回调函数 )            遍历,并返回一个数组作为返回值

例如:

       var arr = [1, 3, 5, 7];

       var arr1 =arr.map(function(item, index, array){

              return item+1;

       });

       $("#a").text(arr1);

输出:2,4,6,8

 

16arr.reduce( 回调函数, 传入的初始值begin )    具体要看回调函数

function( 上一次函数的返回值last, item, index, array){

       retunr last + item;

}

last是上一次调用回调函数时的返回值,而第一次调用回调函数时,其值是begin。

例如:

       var arr = [1, 3, 5, 7];

       var arr1 =arr.reduce(function(last, item, index, array){

              console.log(last);

              return last + item;

       }, 100);

       $("#a").text(arr1);

输出值是116。原理是100 + 1 + 3 + 5 +7

console结果是100, 101, 104,109

注意:潜在的问题,没有执行第一次回调函数时的情况

假如没有给第二个参数begin,那么console.log只有三个结果(即1,4,9),说明第一次对于1,并没有执行回调函数。

如代码:

       var arr = [1, 3, 5, 7];

       var arr1 =arr.reduce(function(last, item, index, array){

              item += 1;

              return last + item;

       });

       $("#a").text(arr1);

预想输出是20(2+4+6+8),但实际输出是19(1+4+6+8);

另外需要注意,以上这次函数时,并没有对arr本身造成影响。

 

 


 

 

(10)函数

函数的形参少于/多于实参:

var fun = function(a,b){return a+b}

fun(1)返回NaN——形参多

fun(2,3,4)返回5(因为2+3)——实参多

 

所有的参数,被放置在arguments这个变量里,以数组形式保存。

例如:

       var arr = function(){

              var total=0;

              for(var i=0; i <arguments.length; i++)

              {

                     total += arguments[i];

              }

              return total;

       };

       console.log(arr(1,2,3));

输出结果是6

 

函数的参数,

原始类型——按值传递(函数内不影响函数外);

对象Object——按引用传递(函数内被修改,函数外也会被改);

如代码:

       dog = {age:1};  //对象

       var arr = function(obj){     //函数

              obj.age++;

              return obj;

       };

       cat = arr(dog);       //dog传递给函数,返回值给cat

       console.log(dog.age); //dog被修改

       cat.age++; //catdog对象的引用,修改属性

       console.log(dog.age); //dog再次被修改

说明:对象作为实参,是按引用传递,返回值若是对象,也是引用。可以理解为C++的引用变量,只要是引用变量,修改的便是同一个初始的变量(cat,dog还有函数里的obj,指向同一个对象dog);

 

构造函数:

function 函数名( 形参 )

{

       this.形参1 = 某个值;

       this.函数内自定义变量名 = 某个值;

       this.函数名 = function( 参数 )

       {

              函数内容

       }

       //这里可以理解为,隐含了一个return this

}

这就是一个构造函数

例如代码:

function fun( num ){ this.value = num;}

var obj1 = new fun(1);

console.log(obj1.value);

输出结果是1

 

构造函数的原型:

是加了prototype在对象名和属性名之间,例如:

obj.prototype.add= function(){ this.value ++;}

示例代码:

       function fun( num ){

              this.value = num;

       }

       fun.prototype.num=10;

       fun.prototype.plus =function(){

              this.value +=this.num;

       }

       var obj1 = new fun(1);

       var obj2 = new fun(2);

       console.log(obj2.num);     //输出10(说明和obj1互不干扰)

       obj1.plus();

       console.log(obj1.value);   //输出11

       console.log(obj1.num);     //输出10

       obj1.num++;   //10-》11

       obj1.plus();      //11+11=22

       console.log(obj1.value);   //输出22

       console.log(obj1.num);     //输出11

 

 

(11)Date日期

①当前时间:new Date();

 

②指定年月日:new Date(年, 月-1,日, 时, 分, 秒);        ——参数是数字,

注意:月是从0开始的(01月)

如代码:

console.log(new Date(2016,4,4,1,2,3))

输出Wed May 04 2016 01:02:03 GMT+0800 (中国标准时间)

 

③获取某个具体的:(注意,date是在之前获取到的时间)

获取年   date.getFullYear();

获取月   date.getMonth();

获取日   date.getDate();

获取时   date.getHours();

获取分   date.getMinutes();

获取秒   date.getSeconds();

 

④时间格式化:

如代码:

function dateFormat(date){

   return date.getFullYear() + "-" +padding(date.getMonth() + 1) + "-" + padding(date.getDate()) + "" + padding(date.getHours()) + ":" + padding(date.getMinutes())+ ":" + padding(date.getSeconds());

}

function padding(num){

   return num<10 ? "0" + num : num;

}

var date=new Date();

console.log(dateFormat(date));

输出:

2016-05-10 20:50:58

 

⑤设置date时间:

date.setFullYear(2010)   设置年份为2010

其他同理

date.setDate(40)    会在当前月份基础上,查看第40天是哪天(下个月的哪天),即会自动递增。


目录
相关文章
|
20小时前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
20小时前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
20小时前
|
JavaScript 前端开发 开发者
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
109 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
78 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
70 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
88 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
80 3