黑馬程式設計師JavaScript影片資源分享-js教程-PHP中文網

首頁

web前端

js教程

黑馬程式設計師JavaScript影片資源分享

巴扎黑

Aug 24, 2017 pm 06:25 PM

javascript js 程式設計師

黑馬程式設計師JavaScript影片教學》將向大家詳細介紹javascript，javascript是一種直譯式腳本語言，也是一種廣泛用於客戶端Web開發的腳本語言。目前，被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、創建cookies,以及更多的應用。

黑馬程式設計師JavaScript影片資源分享

影片播放位址：//m.sbmmt.com/course/500.html

本影片困難是數組循環，對邏輯能力有所考察。以下總結下各種循環實例：

我們如何遍歷數組中的元素？ 20年前JavaScript剛萌生時，你可能這樣實作陣列遍歷：

var arr=["one","two","three"];2 for(var i=0;i<arr.length;i++){3     document.write(arr[i]);4 }

自ES5正式發布後，你可以使用內建的forEach方法來遍歷陣列：

myArray.forEach(function (value) {
     console.log(value);});实际上forEach有三个参数  分别为  值  下标  数组本身 于是我们有[].forEach(function(value, index, array) {    // ...});
对比jQuery中的$.each方法：
$.each([], function(index, value, array) {    // ...});

會發現，第1個和第2個參數剛好是相反的，大家要注意了，不要記錯了。後面類似的方法，例如$.map也是如此。

$.each(Array, function(i, value) {
     Array   //数组     this;      //this指向当前元素
    i;         //i表示Array当前下标
    value;     //value表示Array当前元素});
 
var arr = [ "one", "two", "three", "four"];    
$.each(arr, function(){    
   alert(this);    
});    
 
//上面这个each输出的结果分别为：one,two,three,four  
var obj = { one:1, two:2, three:3, four:4};    
$.each(obj, function(key, val) {    
   alert(obj[key]);          
});  
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1   2  3  4

例如:

arr.forEach(function(i,j,v){
    document.write("<br />数组的值"+i+
                     "<br />数组的下标"+j+","+
                     "<br />数组本身"+v+"---")
})

這段程式碼看起來更簡潔，但這個方法也有一個小缺陷：

forEach不夠靈活

arr.forEach不好用你不能使用break語句中斷循環，也不能使用return語句回到外層函數。

當然，如果只用for迴圈的語法來遍歷陣列元素也很不錯。

那麼，你一定想嘗試for-in迴圈：

for (var index in myArray) { // 千万别这样做  console.log(myArray[index]);
}

在這段程式碼中，賦給index的值不是實際的數字，而是字串「0」、「 1”、“2”，此時很可能在無意之間進行字串算數計算，例如：“2” + 1 == “21”，這給編碼過程帶來極大的不便。

簡而言之，

for-in是為普通物件設計的，你可以遍歷得到字串類型的鍵，因此不適用於數組遍歷。

for...in 不適合用來遍歷陣列

for…in會遍歷到自訂屬性甚至原型屬性、index是字串而不是數值、某些情況甚至不依序遍歷

強大的for-of迴圈

ES6不會破壞你已經寫好的JS程式碼。目前看來，成千上萬的Web網站依賴for-in循環，其中一些網站甚至將其用於數組遍歷。如果想透過修正for-in循環增加數組遍歷支援會讓這一切變得更加混亂，因此，標準委員會在ES6中增加了一種新的循環語法來解決目前的問題。

我們需要一個更方便的遍歷數組的方法，就像用for...in 遍歷物件一樣簡單易用的方法，那就是for...of

就像這樣：

for (var value of myArray) {
  console.log(value);
}

是的，與之前的內建方法相比，這種循環方式看起來是否有些眼熟？那好，我們將要探究for-of循環的外表下隱藏著哪些強大的功能。現在，只需記住：

這是最簡潔、最直接的遍歷數組元素的語法

這個方法避開了for-in循環的所有缺陷

#與forEach()不同的是，它可以正確回應break、continue和return語句

for-in迴圈用來遍歷物件屬性。

for-of迴圈用來遍歷資料—例如陣列中的值。

但是，不只如此！

for-of循環也可以遍歷其它的集合

for-of循環不僅支援數組，還支援大多數類別數組對象，例如DOM NodeList對象。

for-of循環也支援字串遍歷，它將字串視為一系列的Unicode字元來進行遍歷：

for (var value of myArray) {
  console.log(value);
}

它同樣支援Map和Set物件遍歷。

$.map(array,function)

語法分析：對陣列array中的每個元素，呼叫function函數進行處理，然後將結果返回，得到一個新的數組。

實例講解：將陣列中的每一個元素*2，傳回一個新的陣列。程式碼如下

<html>
<head>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var arr = [2,3,6];
var arr2 = $.map(arr,function(item){return item*2;});
for(var i=0,len=arr2.length;i<len;i++){
 document.write(arr2[i]+"<br />");//结果为 4 6 12
}
</script>
</head>
</html>

補充說明：item代表每一個元素，這是形參，可用其它代替。

本影片主講老師深入淺出，條理清楚，層層剖析，環環相扣，論證嚴密，結構嚴謹，用思維的邏輯力量吸引學生的注意力，用理智控制課堂教學進程。教學的技巧，充滿機智，各種教學方法、技巧信手拈來，運用自如，恰到好處，並絲毫不帶有雕琢的痕跡。

以上是黑馬程式設計師JavaScript影片資源分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

PHP教程

1592

276

Related knowledge

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

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

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

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

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

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

AI程式設計師哪家強？探索Devin、通靈靈碼和SWE-agent的潛力 Apr 07, 2024 am 09:10 AM

2022年3月3日，距離世界首個AI程式設計師Devin誕生不足一個月，普林斯頓大學的NLP團隊開發了一個開源AI程式設計師SWE-agent。它利用GPT-4模型在GitHub儲存庫中自動解決問題。 SWE-agent在SWE-bench測試集上的表現與Devin相似，平均耗時93秒，解決了12.29%的問題。 SWE-agent透過與專用終端交互，可以開啟、搜尋文件內容，使用自動語法檢查、編輯特定行，以及編寫和執行測試。（註：以上內容為原始內容微調，但保留了原文中的關鍵訊息，未超過指定字數限制。）SWE-A

簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介：在進行前端開發中，我們常常需要處理與後端介面的交互，而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法，並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時，服務

揭秘C語言的吸引力: 發掘程式設計師的潛質 Feb 24, 2024 pm 11:21 PM

學習C語言的魅力：解鎖程式設計師的潛力隨著科技的不斷發展，電腦程式設計已經成為了一個備受關注的領域。在眾多程式語言中，C語言一直以來都備受程式設計師的喜愛。它的簡單、高效以及廣泛應用的特點，使得學習C語言成為了許多人進入程式設計領域的第一步。本文將討論學習C語言的魅力，以及如何透過學習C語言來解鎖程式設計師的潛力。首先，學習C語言的魅力在於其簡潔性。相較於其他程式語言而言，C語

See all articles

黑馬程式設計師JavaScript影片資源分享

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題