學習javaScript必知必會(3)~陣列（陣列建立，for...in遍歷，輔助函式，高階函式filter、map、reduce）

一樂樂發表於2022-01-16
JavaScript陣列函式Filter

一、陣列：

1、js是弱語言，js中的陣列定義時：不用指定資料型別、不用功指定陣列長度；陣列可以儲存任何資料型別的資料


2、陣列定義的[ ] 的實質：

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

3、建立陣列的語法：

var arr = [值1, 值2, 值3];
var arr = new Array(值1, 值2, 值3);
var arr = new Array(值1);//只有一個值時，其為陣列的長度，賦值需要一個一個進行賦值，例如 arr[0] = 1; arr[1] = 2; ...

4、陣列的資料型別----即物件（在js中，陣列不需要定義時指定資料型別，它的型別就是物件）


5、for-in遍歷：可以遍歷一個物件的所有屬性；也可以編譯一個陣列的所有元素


✿ 6、陣列想要帶有文字下標的元素，必須在建立陣列之後

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

□ 在js中，文字下標的陣列元素，不計入陣列長度。【因為文字下標的元素是以屬性形式新增到陣列物件中的】

var arr = [1, 2, 3];
arr['pop'] = 'gun';
arr['good'] = 'cloth';
//取到陣列下標為'pop'的元素：
document.write(arr['pop']);
document.write(arr.pop);



二、陣列中的輔助函式和高階函式：

（1）輔助函式

push()      新增元素
pop()        刪除元素
shift()       刪除元素
unshift()   新增元素
splice()     可新增可刪除元素
sort()        排序元素
reverse()  逆序元素

（2）高階函式

■ filter：過濾（通過回撥函式拿到當前陣列的每個元素）

遍歷陣列,對元素通過設定某種條件，不滿足的元素過濾掉了，最終返回經過過濾的陣列。

● 要求回撥函式返回值是布林值，為true時，當前的元素新增到內部陣列中，為false則過濾掉。

// 1.filter函式的使用（讓原陣列中元素值小於10的被過濾掉）
let newNums = nums.filter(function (n) {
   return n < 10
 })

■ map：對映 （通過回撥函式拿到當前陣列的每個元素）

遍歷陣列，對元素設定某種處理條件（例如增刪改查操作），最終返回經過處理的陣列。

● 陣列呼叫map函式，返回值是經過map函式的引數---回撥函式處理過的新陣列。

● 回撥函式的引數（當前陣列的元素）

//map函式的使用：(讓原陣列中的每個元素值翻倍)
let new2Nums = newNums.map(function (n) {
       return n * 2
})

■ reduce：彙總（通過回撥函式拿到當前陣列的每個元素）

遍歷陣列，對元素進行“累加”，最終返回“累加結果”。

● 陣列呼叫reduce函式（作用就是彙總，從初始值開始不斷的“累加”），

所以一般陣列呼叫reduce函式需要有兩個引數【第一個是回撥函式，第二個是初始值】

● 回撥函式（“累加器”--為了實現“累加”作用）往往也是需要兩個引數的（+運算子的作用物件就是2個呀，例如1+2（+兩邊各有一個物件）哈哈哈）：

第一個引數：preValue 前一次彙總後return的值， 第二個引數：n 當前元素


 // 3.reduce函式的使用（對陣列中所有的所有元素進行累加）
 //new2Nums是一個陣列
 let total = new2Nums.reduce(function (preValue, n) {
   return preValue + n
 }, 0)


<div id="app">
    <div>
    總價格:{{total | getPrice}}
    </div>
</div>
 
<script>
  let app = new Vue({
    el: '#app',
    data: {
      books: [
        {name: '演算法導論1', date:'2018-1-1', price:100.5099, count:'1'},
        {name: '演算法導論2', date:'2018-1-1', price:100.9988, count:'1'},
        {name: '演算法導論3', date:'2018-1-1', price:100.98, count:'1'},
        {name: '演算法導論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>

相關文章