精华内容
下载资源
问答
  • 本文主要汇总了一些JS从非数组对象转数组的方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 Array.prototype.slice.call(obj) 该方法可以将类数组对象转换为数组,所谓类数组对象,就是含...
  • js对象转数组

    万次阅读 2018-10-30 14:01:31
    js对象转数组 困扰了许久的问题终于解决了! 虽说很基础,但是网上找到的方法都不是自己想要的那种,各种机缘巧合,找到了一个简单的方法,可能一开始的想法就是错的,在错误的道路上越走越远,哈哈哈 , 来总结一下...

    js对象转数组

    困扰了许久的问题终于解决了! 虽说很基础,但是网上找到的方法都不是自己想要的那种,各种机缘巧合,找到了一个简单的方法,可能一开始的想法就是错的,在错误的道路上越走越远,哈哈哈 , 来总结一下

    1.要实现的功能是显示基站的详情信息,通过ajax请求已经拿到了全部的数据,再通过每行的@click=“stationDetails(scope.row)” 拿到当前行的信息,接下来要做的就是把对象转为数组,因为vue中的循环是在数组中的,当前通过row取到的数据如下
    row的数据

    发现当前的数据格式并不满足想要的格式,需要转成数组形式,于是百度了转换方式,网上有很多这种解答,

    var arr = []
    for (var i in object) {
        arr.push(object[i]); //属性
        //arr.push(object[i]); //值
    }
    console.log(arr);
    

    这种方式可以拿到所有的key 和所有value值,但是并没有再存储到新的数组中,于是我就在想使用for循环的路上越走越远,发现各种坑,其实也是因为基础不扎实,后来改用vue中的变异数组的方法,$set,为数组动态赋值,于是很碰巧的解决了想要解决的问题

    起初写的是这样

    stationDetails(row) {
          this.dialogTableVisible = true
          this.stationDetailsData = [{}]
          for (const i in row) {
            this.$set(this.stationDetailsData, i, row[i])
          }
          console.log(this.stationDetailsData)
        }
    

    得到的数据如下
    在这里插入图片描述
    发现有索引号的问题,因为我基础真的不太好,动态添加的数据为第0项下的数据,通过结果来推测改成了如下,

    this.$set(this.stationDetailsData[0], i, row[i])
    

    行内的查看详情的按钮

              <el-button type="success" plain size="mini" @click="stationDetails(scope.row)" >查看详细信息</el-button>
    

    弹窗显示详情信息

     <el-table
              v-loading="listLoading"
              :data="stationDetailsData">
              <el-table-column property="baseStationNum" label="基站编号"/>
              <el-table-column property="baseStationIp" label="基站IP" />
              <el-table-column property="ssid" label="wifi名称"/>
              <el-table-column property="softwareVersion" label="软件版本号"/>
              <el-table-column property="hardwareVersion" label="硬件版本号" />
              <el-table-column property="powerSupply" label="电池"/>
              <el-table-column property="channel" label="信道"/>
              <el-table-column property="emissivePower" label="发射功率" />
              <el-table-column property="antennaGain" label="天线增益"/>
              <el-table-column property="encryption" label="加密方式"/>
            </el-table>
    

    methods

        stationDetails(row) {
          this.dialogTableVisible = true
          this.stationDetailsData = [{}]
          for (const i in row) {
            this.$set(this.stationDetailsData[0], i, row[i])
          }
          console.log(this.stationDetailsData)
        }
    

    得到的数据如下
    在这里插入图片描述

    最终效果如下
    完美

    展开全文
  • JS 对象转数组

    2020-03-30 12:01:08
    Object.keys方法是JavaScript中用于遍历对象属性的一个方法 。它传入的参数是一个对象,返回的是一个数组,数组中包含的是该对象所有的属性名。 const obj = { name: "LiuDanyang", sex: "男", age: "25" }; ...

     Object.keys方法是JavaScript中用于遍历对象属性的一个方法 。它传入的参数是一个对象,返回的是一个数组,数组中包含的是该对象所有的属性名。

    const obj = {
        name: "LiuDanyang",
        sex: "男",
        age: "25"
    };
    const array = [];
    Object.keys(obj).forEach(v => {
        let o = {};
        console.log(v)
        o[v] = obj[v];
        array.push(o)
    });
    //array [{name: "LiuDanyang"}, {sex: "男"}, {age: "25"}]
    

     

    展开全文
  • js 对象转数组

    万次阅读 2017-12-02 15:54:48
    var arr = [] for (var i in object) { arr.push(object[i]); } console.log(arr);
    var arr = []
    for (var i in object) {
        arr.push(object[i]); //属性
        //arr.push(object[i]); //值
    }
    console.log(arr);
    展开全文
  • 常见的类数组有arguments和NodeList,《javascript权威指南》里面给出了一个鉴别对象是否是类数组的函数: // Determine if o is an array-like object. // Strings and functions have numeric le...

    一.定义:什么是类数组对象?

    拥有length属性,可以通过下标访问;

    不具备数组所具有的方法

    常见的类数组有arguments和NodeList,《javascript权威指南》里面给出了一个鉴别对象是否是类数组的函数:

    // Determine if o is an array-like object.
    // Strings and functions have numeric length properties, but are 
    // excluded by the typeof test. In client-side JavaScript, DOM text
    // nodes have a numeric length property, and may need to be excluded 
    // with an additional o.nodeType != 3 test.
    function isArrayLike(o) {
        if (o &&                                // o is not null, undefined, etc.
            typeof o === 'object' &&            // o is an object
            isFinite(o.length) &&               // o.length is a finite number
            o.length >= 0 &&                    // o.length is non-negative
            o.length===Math.floor(o.length) &&  // o.length is an integer
            o.length < 4294967296)              // o.length < 2^32
            return true;                        // Then o is array-like
        else
            return false;                       // Otherwise it is not
    }

    二.为什么要将类数组对象转为数组对象?

    数组对象Array有很多方法:shiftunshiftsplicesliceconcatreversesort,ES6又新增了一些方法:forEachisArrayindexOflastIndexOfeverysomemapfilterreduce等。由于类数组不具有数组所具有的操作数组的方法,将类数组转换为数组之后就能调用这些强大的方法,方便快捷

    三.类数组对象转为数组对象的方法:

    1)Array.prototype.slice.call(arrayLike) 或 Array.prototype.slice.call(arrayLike, 0) 或 [].slice.call (arrayLike) 或 [].slice.call (arrayLike, 0)

    这种方法是借用了数组原型中的slice方法,返回一个数组。slice方法的内部实现:

    Array.prototype.slice = function(start,end){  
          var result = new Array();  
          start = start || 0;  
          end = end || this.length; //使用call之后this指向了类数组对象
          for(var i = start; i < end; i++){  
               result.push(this[i]);  
          }  
          return result;  
     } 
    

    2) Array.from(arrayLike)

    Array.from()是ES6中新增的方法,可以将两类对象转为真正的数组:类数组对象和可遍历(iterable)对象(包括ES6新增的数据结构Set和Map)。

    var arrayLike = {
        '0':'a',
        '1':'b',
        '2':'c',
        length:3
    };
    var arr = Array.from(arrayLike);//['a','b','c']
    //把NodeList对象转换为数组,然后使用数组的forEach方法
    var ps = document.querySelectorAll('p');
    Array.from(ps).forEach(p){
        console.log(p);
    });                             
    //转换arguments对象为数组
    function foo(){
        var args = Array.from(arguments);
        //...
    }
    //只要是部署了Iterator接口的数据结构,Array.from都能将其转换为数组
    Array.from('hello');    //['h','e','l','l','o']
    

    3) 原生JavaScript转换

    var length = arrayLike.length;
    var arr = [];
    for (var i = 0; i < length; i++) {
      arr.push(arrayLike[i]);
      return arr;
    }

    4)  扩展运算符(…) 

    同样是ES6中新增的内容,扩展运算符(…)也可以将某些数据结构转为数组

    //arguments对象的转换
    function foo(){
        var args = [...arguments];
    }
    //NodeList对象的转换
    [...document.querySelectorAll('p')]

    说明:es5下通用的转换方法如下

    var toArray = function(s){  
        try{  
            return Array.prototype.slice.call(s);  
        } catch(e){  
                var arr = [];  
                for(var i = 0,len = s.length; i < len; i++){   
                     arr[i] = s[i];   
                }  
                 return arr;  
        }
    

    四.JavaScript如何判断一个对象是否为数组?

    使用typeof运算符不能判断一个对象是否为数组,因为typeof arr返回的是object而不是array

    1) arr instanceof Array 返回true

    2) arr.constructor == Array 返回true

    说明:使用instanceofconstructor判断数组类型的问题在于,它假定只有一个运行环境,如果网页中包含多个框架,那么实际上存在两个以上不同的全局执行环境,进而存在两个不同版本的Array构造函数,如果从一个框架向另一个框架传入一个数组,那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数,也就是说,object.constructor == Array 会返回false。

    原因:Array属于引用型数据,传递过程仅仅是引用地址的传递,每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的Array所对应的构造函数,是子页面的Array对象,父页面进行判断时使用的Array并不等于子页面的Array。

    3) Array.isArray(arr)方法返回true

    ES5新增了Array.isArray()方法,这个方法的目的是:最终确定一个值是否是数组,不管它是在哪个全局环境创建的。

    4) Object.prototype.toString.call(arr) === "[object Array]"返回true

    展开全文
  • vue JS 对象转数组

    2021-07-05 09:16:58
    option: { head:{ title: "日期", name: date, width: 180 }, data: { date: "2021-05-27", ...转数组: let option=this.option; let Arr= Object.keys(option).map(k
  • javascript与dom有许多瑕疵,如著名的类数组对象Arguments,其他诸如HTMLCollection,NodeList如果它们都是数组的子类,那多省时啊。
  • 以一次实际开发中的实例,将几种对象转数组的方法都试了一遍: // const errorList = Object.keys(error) // console.log('error', error) // console.log('Array.from', Array.from(error)) // console.log('...
  • 本篇文章参考 ...1.Array.from() 方法,用于数组的浅拷贝。就是将一个类数组对象或者可遍历对象转换成一个真正的数组。 eg: let obj = { 0: 'nihao', 1: 'haha', 2: 'gan...
  • 用 entries方法 和 map 方法,对象转成数 let Obj = { allOrder: 1, notStart: 2, outOrder: 3, finishOrder: 4, totalCm: 5, } if ( Object.keys...
  • 最近在修改老代码时候,遇到的对象转需要转数组问题,老代码是一个亦form表单传值的老的php项目,需要做一些现代化的操作而进行修改 dataArr数据如下图所示,红色箭头表示循环的每一个item, 绿色箭头表示每个item...
  • vue js 对象转数组

    万次阅读 2019-08-29 11:14:09
    对象: webSetting: { //公共JS脚本 GlobalJs: { Code: "123", Id: "1", Value: "34234" }, //全站开关 SiteStatus: { Code: "", ...
  • 注意:不能使用typeof来判断是否为数,因为它返回的是一个对象 typeof操作符 // 数值 typeof 37 === 'number'; // 字符串 typeof '' === 'string'; // 布尔值 typeof true === 'boolean'; // Symbols typeof...
  • 举例说明: <!DOCTYPE html> <html> <head></head> <body> <ul id="ul"> <li> 123 </li> <...
  • 对象套对象转数组

    2020-12-16 17:37:29
    let obj = { a1: { a: 1, b: 2 }, a2: { a: 1, b: 2 }, a3: { a: 1, b: 2 }, }; for (let key in obj) { arr.push(obj[key]); } console.log(arr);
  • 数组转对象、对象转数组(针对嵌套深层次比较深的对象或者数组) 声明一个函数,arr_obj ,里面接收一个参数,参数类型只接受对象或者数组 如果没有传递任何参数 或者 传递的参数类型不符合要求,就会抛出错误异常 ...
  • 总结几个对象转数组的方法

    万次阅读 2018-05-19 23:52:41
    注:返回一个给定对象自身可枚举属性的键值对数 const obj = { foo : 'bar' , baz : 42 }; console .log(Object.entries(obj)); // [ [ 'foo' , 'bar' ], [ 'baz' , 42 ] ] 5、使用 for…in...
  • 2.Array.prototype.slice.call(obj)能将具有length属性的对象转成数,不带length属性的对象,只能声明数组去转换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
  • js json对象转数组获取key与长度

    千次阅读 2019-05-17 14:48:12
    var obj = {'name' : 'Tom' , 'sex' : 'male' , 'age' : '14'}; var arr = Object.keys(obj); console.log(arr); // ['name','sex','age'] console.log(arr.length); //3
  • js--对象转数组

    2019-07-29 14:36:32
    js--对象转数组
  • Vue.js对象转换实例

    2020-10-19 17:57:17
    主要介绍了 Vue.js对象转换的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 如何把一个对象转化为数,实例: obj:{ name: 'aaa', height: 190, sex: 'man', } 转化为: objNew:[ { name: 'aaa' }, { height: 190 }, { sex: 'man' }, ] 对象的两种取值方式 JS对象有两种取值方式...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,670
精华内容 1,468
关键字:

对象转数组js