JavaScript引用对象-超详细版

1.Object

//声明对象1
var person = new Object();
person.name = "Nicholas"
person.age = 29;

//声明对象2
var person = {
    name : "Nicholas",
    age : 29
}

2.Array

value instanceof Array判断对象是否为数组
转换方法demo
var color = ["red","green","blue"]
colors.tostaring(); //red,blue,green
colors.valueof();   //red,blue,green
colors.join(",")    //red,blue,green
colors.join("||")   //red||blue||green
栈方法demo
var colors = new Array();
var count = colors.push("red","green");
alert(count);  //2
count = colors.put("blue");
alert(count);  //3


var item = colors.pop();            //获取最后一项
alter(item);   //"blue"
alter(colors.length); //2
队列防范demo
var colors = new Array();
var count = colors.push("red","green");
alert(count);  //2

var item = colors.shift();
alter(item); //red
alert(colors.length)://2
重排序方法reverse、sort
//reverse
var values = [1,2,3,4,5];
vaules.reverse();
alert(values);  //5,4,3,2,1

//sort()与其他语言的sort方法不同，相当于把数组中的每个值都toString后再比较
var values = [0,1,5,10,15];
values.sort();
alert(values);  //0,1,10,15,5
//因此需要给sort方法传入参数
var values = [0,1,5,10,15];
values.sort(compare);
alert(values);  //0,1,5,10,15

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
return 0; }
}
操作方法concat、slice、splice
var color = ["red","green","blue"];
var color2 = color.concat["yellow",["black","brown"]];
alert(color);   //red,green,blue
alert(color2);  //red,green,blue,yellow,black,brown

//slice()方法基于当前数组中的一个或多个项创建一个新的数组，入参为位置
var colors = ["red", "green", "blue", "yellow", "purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow

//splice()
- 删除splice(0,2)可以删除数组中的前两项
- 插入splice(2,0,"red","green")，起始位置、要删除的个数、插入的元素
- 替换splice(2,1,"red","green")

var color = ["red","green","blue"];
var removed = colors.splice(0,1);
alert(color);   //green,blue
alert(removed); //red,返回的数组中只包含一项

removed = color.splice(1,0,"yellow","orange");
alert(color);   //green,yellow,orange,blue
alert(removed); //返回为空

removed = colors.splice(1,1,"red","purple");
alert(color);   //green,red,purple,orange,blue
alert(removed); //yellow
位置方法
var num = [1,2,3,4,5,4,3,2,1];
alert(num.indexOf(4));  //3
alert(num.lastInedxOf(4));  //5

alert(num.indexOf(4,4));    //5
alert(number.lastIndexOf(4,4)); //3

var person = {name : "Nicholas"};
var people = [{name : "Nicholas"}];

var morePeople = [person];

alert(people.indexof(person));  //-1
alert(morePeople.indexOf(person));  //0
迭代方法(以下方法都不会修改数组的值)
  • every()对数组每个值执行一个函数，如果所有函数执行结果都是true，最后返回true（and）
  • some()对数组每个值执行一个函数，如果有一个函数执行为true，最后返回true（or）
  • filter()对数组每个值执行一个函数，返回执行结果为true的数组
  • forEach()对数组每个值执行一个函数。无返回值
  • map()对数组每个值执行一个函数，每个函数的结果组成数组
var num = [1,2,3,4,5,4,3,2,1];

var everyResult = num.every(function(item,index,array){
    return (item > 2);
});
alert(everyResult); //false

var someResult = numbers.some(function(item,index,array){
    return (item > 2);
});
alert(someResult); //true

var filterResult = numbers.some(function(item,index,array){
    return (item > 2);
});
alert(filterResult); //[3,4,5,4,3]

var mapResult = numbers.map(function(item,index,array){
    return (item * 2);
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]
归并方法 reduce、reduceRight

注：reduceRight()与reduce()结果一样，但是执行顺序相反

//reduce
var values = [1,2,3,4,5]
var sum = values.reduce(function(prev,cur,index,array){
    return perv + cur;
});
alert(sum); //15

//reduceRight
var values = [1,2,3,4,5]
var sum = values.reduceRight(function(prev,cur,index,array){
    return perv + cur;
});
alert(sum); //15

3.Date类型

var now = new Date();

//创建一个2004年5月25日的日期对象
var someDate = new Date(Date.parse("May 25, 2004"));

//GMT时间2005年5月5日下午5:55:55
var allFives = new Date(Date.UTC(2005, 5, 5, 17, 55, 55));
var allFives1 = new Date(2005, 4, 5, 17, 55, 55);
继承的方法
var date1 = new Date(2007,0,1); //"January 1, 2007"
var date2 = new Date(2007,1,1); //"February 1, 2007"

alert(date1 < date2);   //true
alert(date1 > date2);   //false
日期格式化方法
  • toDateString()--以特定的格式展示星期、月、日、年
  • toTimeString()--以特定的格式展示时、分、秒、时区
  • toLocaleDateString()--以特定的地区展示星期、月、日、年
  • toLocaleTimestiring()--以格式展示时、分、秒
  • toUTCString()--以特定的格式展示完成的UTC日期
日期、时间组件方法
  • getTime()
  • setTime()
  • getFullYear()
  • getUTCFullYear()
  • setFullYear()
  • setUTCFullYear()
  • getMonth()
  • getUTCMonth()
  • setMonth()
  • setUTCMonth()
  • getDate()
  • getUTCDate()
  • setDate()
  • setUTCDate()
  • getDay() --返回日期是星期几
  • getUTCDay() --返回UTC中日期是星期几
  • getHours()
  • getUTCHours()
  • setUTCHours()
  • getMinutes()
  • getUTCMinutes()
  • setMinutes()
  • setUTCMinutes()
  • getSeconds()
  • getUTCSeconds()
  • setSeconds()
  • setUTCSeconds()
  • getMilliseconds()
  • getUTCMilliseconds()
  • setMilliseconds()
  • setUTCMilliseconds
  • getTimezoneOffset()

4.RegExp

  • g:表示全局模式
  • i:表示不区分大小写
  • m:表示多行
//字符串中所有包含“at”的
var pattern1 = /at/g;
//匹配到第一个"bat"、"cat"，不区分大小写
var pattern2 = /[bc]at/i;
//所有以“at”结尾的3个字符的组合，不区分大小写  
var pattern3 = /.at/gi;
//第一个[bc]at，不区分大小写
var pattern2 = /\[bc\]at/i;
RegExp实例属性

RegExp的每个实例都有以下属性

  • global：是否设置了g标志，boolean
  • ignoreCase：是否设置了i标志，boolean
  • lastIndex：从开始搜索下一个匹配项字符串位置，从0开始算
  • multiline：是否设置了m标志，boolean
  • source：
var pattern1 = /\[bc\]at/i;

alert(pattern1.global); //false
alert(pattern1.ignoreCase); //true
alert(pattern1.multiline);  //false
alert(pattern1.lastIndex);  //0
alert(pattern1.source); //"\[bc\]at"
RegExp实例方法
var text = "mom adn dad and bady";
var pattern = /mom( and dad( and baby)?)?/gi;

var matches = pattern.exec(text);
alert(matches.index);   //0
alert(matches.input);   //"mom and dad and baby"
alert(matches[0]);      //"mom and dad and baby"
alert(matches[1]);      //" and dad and baby"
alert(matches[2]);      //" and baby"

5.Function类型 function经常用不解释

没有重载
//result会调用最近的方法执行
function addSomeNumber(num){
    return num + 100;
}

function addSomeNumber(num){
    return num + 200
}

var result = addSomeNumber(100); //300
函数声明与函数表达式
//解析器会先读取函数声明，并使其在执行任何代码之前可以被使用函数表达式，则必须等到解析器执行到它所在的代码行，才会被解析
//1.解析器先通过函数声明提升过程，读取函数声明并添加到环境中
//2.对代码求值是，js引擎也能把函数声明提升到顶部
alert(sum(10,10));
function sum(num1,num2){
    return num1+num2;
}

//以上代码会在运行期间报错，函数位于一个初始化语句中，所以当sum加载的时候找不到function
alert(sum(10,10));
var sum = function sum(num1,num2){
    return num1+num2;
};
值函数:
//可以将一个函数作为另一个函数的结果返回
function callSomeFunction(someFunction, someArgumert){
    return someFunction(someArgument);
}

function add10(num){
    return num + 10; 
}

var result1 = callSomeFunction(add10,10);
alert(result1); //20

function getGreeting(name){
    return "hello," +name;
}

var result2 = callSomeFunction(getGreeting, "Nicholas")
alert(result2); //"hello,Nicholas"

适用场景
例如，一个对象数组，需要根据某个对象属性对数组进行排序，而传递给数组sort()方法
比较函数只能接受两个参数。下面做一下尝试：

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;
        }
    };
}

//调用上面的方法，这个方法绝对经典
var data = [{name: "Zachary", age:28}, {name: "Nicholas", age: 29}];

data.sort(creatComparisonFunction("name"));
alert(data[0].name);    //Nicolas

data.sort(creatComparisonFunction("age"));
alert(data[0].name);    //Zachary
函数内部属性

函数内部有两个特殊对象：arguments和this
arguments demo：为了消除与方法名之间的耦合，可以用arguments.callee的方式
无论方法名称怎么改变，内部的调用无需更改。

//正常递归
function factorial(num){
    if (num <=1){
        return 1;
    } else {
        return num * factoral(num -1)
    }
}

//arguments递归
function factorial(num){
    if (num <= 1){
        return 1;
    } else {
        return num * arguments.callee(num-1)
    }
}

this，行为与java类似

window.color = "red";
var o = {color : "blue"};

function sayColor(){
    alert(this.color);
}
syaColor();             //"red"
o.sayColor = sayColor;  
o.sayColor();           //"blue"

解释一下：
上面函数sayColor()是在全局作用域中定义的，它引用了this对象，这里this引用了全局对象windwo。
当把这个函数赋值给对象o，调用o.sayColor()，this引用的是对象o，所以结果是blue。

函数属性和方法

每个函数都包含两个属性：length和prototype
length表示函数希望接受命名参数的个数

function sayName(){
    alert(name);
}

function sum(num1, num2){
    return num1 + num 2;
}

function sayHi(){
    alert("hi");
}

alert(sayName.length);  //1
alert(sum.length);      //2
alert(sayHi.length);    //0

prototype是保存所有实例方法的本质：apply()和call()
apply()demo

//apply方法可以传入运行函数作用域，另一个是数组（也可以是arguments对象）
function sum(num1, num2){
    return num1 + num2;
}

function callSum1(num1, num2){
    return sum.apply(this, arguments);
}

function callSum2(num1, num2){
    retunr sum.apply(this, [num1, num2]);
}
alert(callSum1(10,10));     //20
alert(callSum2(10,10));     //20

call()demo，在使用callSum()的时候必须准去传入每一个参数

window.color = "red";
var o = {color:"blue"};

function sayColor(){
    alert(this.color)
}
sayColor();                 //red
sayColor().call(this);      //red
sayColor().call(window);    //red
sayColor().call(o);         //blue

这次saycolor作为全局变量，所以直接执行方法是全局的color
sayColor.call(this)与sayColor.call(window)则是在全局作用域中调用函数的方式，结果是red
sayColor().call(o)时执行的对象变成了o，所以结果是blue。
bind() demo，相当于sayColor被绑定了

window.color = "red";
var o = {color : "blue"};

function sayColor(){
    alert(this.color);
}

var objectSayColor = sayColor.bind(o);
bijectSayColor();       //blue

6.基本包装类型

为了方便操作基本类型，三个特殊引用类型：Boolean、Number、String

\\new Object
var obj = new Object("some text");
alert(obj instanceof String);       //true

转型构造函数

\\构造函数
var value = "25";
var number = Number(value); //转型函数
alert(typeof number);       //Number

var obj = new Number(value);//构造函数
alert(typeof obj);          //Object
boolean类型
var falseObject = new Boolean(false);
var result = falseObject && true;
alert(result);                      //true

var falseObject = false;
result = false && true;
alert(result);                      //false

falseObject && true这段代码针对的是falseObject这个对象

Number类型
//把num转换成对应的二进制...
var num = 10;
alert(num.toString());      //10
alert(num.toString(2));     //1010
alert(num.toString(8));     //12
alert(num.toString(10));    //10
alert(num.toString(16));    //a

Number的格式化方法

//toFixed转换成小数
var num = 10;
alert(num.toFixed(2));      //10.00

//toFixed约等于
var num1 = 10.005;
alert(num1.toFixed(2));     //"10.01"

//toExponential
var num = 10;
alert(num.toExponential(1)); //"1.0e+1"

关于Number的转型

var numberObject = new Number(10);
var numberValue = 10;

alert(typeof numberObject);   //"object"
alert(typeof numberValue);    //"number"
alert(numberObject instanceof Number);  //true
alert(numberValue instanceof Number);   //false
String类型

length属性

var stringValue = "Hello world";
alert(stingValue.length);       //11

字符方法

//chatAt
var stringValue = "hello world";
alert(stringValue.charAt(1));       //"e"

//charCodeAt：输出字母对应的字符编码
alert(stringValue.charCodeAt(1));   //"101"

//stringValue[index]
alert(stringValue[1])               //"e"

字符串操作方法

//concat()
var stringValue = "hello world";
var result = stringValue.concat("world","!");
alert(result);
alert(stringValue);

//slice()
alert(stringValue.slice(3));        //lo world
alert(stringValue.slice(3, 7));     //lo w
alert(stringValue.slice(-3));       //rld
alert(stringValue.slice(3, -4));    //"lo w"

//substr()
alert(stringValue.substr(3));       //lo world
alert(stringValue.substr(3, 7));    //lo worl
alert(stringValue.substr(-3));      //"rld"
alert(stringValue.substr(3, -4));   //""空字符串      

//sbustring()
alert(stringValue.substring(3))     //lo world
alert(stringValue.substring(3,7));  //lo w
alert(stringValue.substring(-3));   //hello world
alert(stringValue.substring(3, -4));//"hel"

字符串位置方法

var stringValue = "hello world";
//indexof
alert(stringValue.indexOf("o"));            //4
alert(stringValue.indexOf("o", 6));         //7
//lastIndexOf
alert(stringValue.lastIndexOf("o"));        //7
alert(stringValue.lastIndexOf("o", 6));     //4

通过循环调用indexof()或lastIndexOf()来找到所有匹配的子字符串

var strinValue = "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);
}
alert(positions);       //"3,24,32,35,52"

trim()方法

var stringValue = "    hello   world   ";
var trimmedStringValue = stringValue.trim();
alert(trimmedStringValue)               //"hello world"

字符串大小写转换方法

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"
alert(stringValue.toUpperCase());        //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase());  //"hello world"
alert(stringValue.toLowerCase());        //"hello world"

字符串的模式匹配方法

//match方法返回一个数组
var text = "cat, bat, sat, fat";
var pattern = /.at/;

//  与pattern.exec(text)相同  
var matches = text.match(pattern); 
alert(matches.index);       //0 
alert(matches[0]);          //"cat" 
alert(pattern.lastIndex);   //0

search()demo

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
alert(pos);                 //1

replace

var text = "cat, bat, sat, fat";
var result = text.rep;ace("at", "ond")
alert(result);                  //"cond, bat, sat, fat"

result = text.replace(/at/g, "ond");
alert(result);                  //"cond, bond, sond, fond"

localeCompare

//字符串比较大小
var stringValue = "yellow"; 
alert(stringValue.localeCompare("brick"));      //1 alert(stringValue.localeCompare("yellow"));     //0 alert(stringValue.localeCompare("zoo"));        //-1

fromCharCode

把字符编码转换成字符
alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello"

7.单体内置对象

Global对象（全局对象）

URI编码方法

var uri = "http://www.wrox.com/illegal value.htm#start";

//"http://www.wrox.com/illegal%20value.htm#start"
alert(encodeURI(uri));     

//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"
alert(encodeURIComponent(uri));

eval()方法：相当于一个完成的js解析器

eval("alert('hi')");

//相当于
alert("hi");

Global对象属性

  • undefined
  • NaN
  • Infinity
  • Object
  • Array
  • Function
  • Boolean
  • String
  • Number
  • Date
  • RagExp
  • Error
  • EcalError
  • RangeEror
  • EvalError
  • RangeError
  • ReferenceError
  • SyntaxError
  • TypeError
  • URIError
Math对象
var max = Math.max(3, 54, 32, 16)
alert(max);     //54

var min = Math.min(3, 54, 32, 16);
alert(min);     //3

舍入方法

alert(Math.ceil(25.9));     //26
alert(Math.ceil(25.5));     //26
alert(Math.ceil(25.1));     //26
alert(Math.round(25.9));    //26
alert(Math.round(25.5));    //26
alert(Math.round(25.1));    //25
alert(Math.floor(25.9));    //25
alert(Math.floor(25.5));    //25
alert(Math.floor(25.1));    //25

random()方法

//1到10随机数
var num = Math.floor(Math.random() * 9 + 2);

以上内容引用于《JavaScript高级程序设计（第三版）作者：Nicholas C.Zakas》

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,544评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,430评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,764评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,193评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,216评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,182评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,063评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,917评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,329评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,425评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,019评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2赞 353

推荐阅读更多精彩内容

  • 四、JavaScript 引用类型
      引用类型的值（对象）是引用类型的一个实例。   在 ECMAscript 中，引用类型是一种数据结构，用于将数...
    霜天晓阅读 1,052评论 0赞 1
  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,233评论 0赞 4
  • JavaScript程序
    第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行（line），也就是一...
    悟名先生阅读 4,148评论 0赞 13
  • JavaScript高级程序设计-笔记
    第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型：Unde...
    RickCole阅读 5,124评论 0赞 21
  • 你过来，我想和你说个事 - 草稿
    下雪的天气是最美的 只是今年的雪来的比往年更晚 鹅毛大雪只停留在记忆中的冬天 大雪纷飞，一个幽雅恬静的境界,一个晶...
    校兮阅读 515评论 0赞 0