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

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

巴扎黑asal: 2017-08-24 17:45:171389semak imbas

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

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

视频播放地址：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 }

自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代表着每一个元素，这是形参，可用其它代替。

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

课件源码：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：

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

Artikel sebelumnya：黑马云课堂JavaScript 高级框架设计视频教程Artikel seterusnya：尚学堂javascript视频教程

Artikel berkaitan

Lihat lagi