關於typeof中的"object"和Object()構造函數的我的理解:javascript
// 這裏全部的屬性名都會自動轉爲字符串 var person = { "name": "Nicholas", age: 29, 5: true } // 不會報錯,但這個屬性不能使用person.name的方式 person["first name"]
var colors = new Array(); var colors = new Array(20); // 傳入一個數值 建立一個length爲20的空數組 var colors = new Array("red"); // 傳入非數值 所以爲元素的數組 var colors = new Array("red", "blue", "green");
var colors = ["red", "blue", "green"]; colors.length = 2; alert(colors[2]); // undefined
var colors = ["red", "blue", "green"]; colors[colors.length] = "black"; colors[colors.length] = "brown"; // 添加新項
var colors = ["red", "blue", "green"]; colors[99] = "black"; alert(colors.length); // 100 位置3到98的值都不存在,都將返回undefined
if (value instanceof Array) { ... }
if (Array.isArray(value)) { ... }
var colors = ["red", "blue", "green"]; var item = colors.pop(); alert(colors.length); // 2 alert(item) // 「black」取得最後一項
var colors = ["red", "blue", "green"]; colors.push("black"); var item = colors.shift(); console.log(colors); // ["blue", "green", "black"] console.log(item) // 「red」取得最後一項
var colors = new Array(); colors.unshift("red", "green"); // 推入兩項 console.log(colors.length); // 2
var values = [0, 1, 5, 10, 15]; values.sort(); console.log(values); // 0,1,10,15,5 // 使用比較函數是sort的最佳使用方式 function compare(value1, value2) { if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } } var values = [0, 1, 10, 15, 5]; values.sort(compare); console.log(values); // 0,1,5,10,15 // 對於數值類型或者其valueOf()方法會返回數值類型的對象類型 // 可使用一個更簡單的比較函數 function compare(value1, value2) { return value2 - value1 }
var colors = ["red", "green", "blue"]; var colors2 = colors.concat("yellow", ["black", "brown"]); alert(colors); // red,green,blue alert(colors2); // red,green,blue,yellow,black,brown
var colors = ["red", "green", "blue", "yellow", "purple"]; var colors2 = colors.slice(1); // green,blue,yellow,purple var colors3 = colors.slice(1,4); // green,blue,yellow
splice() 最強大的數組方法,始終返回一個數組,該數組中包含從原始數組中刪除的項(沒有就返回空數組)html
var colors = ["red", "green", "blue"]; var removed = colors.splice(0, 1); // 刪除第一項 removed 爲 ["red"] alert(colors); // ["green", "blue"] removed = colors.splice(1, 0, "yellow", "orange"); // 從位置1開始插入兩項 console.log(colors); // green,yellow,orange,blue console.log(removed); // 返回空數組 removed = colors.splice(1, 1, "red", "purple"); // 插入兩項,刪除一項 console.log(colors); // green,red,purple,orange,blue console.log(removed); // ["yellow"]
var numbers = [1,2,3,4,5,4,3,2,1]; alert(numbers.indexOf(4)); // 3 alert(numbers.lastIndexOf(4)); // 5 alert(numbers.indexOf(4, 4)); // 5 alert(numbers.lastIndexOf(4, 4)); // 3 var person = { name: "Nicholas" }; var people = [{ name: "Nicholas" }]; var morePeople = [people]; alert(people.indexOf(person)); // -1 alert(morePeople.indexOf(person)); // 0
// 兩個引用類型對象值徹底相同,但引用的內存地址不一樣 var a = { name: "obj" } var b = { name: "obj" } a == b // false a === b // false
var values = [1,2,3,4,5]; // prev 前一項, cur 迭代的當前項 // 第一次執行回調函數,prev是1,cur是2 var sum = values.reduce(function(prev, cur, index, array) { return prev + cur; }); alert(sum); // 15
var someDate = new Date(Date.parse("May 25, 2004")); var someDate = new Date("May 25, 2004");
// GMT時間200年1月1日午夜零時 var y2k = new Date(Date.UTC(2000, 0)); var y2k = new Date(2000, 0); // GMT時間2005年5月5日下午5:55:55 var allFives = new Date(Date.UTC(2005, 4, 5, 17, 55, 55)); var allFives = new Date(005, 4, 5, 17, 55, 55);
// Date.now()在不支持的瀏覽器中以下寫法 var start = +new Date(); start // 返回毫秒數 typeof start // "number"
var date1 = new Date(2007, 0, 1); // "January 1 , 2007" var date2 = new Date(2007, 1, 1); // "February 1, 2007" console.log(date1 < date2); // true console.log(date1 > date2); // false
// 匹配字符串中全部「at」的實例 var pattern1 = /at/g; // 匹配第一個"bat"或"cat",不區分大小寫 var pattern2 = /[bc]at/i; // 匹配全部以"at"結尾的3個字符的組合,不區分大小寫 var pattern3 = /.at/gi;
// 匹配第一個"bat"或"cat", 不區分大小寫 var patter1 = /[bc]at/i; // 匹配第一個"[bc]at", 不區分大小寫 var pattern2 = /\[bc\]at/i; // 匹配全部以"at"結尾的3個字符的組合,不區分大小寫 var pattern3 = /.at/gi // 匹配全部".at",不區分大小寫 var pattern4 = /\.at/gi; // 使用RegExp構造函數,全部元字符都要雙重轉義 // 兩個參數都必須是字符串 var pattern4 = new RegExp("\\.at", "i");
捕獲組能夠經過從左到右計算其開括號來編號 。例如,在表達式 (A)(B(C)) 中,存在四個這樣的組。組零始終表明整個表達式。之因此這樣命名捕獲組是由於在匹配中,保存了與這些組匹配的輸入序列的每一個子序列。在表達式中使用,也能夠在匹配操做完成後從匹配器檢索。前端
編號 | 項目 |
---|---|
0 | (A)(B(C)) |
1 | (A) |
2 | (B(C)) |
3 | (C) |
RegExp的每一個實例都具備下列屬性,經過這些屬性能夠取得有關模式的各類信息java
var pattern1 = /\[bc\]at/i; console.log(pattern1.global); // false console.log(pattern1.ignoreCase); // true console.log(pattern1.multiline); // false console.log(pattern1.lastIndex); // 0 console.log(pattern1.source); // "\[bc\]at"
var txt = "mom and dad and baby"; var pattern = /mom( and dad( and baby)?)?/gi; var matches = pattern.exec(txt); console.log(matches); // ["mom and dad and baby", " and dad and baby", " and baby", index: 0, input: "mom and dad and baby", groups: undefined]
var txt = "000-00-0000"; var pattern = /\d{3}-\d{2}-\d{4}/; if (pattern.test(txt)) { alert("The pattern was matched."); }
長屬性名 | 短屬性名 | 說明 |
---|---|---|
input | $_ | 最近一次要匹配的字符串。Opera不支持 |
lastMatch | $& | 最近一次的匹配項目。Opera不支持 |
lastParen | $+ | 最近一次匹配的捕獲組。Opera不支持 |
leftContext | $` | input字符串中lastMatch以前的文本。 |
multiline | $* | 布爾值 表示是否全部表達式都是用多行模式。IE和Opera未實現此屬性 |
rightContext | $' | input字符串中lastMatch以後的文本。 |
var txt = "this has been a short summer"; var pattern = /(.)hort/g; // Oper不支持input,lastMatch,lastParen,multiline // IE不支持multiline if (pattern.test(txt)) { console.log(RegExp.input); // this has been a short summer console.log(RegExp.leftContext); // this has been a console.log(RegExp.rightContext); // summer console.log(RegExp.lastMatch); // short console.log(RegExp.lastParen); // s console.log(RegExp.multiline); // false }
var txt = "this has been a short summer"; var pattern = /(.)hort/g; // Oper不支持input,lastMatch,lastParen,multiline // IE不支持multiline if (pattern.test(txt)) { console.log(RegExp.$_); // this has been a short summer console.log(RegExp.["$`"]); // this has been a console.log(RegExp.["$'"]); // summer console.log(RegExp.["$&"]); // short console.log(RegExp.["$+"]); // s console.log(RegExp.["$*"]); // false }
var txt = "this has been a short summer"; var pattern = /(..)or(.)/g; // 這裏建立了一個包含兩個捕獲組的模式,並用該模式測試了一個字符串。 // 即便test()方法只返回一個布爾值,但RegExp構造函數的屬性$1和$2也會被匹配相應捕獲組的字符串自動填充 if (pattern.test(txt)) { console.log(RegExp.$1); // sh console.log(RegExp.$2); // t }
下面列出了不支持的特性web
function sum (num1, num2) { return num1 + num2; } // 下面使用函數表達式定義函數的方式幾乎相差無幾 // function後面不必使用函數名,經過變量sum便可飲用函數 // 函數末尾有一個分號,就像聲明其餘變量同樣 var sum = function(num1, num2) { return num1 + num2; };
// 不推薦 var sum = new Function("num1", "num2", "return num1 + num2");
function sum (num1, num2) { return num1 + num2; } var anotherSum = sum; // 函數指針的副本賦給了anotherSum sum = null; // 清除了sum變量 anotherSum依然有效 console.log(anotherSum(10, 10)); // 20
function addSomeNumber(num) { return num + 100; } function addSomeNumber(num) { return numm + 200; } var result = addSomeNumber(100); // 300 // 這個例子中聲明瞭兩個同名函數,而結果是後面的函數覆蓋了前面的函數 // 如下代碼等同於上面的代碼 var addSomeNumber = function (num ) { return num + 100; }; addSomeNumber = function (num ) { return num + 200; }; var result = addSomeNumber(100); // 300
// 不會報錯 alert(sum(10, 10)); function sum(num1, mun2) { return num1 + num2; }
// 報錯 alert(sum(10, 10)); var sum = function (num1, mun2) { return num1 + num2; };
function callSomeFunction(someFunction, someArgument) { return someFunction(someArgument); } function add10(num) { return num + 10; } // 傳入函數指針,就不能加(),因此這裏是add10 var result1 = callSomeFunction(add10, 10);
function createComparisonFunction(propertyName) { return function(object1, object2) { var value1 = object1[propertyName]; var value2 = object2[propertyName]; if (value1 < value2) { return -1; } else if (value1 > value2) { return 1; } else { return 0; } } }
// 經典的階乘函數 function factorial(num) { if (num <= 1) { return 1; } else { return num * factorial(num-1); } } // 如上面代碼,在函數有名字,並且名字之後也不會變的狀況下,這樣定義沒有問題 // 但這個函數的執行與函數名factorial牢牢耦合在了一塊兒 // 下面的寫法能夠避免這種問題 function factorial(num) { if (num <= 1) { return 1; } else { return num * arguments.callee(num-1); } } var trueFactorial = factorial; fatorial = function () { return 0; }; console.log(trueFactorial(5)); // 120 console.log(fatorial(5)); // 0
window.color = "red" var o = { color: "blue" }; function sayColor() { console.log(this.color); } sayColor(); // "red" o.sayColor = sayColor; o.sayColor(); // "blue"
function outer() { inner(); } function inner() { console.log(inner.caller); } // 打印出outer()函數的源碼 // 由於outer調用了inner,因此inner.caller就指向outer()。 outer();
// 爲了實現更鬆散的耦合,也能夠經過arguments.callee.caller來訪問 function outer() { inner(); } function inner() { console.log(arguments.callee.caller); } outer();
每一個函數都包含兩個屬性:length 和 prototype正則表達式
每一個函數都包含兩個非繼承而來的方法:apply() call()。這兩個方法的用途都是在特定的做用域中調用函數,實際上等於設置函數體內this對象的值。數組
// callSum1()在執行sum()函數時傳入了this做爲this值,因此傳入的就是window對象 function sum(num1, num2) { return num1 + num2; } function callSum1(num1, num2) { return sum.apply(this, arguments); // 傳入arguments對象 } function callSum2(num1, num2) { return sum.apply(this, [num1, num2]); // 傳入數組 } function callSum3(num1, num2) { return sum.call(this, num1, num2); // 傳入數組 } // 在全局環境下調用函數,此時this就是window callSum1(10, 10)); // 20 callSum2(10, 10)); // 20 callSum3(10, 10)); // 20
window.color = "red"; var o = { color: "blue" }; function sayColor() { console.log(this.color); } sayColor(); // red sayColor.call(this); // red sayColor.call(window); // red sayColor.call(o); // blue
window.color = "red"; var o = { color: "blue" }; function sayColor() { console.log(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor(); // blue
// 後臺自動完成下列處理 // 建立String類型的一個實例 // 在實例上調用指定的方法 // 銷燬這個實例 var s1 = "some text"; var s2 = s1.substring(2); // 能夠想象執行了如下代碼 var s1 = new String("some text"); var s2 = s1.substring(2); s1 = null; // 通過此番處理,基本的字符串值就變得跟對象同樣了。
var s1 = "some text"; // 這裏建立的String對象在執行第三行代碼時就已經被銷燬了 s1.color = "red"; // 這裏又建立了本身的String對象,而該對象沒有color屬性 console.log(s1.color); // undefined
var obj = new Object("some text"); console.log(obj instanceof String); // true
// number中保存的是基本類型的值25 // obj中保存的是Number的實例(對象) var value = "25"; var number = Number(value); // 轉型函數 console.log(typeof number); // "number" var obj = new Number(value); // 構造函數 console.log(typeof obj); // "object"
基本類型與引用類型的布爾值還有兩個區別。瀏覽器
// 使用Boolean對象生成的實例,在布爾表達式中,等同於一個普通對象 // 因此result1 返回true var falseObject = new Boolean(false); var result1 = falseObject && true; // true var falseValue = false; var result2 = falseValue && true; // false console.log(typeof falseOjbect); // object console.log(typeof falseValue); // boolean console.log(falseObject instanceof Boolean); // true console.log(falseValue instanceof Boolean); // false
var num = 10; console.log(num.toString()); // "10" console.log(num.toString(2)); // "1010" console.log(num.toString(8)); // "12" console.log(num.toString(10)); // "10" console.log(num.toString(16)); // "a"
除了繼承的方法,NUmber類型還提供了一些用於將數值格式化爲字符串的方法。安全
toFixed() 按照指定的小數位返回數值的字符串表示。數據結構
var num = 10; console.log(num.toExponentail(1)); // "1.0e+1"
var num = 99; console.log(num.toPrecision(1)); // "1e+2" console.log(num.toPrecision(2)); // "99" console.log(num.toPrecision(3)); // "99.0"
var numberObject = new Number(10); var numberValue = 10; console.log(typeof numberObject); // "object" console.log(typeof numberValue); // "number" console.log(numberObject instanceof Number); // true console.log(numberValue instanceof Number); // false
var stringValue = "hello world"; console.log(stringValue.length); // "11"
var stringValue = "hello world"; console.log(stringValue.charAt(1)); // "e"
var stringValue = "hello world"; console.log(stringValue.charCodeAt(1)); // "101" 小寫e的字符編碼
var stringValue = "hello world"; console.log(stringValue[1]); // "e"
var stringValue = "hello "; var result1 = stringValue.concat("world"); // "hello world" var result2 = stringValue.concat("world", "!"); // "hello world!" console.log(stringValue); // "hello
ECMAscript還提供了三個基於子字符串建立新字符串的方法 slice() substr() substring()
var stringValue = "hello world"; console.log(stringValue.slice(3)); // "lo world" console.log(stringValue.substring(3)); // "lo world" console.log(stringValue.substr(3)); // "lo world" // substr() 方法第二個參數制定是要返回的字符個數 // 而slice() substring() 指定的是結束位置 // "world"中的o處於位置7,所以結果中不包含o console.log(stringValue.slice(3, 7)); // "lo w" console.log(stringValue.substring(3, 7)); // "lo w" console.log(stringValue.substr(3, 7)); // "lo worl"
var stringValue = "hello world"; // slice() 會將傳入的負值與字符串的長度相加 // substring() 會將傳入的負值轉換爲0 // substr() 第一個參數若是是負值會加上字符串長度,第二個參數若是是負值,就會轉換爲0 console.log(stringValue.slice(-3)); // "rld" console.log(stringValue.substring(-3)); // "hello world" console.log(stringValue.substr(-3)); // "rld" console.log(stringValue.slice(3, -4)); // "lo w" // 這裏實際上至關於substring(3, 0),而這個方法會將較小的參數做爲開始位置 console.log(stringValue.substring(3, -4)); // "hel" console.log(stringValue.substr(3, -4)); // ""
var stringValue = "hello world"; console.log(stringValue.indexOf("o")); // 4 console.log(stringValue.lastIndexOf("o")); // 7 console.log(stringValue.indexOf("o", 6)); // 7 console.log(stringValue.lastIndexOf("o", 6)); // 4
var stringValue = "Lorem ipsum dolor sit amet, consectetur adipisicing elit"; var positions = new Array(); var pos = stringValue.indexOf("e"); while(pos > -1) { positions.push(pos); pos = stringValue.indexOf("e", pos + 1); } console.log(posisionts); // [3, 24, 32, 35, 52]
var str = " hello world " str.trim(); // "hello world" console.log(str); // " hello world "
var stringValue = "hello world"; console.log(stringValue.toLocaleUpperCase()); // "HELLO WORLD" console.log(stringValue.toUpperCase()); // "HELLO WORLD" console.log(stringValue.toLocaleLowerCase()); // "hello world" console.log(stringValue.toLowerCase()); // "hello world"
var txt = "cat, bat, sat, fat"; var pattern = /.at/; // 與pattern.exec()相同 var matches = txt.match(pattern); console.log(matches.index); // 0 console.log(matches[0]); // "cat" console.log(matches.lastIndex); // 0
var txt = "cat, bat, sat, fat"; var pos = txt.search(/at/); console.log(pos); // 1
爲了簡化替換子字符串的操做,ECMAscript提供了replace()方法,兩個參數,一個是RegExp對象或者一個字符串(這個字符串不會被轉成正則表達式),第二個參數能夠是一個字符串或者一個函數。若是第一個參數是字符串,那麼只會替換掉第一個子字符串。要想替換全部子字符串,惟一的辦法就是提供一個正則表達式,而起要制定全局標識(g)
var txt = "cat, bat, sat, fat"; var result = txt.replace("at", "ond"); // "cound, bat, sat, fat" result = txt.replace(/at/g, "ond"); // "cond, bond, sond, fond"
| 字符序列 | 替換文本 |
| -------- | ----------------------------------------------------------------------------------------------------------- |
| $$ | $ |
| $& | 匹配整個模式的子字符串。與RegExp.lastMatch的值相同 |
| $' | 匹配子字符串以前的字符串。與RegExp.leftContext的值相同 |
| $` | 匹配子字符串以後的字符串。與RegExp.rightContext的值相同 |
| $n | 匹配第n個捕獲組的子字符串,其中n等於0~9。$0,$1...$9 。若是正則表達式中沒有定義捕獲組,則使用空字符串 |
| $nn | 匹配第nn個捕獲組的子字符串,其中n等於01~99。$01,$02...$99 。若是正則表達式中沒有定義捕獲組,則使用空字符串 |
var txt = "cat, bat, sat, fat"; result = txt.replace(/(.at)/g, "word ($1)"); // word (cat), word (bat), word (sat), word (fat)
function htmlEscape(text) { return text.replace(/[<>"&]/g, function(match, pos, orginalText) { switch (match) { case "<": return "<"; case ">": return ">"; case "&": return "&"; case "\"": return """; } }); } console.log(htmlEscape("<p class=\"greeting\">Hello world!</p>")) // <p class="greeting">Hello world!</p>
var colorText = "red,blue,green,yellow"; var colors1 = colorText.split(","); // ["red", "blue", "green", "yellow"] var colors2 = colorText.split(",", 2); // ["red", "blue"] // 須要注意的是,返回結果第一項和最後一項是空字符串 // /[^\,]+/ 表示匹配逗號以前的單詞 不包括逗號 匹配項就是 // "red" "blue" 「green" "yellow" // "red"以前和「yellow"以後沒有字符,因此第一項和最後一項是空字符串 var colors3 = colorText.split(/[^\,]+/); // ["", ",", ",", ",", ""]
這個方法比較兩個字符串,並返回下列值中的一個:
var stringValue = "yellow"; console.log(stringValue.localeCompare("brick")); // 1 console.log(stringValue.localeCompare("yellow")); // 0 console.log(stringValue.localeCompare("zoo")); // -1
function determineOrder(value) { var result = stringValue.localeCompare(value); if (result < 0) { console.log("The string 'yellow' comes before the string '" + value + "'."); } else if (result > 0) { console.log("The string 'yellow' comes after the string '" + value + "'."); } else { console.log("The string 'yellow' is equal to the string '" + value + "'."); } } determineOrder("brick"); determineOrder("yellow"); determineOrder("zoo");
console.log(String.fromCharCode(104, 101, 108, 108, 111)); // "hello"
var uri = "http://www.wrox.com/illegal value.htm#start"; encodeURI(rui); // "http://www.wrox.com/illegal%20value.htm#start" encodeURIComponent(rui); // "http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start" // encodeURI 只對空格編碼 // encodeURIComponents 全部非字母數字字符
eval("var msg = 'hello world';"); console.log(msg); // hello world eval("function sayHi() { alert('hi'); }"); sayHi();
"use strict" eval = "hi"; // causes error
屬性 | 說明 |
---|---|
undefined | 特殊值undefined |
NaN | 特殊值NaN |
Infinity | 特殊值Infinity |
object | 構造函數object |
Array | 構造函數Array |
Function | 構造函數Function |
Boolean | 構造函數Boolean |
String | 構造函數String |
Number | 構造函數Number |
Date | 構造函數Date |
RegExp | 構造函數RegExp |
Error | 構造函數Error |
EvalError | 構造函數RegExp |
RangeError | 構造函數RangeError |
ReferenceError | 構造函數ReferenceError |
SyntaxError | 構造函數SyntaxError |
TypeError | 構造函數TypeError |
URIError | 構造函數URIError |
var global = function() { return this; }();
屬性 | 說明 |
---|---|
Math.E | 天然對數的底數,即常量e的值 |
Math.LN10 | 10的天然對數 |
Math.LN2 | 2的天然對數 |
Math.LOG2E | 以2爲底e的對數 |
Math.LOG10E | 以10爲底e的對數 |
Math.PI | π的值 |
Math.SQRT1_2 | 1/2的平方根 |
Math.SQRT2 | 2的平方根 |
min() max() 方法用於肯定一組數值中的最小值和最大值。能夠接收任意個數值參數。
var max = Math.max(3, 54, 32, 16); // 54 var min = Math.min(3, 54, 32, 16); // 3
var values = [1, 2, 3, 5, 6, 7, 8]; // 這個寫法至關於 把數組的項做爲一個個數值參數傳給函數 // Math.max(1, 2, 3, 5, 6, 7, 8) var max = Math.max.apply(Math, values); var min = Math.min.apply(Math, values);
舍入方法 將小數值舍入爲整數的幾個方法:Math.ceil(), Math.floor(), Math.round()
// 隨機生成一個1到10之間的數值 var num = Math.floor(Math.random() * 10 + 1); function selectFrom(lowerValue, upperValue) { var choices = upperValue - lowerValue + 1; return Math.floor(Math.random() * choices + lowerValue); } var num = selectFrom(2, 10); // 介於2和10之間(包括2和10)的一個數值 // 利用這個函數能夠方便的從數組中隨機取出一項 var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"] var color = colors[selectFrom(0, colors.length - 1)];
方法 | 說明 |
---|---|
Math.abs(num) | 返回num的絕對值 |
Math.exp(num) | 返回Math.E的num次冪 |
Math.log(num) | 返回num的天然對數 |
Math.pow(num, power) | 返回num的power次冪 |
Math.sqrt(num) | 返回num的平方根 |
Math.acos(x) | 返回x的反餘弦值 |
Math.asin(x) | 返回x的反正弦值 |
Math.atan(x) | 返回x的反正切值 |
Math.atan2(y,x) | 返回y/x的反正切值 |
Math.cos(x) | 返回x的餘弦值 |
Math.sin(x) | 返回x的正弦值 |
Math.tan(x) | 返回x的正切值 |