Dark Horse Programmer JavaScript Video Resource Sharing

Dark Horse Programmer JavaScript Video Tutorial" will introduce you to JavaScript in detail. JavaScript is a literal scripting language and a scripting language widely used in client-side Web development. Currently used by millions of web pages to improve design, validate forms, detect browsers, create cookies, and more.

Video playback address: http://www.php.cn/course/500.html

The difficulty of this video is Array loop, testing logical ability. The following summarizes various loop examples:

How do we traverse the elements in the array? When JavaScript first emerged 20 years ago, you might implement array traversal like this:

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

Since the official release of ES5, you can use the built-in forEach method to traverse the array:

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

You will find that, The first and second parameters are exactly opposite. Please pay attention and don’t remember them wrongly. The same is true for similar methods later, such as $.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

For example:

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

This code looks more concise, but this method also has a small flaw:

forEach is not flexible enough

arr.forEach is not easy to use. You cannot use the break statement to interrupt the loop, nor can you use the return statement to return to the outer function.

Of course, it would also be great if you only use the for loop syntax to traverse the array elements.

Then, you must want to try a for-in loop:

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

In this code, the value assigned to index is not an actual number, but the string "0", " 1", "2", it is very likely that string arithmetic calculations are performed unintentionally, for example: "2" + 1 == "21", which brings great inconvenience to the encoding process.

In short,

for-in is designed for ordinary objects. You can traverse to get string type keys, so it is not suitable for array traversal.

for...in is not suitable for traversing arrays

for...in will traverse custom properties or even prototype properties. The index is a string instead of a numerical value. In some cases, it is not even possible. Sequential iteration

Powerful for-of loop

ES6 will not break the JS code you have written. It seems that thousands of web sites currently rely on for-in loops, and some of them even use them for array traversal. Adding array traversal support by fixing for-in loops would make this even more confusing, so the standards committee added a new loop syntax in ES6 to solve the current problem.

We need a more convenient way to traverse the array, as simple and easy to use as using for...in to traverse the object, that is for...of

is like Like this:

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

Yes, does this loop look familiar compared to the previous built-in methods? Well, we are going to explore what powerful functions are hidden under the appearance of the for-of loop. For now, just remember:

This is the most concise and direct syntax for traversing array elements

This method avoids all the pitfalls of for-in loops

Unlike forEach(), it can correctly respond to break, continue and return statements

The for-in loop is used to traverse object properties.

The for-of loop is used to iterate over data—such as values ​​in an array.

But, it’s not just that!

The for-of loop can also traverse other collections

The for-of loop not only supports arrays, but also supports most array-like objects, such as DOM NodeList objects.

The for-of loop also supports string traversal, which treats the string as a series of Unicode characters to traverse:

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

It also supports Map and Set object traversal.

$.map(array,function)

Syntax analysis: For each element in the array, call the function function for processing, and then return the result to get a new array.

Explanation by example: Return each element in the array by *2 and return a new array. The code is as follows

<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>

Additional explanation: item represents each element. This is a formal parameter and can be replaced by others.

The teacher in this video explains things in a simple and easy-to-understand way, with clear organization, layer-by-layer analysis, interlocking links, rigorous argumentation, and rigorous structure. He uses the logical power of thinking to attract students' attention, and uses reason to control the classroom teaching process. The teaching skills are full of wit. Various teaching methods and techniques are readily available and can be used freely and appropriately without any trace of polishing.

The above is the detailed content of Dark Horse Programmer JavaScript Video Resource Sharing. For more information, please follow other related articles on the PHP Chinese website!