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

╰+哭是因爲堅強的太久メ 2022-07-24 04:17 177阅读 0赞

**注：$("\#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

⑧

![20160512222757755][]

第二个是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个）

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

例如：

varstr="a1b1c1d";

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

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

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

var str="a1b1c1d";

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

输出不变

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

var str="ABC";

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

返回值是abc

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

var str="aaaAs";

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

返回值是：AAAAS

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

例如：

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()**           类似上面，但从最后一个拿

**《11》arr.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

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

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

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

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

输出3

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

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

**《13》arr.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

**《14》arr.join( 分隔符 );**

将数组以分隔符链接起来，输出字符串（前面有将字符串拆成数组）；

如：

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

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

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

输出：

1 + 3 + 5 + 7

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

**《15》arr.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

**《16》arr.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++; //cat是dog对象的引用，修改属性**

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开始的（0是1月）

如代码：

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天是哪天（下个月的哪天），即会自动递增。

[20160512222757755]: /images/20220722/03aa346201cf4df9a55f7366084b0da0.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关从零开始学_JavaScript_系列（26）——dojo的aspect方法

相关从零开始学_JavaScript_系列（24）——查看对象属性，合并数组

相关从零开始学_JavaScript_系列（15）——js系列<3>（转为字符串，截取字符串）

相关从零开始学_JavaScript_系列（19）——js系列<6>闭包

相关从零开始学_JavaScript_系列（16）——js系列<5>（正则表达式）

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

相关从零开始学_JavaScript_系列（30）——NodeList

相关从零开始学_JavaScript_系列（47）——Reflect

相关从零开始学_JavaScript_系列（59）——async函数

相关从零开始学_JavaScript_系列（58）——Thunk函数