Javascript Sort

有時需要在前端進行排序時，可透過String.localeCompare()來進行比對。

var v1 = "abc";

var v2 = "def";

console.log(v1.localeCompare(v2));// -1

console.log(v2.localeCompare(v1));// 1

console.log(v1.localeCompare(v1));// 0

所以當有一個Object的Array需要進行排序時，可寫成如下

var objectAry = [
    {userName:'John Doe',age:20}
    ,{userName:'Peter Hancock',age:42}
    ,{userName:'May J.',age:16}
   ];

var compareAttr = 'userName';
    objectAry.sort(function (o1,o2) {
    return o1[compareAttr].localeCompare(o2[compareAttr]);
    }).forEach(function(row,index){
    console.log("row:" + index, row);
    });

row:0 Object {userName: "John Doe", age: 20}

row:1 Object {userName: "May J.", age: 16}

row:2 Object {userName: "Peter Hancock", age: 42}

由於localeCompare只有String才有，所以若直接用Number的資料以localeCompare的方式排序會出現錯誤。

compareAttr = 'age';
    objectAry.sort(function (o1,o2) {
    return o1[compareAttr].localeCompare(o2[compareAttr]);
    }).forEach(function(row,index){
    console.log("row:" + index, row);
    });

Uncaught TypeError: o1[compareAttr].localeCompare is not a function

所以可透過prototype的方式將Number資料型態增加localeCompare的function來處理。

Number.prototype.localeCompare = function (compare) {
    if (isNaN(compare)) {//用於資料為String and Number混合比對的時候
        return (this + "").localeCompare(compare);
    } else if (this > compare) {
        return 1;
    } else if (this < compare) {
        return -1;
    } else {
        return 0;
    }
    };

再次執行

compareAttr = 'age';
    objectAry.sort(function (o1,o2) {
    return o1[compareAttr].localeCompare(o2[compareAttr]);
    }).forEach(function(row,index){
    console.log("row:" + index, row);
    });

row:0 Object {userName: "May J.", age: 16}

row:1 Object {userName: "John Doe", age: 20}

row:2 Object {userName: "Peter Hancock", age: 42}

Javascript Number

蒐集整理一下最近用Javascript計算數字的心得，以免日後每次用都要重新再搞一次….orz

·   Javascript浮點數計算

由於浮點數的誤差(詳細請參閱這裡)，因此簡單的數學計算常會在Javascript出現出乎意料之外的結果。

var n1 = 0.1;
var n2 = 0.2;
console.log(n1 + n2);//0.30000000000000004
console.log(n1 * n2);//0.020000000000000004
console.log(n1 / n2);//0.5
console.log(n1 - n2);//-0.1

0.30000000000000004

0.020000000000000004

0.5

-0.1

因此建議不要透過javascript來進行運算，或透過javascript的lib如mathjs來使用。

但若只是單純的運算，不涉及一些重要資訊如金錢或有嚴重影響的資訊，也不想再額外包入相關的javascript lib，則可透過簡單的使用方式如下。

console.log(Math.round((n1 + n2) * 100) / 100);
console.log(Math.round((n1 * n2) * 100) / 100);
console.log(Math.round((n1 / n2) * 100) / 100);
console.log(Math.round((n1 - n2) * 100) / 100);

0.3

0.02

0.5

-0.1

或是增加一個Number的prototype function如下

Number.prototype.toCorrectFloat = function () {
    return Math.round(this * 100) / 100;
};

console.log((n1 + n2).toCorrectFloat());
console.log((n1 * n2).toCorrectFloat());
console.log((n1 / n2).toCorrectFloat());
console.log((n1 - n2).toCorrectFloat());

0.3

0.02

0.5

-0.1

· Javascript科學符號  toExponential(x)

將數字以科學符號表示，並取小數點後x個字數，不足的字數以0補上。(無條件捨去)

console.log((0.00011235).toExponential());//1.1235e-4console.log((0.00011235).toExponential(3));//1.123e-4console.log((0.00011235).toExponential(7));//1.1235000e-4

· Javascript Number Format  toPrecision(x)

大於0則會取x個字數(包含0不含小數點且無條件捨去)

console.log((1.0025).toPrecision(2));//1.0
console.log((1.0025).toPrecision(4));//1.003

大於0且字數大於x則會變為科學記號並只取由前數來共x個數字(四捨五入)

console.log((9861.0001).toPrecision(2));//9.9e+3
console.log((9841.0001).toPrecision(2));//9.8e+3
console.log((9811.0001).toPrecision(6));//9811.00

小於0則取小數點第一個非0的數字後x個字數(四捨五入)

console.log((0.00011634).toPrecision(1));//0.0001
console.log((0.00011634).toPrecision(2));//0.00012
console.log((0.00011634).toPrecision(3));//0.000116

·Javascript Number Format  toFixed(x)

取小數點後x個字數(四捨五入)，不足的字數量會以0補上

console.log((0.00011634).toFixed(1));//0.0001
console.log((13333.00511634).toFixed(2));//13333.01
console.log((0.103).toFixed(6));//0.103000