JavaScript basics enhancement video tutorials and source code recommendations

JavaScript is a literal scripting language. It is a dynamically typed, weakly typed, prototype-based language with built-in support for types. Its interpreter is called the JavaScript engine, which is part of the browser and is widely used in client-side scripting languages. It was first used on HTML (an application under Standard Universal Markup Language) web pages to add dynamic functions to HTML web pages. .

The content of "JavaScript Basics Strengthening Video Tutorial" focuses on explaining the basic knowledge of JavaScript, involving basic syntax of programming, mainly including variables, data types, type conversions, flow control statements, arrays, simple types and complex types. Introduction to distinctions and objects, and consolidating basic grammar through cases. This set of videos will take you into the wonderful world of JavaScript.

Video playback address: http://www.php.cn/course/543.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 good 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 method? 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 is vivid and the classroom atmosphere is quite active, which can fully mobilize students' enthusiasm for learning in the classroom. The lectures pay attention to details and explain small knowledge points in detail without omitting any knowledge points.

Courseware source code:http://www.php.cn/xiazai/code/1812

The above is the detailed content of JavaScript basics enhancement video tutorials and source code recommendations. For more information, please follow other related articles on the PHP Chinese website!