[Javascript ] Array methods in depth - sort
Sort can automatically arrange items in an array. In this lesson we look at the basics including how to sort an array of strings alphabetically and the correct way to perform a numerical sort on an array of numbers. We finish as always with a practical use-case that shows not only sort
in action, but also how it can be chained together with other array methods such as map
and join
.
Problem with sort number in Array:
var data = [10, 20, 15]; var sorted = data.sort(); console.log(sorted); // [10, 15, 20]
Code works fine, but there is a problem:
When calling sort on an array with numbers, what actually happens is each number is converted to a string, and they're compared using their position in Unicode.
var data = [10, 20, 15, 30 ,2]; var sorted = data.sort(); console.log(sorted); // [10, 15, 2, 20, 30]
This is because, in Unicode, 10 does come before 2. Again, this is because these numbers are being converted to strings first.
To solve the problem:
var data = [10, 20, 15, 30 ,2]; var sorted = data.sort( (a,b)=>{ return a-b; } ); console.log(sorted);
We need to provide a comparative function to make it work. If a - b < 0 then it just put a before b;
Also according to that, we can compare the lenght of string, then sort them in order:
var sorted = names.sort( (a,b)=>{ return a.length - b.length; } ); console.log(sorted); // ["Bob", "Kent", "Kettly", "Jusnine"]
A more useful example : sort objects
var list = lessons.sort( (a,b)=>{ return a.views-b.views } ) .map( (lession)=>{ return ` <li>${lession.title} - ${lession.views}</li>`; } ) .join('\n'); var output = `<ul>\n${list}\n</ul>`; console.log(output); /* "<ul> <li>Javascript Array methods in depth - concat - 1000</li> <li>Javascript Array methods in depth - join - 1025</li> <li>Javascript Array methods in depth - slice - 1050</li> </ul>" */
相关文章
- JavaScript——DOM基础
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- javascript 调用WebAssembly的方法详解编程语言
- 表★★ MySQL索引优化:IN表的应用(mysql索引in)
- 关键字使用Oracle中的Replace函数替代IN关键字(oracle替代in)
- MySQL中的IN函数详解(mysql中的in)
- 借助MSSQL语句实现IN的强大功能(mssql语句 in)
- MySQL中使用IN类型参数(mysql中in类型参数)
- MySQL中IN的用法和意义(mysql中in的意思)
- MySQL中的IN查询的性能优化(mysql中in性能)
- MySQL中为什么不能使用IN子查询(mysql不能in子查询)
- Oracle中列转IN更快更智能的架构方案(oracle中列转列in)
- 提升Oracle IN操作中的性能改进(oracle in的性能)
- Oracle In 优势与劣势分析(oracle in优缺点)
- Javascript操纵Cookie实现购物车程序
- Javascript常用运算符(Operators)-javascript基础教程
- JavaScript设计模式富有表现力的Javascript(一)
- javascript中字符串替换函数replace()方法与c#、vb替换有一点不同
- JavaScript中for-in遍历方式示例介绍
- 一个JavaScript的求爱小特效
- Javascript基础教程之while语句
- Eclipse配置Javascript开发环境图文教程