javascript基本物件

morra發表於2016-12-21

1 String物件

建立物件

var string1 = new String("Hello");
 
var string2 = "Hello"      //也可以建立一個基本的字串，js後臺會自動把其轉換為String物件

1.1 length()

長度屬性

var str = "Hello,world!";
var tmp = str.length;   //12

1.2 indexOf與lastIndexOf

根據元素找索引

var myString = new String("hello world hello")
 
document.write(myString.indexOf('hello'))   //0，從前面開始匹配，匹配到後就不繼續查詢了
document.write(myString.indexOf('world'))   //6
document.write(myString.indexOf('123'))     //-1
 
document.write(myString.lastIndexOf('hello'))   //12，從後面開始匹配，匹配到後就不繼續查詢了
document.write(myString.lastIndexOf('world'))   //6
document.write(myString.lastIndexOf('123'))   //-1

練手統計字串

<script>
    originString = 'Python is an to learn, powerful programming language. It has efficient high-level data structures and a simple but effective approach to object-oriented programming. Python’s elegant syntax and dynamic typing, together with its interpreted nature, make it an ideal language for scripting and rapid application development in many areas on most platforms.'
    var foundAtPosition = 0
    var targetCount = 0
    while (foundAtPosition != -1){
        foundAtPosition = originString.indexOf("Python",foundAtPosition)
 
        if(foundAtPosition != -1){
            targetCount++
            foundAtPosition++  //防止死迴圈
        }
    }
    document.write(targetCount)
</script>

1.3 substr()

複製字串的一個子串，類似於py的切片

var str = "Hello,world!";
var tmp = str.substr(0,4);   //Hell

//獲取當前網頁檔名
var fileName = window.location.href;
 
fileName = fileName.substr(fileName.lastIndexOf("/") + 1);
document.write(fileName);

1.4 toLowerCase與toUpperCase

大小寫轉換

var str = "Hello,world!";
var tmp = str.toLowerCase();
var tmp = str.toUpperCase();

1.5 charCodeAt

字串轉為字元編碼

var tmp ="A".charCodeAt(0);

1.6 fromCharCode

字元編碼轉為字串

//它是一個靜態方法，不需要建立物件就能使用
var tmp = String.fromCharCode(65, 66, 67);

1.7 trim

去掉兩端空格

var myString = prompt("Enter some text", "Hello,world!");
var tmp = myString.trim();

2 Array物件

2.1 length

var names = [];
names[0] = "morra";
names[1] = "blue";
 
names[11] = "jack";
 
var tmp = names.length
document.write(tmp)  //12
//["morra", "blue", undefined × 9, "jack"]

2.2 push()

新增元素

使用push的時候無需指定索引

var names = ["123"];
names.push("hello1")
names.push("hello2")
 
document.write(names) //123,hello1,hello2

2.3 concat()

連線陣列

var names = ["a","b","c"];
var ages = ["1","2","3"];
 
var tmp = names.concat(ages);  //["a", "b", "c", "1", "2", "3"]

2.4 slice()

切片

var names = ["a","b","c","d","e","f"];
var tmp = names.slice(1,4);
 
console.log(names)  //初始陣列物件不變，["a", "b", "c", "d", "e", "f"]
console.log(tmp);  //["b", "c", "d"]

2.5 join

連線

var names = ["a", "b", "c", "d", "e", "f"];
var tmp = names.join("_")
 
console.log(tmp) //a_b_c_d_e_f

2.6 sort()

排序
排序是分大小寫的
js儲存的是字串對應的unicode編碼，所以排序是基於unicode編碼而不是實際字母

2.7 reverse()

翻轉

var names = ["a", "b", "c", "d", "e", "f"];
names.reverse();
 
console.log(names) //["f", "e", "d", "c", "b", "a"]

2.8 indexOf與lastIndexOf

根據元素找索引，沒有找到目標則返回-1

var names = ["a", "b", "c", "d", "c", "f"];
var tmp1 = names.indexOf("c")
var tmp2 = names.lastIndexOf("c")
 
console.log(tmp1) //2
console.log(tmp2) //4

2.9 every()與some()

every()：判斷可迭代物件中的所有元素是否全部滿足目標條件
some()：判斷可迭代物件中的所有為元素是否全部滿足目標條件

every()與some()都返回布林值

var numbers = [1, 2, 3, 4, 5];
 
function isLessThan(value, index, array) {
    var ret = false;
    if (value < 3) {
        ret = true;
    }
    return ret
}
 
alert(numbers.every(isLessThan));

2.10 filter()

filter()返回的是符合條件的元素組成的陣列。

var numbers = [1, 2, 3, 4, 5];
 
function isLessThan(value, index, array) {
    var ret = false;
    if (value < 3) {
        ret = true;
    }
    return ret
}
 
console.log(numbers.filter(isLessThan)) //[1, 2]

2.11 forEach()和map()

都是對可迭代物件中的元素進行批量操作，但是forEach()是沒有返回值的，因此只能操作但是不自動儲存修改後的資料。

//forEach
var numbers = [1, 2, 3, 4, 5];
 
function double(value, index, array) {
    var ret = value * 2;
    console.log(ret)
}
numbers.forEach(double)

//map
var numbers = [1, 2, 3, 4, 5];
 
function double(value, index, array) {
    var ret = value * 2;
    return ret
}
 
console.log(numbers.map(double))  //[2, 4, 6, 8, 10]

3 Math物件

Math物件提供了很多數學函式和數值操作的方法。Math物件之前不需要例項化，js會自動建立。所以在使用時直接用就好了。例如：

var myNumber = -101;
console.log(Math.abs(myNumber))

方法	註釋
abs()	絕對值
min()	最小值
max()	最大值
ceil()	向上修整到最接近的最小整數，例：10.01 > 11 ， -9.99 > -9
floor()	向下修整到最接近的最小整數，例：10.01 > 10 ， -9.99 > -10
round()	四捨五入
pow()	指數
random()	返回一個0~1之間的隨機浮點數

pow()
指數

console.log(Math.pow(2,3))   //2^3

random()
返回一個0~1之間的隨機浮點數

console.log(Math.random())  //返回 0<=x<1 之間的隨機浮點數
 
console.log(Math.random()*6)  //返回 0<=x<6 之間的隨機浮點數
 
console.log(Math.floor(Math.random()*6))  //返回 0<=x<6 之間的隨機整數
 
console.log(Math.floor(Math.random()*6)+1)  //返回 1<=x<7 之間的隨機整數

4 Number

建立物件與String類似

var myNumber1 = new Number(123);
var myNumber2 = 123;   
 
//切記下面的這種寫法js會把其識別為String物件而不是Number物件
var myNumber2 = "123";

4.1 toFixed()

四捨五入，可自定義保留幾位

var myNumber1 = new Number(123.4567);
 
console.log(myNumber1.toFixed(1));  //123.5
console.log(myNumber1.toFixed(2));  //123.46
console.log(myNumber1.toFixed(3));  //123.457

5 自定義物件