object對象

看個栗子

對象是帶有屬性和方法的特殊數據類型。
object結構類似于python中的字典：

var cat = {"name": "Whiskers","little name": "idiot","legs": 4,"tails": 1,"enemies": ["Water", "Dogs"] };

object通過這種結構的化的方式儲存數據，通過property訪問數據。并且，能代表真實世界的對象，比如貓。

屬性訪問

通過點方法：

var nameValue = cat.name; – 不需要引號
var legsValue = cat.legs;

說明：JS中一切皆對象，只要是對象，都有點方法可以訪問屬性, 比如str.length 通過字符串的length屬性獲取長度。

通過[]中括號

尤其是property有空格時：
var nameValue = cat[“little name”] – 引號

通過變量訪問屬性：

var myDog = “Hunter”;
var dogs = {
Fido: “Mutt”,
Hunter: “Doberman”;
Snoopie: “Beagle’
}
var breed = dog[myDong];
console.log(breed); // “Doberman”

嵌套對象

var ourStorage = {"desk": {"drawer": "stapler"},"cabinet": {"top drawer": {"folder1": "a file","folder2": "secrets"},"bottom drawer": "soda"} };

通過連用點方法（或中括號）訪問嵌套對象：
ourStorage.cabinet[“top drawer”].folder2; // “secrets”
ourStorage.desk.drawer; // “stapler”

修改/新增對象的屬性

var ourDog = {"name": "Camper","legs": 4,"tails": 1,"friends": ["everything!"] };

通過點方法或中括號修改/新增：
ourDog.name = “Happy Camper”; –修改
ourDog[“name”] = “Happy Camper”;
ourDog.bark = “wang wang” –新增

刪除屬性

delete ourDog.bark; 或者
delete ourDog[“bark”];

構造器函數和實例化

構造函數

構造器函數首字母大寫，例如：

var Car = function() {this.wheels=4;this.engines=2;this.seats=1; }

this代表對象本身。

實例化對象

實例化一個對象 new 關鍵字：
var myCar = new Car()
myCar是Car構造器的實例，并且擁有Car的屬性。記住，實例化對象時要使用 new 關鍵字。

為構造器函數傳入參數

var Car = function(wheels, seats, engines) {this.wheels = wheels;this.seats = seats;this.engines = engines; }; var myCar = new Car(4, 7,1);

為實例對象增加自己的屬性

myCar.speed = 60;

設置私有屬性

在構造器內用 var 聲明的變量是私有屬性
私有屬性不能通過 obj.prop 訪問
可以提供接口，來訪問和修改私有屬性。

var Car = function() {var speed=10; // 私有屬性this.getSpeed = function() { // 訪問接口return speed; };this.setSpeed = function(change) { //修改接口speed +=change; }; };

this到底指代誰

例1：函數中

function test() {console.log(this); }test(); //代指 Window

例2：對象中

var userInfo = {name: 'Lena',age: 18,show: function () {console.log(this);} };userInfo.show(); // 代指userInfo對象本身 {name: "Lena", age: 18, show: ?}

例3：匿名函數中

var userInfo = {name: 'Lena',age: 18,show: function () {(function () {console.log(this);})()} };userInfo.show(); // 代指 Window

例4：賦值this

var userInfo = {name: 'Lena',age: 18,show: function () {var that = this; // 將this所指對象賦值給that(function () {console.log(that);})()} };userInfo.show(); // 代指userInfo對象本身 {name: "Lena", age: 18, show: ?}

總結：

類/對象中的this代指實例化對象本身（相當于python中的self）

函數/匿名函數中的this代指window對象：例1，例3

類/對象內部的 func 被 obj.func 執行，那么func中的this就是obj對象本身。比如例2

每個函數的作用域中都有this，因此默認都能在自己的作用域中找到，如果找不到，就從上一層找。比如日4中的that

JS中的內置對象

在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基于對象實現的。

string

創建字符串的方式：

var str1 = “hello world” //typeof: string

var str1 = new String(“hello world”) //typeof: object

字符串的屬性

str.length –>獲取字符串長度
var myStr = “abc”;
myStrLength = myStr.length;

字符串的方方法：

x.toLowerCase() //轉小寫

x.toUpperCase() //轉大寫

x.trim() //去字符串兩邊的空格

x.charAt(index) //獲取指定索引的字符

x.indexOf(“a”) //查詢內容的索引值，從左向右找

x.lastIndexOf(“str”) //從右往左找

x.match(regexp) //返回匹配字符串的數組，否則返回null

x.search(regexp) //返回索引

x.substr(start, length) //截取，根據起始索引和長度

x.substring(start, end) //截取，根據起始結束索引，顧頭不顧尾。

x.slice(start, end) //切片，顧頭不顧尾

x.replace(old, new) //替換

x.split(分隔符) //分割出來放到數組中

x.concat(str) //拼接字符串，相當于+

和python一樣，JS也支持字符串的索引取值[n]
注意，如果要取到最后一個值，不能直接[-1]，應該是：
str[str.length - 1]，同理倒數第二個str[str.length - 2]

Array

JS中的數組array, 類似python的列表，同樣支持多維嵌套和索引取值。

數組的創建：

方式一：
var arr = [e0, e1, e2, …,];
方式二：
var arr = new Array(e0, e1,e3,…);
方式三：
var arr = new Array(len);
arr[0]=value0;
arr[1]=value1;
…..

創建二維數組：
var arr= new Array(m);
for (var i=0; i

push – pop && unshift – shift

為列表插入元素 .push() 相當于python中的.append()
如果要插到最前面，用.unshift()
從數組刪除最后一個元素.pop() 同python，并且也可以用變量接收這個pop off元素
從數組刪除第一個元素.shift()
注意：不能指定索引

模擬對列的先進先出：
array.push(item)
array.shift()

map

方法迭代數組的每一個元素，并傳入回調函數作為參數
返回函數的返回值構成的新的數組。
var oldArray = [1, 2, 3];
var timesFour = oldArray.map(function(val){
return val * 4;
});
console.log(timesFour); // returns [4, 8, 12]
console.log(oldArray); // returns [1, 2, 3]

reduce

迭代數組，并濃縮為一個值：
var singleVal = array.reduce(function(previousVal,
currentVal) {
return previousVal - currentVal;
}, initValue);

reduce有一個可選參數，initVal, 如果不指定該參數，
默認為數組的第一個元素。

filter

filter方法迭代數組元素，傳入回調函數，判斷為true的元素保留到新的列表里，false的元素被過濾。同python：
arrNew = arr.filter(function(val) {
return val >0 ; // 判斷條件
});

sort

sort按照字母或數字順序排序數組，返回排序后的數組。默認是按元素最高位的的ansi編碼大小來排，比如123，小于2.
我們可以給sort方法傳入一個比較大小的回調函數，看個栗子：
var array = [1, 12, 21, 2];
array.sort(function(a, b) {
return a - b;
});
將數組array從小到大排序：
如果a在b的前邊，回調函數返回負數；
如果a在b的后邊，回調函數返回正數；
如果相等，回調函數返回0；
注，如果要從大到小排序，只需要 return b-a; 即可

reverse

反轉數組，返回反轉后的數組
var myArray = [1, 2, 3];
myArray.reverse();
returns [3,2,1]

concat

拼接數組。接收數組作為參數，將其拼接到原數組的后面。
newArray = oldArray.concat(otherArray);

split

分割字符串為數組
var string = “Split me into an array”;
var array = [];
array = string.split(” “);

join

將數組中的元素用指定的分隔符連接成字符串
var joinMe = [“Split”,”me”,”into”,”an”,”array”];
var joinedString = ”;
joinedString = joinMe.join(” “);

slice

對數組進行切片，顧頭不顧尾
arr.slice(start, end)

toString

將數組轉為字符串
var arr = [“a”,”b”,”c”];
alert(arr.toString()); //“a,b,c”
所有對象都繼承自obeject元類，元類中有toString方法，可以將任何類型轉化為字符串類型。

splice

對數組指定位置進行刪除和插入
arr.splice(start_index, count, value, …)
從數組指定索引處刪除指定個數的元素，（可選）在刪除位置插入元素。也可以通過刪除0個值，添加1個或多個元素，完成在指定位置添加元素的操作。
另外，即使count大于數組長度，也不會報錯。

Date

var now = new Date(); //當前時間對象
alert(now); // Mon Aug 07 2017 18:47:37 GMT+0800 (中國標準時間)，類似python中time.ctime
now.toString() //轉為字符串
對象的方法：
getDate() 獲取日
getDay () 獲取星期
getMonth () 獲取月（0-11）
getFullYear () 獲取完整年份
getYear () 獲取年
getHours () 獲取小時
getMinutes () 獲取分鐘
getSeconds () 獲取秒
getMilliseconds () 獲取毫秒
getTime () 返回累計毫秒數(從1970/1/1午夜)

獲取指定時間的時間對象
var timer = new Date(“2000-12-12”), 也可以用逗號分割

Math

不同于以上對象，需要先實例化再調用對象的方法。而Math直接是一個實例化對象。因此使用時要加Math前綴
abs(x) 返回數的絕對值。
exp(x) 返回 e 的指數。
floor(x)對數進行下舍入。
log(x) 返回數的自然對數（底為e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四舍五入為最接近的整數。
sin(x) 返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x) 返回角的正切。

Math.random() 生成[0,1) decimal num
Math.floor() 取整
生成一個指定范圍且左右包含的隨機數：
Math.floor(Math.random() * (max - min + 1)) + min
具體推理參看：https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-generate-random-whole-numbers-within-a-range/18187

總結

以上是生活随笔為你收集整理的JavaScript基础二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。