javascript基本物件

morra發表於2016-12-21
JavaScript物件

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 自定義物件

建立物件

//方法一：
var person1 = new Object();
 
//方法二：
var person1 = {};
//建立屬性
person1.name = "morra";
person1.age = "123";
 
//建立方法
person1.greet = function () {    //建立方法並把一個匿名函式賦給它
    alert("hello,world!")
};

5.1 常規用法

一般在引用方法內的當前物件時使用this，而非實際的物件名。這是一個約定俗成的寫法，不寫也不會報錯。

var person1 = {};
person1.name = "morra";
person1.age = "30";
person1.info = function () {   
    document.write("name:"+ this.name+"<br/>"+"age:"+this.age)
};
person1.info();

5.2 簡寫

物件使用字面量的使用

var person1 = {
    name:"morra",
    age:"30",
    info:function () {
        document.write("name:"+ this.name+"<br/>"+"age:"+this.age)
    }
};
 
person1.info();

6 引用型別（物件的模版）

javascript允許使用者根據自己的需求建立特定物件的模版。引用型別就是物件的模版，在使用新的物件模版之前需要先定義物件型別、方法、屬性。定義物件模版的時候，並不會建立基於該模版的物件。只有使用new關鍵字建立該模版的例項時，才會根據原型(prototype)建立。其實javascript的“引用型別”和其他語言中的“類”的邏輯類似。

String、Number、Array、Date、Object都是引用型別，使用者建立的物件是這些型別的例項。

引用型別組成部分：建構函式、方法定義、屬性。

//建立構造方法
function Person(name,age) {
    this.name = name;
    this.age = age;
}
 
//定義info方法
// 每個函式都有prototype屬性，其只對建構函式有用。Person.prototype與Person()物件共享屬性與方法。
Person.prototype.info= function () {
    return this.name+":"+this.age;
}

//建立兩個物件
var p1 = new Person("morra","123");
var p2 = new Person("jack","456");
 
document.write(p1.info())
document.write(p2.info())

相關文章