js数组对象排序详解
一、js对象遍历输出的时候真的是按照顺序输出吗?
下边就来实践一下:
var obj={'3':'ccc',name:'abc',age:23,school:'sdfds',class:'dfd',hobby:'dsfd'};
Object.keys(obj)
输出:["3", "name", "age", "school", "class", "hobby"];
换一下对象顺序,
var obj={name:'abc','3':'ccc',age:23,school:'sdfds',class:'dfd',hobby:'dsfd'};
Object.keys(obj)
输出:["3", "name", "age", "school", "class", "hobby"]
所以,对象的遍历输出并不是按照顺序来的,那么是按照什么规则来的呢,仔细深入研究你会发现,这还跟浏览器有关系,Chrome跟IE是不一样的,所以给出以下结论:
Chrome Opera 的 JavaScript 解析引擎遵循的是新版 ECMA-262 第五版规范。因此,使用 for-in 语句遍历对象属性时遍历书序并非属性构建顺序。
而 IE6 IE7 IE8 Firefox Safari 的 JavaScript 解析引擎遵循的是较老的 ECMA-262 第三版规范,属性遍历顺序由属性构建的顺序决定。
Chrome Opera 中使用 for-in 语句遍历对象属性时会遵循一个规律:
它们会先提取所有 key 的 parseFloat 值为非负整数的属性,然后根据数字顺序对属性排序首先遍历出来,然后按照对象定义的顺序遍历余下的所有属性。
那么,解决办法呢?
可以把对象通过Object.keys提取对象的key出来变成数组,然后通过数组的排序,然后遍历数组,通过key去取对象的属性值。
二、js数组遍历排序方法
大家都知道数组的遍历是按照顺序的,那么当一个数组中放了很多对象,想要按照对象的某个属性去排序数组需要怎么处理呢?
1.定义一个方法:
var compare = function (prop) {
return function (obj1, obj2) {
var val1 = obj1[prop];
var val2 = obj2[prop];if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
}
var arr=[{ name:"wlz", age:25},{ name:"wlz", age:5},{ name:"wlz", age:15},{ name:"wlz", age:3},{ name:"zlw", age:24}];
console.log(arr.sort(compare('age')))

最后这个数组就根据属性来做排序了。
js数组对象排序详解的更多相关文章
- Js 数组对象排序
1.定义函数 /** * 数组对象排序函数 * @param {any} name 排序字段 * @param {any} order 升.降(这里事true.false记得处理下) */ var b ...
- JS数组定义及详解
1.什么是数组 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 2.关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可以无需指定数组 ...
- PHP数组array_multisort排序详解
今天特意再看了下官网的介绍,对它的多个数组的排序还是每台理解,找了些资料深入理解了下,在此总结下. PHP中array_multisort函数对多个数组或多维数组进行排序,关联(string)键名保持 ...
- js数组sort方法详解
在处理数组的时候,我们有时候需要对数组进行排序,排序的方法有很多种,但是最好最快的就是利用sort方法进行快速的排序. 我们来看一个例子: var arr1 = [6, 3, 4, 1, 2, 5, ...
- Java 对象排序详解
很难想象有Java开发人员不曾使用过Collection框架.在Collection框架中,主要使用的类是来自List接口中的ArrayList,以及来自Set接口的HashSet.TreeSet,我 ...
- JS进阶篇--JS数组reduce()方法详解及高级技巧
基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被 ...
- JS数组reduce()方法详解及高级技巧
1.语法 arr.reduce(callback,[initialValue]) reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上 ...
- JS 数组的常用方法详解归纳之改变原数组方法
shift() 把数组的第一个元素从其中删除,并返回第一个元素的值, 如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值.请注意,该方法不创建新数组,而是直接修改 ...
- 常见 js 数组方法使用详解
数组常用方法总结 concat filter map some every reduce sort includes join some every 语法:array.every(function(c ...
随机推荐
- Android-通过SlidingPaneLayout高仿微信6.2最新版手势滑动返回(一)
近期更新了微信版本号到6.2.发现里面有个很好的体验,就是在第二个页面Activity能手势向右滑动返回,在手势滑动的过程中能看到第一个页面,这样的体验很赞,这里高仿了一下. 这里使用的是v4包里面的 ...
- Hybrid 开发
主讲人:吴彬 要学习某个东西之前,我们首先要了解这个东西是什么?然后我们要了解这东西有什么用,有什么好处和弊端?最后我们要知道这东西怎么用? 简单点就是 ——是什么?有什么用?怎么用? 那么进入正题 ...
- CSS里面position:relative与position:absolute 区别
position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...
- CF19 E Fairy——树上差分
题目:http://codeforces.com/contest/19/problem/E 先把图连成一棵树,然后对于每条非树边,判断它是在奇环中还是偶环中: 把环上的点打上相应的差分标记,并记录有多 ...
- Python猜年龄
题目:Python实现猜年龄 步骤一:实现最简单的猜年龄 # 事先定义 dark_knight_age = 28 user_age = input('Please guess my age:') us ...
- PCB genesis连孔加除毛刺孔(槽孔与槽孔)实现方法(三)
一.为什么 连孔加除毛刺孔 原因是 PCB板材中含有玻璃纤维, 毛刺产生位置在于2个孔相交位置,由于此处钻刀受力不均导致纤维切削不断形成毛刺 ,为了解决这个问题:在钻完2个连孔后,在相交处再钻一个孔, ...
- 2017北京国庆刷题Day1 morning T2
T2火柴棒 (stick) Time Limit:1000ms Memory Limit:128MB 题目描述 众所周知的是,火柴棒可以拼成各种各样的数字.具体可以看下图: 通过2根火柴棒可以拼出 ...
- $Vijos P1250$
背包? 跑完并查集 分组背包完事 #include <bits/stdc++.h> #define rep(i,j,n) for(register int i=j;i<=n;i++) ...
- jq-文本框只能输入数字
<input type="text" onKeyUp="value=value.replace(/\D/g,'')" /> onKeyUp: 当输 ...
- 给定的逗号分隔的数字字符串转换为Table
--将给定的逗号分隔的数字字符串转换为Table CREATE FUNCTION [dbo].[fu_Split](@strString nvarchar(4000)) RETURNS @Result ...