In-depth JavaScript advanced programming of objects and arrays (stack methods, queue methods, reordering methods, iteration methods)_javascript skills

Inheritance is one of the most talked about concepts in OO languages. Many OO languages ​​support two types of inheritance: interface inheritance and implementation inheritance. Interface inheritance only inherits method signatures, while implementation inheritance inherits the actual methods. As stated, interface inheritance is not possible in ECMAScript since functions have no signatures. ECMAScript only supports implementation inheritance, and its implementation inheritance mainly relies on the prototype chain.

1. Use object literals to define objects

var person={};

When creating an object this way, the Object constructor is not actually called.

Developers prefer object literal syntax.

2. Sometimes when a large number of optional parameters need to be passed, generally speaking, object literals are used to encapsulate multiple optional parameters.

3. The difference between dot notation and square bracket notation of object attributes

(1) Functionally: there is no difference between the two

(2) But the advantage of square brackets is that attributes can be accessed through variables

For example:

  var person={
  name:"Nic"
}

Dot notation: person.name

Square bracket notation: var prop="name";
person[prop]

(3) Another advantage is:

If the attribute name contains characters or keywords that will cause grammatical errors or reserved words, it is not wrong to use square brackets

For example: person["first name"]="OK";

(4) Generally, it is recommended to use dot notation

4. Problems with creating arrays

var colors=[1,2,] //Don’t do this. This will create an array with 2 or 3 items
var opy=[,,,,,] //Don’t do this. This will create an array of 5 or 6 items

This is because IE8 and previous versions have bugs in the implementation of array literals

When creating an array using literals, the Array constructor will not be called

5. If the index of setting a certain value exceeds the existing number of items in the array.

For example: var color=[1,2,3]

color[3], the array will automatically increase to the length of the index value plus 1

At this time, the value of color[3] is undefined

6. The length of the array is not just read-only. By setting the length property, you can continuously add new items to the end of the array.

7. Convert array into string toString() join()

array.toString()  //返回以逗号分隔的字符串
array.valueOf()  //返回的还是数组
array.join(",")  //也可以

8. Array stack method push() pop()

The stack is a data structure, that is, the latest added item is the earliest to be removed (last in, first out). The insertion and removal of items from the stack only occur at one location - the top of the stack.
ECMAScript provides push() and pop() methods to implement this kind of stack.

push() method adds one or more elements to the end of the array and returns the new length.

The pop() method is used to remove and return the last element of the array.

Example:

var arr=[];
var count=arr.push('a','b');  //count=2
arr.push('c');
var item=arr.pop();  //移除最后一项 c item=c 并且改变数组长度

9. Queue method shift() unshift()

The access rule for queue data is first in, first out
ECMAScript provides shift() to implement this.
The shift() method is used to remove the first element from the array and return the value of the first element.
The unshift() method adds one or more elements to the beginning of the array and returns the new length.

10. Reordering method sort() reverse()

ECMAScript provides sort() and reverse() for implementation.

sort() will call the tostring() method of each array item and compare the resulting strings for sorting.

11. Array concatenation concat()

concat() method is used to concatenate two or more arrays.

This method does not change the existing array, but only returns a copy of the connected array.

12. The slice() method returns selected elements from an existing array.

13. Position methods: indexOf() and lastIndexOf()

14. Iteration method

ECMAScript5 defines the following five methods, which all receive three parameters: the value of the array item, the position of the item in the array, and the array pair itself      

every(),filter(),forEach(),map(),some()

Example:

var num=[1,2,3,4];
var res=num.every(function(item,index,array){
  return (item>2)
})  //false  必须每一项都大于2，才返回true
var res=num.some(function(item,index,array){
  return (item>2)
})  //true 只要有一个大于2，就返回true
var res=num.filter(function(item,index,array){
  return (item>2)
})  //[3,4]   
var res=num.forEach(function(item,index,array){
  return (item>2)
})  //[1,4,9,16]  

Iteration method in javascript array object

/* javascript 数组对象中的迭代方法 
 * ECMAScript5为数组定义了5个迭代方法。每个方法都接受两个参数，第一个是进行迭代的函数，第二个是该函数的作用域对象【可选】。 


 * 进行迭代的函数接受三个参数，第一个是数组中要进行迭代的元素的值，第二个是数组候总要进行迭代的元素的位置，第三个是迭代数组本身。 


* 1. every()  对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则返回true 
 * 2. filter() 对数组中的每一项运行给定的函数，返回该函数返回true的项组成的数组。 
 * 3. forEach() 对数组中的每一项运行给定的函数，这个方法没有返回值 
 * 4. map()   对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组 
 * 5. some()  对数组中的每一项运行给定的函数，如果该函数对任意一项返回true，则返回true 
 * 
 * 这些迭代方法支持的浏览器有，IE9+，Firefox2+，Safari3+，Opera 9.5+，chrome 
 */ 
var num = [1,2,3,4,5,6,7,8,9]; 
var everyResult = num.every(function(item, index, array) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(everyResult); 
var someResult = num.some(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(someResult); 
var filterResult = num.filter(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(filterResult); 
var mapResult = num.map(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(mapResult); 
var forEachResult = num.forEach(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(forEachResult);