javascript

转载：http://www.fuzhongkuo.com/?cat=3

javascript从零单排第一季 — JSON

BY ADMIN //  2014/10/21 //   NO COMMENTS

语法：

JOSN的语法可以便是以下三种类型的值

1、简单值：使用与javascript相同，但JSON不支持undefined。

2、对象：对象作为一种复杂数据类型，表示的是一组无序的键值对。

3、数组：数组是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。

简单值：

5

“hello word”

对象：

{

“name”:”epan”,

age : 28

}

数组：

["epan", 28, true]

JSON对象：

早期的JSON解析器基本是使用eval()函数，因为可能会执行一些恶意代码，不安全，ECMAScript5对解析JSON进行了规范，定义了全局对象JASON，支持的浏览器IE8+，JSON对象有2个方法：stringify()和parse()，这2个方法分别用于把javascript对象序列化为JSON字符串和把JOSN字符串解析为原生javascript值，如下：

var book = {
title: “js”,
authors : [
"epan"
],
edition: 3,
year: 2014
};
var jsontext = JSON.stringify(book);
console.log(jsontext);//{“title”:”js”,”authors”:["epan"],”edition”:3,”year”:2014}

将JSON字符串直接传递给JSON.parse()借可以得到相应的javascript值。

序列化选项：

JSON.stringify()可以接收2个参数，第一个是一个过滤器，第二个是一个选项，保留缩进。

如果过滤器传入的是数组，那么在结果中只将包含数组中列出的属性，如下：

var book = {
title: “js”,
authors : [
"epan"
],
edition: 3,
year: 2014
};
var jsontext = JSON.stringify(book,["title", "year"]);
console.log(jsontext);//{“title”:”js”,”year”:2014}

如果第2个参数是函数，函数接收2个参数，属性名和属性值，如下：

var book = {
title: “js”,
authors : [
"epan",
"ken"
],
edition: 3,
year: 2014
};
var jsontext = JSON.stringify(book, function (key, value) {
switch (key){
case “authors”:
return value.join(“|”);
case “year”:
return 5000;
case “edition”:
return undefined;
default:
return value;
}
})
console.log(jsontext);//”title”:”js”,”authors”:”epan|ken”,”year”:5000}

JOSN.stringify()方法的第3个参数用于控制结果中的缩进和空白符，这个参数是一个数值，它表示每个级别缩进的空格数，如下：

var book = {
title: “js”,
authors : [
"epan",
"ken"
],
edition: 3,
year: 2014
};
var jsontext = JSON.stringify(book, null, 4);
console.log(jsontext);
// {
// “title”: “js”,
// “authors”: [
// "epan",
// "ken"
// ],
// “edition”: 3,
// “year”: 2014
// }

最大缩进空格为10，如果超过了10的值都自动转换为10，如果传入的不是数字，而是字符串，则这个字符串将在JSON字符串中被用作缩进字符。

可以通过给对象定义toJSON()方法返回自身JSON数据格式，如下：

var book = {
title: “js”,
authors : [
"epan",
"ken"
],
edition: 3,
year: 2014,
toJSON: function () {
return this.title;
}
};
var jsontext = JSON.stringify(book);
console.log(jsontext); //”js”

解析选项：

JSON.prase()方法可以接收一个函数为参数，将在每个键值对上调用，如下：

var book = {
title: “js”,
authors : [
"epan",
"ken"
],
edition: 3,
year: 2014,
releaseDate: new Date(2014, 10, 21)
};
var jsontext = JSON.stringify(book);
var bookcopy = JSON.parse(jsontext, function (key, value) {
if(key == “releaseDate”) {
return new Date(value);
} else {
return value;
}
});
console.log(bookcopy.releaseDate.getFullYear()); //2014

THIS ENTRY WAS POSTED IN  JAVASCRIPT.

javascript从零单排第一季 — 单体内置对象

BY ADMIN //  2014/09/21 //   NO COMMENTS

Global对象：

URL编码：

var url = “http://www.ggjavascript.com/index.htm”;
console.log(encodeURI(url));//http://www.ggjavascript.com/index.htm
console.log(encodeURIComponent(url));//http%3A%2F%2Fwww.ggjavascript.com%2Findex.htm

 

eval()方法：就像是一个完整的解析器，它只接收一个参数，即要执行的字符串。

eval(“console.log(‘epan’)”); //epan
var msg = “ken”;
eval(“console.log(msg)”); //ken
eval(“function sayHi() { console.log(‘hi’);}”);
sayHi();//hi
eval(“var msgs = ‘epans’;”);
console.log(msgs); //epans

在eval()中创建的任何变量或者函数都不会提升，因为在解析代码的时候，它们被包含在一个字符串中，它们只在eval()执行的时候创建。

 

global对象的属性：

undefined 特殊值undefined

NaN 特殊值NaN

Infinity 特殊值Infinity

Object 构造函数xxx

Array

Function

Boolean

String

Number

Date

RegExp

Error

EvalError

RangeError

ReferenceError

SyntaxError

TypeError

URIError

 

window对象：

var color =”red”;
function sayColor () {
console.log(window.color);
}
window.sayColor();//red

 

Math对象：

Math.E 自然对数的底数，即常量E的值

Math.LN10 10的自然对数

Math.LOG2E 以2为底e的对数

Math.PI π的值

Math.SQRT1_2 1/2的平方根

 

var max = Math.max(3, 54, 87, 56);
console.log(max);//87
var min = Math.min(3, 54, 87, 56);
console.log(min);//3

 

要找到数组中的最大或最小值，可以像下面使用apply()方法，这个技巧的关键是把Math对象作为apply()的第一个参数，从而正确地设置this值，然后可以将任何数组作为第2个参数。
var values = [1,2,3,4,5,6,7,];
var max = Math.max.apply(Math, values);
console.log(max);7

舍入方法：

Math.ceil()方法，向上舍入，即它总是将数值向上舍入最接近的整数；

Math.floor()方法，向下上下舍入；

Math.round()方法，标准四舍五入方法。
console.log(Math.ceil(25.1)); //26
console.log(Math.round(25.5)); //26
console.log(Math.floor(25.9)); //25

 

random()方法：

Math.random()方法返回0到1之间的一个随机数，从而可以利用这个方法从某个整数范围内随机选择一个值。

值= Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)

var num = Math.floor(Math.random() * 10 + 1);
console.log(num); // 1到10之间的数据

var num2 = Math.floor(Math.random() * 10 + 2);
console.log(num2); // 2到10之间的一个整数

function selectFrom(lowerValue, upperValue) {
var choices = upperValue – lowerValue + 1;
return Math.floor(Math.random() * choices + lowerValue);
}
var num = selectFrom(2, 10);
console.log(num); //2到10之间（包括2到10）的一个数值

var colors = ["red", "blue", "green"];
var color = colors[selectFrom(0, colors.length -1)];
console.log(color); //随机取数组中的一个值

THIS ENTRY WAS POSTED IN  JAVASCRIPT.

javascript从零单排第一季 — 基本包装类型

BY ADMIN //  2014/09/21 //   NO COMMENTS

boolean类型：

var falseObj = new Boolean(false);
var result = falseObj && true;
console.log(result); //true
var falseVal = false;
result = falseVal && true;
console.log(result); //false

console.log(typeof falseVal); // boolean
console.log(typeof falseObj); //object

布尔表达式中的所有对象都会被转换为true。

 

number类型：

number构造函数创建number对象。

var numberObj = new Number(10);

 

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
console.log(num.toFixed(2)); //10.00
console.log(num.toExponential(1));//1.0e+1

num = 99;
console.log(num.toPrecision(1));//1e+2
console.log(num.toPrecision(2));//99
console.log(num.toPrecision(3));//99.0

toFixed()方法会按照指定的小数位返回数值的字符串，如果数值本身包含的小数位比指定的多，那么最大小数位的值就会舍入。

toExponential()方法以指数表示法表示的数值字符串。

toPrecision()方法会根据要处理的数值决定到底是调用toString()还是toExponential方法。

 

String类型：

string构造函数创建string类型。

var stringObj = new String(“epan”);

string类型的每个实例都有一个length属性，表示字符串中包含字符的个数。

 

字符方法：

两个用于访问字符串中特定字符的方法是：charAt()和charCodeAt()，这两个方法都接受一个基于0的字符位置参数，其中charAt()方法以单字符串的形式返回给定位置的那个字符，charCodeAt()方法字符编码。ECMAScript5中可以使用方括号加数字索引来访问。

 

var stringVal = “hello”;
console.log(stringVal.charAt(1)); //e
console.log(stringVal.charCodeAt(1)); //101
console.log(stringVal[1]); //e

字符串方法：

concat()方法，用于将一或多个字符串拼接起来。

slice()、sbustr()、sbustring()方法都返回被操作字符串的一个子字符串，都接受一或2个参数，第一个参数为字符串开始位置，第二个为结束位置。substr()方法的第二个参数为指定返回的个数。
var stringVal = “hello word”;
console.log(stringVal.slice(3)); //lo word
console.log(stringVal.substring(3)); //lo word
console.log(stringVal.substr(3)); //lo word
console.log(stringVal.slice(3, 7)); //lo w
console.log(stringVal.substring(3, 7)); //lo w
console.log(stringVal.substr(3, 7)); //lo word

console.log(stringVal.slice(-3)); //ord
console.log(stringVal.substring(-3)); //hello word
console.log(stringVal.substr(-3)); //ord
console.log(stringVal.slice(3, -4)); //log
console.log(stringVal.substring(3, -4)); //hel
console.log(stringVal.substr(3, -4)); //”"空字符串

如果传入的参数为负数，slice()方法会将传入的负值与长度相加，substr()方法将第一个参数的负值与长度相加，第二个转换为0，substring()方法将2个参数都转换为0。

 

在指定字符串查找子字符串的方法有indexOf()和lastindexOf()，这2个方法都返回子字符串位置，如果没有找到返回-1。

var stringVal = “hello word”;
console.log(stringVal.indexOf(“o”)); //4
console.log(stringVal.lastIndexOf(“o”)); //7

console.log(stringVal.indexOf(“o”, 6)); //7
console.log(stringVal.lastIndexOf(“o”, 6)); //4

var stringVal = “lorem uupo wuwqei hqwueyqu wqeqion qweqioeu dqte”;
var postion = new Array();
var pos = stringVal.indexOf(“e”);
while (pos > -1) {
postion.push(pos);
pos = stringVal.indexOf(“e”, pos + 1);
}
console.log(postion); //[3, 15, 22, 29, 37, 41, 47]

 

trim()方法将创建一个字符串的副本，删除前置以及后缀的所有空格。

var stringVal = ” 12312 2312312 “;
console.log(stringVal.trim());//12312 2312312

 

字符串大小写转换方法有4个：toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()。

var stringVal =”hwe WdaDqdW”;
console.log(stringVal.toUpperCase()); //HWE WDADQDW
console.log(stringVal.toLowerCase()); //hwe wdadqdw

 

字符串 的模糊匹配方法，match()方法只接受一个参数，要么是正则表达式，要么是RegExp对象。

var test = “cat, bat, cat, fat”;
var pattern = /.at/;
var matches = test.match(pattern); // 与pattern.exec(test)相同
console.log(matches.index); //0
console.log(matches[0]); // cat
console.log(pattern.lastIndex); //0

另一个方式是search()方法返回字符串中第一个匹配项的索引，如果没有找到匹配项，返回-1。

var text = “cat, vat, yat”;
var pos = text.search(/at/);
console.log(pos); //1

replace()方法接收2个参数，一个参数可以是RegExp对象或者是一个字符串，另一个参数可以是一个字符串或者一个函数。

var text = “cat, vat, yat”;
var result = text.replace(“at”, “ond”);
console.log(result);//cond, vat, yat
result = text.replace(/at/g, “ond”);
console.log(result); //cond, vond, yond

 

function htmlEscape(text) {
return text.replace(/[<>"&]/g, function (match, pos, ori) {
switch (match){
case “<”:
return “&lt;”;
case “>”:
return “&gt;”;
case “&”:
return “$amp;”;
case “\”":
return “$quot;”;
}
})
}
console.log(htmlEscape(“<p class=\”hraada\”>ni hao</p>”)); //&lt;p class=$quot;hraada$quot;&gt;ni hao&lt;/p&gt;

转义小于号、大于号、和号、双引号。

 

split()方法，接受的第二个参数用于指定数组的大小。

var colorText = “red, blue, green”;
console.log(color1 = colorText.split(“,”)); //["red", " blue", " green"]
console.log(color2 = colorText.split(“,” ,2)); //["red", " blue"]
console.log(color3 =colorText.split(/[^\,]+/));//["", ",", ",", ""]

 

localeCompare()方法，用来比较2个字符串，如果字符串在字母表排在参数之前返回-1，如果等于返回0，在之后行会1。

var stringVal = “yellow”;
console.log(stringVal.localeCompare(“black”)); //1
console.log(stringVal.localeCompare(“yellow”)); //0
console.log(stringVal.localeCompare(“zoo”)); //-1

 

fromCharCode()方法，接收一个或多个字符编码，将其转换为字符串。
console.log(String.fromCharCode(104, 101, 108, 108, 111)); //hello

THIS ENTRY WAS POSTED IN  JAVASCRIPT.

javascript从零单排第一季 — Function类型

BY ADMIN //  2014/09/20 //   NO COMMENTS

函数声明的3种方式：

函数声明方式：

function sum (num1, num2) {

return num1 + num2;

}

函数表达式：

var sum = function (num1, num2) {

return num1 + num2;

};

构造函数：

var sum = new Function (“num1″, “num2″, “return num1 + num2″); // 不推荐

这种语法会导致解析2次代码。（第一次解析常规ECMAscript代码，第二次解析传入构造函数内的字符串）。

function sum(num1, num2) {
return num1 + num2;
}
console.log(sum(10, 10)); //20

var anotherSum = sum;
console.log(anotherSum(10, 10)); //20

sum = null;
console.log(anotherSum(10, 10)); //20

使用不带圆括号的函数名是访问函数指针，而非调用函数。

 

函数声明和函数表达式：

console.log(sum(10, 10)); //20

function sum(num1, num2) {

return num1 + num2;

}

 

console.log(num(10, 10)); //报错

var num = function (num1+ num2) {

return num1 + num2;

};

解析器在向执行环境中加载数据时，解析器会率先读取函数声明，并对在执行任何代码之前可用，至于函数表达式，则在解析器执行到所在的代码行，才会真正的被解释执行。

 

做为值的函数：

function callSomeFucntion (someFunction, someArgument) {
return someFunction(someArgument);
}
function add10 (num) {
return num += 10;
}
var result = callSomeFucntion(add10, 10);
console.log(result); //20

 

function creatFunction (propertyName) {
return function (obj1, obj2) {
var val1 = obj1[propertyName];
var val2 = obj2[propertyName];
if(val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
}

var data = [{name: "epan", age: "28"},{name: "ken", age: "26"}];
data.sort(creatFunction(“name”));
console.log(data[0].name); //epan
data.sort(creatFunction(“age”));
console.log(data[0].name); //ken

return操作符会在内部函数接受到propertyName参数后，它会使用方括号表示发取得给定属性的值。

 

函数内部属性：arguments、this、caller（ECMAScript5）

阶乘函数：

function factorial(num) {
if(num <= 1 ) {
return 1;
} else {
//return num * factorial(num-1);
return num * arguments.callee(num – 1);
}
}
console.log(factorial(5)); //120

var trueFactorial = factorial;
factorial = function () {
return 0;
}
console.log(trueFactorial(5)); //120
console.log(factorial(2)); //0

 

this引用的函数执行的环境对象。

window.color =”red”;
var o = {color: “blue”};
function sayColor() {
console.log(this.color);
}
sayColor(); // red
o.sayColor = sayColor;
o.sayColor();// blue

函数的名字仅仅是一个包含指针的变量而已。即使在不同的环境中执行，全局的sayColor()函数与o.sayColor()指向的仍然是同一个函数。
function outer () {
inner();
}
function inner () {
//console.log(inner.caller);
console.log(arguments.callee.caller);
}
outer(); // function outer() { inner();}

caller属性中保存折调用当前函数的函数的引用，如果在全局作用域调用当前函数，它的值为null。

 

函数的属性和方法：

function sayName(name) {
console.log(name);
}
function sum(num1, num2) {
return num1 + num2;
}
function sayHi() {
console.log(“hi”);
}
console.log(sayName.length); //1
console.log(sum.length); //2
console.log(sayHi.length); //0

length属性表示函数希望接受的命名参数的个数。

 

prototype是保存引用类型所有的实例方法的真正所在。没个函数都包含2个非继承而来的方法：apply()、call()。

apply()方法接受2个参数，一个是在其运行函数的作用域，另一个是参数组。其中，第二个参数可以是Array实例，也可以是argument对象。

call()方法的作用与之相同，但是传递参数不同，在使用call()方法时，传递参数的参数必须逐个列举出来。

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);
}
console.log(callSum1(10, 10)); // 20
console.log(callSum2(10, 10)); //20
console.log(callSum3(10, 10)); //20

 

使用apply()和call()方法扩充函数作用域：

window.color = “red”;
var o = {color: “blue”};
function sayColor () {
console.log(this.color);
}
sayColor.call(this); //red
sayColor.call(window);; //red
sayColor(o); //red
sayColor.call(o); //blue

var objColor = sayColor.bind(o);
objColor(); //blue

当运行sayColor.call(o)时，函数体内的this对象指向了o。

ECMAScript 5中定义了一个bind()方法用来创建一个函数的实例，其this值会被绑定到传给bind()函数的值。

 

 

THIS ENTRY WAS POSTED IN  JAVASCRIPT.

javascript从零单排第一季 — RegExp类型

BY ADMIN //  2014/09/17 //   NO COMMENTS

RegExp类型

ECMAscript通过RegExp类型来支持正则表达式。

语法： var expression = / pattern / flags;

flags有3个标识：

g(global):表示全局、i(insensitive):表示不区分大小写、m(multiline):表示多行模式。

var pattern1 = /at/g; //匹配字符串中所有“at”的实例

var pattern2 = /[bc]at/i; 匹配第一个“bat”或“cat”，不区分大小写

var partten2 = new RegExp(‘[bc]at’, “i”); //与上面pattern2相同 ，只是这里使用的构造函数，上面使用的字面量。

var pattern4 = /\[bc\]at/i; //匹配第一个[bc]at,不区分大小写

varpattern3 = /.at/gi; //匹配所有以“at”结尾的3个字符的组合，不区分大小写

var pattern 5 = /\.at/gi; // 匹配所有“.at”,不区分大小写

 

RegExp实例属性

RegExp每个实例都具有下列属性：

global:布尔值，表示是否设置了g标志。

ignoreCase:布尔值，表示是否设置了i标志。

lastIndex:整数，表示开始搜索下一个匹配项的字符位置，从0开始。

mulitiline:布尔值，表示是否设置了m标示。

source:正则表达式的字符串表示，按照字面量形式而非传入构造函数中的字符串模式返回。

 

var pattern1 = /\[bc\]at/i;

var pattern2 = new RegExp(“\\[bc\\]at]”, “i”); //与字面量pattern1返回的一致

console.log(pattern1.global); // false

console.log(pattern1.ignoreCase); //true

console.log(pattern1.lastIndex); //0

console.log(pattern1.multiline); // false

console.log(pattern1.source); // \[bc\]at

 

RegExp实例方法

exec()方法接受一个参数，即应用模式的字符串，返回第一个匹配项信息的数组；或者在没有匹配的情况下返回null。返回的数组虽然是Array实例，但包含input、index2个属性，其中index表示匹配项在字符串中的位置，input表示应用正则表达式的字符串。

var text = “moon and dad and bady”;
var pattern = /moon( and dad( and bady)?)?/gi;
var matches = pattern.exec(text);
console.log(matches.index); //0
console.log(matches.input); //moon and dad and bady
console.log(matches[0]); //moon and dad and bady
console.log(matches[1]); // and dad and bady
console.log(matches[2]); // and bady

对于exec()方法而然，即使在模式中设置了全局标示（g），它每次也只返回一个匹配项。不设置标志也始终返回第一个匹配项。

 

var text = “cat, bat, sat, fat”;
var pattern = /.at/;

var matches = pattern.exec(text);
console.log(matches.index); //0
console.log(matches[0]); //cat
console.log(pattern.lastIndex); //0

var pattern2 = /.at/g;

var matches = pattern2.exec(text);
console.log(matches.index); //0
console.log(matches[0]); //cat
console.log(pattern2.lastIndex); //3

matches = pattern2.exec(text);
console.log(matches.index); //5
console.log(matches[0]); //

batconsole.log(pattern2.lastIndex); //8

parrern2是全局模式，因此每次调用exce()方法都会返回字符串中的下一个匹配项。在全局模式匹配下，lastIndex的值在每次调用后都会增加。

 

text()方法，它只接受一个字符串参数。在模式与参数匹配的情况下返回true。

var text = “000-00-0000″;
var pattern = /\d{3}-\d{2}-\d{4}/;
if(pattern.test(text)) {
alert(1); // 1
}

 

var pattern = new RegExp(“\\[bc\\]at”, “gi”);
console.log(pattern.toString()); /// \[bc\]at/gi
console.log(pattern.toLocaleString()); /// \[bc\]at/gi

RegExp实例继承的toLocaleString()和toString()方法都会返回正则表达式的字面量，与创建正则表达式的方式无关。

 

RegExp构造函数属性

长属性 短属性 说明
input $_ 最近一次要匹配的字符串
lastMatch $& 最近一次的匹配项
lastParen $+ 最近一次匹配的捕获组
leftContext $` input字符串中lastMatch之前的文本
multiline $* 布尔值
rightContext $’ input字符串中lastMatch之后的文本

使用这些属性可以从exec()或test()执行的操作中提出更具体的信息。

var text = “this is been a short summer”;
var pattern = /(.)hort/g;
if (pattern.test(text)) {
console.log(RegExp.input); //this is been a short summer
console.log(RegExp.leftContext); //this is been a
console.log(RegExp.rightContext); // summer
console.log(RegExp.lastParen); //s
console.log(RegExp.lastMatch); //short
console.log(RegExp.multiline); //false

}

if (pattern.test(text)) {
console.log(RegExp.$_); //this is been a short summer
console.log(RegExp["$'"]); // summer
console.log(RegExp["$`"]); //this is been a
console.log(RegExp["$&"]); //short
console.log(RegExp["$+"]); //s
console.log(RegExp["$*"]); //false
}

var pattern = /(..)or(.)/g;
if ( pattern.test(text)) {
console.log(RegExp.$1); //sh
console.log(RegExp.$2); //t
}