【案例3-2】 返回数组中指定元素的下标
一、案例描述
- 考核知识点
indexOf()
- 练习目标
- 掌握indexOf()方法的使用
- 需求分析
indexOf()返回某个指定的字符串值在字符串中首次出现的位置,indexOf()方法对大小写敏感!如果要检索的字符串值没有出现,则该方法返回 -1。本案例使用indexOf()来查找数组中元素d出现的次数,并返回其对应的所有索引的下标。
- 案例分析
- 效果如图3-2所示。
- 返回所有d的坐标和出现的次数
- 具体实现步骤如下:
- 定义一个数组arr,存放数组元素。
- 定义findall()函数,返回对应所有索引下标。
- 定义count()函数,返回d元素出现的次数。
- 在页面中输入索引下标和出现次数。
二、案例实现
根据上面的分析,可以通过简单的JavaScript代码来实现这一效果,具体代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>返回数组中指定元素的下标</title>
- </head>
- <body>
- <script>
- // 查找数组中元素d返回其对应的所有索引的下标
- function findall(a,x){
- var results=[],
- len=a.length,
- pos=0;
- while(pos < len){
- pos= a.indexOf (x,pos);
- if(pos === -1){ //未找到就退出循环完成搜索
- break;
- }
- results.push(pos); // 找到就存储索引
- pos+=1; // 并从下个位置开始搜索
- }
- return results;
- }
- var arr = ['a','b','d','d','c','d','d'];
- document.write(findall(arr,'d')) // 返回d元素的下标[2,3,5,6]
- // 找到元素d出现的次数
- function count(arr, item) {
- var number = 0;
- for(var i=0;i<arr.length;i++) {
- if(arr[i]==item){
- number++;
- }
- }
- return number;
- }
- document.write('</br>'+count(arr,'d')) // 4
- </script>
- </body>
- </html>
保存后,在谷歌浏览器中预览,效果如图3-2所示。