Rumah hujung hadapan web tutorial js JavaScript 基础加强视频教程及源码推荐

JavaScript 基础加强视频教程及源码推荐

Aug 24, 2017 pm 05:45 PM
javascript js Tutorial

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

《JavaScript 基础加强视频教程》内容重点讲解JavaScript基础知识,涉及到编程的基本语法,主要包含了变量、数据类型 、类型转换、流程控制语句、数组、简单类型和复杂类型的区别、对象的介绍,通过案例巩固基本 语法。本套视频将带你进入奇妙的JavaScript的世界。

59361003c8e57744.jpg

视频播放地址:http://www.php.cn/course/543.html

本视频难点是数组循环,对逻辑能力有所考察。下面总结下各种循环实例:

我们如何遍历数组中的元素?20年前JavaScript刚萌生时,你可能这样实现数组遍历:

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

自ES5正式发布后,你可以使用内建的forEach方法来遍历数组:

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

会发现,第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
Salin selepas log masuk

例如:

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

这段代码看起来更加简洁,但这种方法也有一个小缺陷:

forEach不够灵活

arr.forEach不好用 你不能使用break语句中断循环,也不能使用return语句返回到外层函数。

当然,如果只用for循环的语法来遍历数组元素也很不错。

那么,你一定想尝试一下for-in循环:

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

在这段代码中,赋给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);
}
Salin selepas log masuk
Salin selepas log masuk

是的,与之前的内建方法相比,这种循环方式看起来是否有些眼熟?那好,我们将要探究一下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);
}
Salin selepas log masuk
Salin selepas log masuk

它同样支持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>
Salin selepas log masuk

补充说明:item代表着每一个元素,这是形参,可用其它代替。

本视频主讲老师形象生动,课堂气氛是相当活跃,能够充分调动学生在课堂上的学习积极性。讲课注重细节,对细小知识点讲解细致,不会疏漏任何知识点。

课件源码:http://www.php.cn/xiazai/code/1812

Atas ialah kandungan terperinci JavaScript 基础加强视频教程及源码推荐. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tutorial cara menggunakan Dewu Tutorial cara menggunakan Dewu Mar 21, 2024 pm 01:40 PM

Dewu APP pada masa ini merupakan perisian beli-belah jenama yang sangat popular, tetapi kebanyakan pengguna tidak tahu cara menggunakan fungsi dalam APP Dewu Panduan tutorial penggunaan yang paling terperinci Seterusnya, editor membawakan Dewuduo kepada pengguna tutorial. Pengguna yang berminat boleh datang dan lihat! Tutorial cara menggunakan Dewu [2024-03-20] Cara menggunakan pembelian ansuran Dewu [2024-03-20] Cara mendapatkan kupon Dewu [2024-03-20] Cara mencari perkhidmatan pelanggan manual Dewu [2024-03- 20] Cara menyemak kod pikap Dewu【2024-03-20】Di mana hendak mencari pembelian Dewu【2024-03-20】Cara membuka VIP Dewu【2024-03-20】Cara memohon pemulangan atau pertukaran Dewi

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web

Pada musim panas, anda mesti cuba menembak pelangi Pada musim panas, anda mesti cuba menembak pelangi Jul 21, 2024 pm 05:16 PM

Selepas hujan pada musim panas, anda sering dapat melihat pemandangan cuaca istimewa yang indah dan ajaib - pelangi. Ini juga merupakan pemandangan jarang yang boleh ditemui dalam fotografi, dan ia sangat fotogenik. Terdapat beberapa syarat untuk pelangi muncul: pertama, terdapat titisan air yang mencukupi di udara, dan kedua, matahari bersinar pada sudut yang lebih rendah. Oleh itu, adalah paling mudah untuk melihat pelangi pada sebelah petang selepas hujan reda. Walau bagaimanapun, pembentukan pelangi sangat dipengaruhi oleh cuaca, cahaya dan keadaan lain, jadi ia biasanya hanya bertahan untuk jangka masa yang singkat, dan masa tontonan dan penangkapan terbaik adalah lebih pendek. Jadi apabila anda menemui pelangi, bagaimanakah anda boleh merakamnya dengan betul dan mengambil gambar dengan kualiti? 1. Cari pelangi Selain keadaan yang dinyatakan di atas, pelangi biasanya muncul mengikut arah cahaya matahari, iaitu jika matahari bersinar dari barat ke timur, pelangi lebih cenderung muncul di timur.

Tutorial tentang cara mematikan bunyi pembayaran di WeChat Tutorial tentang cara mematikan bunyi pembayaran di WeChat Mar 26, 2024 am 08:30 AM

1. Mula-mula buka WeChat. 2. Klik [+] di penjuru kanan sebelah atas. 3. Klik kod QR untuk mengutip bayaran. 4. Klik tiga titik kecil di penjuru kanan sebelah atas. 5. Klik untuk menutup peringatan suara untuk ketibaan pembayaran.

Tutorial DisplayX (perisian ujian monitor). Tutorial DisplayX (perisian ujian monitor). Mar 04, 2024 pm 04:00 PM

Menguji monitor semasa membelinya adalah bahagian penting untuk mengelakkan membeli yang rosak Hari ini saya akan mengajar anda cara menggunakan perisian untuk menguji monitor. Langkah kaedah 1. Mula-mula, cari dan muat turun perisian DisplayX di tapak web ini, pasang dan bukanya, dan anda akan melihat banyak kaedah pengesanan yang diberikan kepada pengguna. 2. Pengguna mengklik pada ujian lengkap biasa Langkah pertama adalah untuk menguji kecerahan paparan Pengguna melaraskan paparan supaya kotak dapat dilihat dengan jelas. 3. Kemudian klik tetikus untuk masuk ke pautan seterusnya Jika monitor boleh membezakan setiap kawasan hitam dan putih, bermakna monitor masih elok. 4. Klik butang kiri tetikus sekali lagi, dan anda akan melihat ujian skala kelabu monitor Lebih lancar peralihan warna, lebih baik monitor. 5. Selain itu, dalam perisian displayx kita

Apakah perisian photoshopcs5? -Tutorial penggunaan photoshopcs5 Apakah perisian photoshopcs5? -Tutorial penggunaan photoshopcs5 Mar 19, 2024 am 09:04 AM

PhotoshopCS ialah singkatan daripada Photoshop Creative Suite Ia adalah perisian yang dihasilkan oleh Adobe Ia digunakan secara meluas dalam reka bentuk grafik dan pemprosesan imej Sebagai seorang pelajar baru yang belajar PS, hari ini biarkan editor menerangkan kepada anda apa itu perisian photoshopcs5. . 1. Apakah perisian photoshop cs5? Adobe Photoshop CS5 Extended sesuai untuk profesional dalam bidang filem, video dan multimedia, pereka grafik dan web yang menggunakan 3D dan animasi, dan profesional dalam bidang kejuruteraan dan saintifik. Paparkan imej 3D dan cantumkannya menjadi imej komposit 2D. Edit video dengan mudah

Pakar mengajar anda! Cara Yang Betul untuk Memotong Gambar Panjang pada Telefon Mudah Alih Huawei Pakar mengajar anda! Cara Yang Betul untuk Memotong Gambar Panjang pada Telefon Mudah Alih Huawei Mar 22, 2024 pm 12:21 PM

Dengan perkembangan telefon pintar yang berterusan, fungsi telefon bimbit semakin berkuasa, antaranya fungsi mengambil gambar panjang menjadi salah satu fungsi penting yang digunakan oleh ramai pengguna dalam kehidupan seharian. Tangkapan skrin panjang boleh membantu pengguna menyimpan halaman web yang panjang, rekod perbualan atau gambar pada satu masa untuk memudahkan tontonan dan perkongsian. Di antara banyak jenama telefon bimbit, telefon bimbit Huawei juga merupakan salah satu jenama yang sangat dihormati oleh pengguna, dan fungsinya untuk memotong gambar panjang juga sangat dipuji. Artikel ini akan memperkenalkan anda kepada kaedah yang betul untuk mengambil gambar panjang pada telefon mudah alih Huawei, serta beberapa petua pakar untuk membantu anda menggunakan telefon mudah alih Huawei dengan lebih baik.

Tutorial PHP: Bagaimana untuk menukar jenis int kepada rentetan Tutorial PHP: Bagaimana untuk menukar jenis int kepada rentetan Mar 27, 2024 pm 06:03 PM

Tutorial PHP: Cara Menukar Jenis Int kepada Rentetan Dalam PHP, menukar data integer kepada rentetan adalah operasi biasa. Tutorial ini akan memperkenalkan cara menggunakan fungsi terbina dalam PHP untuk menukar jenis int kepada rentetan, sambil memberikan contoh kod khusus. Gunakan cast: Dalam PHP, anda boleh menggunakan cast untuk menukar data integer kepada rentetan. Kaedah ini sangat mudah Anda hanya perlu menambah (rentetan) sebelum data integer untuk menukarnya menjadi rentetan. Di bawah ialah kod contoh mudah

See all articles