整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript對象轉數組的三種簡單方法

          JavaScript對象轉數組的三種簡單方法

          家好!今天我們要聊的是JavaScript中一個非常實用的技巧——將對象轉換為數組。

          方法1:使用Object.keys()和Array.map()

          首先介紹一種基礎但非常實用的方法,就是通過Object.keys()獲取對象的鍵,然后用Array.map()把這些鍵對應的值提取出來。

          const student={ name: '小明', age: 18, city: '北京' };
          
          const arr=Object.keys(student).map(key=> student[key]);
          
          console.log(arr);
          // 輸出: ['小明', 18, '北京']

          在這個例子中,Object.keys(student)會返回一個包含對象所有鍵的數組(['name', 'age', 'city'])。接著,Array.map()會遍歷這個數組,每次迭代時,使用當前的鍵去獲取對象中的對應值。最終返回一個包含所有值的數組。

          方法2:使用Object.entries()

          接下來介紹的是Object.entries()方法,這是在ES6中引入的新方法。它直接返回一個包含對象鍵值對的數組。

          const student={ name: '小明', age: 18, city: '北京' };
          
          const arr=Object.entries(student);
          
          console.log(arr);
          // 輸出: [['name', '小明'], ['age', 18], ['city', '北京']]

          在這個例子中,Object.entries(student)直接返回一個數組,其中每個內部數組表示對象的一個鍵值對。這個方法的優勢在于它能直接獲取鍵值對,對于一些需要處理鍵值對的場景特別有用。

          方法3:使用Object.values()

          最后一個方法是使用Object.values(),它和Object.keys()類似,但它只返回對象的值。這種方法特別適合當我們只關心對象的值而不需要鍵的時候。

          const student={ name: '小明', age: 18, city: '北京' };
          
          const arr=Object.values(student);
          
          console.log(arr);
          // 輸出: ['小明', 18, '北京']

          在這個例子中,Object.values(student)直接返回一個包含對象所有值的數組。這個方法的優勢在于操作簡單,直接獲取所有值,不需要關心鍵。

          小結

          通過以上三種方法,我們可以輕松地將對象轉換為數組。無論是使用Object.keys()和Array.map(),Object.entries(),還是Object.values(),都各有優勢,大家可以根據具體需求選擇合適的方法。

          • 如果你只需要對象的值,Object.values()是最簡潔的方法。
          • 如果你需要對象的鍵值對,Object.entries()是最佳選擇。
          • 如果你需要對鍵值進行一些處理,Object.keys()加上Array.map()會非常靈活。

          家好,我是前端西瓜哥,今天說一下 JS 的類數組對象是什么,以及如何將類數組對象轉為數組。

          類數組對象是什么?

          類數組對象,就是含有 length 屬性的對象,但這個對象不是數組。

          通常來說還會有 0 ~ length-1 的屬性,結構表現上非常像一個數組。

          const arrlike = {1:'a', 4: 'd', length: 9};
          Array.isArray(arrlike) // false
          

          從底層上來看,這個對象的原型鏈上沒有 Array.prototype,所以我們不能用 Array.prototype 上的 forEach、map 等數組特有的方法。

          關于原型鏈,可以看我的這篇文章:《如何用原型鏈的方式實現一個 JS 繼承?》

          如果強行給一個類數組對象使用 forEach 方法,會得到一個類型錯誤。

          function f(a, b) {
            arguments.forEach(item => console.log(item));
          }
          // Uncaught TypeError: arguments.forEach is not a function
          

          除了手動創造的類數組對象,還有以下常見的類數組對象:

          • 普通數組中的 argument 對象。需要注意的是,箭頭函數中不存在這個對象。
          • 一些獲取 Dom 集合的方法,如 document.querySelectorAll()、 document.getElementsByClassName、document.getElementsByTagName() 也會返回類數組對象

          下面看看我們有哪些將類數組轉換為數組的方法。

          Array.prototyle.slice.call()

          我們可以用 Array.prototyle.slice 內置方法。

          Array.prototype.slice.call(obj);
          [].slice.call(obj);
          

          [] 空數組效果同 Array.prototype,因為空數組本身沒有 slice 方法,會走原型鏈拿到 Array.prototype 的方法。空數組寫法除了短一點沒有任何優點。

          然后 call 來自 Function.prototype,可以使用一個指定的 this 值來調用一個函數,這里是 Array.prototype.slice。我們不給 slice 方法傳開始和結束位置參數,這樣就會默認取整個范圍。

          slice 的迭代時會跳過不存在的索引屬性,所以你會看到 empty 的特殊值,和 undefined 還有點不同,你可以認為表示未被初始化。forEach、map 這些內置方法是會跳過它們不執行傳入的回調函數的。

          一個例子:

          const arrlike = {1:'a', 4: 'd', length: 9};
          const arr = Array.prototype.slice.call(arrlike);
          console.log(arr);
          


          什么原理?

          因為 slice 用于拷貝返回一個新的子數組,且只需要被操作的目標有 length 屬性就行了。

          下面是 Array.prototype.slice 的核心實現,默認 start 和 end 都在 length 范圍內。

          Array.prototype.mySlice = function(start, end) {
            if (start == undefined) start = 0;
            if (end == undefined) end = this.length;
            const cloned = new Array(end - start);
            for (let i = 0; i < cloned.length; i++) {
              // 為了確保不存在的索引保持為 empty 值
              if (i in this) {
                cloned[i] = this[start + i];
              }
            }
            return cloned;
          }
          

          你會發現,類數組對象替換掉這里的 this 后,能拷貝出一個真正數組。

          Array.from()

          ES6 新出的方法,可以將類數組對象或者是可迭代對象轉換為數組。

          const arrlike = {1:'a', 4: 'd', length: 9};
          arr = Array.from(arrlike);
          console.log(arr);

          和 Array.prototyle.slice.call() 有點不同,不存在的索引的值被設置了 undefined。

          如果一個對象,既是類數組對象,又是可迭代對象,Array.from() 方法會使用該對象的迭代器方法。

          一般來說,調用 JS 的內置方法返回類數組對象同時是可迭代對象,我們通常喜歡用擴展運算符(...),更優雅。

          const elCollection = document.getElementsByTagName('div');
          const elArray = [...elCollection];
          

          結尾

          一般來說,我們在開發中遇到的類數組對象都是 JS 內置方法返回的,同時也是可迭代對象,我們一般都是用 [...arrlik] 擴展運算符,咻咻咻搞定。

          如果類數組對象不是可迭代對象,可以使用 Array.prototyle.slice.call()Array.from()

          前者會對不存在的索引維持為 empty,后者則是 undefined。我們可以認為基本差別不大,建議用 Array.from(),語義化更好些。

          們在項目開發的時候,有時需要將js對象轉換為數組,下面小編給大家具體演示一下怎么轉換,主要是介紹一些常用、簡潔的轉換方法。

          比如JavaScript對象如下:

          let obj={
          
            'name': '前端',
          
            'url': 'https://www.webadkf.com',
          
            'des': '專注web前端開發',
          
          };

          這里只需要它的值,我們需要轉換的數組形式如:

          ['前端', 'https://www.webqdkf.com', '專注web前端開發']

          方式一:Object.values

          Object.values()方法返回一個給定對象自身的所有可枚舉屬性值的數組,值的順序與使用for...in循環的順序相同 ( 區別在于 for-in 循環枚舉原型鏈中的屬性 )。

          let arr=Object.values(obj); //對象轉化為數組

          ps:如果只需要返回鍵作為數組,可以使用Object.keys()的方式,所以結合Map,也可以實現:

          let arr=Object.keys(obj).map(function(i){return obj[i]}); //對象轉化為數組

          方式二:循環

          可以直接利用循環,如for in或者forEach()等:

          var arr=[]; //定義數組
          for (var i in obj) {
              arr.push(obj[i]); 
          }

          方式三:Array.from

          Array.from() 方法對一個類似數組或可迭代對象創建一個新的,淺拷貝的數組實例。

          var arr=Array.from(Object.values(obj),x=>x);

          主站蜘蛛池模板: 国产精品第一区第27页| 亚洲AV无码一区二区二三区入口 | 视频在线一区二区三区| 无码少妇一区二区三区芒果| 美女视频一区二区三区| 亚洲Aⅴ无码一区二区二三区软件| 人妻少妇精品一区二区三区| 无码人妻精品一区二区三区东京热 | 亚洲va乱码一区二区三区| 伊人无码精品久久一区二区| 能在线观看的一区二区三区| 久久精品一区二区三区资源网| 午夜AV内射一区二区三区红桃视 | 国产一区二区三区在线电影| 成人影片一区免费观看| 学生妹亚洲一区二区| 一本色道久久综合一区 | 亚洲一区二区三区播放在线| 国产精品亚洲专一区二区三区| 91福利国产在线观看一区二区| 精品爆乳一区二区三区无码av| 日本丰满少妇一区二区三区| 久久综合精品不卡一区二区| 国产伦精品一区二区| 看电影来5566一区.二区| 麻豆国产在线不卡一区二区| www.亚洲一区| 精品国产一区二区三区| 国产精品一区二区av| 日本v片免费一区二区三区 | 精品国产a∨无码一区二区三区| 香蕉久久AⅤ一区二区三区| 日韩毛片基地一区二区三区| 国产AV午夜精品一区二区三| 国产成人一区二区三区精品久久| 无码毛片视频一区二区本码| 日韩A无码AV一区二区三区 | 国产精品无码不卡一区二区三区 | 在线播放精品一区二区啪视频| 免费日本一区二区| 一区二区三区免费电影|