首頁 web前端 js教程 分享JavaScript練習的實例教程

分享JavaScript練習的實例教程

Jun 27, 2017 am 10:22 AM
javascript js 整理 筆記 練習

歡迎和大家一起討論~
 
#基礎練習(1):
 
#我的答案是:
function array_diff(a, b) {  if (b == "") return a;  return a.filter(function(item,index,array) {var flag = false;for(var i=0;i<b.length;i++) {      if(item !== b[i]) flag = true;
    }return flag;
  });
}
登入後複製

較優解為:

#
function array_diff(a, b) {  return a.filter(function(x) { return b.indexOf(x) == -1; });
}
登入後複製

 

分析:

對陣列a使用filter()方法,迭代判斷陣列a中的值是否存在於陣列b中。當x的值,即數組a的值無法在數組b中找到時,b.indexOf()方法將傳回-1。數組的filter()方法是指對數組中的每一項運行給定函數,傳回該函數會傳回true的項組成的的數組。
我的思路就稍微想得複雜了,對數組進行迭代的方法filter()是想到了,卻沒有好好地利用起來,函數內的判斷方法不夠簡潔,也沒有想到可以使用indexOf()方法來判斷。
 

筆記:

filter()方法,是指對數組中的每一項運行給定函數,傳回該函數會傳回true的項所組成的的陣列。利用指定的函數決定是否在傳回的陣列中包含某一項。
 
使用範例:
#var numbers = [1,2,3,4,5,4,3 ,2,1];
var filterResult = numbers.filter(function(item,index,array) {
     return (item> 2);
});
#alter(filterResult); //[3,4,5,4,3]
 
陣列的迭代方法真的很常用的,用來對某個陣列循環某一運算。這些迭代方法要比for迴圈語句簡單很多,要記住!
共有五個迭代方法:every()、filter()、forEach()、map()、some()。
 

#基礎練習(2):

#我的答案是:
##
var gimme = function (inputArray) {  var newArray = [];  for(var i=0;i<inputArray.length;i++) {
    newArray[i] = inputArray[i];
  }
  newArray.sort(function(a,b) {if(a < b) {      return -1;
    } else if (a> b) {return 1;
    } else {return 0;
    }
  });  return inputArray.indexOf(newArray[1]);
};
登入後複製

較優解為:

function gimme(a) {  return a.indexOf(a.concat().sort(function(a, b) { return a - b })[1])
}
登入後複製

分析:

### #####在較優解答中,對原數組使用了concat()方法,該方法可以將原始數組複製並建立新數組。接著對新數組進行排序,並對於中間值求索引值。 ############我的想法和最優解是一樣的,而實作方法還是稚嫩了一些。對於建立新陣列不知道可以使用concat()方法進行快速複製,也表示對基礎知識的熟悉程度不夠了。另外排序方法中,原來可以直接使用“return a-b”,我的方法就顯得很累贅了。 ############ ######

笔记:

concat()方法可基于当前数组中的所有项创建一个新数组。该方法会先创建当前数组的一个副本,将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给concat()方法传递参数的情况下,它只是复制。若传递给concat()方法的是一个或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。若传递值不是数组,则添加到结果数组的末尾。
 
使用例子:
var colors = ["red","green","blue"];
var colors = colors.concat("yellow",["black","brown"]);
alert(colors); // red,green,blue
alert(colors); // red,green,blue,yellow,black,brown
 
重排序方法:使用sort()方法可以进行排序,但仍可能会出现一些问题,因此使用比较函数,可以避免这个问题。
对于大多数数据类型可使用,只需要将其作为参数传递给sort()方法即可:
function compare(value1,value2) {
     if(value1 < value2) {
return -1;
} else if (value1> value2) {
          return 1;
     } else {
          returm 0;
     }
}
对于数值型或其他valueOf()方法会返回数值类型的对象类型,可以使用更简单的比较函数:
function compare(value1,value2) {
     return value2 - value1;
}
 
基础练习(3):
 


我的解答为:
function minMax(arr){  var newarr = [];
  newarr.push(Math.min.apply(Math,arr));
  newarr.push(Math.max.apply(Math,arr));  return newarr;
}
登入後複製

较优解答为:

function minMax(arr){  return [Math.min(...arr), Math.max(...arr)];
}
登入後複製

分析:

这道题目就很简单了,较优解答中的扩展语法( spread syntax)也在练习一中提及了。我的写法还是太谨慎了,是不是应该大胆一些呢?
 
基础练习(4):
 


我的解答为:
function XO(str) {   var str = str.toLowerCase();   var countx = 0;   var counto = 0;   for(var i=0;i<str.length;i++) {     if(str[i] === "x") {
       countx++;
     }     if(str[i] === "o") {
       counto++;
     }
    }if(counto == countx) {      return true;
    } else {      return false;
    }
}
登入後複製

较优解答为:

function XO(str) {var a = str.replace(/x/gi, ''),
          b = str.replace(/o/gi, '');return a.length === b.length;
}
登入後複製

分析:

较优解使用的是replace()方法,结合正则表达式的使用,对原字符串str分别将x和o用空字符串替换得到a和b字符串,比较a和b字符串的长度,从而得到结果。我的解答方法呢,因为实在想不到可以使用什么方法,所以用的最原始的方法,仿佛自己在做C语言的题目。
 
笔记:
replace()方法,该方法接受两个参数,一个参数可以是一个RegExp对象或者一个字符串,第二个参数可以是一个字符串或者是一个函数。若第一个参数是字符串,指挥替换第一个子字符串。要想替换所有子字符串,是提供一个正则表达式,并且指定全局标志。
 
使用例子:
var text = "cat,bat,sat,fat";
var result = text.replace("at","ond");
alert(result); //"cond,bat,sat,fat"
 
result = text.replace(/at/g,"ond");
alert(result); //"cond,bond,song,fond"
 
 总结:
今天的知识点主要是数组的迭代方法中的一种filter()方法、数组操作方法中的concat()方法以及字符串的replace()方法。filter()方法可用于使用函数判断数组中各项的值中返回true值的结果所组成的数组。concat()可以复制和创建新数组。而replace()方法可以替换字符串中的一个或多个值。
从这三天的练习来看,对于数组的各种方法也逐渐使用得熟练起来了。但是其他类型的各种方法还是一种挑战。而我的解答也要从比较冗余的语句,写出更为简洁而有效的语句了。继续加油吧!
 
 

以上是分享JavaScript練習的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
小紅書筆記怎麼刪除 小紅書筆記怎麼刪除 Mar 21, 2024 pm 08:12 PM

小紅書筆記怎麼刪除?在小紅書APP中是可以編輯筆記的,多數的用戶不知道小紅書筆記如何的刪除,接下來就是小編為用戶帶來的小紅書筆記刪除方法圖文教程,有興趣的用戶快來一起看看吧!小紅書使用教學小紅書筆記怎麼刪除1、先打開小紅書APP進入到主頁面,選擇右下角【我】進入到專區;2、之後在我的專區,點擊下圖所示的筆記頁面,選擇要刪除的筆記;3、進入到筆記頁面,右上角【三個點】;4、最後下方會展開功能欄,點選【刪除】即可完成。

金山打字通怎麼練打字-金山打字通練習打字方法 金山打字通怎麼練打字-金山打字通練習打字方法 Mar 18, 2024 pm 04:25 PM

現在很多朋友喜歡用金山打字通這款軟體,那麼打字速度快慢嚴重影響工作效率,所以教大家練習打字速度,那麼如何使用金山打字通練打字呢?今天小編就將金山打字通練習打數字教程如下講述,希望對大家有幫助。首先,開啟金山打字軟體然後,滑鼠點擊(新手入門)按鈕接著,在新視窗中點擊(數字鍵位)按鈕隨後,點擊下方的(從頭開始)按鈕即可練習也可以點擊(測試模式)按鈕最後,輸入數字進行練習就可以了此外金山打字通還有其他功能,能幫助大家更好的練習打字。 1.選擇練習模式:在軟體介面上,您可以看到有不同的練習模式,例如「新

小紅書發布過的筆記不見了怎麼辦?它剛發的筆記搜不到的原因是什麼? 小紅書發布過的筆記不見了怎麼辦?它剛發的筆記搜不到的原因是什麼? Mar 21, 2024 pm 09:30 PM

作為一名小紅書的用戶,我們都曾經遇到過發布過的筆記突然不見了的情況,這無疑讓人感到困惑和擔憂。在這種情況下,我們該怎麼辦呢?本文將圍繞著「小紅書發布過的筆記不見了怎麼辦」這個主題,為你詳細解答。一、小紅書發布過的筆記不見了怎麼辦?首先,不要驚慌。如果你發現筆記不見了,保持冷靜是關鍵,不要慌張。這可能是由於平台系統故障或操作失誤引起的。檢查發布記錄很簡單。只要打開小紅書App,點擊“我”→“發布”→“所有發布”,就可以查看自己的發布記錄。在這裡,你可以輕鬆找到之前發布的筆記。 3.重新發布。如果找到了之

如何使用WebSocket和JavaScript實現線上語音辨識系統 如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬,在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別,大大縮短了使用者等待時間,提高了使用者體驗;弱勢是:受到模型大小限制,其中準確率也有限。如何在web端使用js實現人臉偵測呢?為了實現Web端人臉識別,需要熟悉相關的程式語言和技術,如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是,由於Web端的計

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟,需要具體程式碼範例隨著網路和科技的快速發展,股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環,其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息,幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

WebSocket與JavaScript:實現即時監控系統的關鍵技術 WebSocket與JavaScript:實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

小紅書怎麼在筆記中加入商品連結 小紅書在筆記中加入商品連結教學 小紅書怎麼在筆記中加入商品連結 小紅書在筆記中加入商品連結教學 Mar 12, 2024 am 10:40 AM

小紅書怎麼在筆記中添加商品連結?在小紅書這款app中用戶不僅可以瀏覽各種內容還可以進行購物,所以這款app中關於購物推薦、好物分享的內容是非常多的,如果小夥伴在這款app也是一個達人的話,也可以分享一些購物經驗,找到商家進行合作,在筆記中添加連結之類的,很多人都願意使用這款app購物,因為不僅方便,而且有很多達人會進行一些推薦,可以一邊瀏覽有趣內容,一邊看看有沒有適合自己的衣服商品。一起看看如何在筆記中添加商品連結吧!小紅書筆記添加商品連結方法  在手機桌面上開啟app。  在app首頁點擊

See all articles