澳门新葡萄京官网注册JavaScript 数组中的 indexOf 方法详解

最近项目遇到一个小问题代码我会简化成小例子展示给大家。

地址:https://www.nowcoder.com/ta/js-assessment

  在 JS
中一切皆对象,并提供了多个内置对象,比如:String、Array、Date
等,此外还支持自定义对象。对象只是一种特殊类型的数据,并拥有属性和方法,属性是与对象相关的值,方法是能够在对象上执行的动作。

用心看到最后会有收获哈,基础扎实的童鞋可以直接跳到数组类型使用

题目描述#

找出元素 item 在给定数组 arr 中的位置


function indexOf(arr, item) {
  if (Array.prototype.indexOf){
        return arr.indexOf(item);
   } else {
     for (var i = 0; i < arr.length; i++){
              if (arr[i] === item){
                  return i;
            }
      }
  }     
  return -1;
}

在IE7的控制台输出Array.prototype.indexOf 结果为undefined
,低版本IE不兼容数组这个方法,因此首先要判断下该方法是否存在。
ECMAScript提供了两种方法Array.prototype.lastIndexOf()Array.prototype.indexOf()
indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置,若未找到,则返回-1。

function indexOf(arr, item) {
   return arr.indexOf(item);
 }

function indexOf(arr, item) {
    var pos=-1;     //设置一个标记
    arr.forEach(function(item1,index){
        if(arr[index]==item){
            pos=index;
            return;
        }
    }) ;
    return pos;
}

function indexOf(arr,item){
  return arr.indexOf(item)>-1?arr.indexOf(item):-1;
}

如果是数组嵌套数组,如果是多维的怎么查?


 

说到 indexOf
大家并不陌生,判断字符串是否包涵子字符串时特别常用(正则不熟练同学的利器)。

关于indexOf 方法#

1、String 对象

  String
对象用于处理文本,也就是字符串。一个字符串用于存储一系列的字符,通常 JS
字符串是原始值,**
可以使用变量声明,也可以使用 new
关键字将字符串定义为一个对象,在 JS 中并不提倡使用 new
关键字创建对象。原始值字符串是没有属性和方法的,但是可以使用 JS
的属性和方法,因为 JS
在执行属性和方法时可以把原始值视为对象。**

  可以使用 JS 内置的 length
属性来计算字符串的长度。
比如:

var str = "abcdefghijklmnopqrstuvwxyz";
alert(str.length);    //返回:26

  下面是一些字符串常用的方法:

  (1)、charAt()

  str.charAt(index)  返回指定索引位置的字符,也就是获取字符串的某一位字符。

  (2)、concat()

  str1.concat(str2, str3, ….,
strN)
  用于连接两个或多个字符串,返回连接后的字符串。

  (3)、indexOf()

  str.indexOf(某个字符, strat)  返回字符串中某个字符从指定位置开始首次出现的位置,第二个参数可选,规定在字符串中开始查找的位置,他的合法值为
0 到字符串的长度
-1:str.length-1,如果不设置该参数,则从字符串的首字符开始查找。返回值为数值,如果找到则返回该字符首次出现的位置,没找到则返回
-1。

  (4)、search()

  search(str/RegExp)  返回字符串中某个字符首次出现的位置,该参数为字符或者正则表达式,配合正则效果更好,返回值为数值,如果没有匹配到,则返回
-1。

 

  indexOf() 和 search() 区别:

  这两个方法都返回字符首次出现的位置,但是配合正则使用
search() 要比 indexOf()
更强大,如果是一个普通的字符串或者对一个具体的字符串来提取,那么使用
indexOf()
的效率更好,更省资源,但如果是查找特殊的字符串,比如有数字有字母,那么
indexOf() 就没办法执行了,必须要使用正则表达式和 search()
方法。

 

  (5)、match()

  match(str/RegExp)  用于查找字符串中指定的字符,并且返回该字符,**该方法配合正则使用效果更好,如果不使用正则表达式,则只是返回首次出现的指定字符,不会再向后匹配,如果配合正则并且全局匹配,则以数组形式返回字符串中所有指定的字符,如果没找到,则返回
null。**

  (6)、replace()

  replace(str/RegExp, newstr)  用于字符串中将一些字符替换成另一些字符,返回一个新字符串。该方法有两个参数,第一个参数规定需要被替换的字符,第二个参数为新字符,就是替换后要显示的字符。配合正则使用效果更好,可以替换所有匹配。最常见的应用就是:敏感词过滤。

  (7)、lastIndexOf()

  lastIndexOf() 和indexOf
相反,lastIndexOf(某个字符,
strat)  返回字符串中某个字符从指定位置开始最后出现的位置,在指定位置从后向前查找。
第二个参数可选,他的合法值为0到字符串的长度
-1:str.length-1,如果不设置该参数,则从字符串的最后一个字符开始查找。返回值为数值,如果找到则返回该字符最后出现的位置,没找到则返回
-1。

  (8)、slice()

  slice(start, end)  提取字符串的某个部分,并以新的字符串返回被提取的部分,不包括结束位置的字符。第一个参数为起始位置,第一个字符的位置为
0,第二个参数 end
可选,结束位置的下标,如果不设置该参数,则提取从起始位置开始到字符串最后一个字符的子字符串。提取字符的参数可以是负数,则规定的是从字符串的尾部位置开始算起,也就是说:-1
代表字符串最后一个字符,-2 指倒数第二个字符,依次类推。提取全部字符可写为:slice(0),也可以不设置参数,直接使用。 

  (9)、substr() 

  substr(start, length)  提取字符串从开始位置指定字符串长度的字符,并以新的字符串返回被提取的部分。**该方法可以替代 substring() 和 slice()
来使用。**第一个参数为起始位置,可以是负数,则从尾部开始算起。第二个参数为提取字符串的长度,该参数可选,且不能小于
1,否则返回一个空字符串,如果不设置该参数,则返回从起始位置开始到最后一个字符的子字符串。

  (10)、substring()

  substring(from,
to)  提取介于字符串指定的两个下标中间的字符,并以新的字符串返回被提取的部分,不包括结束位置的字符。
第一个参数规定提取子串的第一个字符在字符串中的位置,简单说就是开始位置,该参数是一个非负的整数。第二个参数是要提取的子串最后一个字符在字符串中的位置,也就是结束位置,该参数可选,为一个非负的整数,如果不设置该参数,则返回从开始位置到最后一个字符的子字符串。如果第二个参数比第一个参数大,则在提取子串之前会将较小的数作为开始位置,较大的作为结束位置。

 

  slice()、substr()
、substring()三者区别:

  从定义上看,三者都为提取子字符串,slice()
和substring()
可以看成是同类,参数都是字符串的某个开始位置到结束位置,都不包括结束位置。而
substr()
则是提取从字符串的某个位置开始,指定字符串长度的子字符串。他们的共同点都是:第二个参数可选,如果不设置,都返回从开始位置到最后一个字符的子字符串。

  从可设置的参数看,slice()
的两个参数都可为负数,表示从尾部开始算起。substr()
的第一个参数也可以设置为负数,而 substring()
的参数则不接受负数,如果设置为负数或者其他无效的数,则会被当作 0
处理。

  (11)、split()

  str.split()  用于分割字符串,返回字符串数组。该方法有2个可选的参数,第一个参数为分割方式,可以是正则表达式,第二个参数设置返回字符串的最大长度。

 1 <script>
 2 var str = "Good good study day day up!";
 3 
 4 //忽略参数:
 5 var arr = str.split();
 6 document.write(arr);
 7 //返回:Good good study day day up!
 8 
 9 //分割每个字符包括空格:
10 var arr = str.split('');
11 document.write(arr);
12 //返回:G,o,o,d, ,g,o,o,d, ,s,t,u,d,y, ,d,a,y, ,d,a,y, ,u,p,!
13 
14 //使用空格作为分割符:
15 var arr = str.split(' ');
16 document.write(arr);
17 //返回:Good,good,study,day,day,up!
18 
19 //规定返回数组的最大长度
20 var arr = str.split(' ', 3);
21 document.write(arr);
22 //返回:Good,good,study
23 
24 //使用一个字符作为分割符:
25 var arr = str.split('d');
26 document.write(arr);
27 //返回:Goo, goo, stu,y ,ay ,ay up!
28 </script>

 

  (12)、toString()

  toString()  方法用于将对象转换为字符串。

  (13)、valueOf() 

  valueOf()  方法用于将对象转换为一个基本数据的值,返回对象的原始值。

  (14)、toLowerCase()

  str.toLowerCase()  方法用于将字符串转换为小写。

  (15)、toUpperCase()

  str.toUpperCase()  方法用于将字符串转换为大写。

 

String 类型的使用

温习一下大家熟知的字符串用法,举个例子

let str = 'orange';

str.indexOf('o');  //0
str.indexOf('n');  //3
str.indexOf('c');  //-1

这里 0 和 3 分别是 o 和 n 在字符串中出现的位置。起始下标是 0。而 -1
代表未匹配。

曾经有人问我为什么偏偏是 -1 不是 null 或者
undefined。你去问制定规则的人啊!一脸无奈。

大家看到这里感觉没什么亮点啊,别急接着再来一个例子

let numStr = '2016';

numStr.indexOf('2');  //0
numStr.indexOf(2);  //0

看到这里有个小点就是 indexOf 会做简单的类型转换,把数字转换成字符串 '2' 然后再执行。

String 类型的使用##


let str = 'orange';

str.indexOf('o');  //0
str.indexOf('n');  //3
str.indexOf('c');  //-1

let numStr = '2016';

numStr.indexOf('2');  //0
numStr.indexOf(2);  //0

indexOf 会做简单的类型转换,把数字转换成字符串 ‘2’ 然后再执行。

2、Number 对象

  JS
只有一种数字类型,可以是整数,也可以是小数。**
整数最大可以有 15 位,小数最大可以有17位,在
JS
中小数运算并不是非常精确,所以大多数情况下,需要将小数转换为整数。注意:整数的第一位不能为
0,否则会得到意想不到的结果。**如下面的运算结果:

1 var sum = 0.1 + 0.2;
2 alert(sum);
3 //返回:0.30000000000000004

 

  (1)、infinity
和 -infinity

  当数字运算超过了 JS
所能表示的数字上限时,结果就为一个无穷大的值,在 JS
中用infinity表示。当负数运算超过了 JS
的负数范围,结果就为一个负无穷大的值,也叫无穷小,在 JS 中用 -infinity
表示。基于无穷大的加减乘数运算,他们的结果还是无穷大,并保留正负号。一个整数或者负数除以0,得到的都是无穷大。

  (2)、NaN

  NaN
表示非数字的特殊值,该属性用于指示一个值不是数字。返回值为布尔值。可以使用函数
isNaN() 判断一个值是否是 NaN 值。

 1 var x = 123;
 2 var y = 'abc';
 3 
 4 alert(isNaN(x));    //返回:false
 5 alert(isNaN(y));    //返回:ture
 6 
 7 alert(x == y);    //返回:false
 8 //NaN和NaN是不相等的。所以为假。
 9 
10 var a = 2/0;
11 alert(isNaN(a));    //返回:false
12 //无穷大是一个数字

 

  Number 对象属性:

  (1)、MAX_VALUE
和 MIN_VALUE

  MAX_VALUE
表示最大的数,它的近似值为: 1.7976931348623157 x
10308。如果大于该数则表示无穷大。MIN_VALUE
表示最小的数,它的近似值为:5 x 10-324,MIN_VALUE 是最接近 0
的数,但不是负值。比该属性小的值用 0 表示。由于他们都是 Number
对象的静态属性,只能通过 Number 调用,所以使用自定义的 Number
将无法获取属性,返回值为 undefined。

 1 //JS最大数
 2 alert(Number.MAX_VALUE);
 3 //返回:1.7976931348623157e+308
 4 
 5 //JS最小数
 6 alert(Number.MIN_VALUE);
 7 //返回:5e-324
 8  
 9 //e为科学计数法:
10 var a = 123e5;
11 var b = 123e-5; 
12 
13 alert(a);    //返回:12300000
14 alert(b);    //返回:0.00123

 

  (2)、POSITIVE_INFINITY
和 NEGATIVE_INFINITY

  POSITIVE_INFINITY
属性代表无穷大,表示比 MAX_VALUE 大的数。NEGATIVE_INFINITY
属性表示负无穷大,表示比 MIN_VALUE 小的数。由于他们都是 Number
对象的静态属性,只能通过 Number 调用,所以使用自定义的 Number
将无法获取属性,返回值为 undefined。

1 alert(Number.POSITIVE_INFINITY);
2 //返回:Infinity
3 
4 alert(Number.NEGATIVE_INFINITY);
5 //返回:-Infinity

 

  Number 对象方法:

  (1)、toExponential() 

  toExponential(n)  可把对象的值转换成指数计数法。该方法有一个可选的参数,用于规定计数法中的小数位数,包括
0 和 20 之内的值,如果不设置该参数,将使用尽可能多的数字。

  (2)、toFixed()

  toFixed(n)  可把数字转换为字符串,并四舍五入为指定小数点后位数的数字。该方法必须设置一个参数,规定小数的位数,包括
0 和 20 之内的值,如果不设置该参数,将默认为 0。

  (3)、toPrecision()

  toPrecision(n)  可把数字格式化为指定的长度,如果超出指定的长度将转换为指数计数法。该方法必须设置一个参数,规定转换为指数计数法的最小位数,包括
1 和 21 之内的值,如果不设置该参数,则调用 toString()
方法,而不对数字转换。

  (4)、toString()

  toString()  方法用于将对象转换为字符串。

  (5)、valueOf() 

  valueOf()  方法用于将对象转换为一个基本数据的值,返回对象的原始值。

 

Number 类型的使用

大家可能会想 number 类型有没有 indexOf 方法因为会做隐式转换嘛!明确告诉大家没有,上例子

let num = 2016;

num.indexOf(2);  //Uncaught TypeError: num.indexOf is not a function

非要对 number 类型使用 indexOf 方法嘞?那就转换成字符串咯,接着上例来写

//二逼青年的写法
num = '2016';
num.indexOf(2);  //0

//普通青年的写法
num.toString().indexOf(2);  //0

//文艺青年的写法
('' + num).indexOf(2);  //0

第一种写法简单直接,对于已知的较短的数字也不是不可行。但是 num
变量针对不同数据是变化的时候,怎么办呢?

第二种写法最为常用,但对比第三种写法长了一点。哈哈,其实都可以,代码洁癖的人喜欢第三种

Number 类型的使用##


let num = 2016;

num.indexOf(2);  //Uncaught TypeError: num.indexOf is not a function

如果非要对 number 类型使用 indexOf 方法嘞?那就转换成字符串

//二逼青年的写法
num = '2016';
num.indexOf(2);  //0

//普通青年的写法
num.toString().indexOf(2);  //0

//文艺青年的写法
('' + num).indexOf(2);  //0

3、Math 对象

  Math
对象的作用是:执行常见的算数任务。该对象无需在使用这个对象之前对它进行定义。

  下面主要介绍
Math
对象的一些常用方法:

  (1)、ceil() 

  Math.ceil()  可对一个数向上取整,如果参数是一个整数,该值不变。向上取整运算返回的是一个大于或等于该值并且与之最接近的整数。

 1 alert(Math.ceil(-0.1));    //返回:0
 2 
 3 alert(Math.ceil(-9.9));    //返回:-9
 4 
 5 alert(Math.ceil(2.1));     //返回:3
 6 
 7 alert(Math.ceil(2.9));     //返回:3
 8 
 9 var num = 8;
10 alert(Math.ceil(num));    //返回:8

 

  (2)、floor() 

  Math.floor()  可对一个数进行向下取整,如果参数是一个整数,该值不变。向下取整运算返回一个小于或等于该值的最大整数。

 1 alert(Math.floor(-0.1));    //返回:-1
 2 
 3 alert(Math.floor(-9.9));    //返回:-10
 4 
 5 alert(Math.floor(2.1));     //返回:2
 6 
 7 alert(Math.floor(2.9));     //返回:2
 8 
 9 var num = 8;
10 alert(Math.floor(num));    //返回:8

 

  (3)、round() 

  Math.round()  可把一个数字四舍五入为最接近的整数。

 1 alert(Math.round(-0.1));    //返回:0
 2 
 3 alert(Math.round(-9.9));    //返回:-10
 4 
 5 alert(Math.round(2.49));     //返回:2
 6 
 7 alert(Math.round(2.5));     //返回:3
 8 
 9 var num=8;
10 alert(Math.round(num));    //返回:8

 

  (4)、random()
方法

  Math.**random()  可返回介于
0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。**

 1 //获得一个随机数:
 2 alert(Math.random());
 3 
 4 //获得 0~10 之间的随机数:
 5 alert(Math.random()*10);
 6 
 7 //random ()方法和round()方法配合,可获得一个不大于10的整数:
 8 alert(Math.round(Math.random()*10));
 9 
10 //随机数每次返回的值都不同。

 

Array 类型的使用

大家提起精神,大boss来了。

数组方法大家再熟悉不过了,却忽略了数组有 indexOf 这个方法(我个人感觉)。

干说不练瞎扯淡,遇到了什么问题,注意点又在哪里?

let arr = ['orange', '2016', '2016'];

arr.indexOf('orange');  //0
arr.indexOf('o');  //-1

arr.indexOf('2016');  //1
arr.indexOf(2016);  //-1

这里没把例子拆的那么细,四个用例足以说明问题。

  • arr.indexOf(‘orange’) 输出 0 因为 ‘orange’ 是数组的第 0
    个元素,匹配到并返回下标。
  • arr.indexOf(‘o’) 输出 -1 因为此方法不会在每一个元素的基础上再次执行
    indexOf 匹配。
  • arr.indexOf(’2016′) 输出 1
    因为此方法从头匹配直到匹配到时返回第一个数组元素的下表,而不是返回全部匹配的下标。
  • arr.indexOf(2016) 输出 -1 注意:这里不会做隐式类型转换。

既然坑已经发现我们不妨刨根问底。去MDN官网一看究竟。对此话题感兴趣的朋友可以直接跳转到 Array.prototype.indexOf()

只想了解的朋友下面给大家官方的 Description。

indexOf() compares searchElement to elements of the Array using strict
equality (the same method used by the === or triple-equals operator).

一目了然,这里用的是严格等于(===)。大家做类似判断的时候多留意。不要误认为数字会转成字符串,同理字符串也不会转换成数字。

Array 类型的使用##


let arr = ['orange', '2016', '2016'];

arr.indexOf('orange');  //0
arr.indexOf('o');  //-1

arr.indexOf('2016');  //1,从头匹配直到匹配到时返回第一个数组元素的下标
arr.indexOf(2016);  //-1,注意:这里不会做隐式类型转换。

indexOf() compares searchElement to elements of the Array using strict
equality (the same method used by the === or triple-equals operator).

注意:这里用的是严格等于(===)

MDN官网Array.prototype.indexOf()

4、Array 对象

  数组对象的作用是:使用单个变量来存储一系列的值。

  数组最常用的属性就是
length,用于返回数组中数据的长度,也可用于设置数组的长度。

1 var arr = [1,2,3,4,5,6];
2 arr.length=3;
3 alert(arr);    //返回1,2,3
4 
5 //arr.length=0;        可用于快速清空数组

 

  下面主要介绍
Array 对象一些常用方法:

  (1)、concat()

  arr.concat(arr1, arr2, …,
arrN)  用于连接两个或多个数组,该方法返回一个新数组,不改变原来数组。**
该方法的参数可以是具体的值,也可以是数组对象,可以是任意多个。如果该参数是具体的值,将把该值插入到原来的数组返回。**

  (2)、join()

  join()  用于将数组中的所有元素转换成一个字符串,元素是通过指定的分隔符分隔的。该方法有一个可选参数,用于指定分隔方式。如果不设置该参数,默认使用逗号分割。

 1 var arr1 = [86,'010']
 2 var arr2 = [15278654321]
 3 var arr3 = arr1.concat(arr2);
 4 
 5 document.write(arr3.join());
 6 //返回:86,010,15278654321
 7 
 8 document.write(arr3.join("."));
 9 //返回:86.010.15278654321
10 
11 document.write(arr3.join("-"));
12 //返回:86-010-15278654321
13 
14 document.write(arr3.join("|"));
15 //返回:86|010|15278654321

 

  (3)、reverse()

  arr.reverse()  用于颠倒数组中元素的顺序。

1 var arr = ['Banana', 'Orange', 'Apple'];
2 document.write(arr);
3 //返回:Banana, Orange, Apple
4 
5 document.write(arr.reverse());
6 //返回:Apple,Orange,Banana

 

  (4)、slice()

  arr.slice(start,
end)  可从已有的数组中返回选定的元素。该方法也适用于提取子字符串。也不包括开始位置和结束位置的元素。
第一个参数规定从何处开始选取,第二个参数可选,规定从何处结束选取,如果省略该参数,则返回从开始位置到数组尾部的所有元素。如果参数为负数,则从数组最后一个元素开始算起。

  (5)、sort()

  arr.sort(方法函数)  用于对数组的元素排序。排序可以是字母或数字,并按升序或降序。默认排序顺序为按字母升序。**使用数字排序,你必须通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。如果数字排序不指定方法函数,默认是按照字母升序,则
100 会排在 15 前边。**

 1 var arr = [99,15,21,2,8,56,100,1];
 2 
 3 //默认排序:
 4 document.write(arr.sort());
 5 //返回:1,100,15,2,21,56,8,99
 6 
 7 //指定方法函数,按升序排序。
 8 function ascNum(a,b) {
 9     return a-b;
10 }
11 document.write(arr.sort(ascNum));
12 //返回:1,2,8,15,21,56,99,100
13 
14 //指定方法函数,按降序排序。
15 function desNum(a,b) {
16     return b-a;
17 }
18 document.write(arr.sort(desNum));
19 //返回:100,99,56,21,15,8,2,1

 

  (6)、shift() 

  arr.shift()  删除数组的第一个元素。 此方法将改变数组的长度。

1 var arr = ['Banana', 'Orange', 'Apple'];
2 document.write(arr.length);    //返回:3
3 
4 arr.shift();
5 document.write(arr);    //返回:Orange,Apple
6 
7 document.write(arr.length);     //返回:2

 

  (7)、pop()

  arr.pop()  删除数组的最后一个元素。此方法将改变数组的长度。

1 var arr = ['Banana', 'Orange', 'Apple'];
2 document.write(arr.length);    //返回:3
3 
4 arr.pop();
5 document.write(arr);    //返回:Banana,Orange
6 
7 document.write(arr.length);     //返回:2

 

  (8)、unshift()

  arr.unshift()  向数组开头添加一个或多个元素。此方法将改变数组的长度。

1 var arr = ['Banana', 'Orange', 'Apple'];
2 document.write(arr.length);    //返回:3
3 
4 arr.unshift('Mango', 'Pear');
5 document.write(arr);
6 //返回:Mango,Pear,Banana,Orange,Apple
7 
8 document.write(arr.length);    //返回:5

 

  (9)、push()

  arr.push()  向数组末尾添加一个或多个元素。此方法将该变数组的长度。

1 var arr= ['Banana', 'Orange', 'Apple'];
2 document.write(arr.length);    //返回:3
3 
4 arr.push('Mango', 'Pear','Lemon');
5 document.write(arr);
6 //返回:Banana,Orange,Apple,Mango,Pear,Lemon
7 
8 document.write(arr.length);    //返回:6    

 

  (10)、splice()

  arr.splice(start, length, arrElement1, …,
arrElementN)  用于删除、插入或替换数组的元素。该方法会改变数组的原始数据。
该方法有多个参数,前两个为必须的参数。第一个参数规定从何处开始删除或插入。第二个参数规定删除元素的长度,如果设置为
0,则不删除元素,如果不定义该参数,则删除从 start
规定的位置开始到原数组结尾的所有元素。最后的参数可选,要添加到数组的新元素。

 1 var arr = [1,2,3,4,5,6];
 2 
 3 //删除元素的应用:
 4 //从第2个位置开始,删除长度为3。
 5 arr.splice(2,3);
 6 document.write(arr+'<br>');
 7 //返回:1,2,6
 8 
 9 //插入元素的应用:
10 //从第2个位置开始,删除为0个元素,也就是不删除,插入abc。
11 arr.splice(2,0,'a','b','c');
12 document.write(arr+'<br>');
13 //返回:1,2,a,b,c,3,4,5,6
14 
15 //替换元素的应用:
16 //从第2个位置开始,删除3个元素,再插入def。
17 arr.splice(2,3,'d','e','f');
18 document.write(arr);
19 //返回:1,2,d,e,f,6

 

  (11)、toString() 

  toString()  方法可把数组转换为字符串,并返回结果。

  (12)、valueOf() 

  valueOf()  方法返回数组对象的原始值。

 

5、Date 对象

  Date 对象用于处理日期和时间。可以通过 new
关键词来定义 Date 对象。

  下面例子是获取当前的所有日期:

 1 var d = new Date();
 2 //获取当前日期
 3 document.write(d);
 4  
 5 //获取当前的年份
 6 document.write(d.getFullYear() + '年');
 7 
 8 //获取当前月份,月份从0开始计算,所以需要+1
 9 document.write(d.getMonth() + 1 + '月');
10 
11 //获取当前是当月中的哪一天
12 document.write(d.getDate() + '日');
13 
14 //获取当前时间的小时
15 document.write(d.getHours() + '时');
16 
17 //获取当前时间的分钟
18 document.write(d.getMinutes() + '分');
19 
20 //获取当前时的秒数
21 document.write(d.getSeconds() + '秒');
22 
23 //获取当前的毫秒数t
24 document.write(d.getMilliseconds() + '毫秒');
25 
26 //获取星期
27 document.write('星期' + d.getDay());
28 
29 //星期从0开始算起,从星期天开始计算。
30 //getDay()返回的是0-6的数字,0表示星期天。如果要返回相对应的“星期”,需要通过数组完成。
31 var weekday = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
32 var week = d.getDay();
33 document.write(weekday[week]);

 

  下面例子用于设置日期:

 1 var d = new Date();
 2 
 3 //设置年份
 4 d.setFullYear(2020);
 5 document.write(d);
 6 
 7 //该方法也可用于设置月份(介于0-11之间)和天数(介于1-31之间)。
 8 //月份:-1为去年的最后一月,-2为去年的倒数第二个月。
 9 //12为明年的第一个月,13为明年的第二个月。
10 //天数:0为上个月最后一天,-1为上个月最后一天之前的天数。
11 //如果当月有31天,32为下个月第一天,如果当天只有30天,32则为下个月的第二天
12 d.setFullYear(2020, 11, -1);
13 document.write(d);
14 //设置月份(介于0-11之间),也可用于设置天数
15 d.setMonth(5);
16 document.write(d);
17 
18 
19 //设置天数(介于1-31之间)
20 d.setDate(12);
21 document.write(d);
22 
23 //设置小时
24 //值介于0(午夜)-23(晚上11点)之间,-1为昨天的最后一个小时,24为明天的第一个小时
25 d.setHours(24);
26 document.write(d);
27 
28 //该方法也可用于设置分钟、秒以及毫秒数。
29 //分钟:介于0-59之间,-1为上一小时最后一分钟,60为下一个小时第一分钟
30 //秒:介于0-59之间,-1为上一分钟最后一秒,60为下一分钟第一秒
31 //毫秒:介于0-999之间,-1为上一秒钟的最后一毫秒,1000为下一秒钟的第一毫秒
32 d.setHours(21,30,1);
33 document.write(d);
34 
35 //获取小时 一个小应用:返回24小时之前的的时间
36 var d = new Date();
37 d.setHours(d.getHours()-24);
38 document.write(d);
39 
40 //设置分钟,也可用于设置秒数和毫秒数
41 d.setMinutes(20);
42 document.write(d);
43 
44 //设置秒,也可用于设置毫秒
45 d.setSeconds(10);
46 document.write(d);
47 
48 //设置毫秒
49 d.setMilliseconds(999);
50 document.write(d);

 

  getTime() 和
setTime()

 1 var d = new Date();
 2 
 3 //获取1970年元旦距今的毫秒数
 4 document.write(d.getTime()+'毫秒');
 5 
 6 //向1970年元旦增加1325347200000毫秒,返回新日期
 7 d.setTime(1325347200000);
 8 document.write(d);
 9 
10 //获取指定时间据1970年之间的毫秒数
11 var d = Date.parse("2012, 12, 12");
12 document.write(d+'毫秒');
13 
14 //计算1970年元旦至今有多少年:
15 var minutes = 1000*60;
16 var hours = minutes*60;
17 var day = hours*24;
18 var year = day*365;
19 var d = new Date();
20 var t = d.getTime();
21 var y = Math.round(t/year);
22 document.write(y + '年');

 

  日期转换:

 1 var d = new Date();
 2 //当前时间
 3 document.write(d);
 4 
 5 //将日期部分(不包括时分秒)转换为字符串
 6 document.write(d.toDateString());
 7 
 8 //将日期部分(不包括年月日)转换为字符串
 9 document.write(d.toTimeString());
10 
11 //根据本地时间将日期转换为字符串
12 document.write(d.toLocaleString());
13 
14 //根据本地时间将日期部分(不包括时分秒)转换为字符串
15 document.write(d.toLocaleDateString());
16 
17 //根据本地时间将日期部分(不包括年月日)转换为字符串
18 document.write(d.toLocaleTimeString());
19 
20 //使用ISO标准将日期转换为字符串
21 //该标准格式为:YYYY-MM-DDTHH:mm:ss.sssZ
22 document.write(d.toISOString());
23 
24 //将日期转换为JSON格式
25 //JSON格式与ISO标准是同样的格式
26 document.write(d.toJSON());

 

  toString()  方法可把日期对象转换为字符串,当日期需要显示为一个字符串时,该方法会被自动调用。

  valueOf()  方法返回日期对象的原始值。该方法将返回1970年元旦至今的毫秒数。

 

总结

小知识点积累,不作为深入讨论的话题,因此这里没有解释 indexOf()
的第二个参数,相信大家都知道第二个参数的作用,不知道的可以看这里String.prototype.indexOf(),然后结合上面数组的链接也看一下第二个参数。

Array.prototype.forEach()##

ECMAScript5中遍历数组元素的新方法,使用forEach()方法

/*
* ECMAScript5中遍历数组元素的新方法,使用forEach()方法
* @ 语法:arr.forEach(callback[, thisArg]);    
* @ param callback  // 回调函数
* @ param thisArg   // 改变回调函数里面的this指向
* @ 语法:arr.forEach(function(value, index, array));
* @ param value     // 数组的值
* @ param index     // 数组的索引
* @ param array     // 数组本身
*/

// forEach循环
var arr = [1,2,3,4,5];
arr.forEach(function(value,index, array){
    console.log("第"+ index + "的值是:" + value + ",数组本身:" + array);
});

/* logs 
第0的值是:1,数组本身:1,2,3,4,5
第1的值是:2,数组本身:1,2,3,4,5
第2的值是:3,数组本身:1,2,3,4,5
第3的值是:4,数组本身:1,2,3,4,5
第4的值是:5,数组本身:1,2,3,4,5
*/

注意: 没有办法中止或者跳出 forEach
循环,除了抛出一个异常。如果你需要这样,使用forEach()方法是错误的,你可以用一个简单的循环作为替代。如果您正在测试一个数组里的元素是否符合某条件,且需要返回一个布尔值,那么可使用
Array.every
或 Array.some 。如果可用,新方法
find()
或者findIndex()
也可被用于真值测试的提早终止。

6、数据类型转换

  JS
中有5种不同的数据类型:string、number、boolean、object、function。

  3 种对象类型:Object、Date、Array。2
个不包含任何值的类型:ubll、undefined。

  可以使用 typeof 操作符来查看 JS
变量的数据类型。

 1 var str = '小明';
 2 alert(typeof str);    //返回:string
 3 
 4 var num = 12;
 5 alert(typeof num);    //返回:number
 6 
 7 var num1 = NaN;
 8 alert(typeof num1);    //返回:number
 9 
10 var fun = function (){alert('abcd');};
11 alert(typeof fun);    //返回:function
12 
13 var boo = true;
14 alert(typeof boo);    //返回:boolean
15 
16 var obj = document;
17 alert(typeof obj);    //返回:object
18 
19 var arr = [1,2,3,4];
20 alert(typeof arr);    //返回:object
21 
22 var d = new Date();
23 alert(typeof d);    //返回:object
24 
25 var json = {a:'12', b:21};
26 alert(typeof json);    //返回:object
27 
28 var n = null;
29 alert(typeof n);    //返回:object
30 
31 var x;
32 alert(typeof x);        //返回:undefined
33 alert(typeof y);        //返回:undefined
34 //未定义有2种情况:
35 //1、真的没有定义(如y)
36 //2、虽然定义了,但是没有给赋值(如x)

 

  数组对象和日期对象无法通过 typeof
来判断数据类型,因为都返回 object。可以使用 constructor
属性来查看。**
constructor
属性返回一个对象的构造函数,将返回的构造函数转换为字符串,再判断是否包含数组和日期。**

 1 //返回数组和日期的构造函数:
 2 var arr = ["abc", "123", "123abc", "abc123"];
 3 alert(arr.constructor);
 4 //返回:function Array() { [native code] }
 5 
 6 var d = new Date;
 7 alert(d.constructor);
 8 //返回:function Date() { [native code] }
 9 
10 
11 var arr = ["abc", "123", "123abc", "abc123"];
12 function con(obj) {
13     return arr.constructor.toString().indexOf("Array") > -1;
14 }
15 alert(con(arr));    //返回:ture
16 
17 var d = new Date();
18 function cons(obj) {
19     return d.constructor.toString().indexOf("Date") > -1;
20 }
21 alert(cons(d));    //返回:ture

  

  强制类型转换,也叫显式类型转换。

  (1)、转换为字符串:

  全局方法 string() 和 toString()
方法可用于将一个值转换为字符串。string()
可用于任何类型的数字、字母、变量、表达式。

  **二者区别:**

  大多数值都有
toString() 方法,除了 null 和 undefined。字符串本身也可以使用 toString()
方法,将返回字符串的原始值。

  任何值都可以使用
string() 方法,如果该值有 toString() 方法,则使用该方法,如果该值没有
toString() 方法,那就为 null 和 undefined,则返回 null 和
undefined。

 1 var str = '小明';
 2 alert(String(str));
 3 alert(str.toString());
 4 //都返回:小明
 5 
 6 var num = 123;
 7 alert(String(num));
 8 alert(num.toString());
 9 //都返回:123
10 
11 var and = 123+100;
12 alert(String(and));
13 alert(and.toString());
14 //都返回:223

 

  (2)、转换为数字:

  全局方法 Number()
可以将字符串转换为数字。空字符串转换为 0,特殊值字符串将转换为
NaN。

1 var str = '123';
2 alert(Number(str));    //返回:123
3 
4 var str = '';
5 alert(Number(str));    //返回:0
6 
7 var str = '200px';
8 alert(Number(str));    //返回:NaN

 

  最常用的就是转换为整数和小数。parseInt()
方法用于转换整数。parseFloat() 方法用于转换小数。

 1 var a = '3.1'
 2 alert(parseInt(a));    //返回:3
 3 var a = '3.9'
 4 alert(parseInt(a));    //返回:3
 5 var a = '12px34';
 6 alert(parseInt(a));    //返回:12
 7 var a = 'px1234';
 8 alert(parseInt(a));    //返回:NaN
 9 
10 var d = '3.14';
11 alert(parseFloat(d));    //返回:3.14
12 var d = '3.99';
13 alert(parseFloat(d));    //返回:3.99

 

  +
运算符可以连接字符串,也可以将字符串转换为数字。

1 var n = '12ab';
2 var x = '34';
3 alert(n+x);    //返回:12ab34
4 alert(parseInt(n)+x);    //返回:1234
5 
6 var y = + x;
7 alert(typeof x);    //返回:string
8 //若变量不能转换,但仍然是一个数字,NaN
9 alert(typeof y);    //返回:number

 

  NaN 的数据类型是 number,NaN 表示非数字(Not a
Number),所以本身也为数字。

 1 var a = parseInt('abc');
 2 var b = parseInt('12edf');
 3 var c = 12+NaN;
 4 alert(c);    //返回NaN
 5 
 6 //判断NaN是否等于NaN
 7 alert(a==b);    //返回false
 8 
 9 //isNaN判断一个变量是不是NaN
10 alert(isNaN(a));    //返回:true
11 alert(isNaN(b));    //返回:flase

 

  利用这一特性,可以做一个简易的文本框求和,用户输入的文本框的值为字符串,需要将字符串转换为数字,再判断输入的值是否为数字。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文本框求和</title>
 6 </head>
 7 <script>
 8 window.onload = function (){
 9     var x = document.getElementById('txt1');
10     var y = document.getElementById('txt2');
11     var oBth = document.getElementById('but1');
12     oBth.onclick = function (){
13         //将输入的值转换为整数:
14         var n1 = parseInt(x.value);
15         var n2 = parseInt(y.value);
16             //判断用户输入的n1是不是非数字
17             if(isNaN(n1)){
18                 alert('输入的第一个数字有误');
19             }
20             else if(isNaN(n2)){
21                 alert('输入的第二个数字有误');
22             }
23             //若都输入的为数字,则求和
24             else{
25                 alert(n1+n2);
26             }
27     };
28 };
29 </script>
30 <body>
31 <input id="txt1" type="text" >
32 <input id="txt2" type="text" >
33 <input id="but1" type="button" value="求和">
34 </body>
35 </html>    

 

  全局方法 Number()
可将布尔值转换为数字。

1 alert(Number(false));    //返回 0
2 alert(Number(true));    // 返回 1

 

  隐式类型转换,也叫自动转换类型。

  **当 JS
尝试操作一个“错误”的数据类型时,会自动转换为“正确”的类型再去执行,这就是隐式类型转换。**直接看几个例子:

 1 var a = 2;
 2 var b = '2';
 3 //比较数字2和字符串2是否相等
 4 alert(a==b);    //返回:true
 5 //why? 相等比较实际上比较前是先将a和b转换为同一类型,再进行比较的。
 6 
 7 //比较数字2和字符串2是否全等
 8 alert(a===b);    //返回:返回false
 9 //why? 全等比较不转换类型,直接比较。a为数字,b为字符串。
10 //所以,一般情况下,采用全等比较,更为严谨。
11 
12 var c = '12';
13 var d = '5';
14 //两个值为数字的字符串做+运算
15 alert(c+d);    //返回125
16 //why? "+"运算符有2种功能:1、字符串连接。2、算术运算(数字相加)。系统会采用最直接的方法。
17 
18 //两个值为数字的字符串做-运算
19 alert(c-d);  //返回7
20 //why? 在做减法运算时会先转换为同类型,再做运算。"-"运算符只有1种功能。算术运算(数字相减)。

 

forEach只跳过不存在的元素(不存在索引,但可以访问,如arr[3],值为undefined)##3

var arr = [1,null,undefined,,5];
arr.forEach(function(value,index, array){
    console.log("第"+ index + "的值是:" + value);
});

/* logs 
第0的值是:1
第1的值是:null
第2的值是:undefined
第4的值是:5
*/

forEach第二个参数改变回调函数里面的this指向##

例子1:

var arr = [1,2,3,4,5];
var arr2 = ["a","b","c","d","e"];
arr.forEach(function(value, index, array){
    console.log("第"+ index + "的值是:" + value);
    console.log(this);          // 第二个参数改变回调函数里面的this指向  this = ["a", "b", "c", "d", "e"];
}, arr2);

例子2:

function Counter() {
  this.sum = 0;
  this.count = 0;
}
Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry;
    ++this.count;
  }, this);
  // ^---- Note
};

var obj = new Counter();
obj.add([2, 5, 9]);
obj.count;
// 3 
obj.sum;
// 16

因为thisArg参数 (this)
传给了forEach(),每次调用时,它都被传给callback函数,作为它的this值。

发表评论

电子邮件地址不会被公开。 必填项已用*标注