1, Array:

1. js is a weak language. When defining an array in js, you don't need to specify the data type or work hard to specify the array length; Arrays can store data of any data type

2. The essence of [] defined by array:

[] = new Array();
{} = new Object();
// = new RegExp();

3. Syntax for creating arrays:

var arr = [Value 1, Value 2, Value 3];
var arr = new Array(Value 1, Value 2, Value 3);
var arr = new Array(Value 1);//When there is only one value, it is the length of the array. Assignment needs to be done one by one, for example, arr[0] = 1; arr[1] = 2; ...

4. The data type of the array -- that is, the object (in js, the data type is specified when the array does not need to be defined, and its type is the object)

5. For in traversal: you can traverse all attributes of an object; You can also compile all elements of an array

✿ 6. If the array wants elements with text subscripts, it must be created after the array is created

var arr = [1, 2, 3];
arr['pop'] = 'gun';
arr['good'] = 'cloth';

□ in js, the array elements of text subscripts are not included in the array length. [because the elements of the text subscript are added to the array object in the form of attributes]

var arr = [1, 2, 3];
arr['pop'] = 'gun';
arr['good'] = 'cloth';
//Get the element with array subscript 'pop':
document.write(arr['pop']);
document.write(arr.pop);

2, Auxiliary and advanced functions in the array:

(1) Auxiliary function

push()      Add element
pop()        Delete element
shift()       Delete element
unshift()   Add element
splice()     Elements that can be added or deleted
sort()        Sort element
reverse()  Elements in reverse order

(2) Advanced function

■ filter: filter (get each element of the current array through the callback function)

Traverse the array, set certain conditions for the elements, filter out the elements that do not meet, and finally return the filtered array.

● the return value of the callback function is required to be Boolean. If it is true, the current element will be added to the internal array, and if it is false, it will be filtered out.

// 1. Use of filter function (filter out elements with element value less than 10 in the original array)
let newNums = nums.filter(function (n) {
   return n < 10
 })

■ map: Map (get each element of the current array through the callback function)

Traverse the array, set some processing conditions for the elements (such as addition, deletion, modification and query), and finally return the processed array.

● the array calls the map function, and the return value is the new array processed by the callback function, the parameter of the map function.

● parameters of the callback function (elements of the current array)

//Use of map function: (double the value of each element in the original array)
let new2Nums = newNums.map(function (n) {
       return n * 2
})

■ reduce: summary (get each element of the current array through the callback function)

Traverse the array, accumulate the elements, and finally return the accumulation result.

● the array calls the reduce function (the function is to summarize and continuously "accumulate" from the initial value),

Therefore, a general array call to the reduce function requires two parameters (the first is the callback function and the second is the initial value)

● the callback function ("accumulator" -- to realize the "accumulation" function) often needs two parameters (+ the function object of the operator is two, for example, 1 + 2 (+ there is an object on both sides) hahaha):

The first parameter: preValue the return value after the previous summary. The second parameter: n current element

 // 3. Use of reduce function (accumulate all elements in the array)
 //new2Nums is an array
 let total = new2Nums.reduce(function (preValue, n) {
   return preValue + n
 }, 0)

<div id="app">
    <div>
    Total price:{{total | getPrice}}
    </div>
</div>
 
<script>
  let app = new Vue({
    el: '#app',
    data: {
      books: [
        {name: 'Introduction to algorithm 1', date:'2018-1-1', price:100.5099, count:'1'},
        {name: 'Introduction to algorithm 2', date:'2018-1-1', price:100.9988, count:'1'},
        {name: 'Introduction to algorithms 3', date:'2018-1-1', price:100.98, count:'1'},
        {name: 'Introduction to algorithm 4', date:'2018-1-1', price:100.00, count:'1'},
      ]
    },
    computed: {
      total(){
        return this.books.reduce(function (preValue, n) {
          return preValue + n.count * n.price;
        }, 0);
      }
    },
    filters: {
      getPrice(price){
        // return '￥' + parseFloat(price).toFixed(2) ;
        return '￥' + price.toFixed(2) ;
      }
    }
</script>