【JavaScript】学习笔记-内置对象与常用方法

2018-11-13  本文已影响0人  burningalive

（这篇笔记是在2015年初学时记的，可能有错误）

JavaScript内置对象简介

本文介绍Js中13种标准内置对象，全是边听课件边整理的，内容不免有些繁杂不细致，权当笔记。

JavaScript的标准内置对象分为两类。

构造器对象：

Object
Boolean
String
Number
Function
Array
RegExp
Date
Error

其他对象：

Math
JSON
全局对象

Object

    var obj = new Object({name: 'jerry', age: 0});
    var obj = {name: 'jerry', age: 0};

constructor
toString
valueOf
hasOwnProperty
isPrototypeOf
propertyIsEnumerable
toLocaleString

构造器的原型对象在对象实例化时将会被添加到实例对象的原型链上去。比如说通过var obj = new Object();定义了obj这样一个对象，就会生成proto: Object这样一个原型链，它不能被显式的调用。但是，我们定义的对象可以调用原型链上的一系列方法。用上述方法new出来的obj这样一个实例对象只有他的原型链属性_proto_: Object，没有其他的属性，因此，Object构造器没有实例对象属性、方法。

Object.create

var proto = {a:1,b:2};
var obj = Object.create(proto);

在调试器中可以看出，obj对象在原型链上有a,b两个属性。

Object.prototype.toString

var obj = {};
obj.toString();//"[object Object]"

Object.protorype.hasOwnProperty

var obj = Object.create({a:1,b:2});
obj.c = 1;
obj.hasOwnProperty("c"); //true
obj.hasOwnProperty("a"); //false

这说明hasOwnProperty可以判断一个属性是对象自身的属性还是原型链上的属性。

Boolean

true //可以直接用true或者false这样的变量
var a = true;
var a = new Boolean(false);//或者用new布尔构造器来定义一个布尔的引用对象

constructor
toString
valueOf
数字→布尔 只有0，NaN转换为false
字符串→布尔 只有空字符串为false
undefined→布尔 undefined都为false
null→布尔 null都为false
对象→布尔 对象都为true

String

"" //空字符串
'hello world!'
var s = 'name="myform"';
var s = new String("hello world!");//创建对象

-构造器对象属性、方法

prototype
fromCharCode //可以实现将ASCII码转换为字符串的功能

constructor
indexOf
replace
slice
split
charCodeAt
toLowerCase

String.prototype.indexOf

var str = "welcome to NetEase!welcome to MOOC!";
var idx = str.indexOf("to"); //没有起始位置时从头开始查找，并返回"to"所在的索引位置'8'
str.indexOf("to", idx+1); // 27
str.indexOf("To"); // 查找不存在的字符串时会返回'-1'

String.prototype.replace

var str = "1 plus 1 equal 3"；
str = str.replace("1","2");

如要把"2 plus 1 equal 3"变换为"2 dollor plus 1 dollor equal 3 dollor"，可以在上述代码的基础上修改为:

var str = "1 plus 1 equal 3"；
str = str.replace("1","2");
str.replace(/\d+/g,"$& dollor");

String.prototype.split

var str = "1 plus 2 equal 3";
str.split(" ");

这样，该字符串会被分割为["1","plus","2","equal","3"]这样一个长度为5的字符串数组。

var str = "1 plus 2 equal 3";
str.split(" ", 3);

这样会分割为`["1","plus","2"]这样的长度3的字符串数组。

var str = "1 plus 2 equal 3";
str.split(/\d+/);

这样会分割为[""," plus "," equal ",""]

Number

10;
1.2e5;
var count = 0x10;
var pi = new Number(3.14);

prototype
MAX_VALUE
MIN_VALUE
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY

constructor
toFixed
toExponential

Number.prototype.toFixed

var num = 13.37;
num.toFixed(1);

这样会把13.37转化为13.4。

Array

var a = [1,"abc", true, function(){}];
var a = new Array();
var a = new Array(1, "abc", true);

constructor
splice
forEach
find
concat
pop
push
reverse
shift
slice

array堆栈操作

var colors = new Array();
var count = colors.push("red","green");
alert(count);
count = colors.push("black");
alert(count);
var item = colors.pop();
alert(item);
alert(colors.length);

简要的以这段代码为例看一下js堆栈操作的方法。

.push 压栈

.push方法后可以接多个参数，该方法会将参数压入调用该方法的数组中，返回压栈成功的值数。

.pop 取栈

.pop方法会将数组所在栈中的最后一个元素取出，并返回取出的这个值。

.shift 队列操作

.shift方法会将数组所在栈排在最前面的元素取出，并返回取出的这个值。

.sort 排序

.sort方法不接受参数时默认将一个数组中的元素依次从小到大排序。
如果想让.sort方法将数组中元素从大到小排序需要自己写一个比较的函数，如下：

function compare(value1, value2){
    if(value1 < value2){
        return 1;
    } else if(value1 > value2){
        return -1;
    } else {
        return 0;
    }
}
var values = [2, 5, 4, 15, 23];
values.sort(compare);

将这个函数作为一个值当做.sort方法即可。

.reverse 颠倒数组顺序

如描述，.reverse()的方法会让一个数组顺序颠倒。

.concat 连接

如果要将数组和某些元素连接起来可以用.concat方法：
colors = colors.concat("yellow",["black","brown"]);
这样colors后面就接上了yellow,black,brown。

.slice 截取

.slice接受1~n个参数。
如果只输入了一个参数，就会将这个参数之前的元素全部截掉。
如果输入了两个参数，会将这两个参数之间的元素记录下来并返回。
在数组调用。参数1表示数组第一个元素，-1表示倒数第一个元素，以此类推。
请注意，该方法并不会修改数组，而是返回一个子数组.如果想删除数组中的一段元素，应该使用方法 Array.splice()。

Array.protorype.splice 删除并插入元素

Array.prototype.forEach

function callback(value, index, arrayObject){……}

它有三个参数。第一个参数是当前数组的元素值，第二个参数是当前元素的索引（第几个数），第三个参数是包含该元素的数组对象本身。

function logArray(value, index, array)
{
    console.log(value);
    console.log(value === array[index]);
}
[2, 5, , 9].forEach(logArray);

此时，它的运行结果在F12的console里是：

2
true //第一次循环
5
true //第二次循环
9
true //第三次循环

它执行了三次回调，直接将空元素摒除掉了。引用回调函数时并不需要写上其所需要的三个参数，可以直接用，但是函数的定义中三个参数缺一不可。

Function

1.对象实例化方法，使用new+function构造器创建一个函数add：
var add = new Function("i","j","return(i+j)");
2.更简单的函数关键字语句方法，直接用function关键字定义函数：
function add(i, j) { return i + j;}
3.用函数表达式的方法，也就是去掉new。
var add = function(i, j) { return i+j;};

与C、C++、Java不同，Js的函数可以当做一个变量使用。它可以被赋值和被当做参数传递，以及被当做返回值返回。

constructor
apply
call
bind

自定义对象构造器

function Point(x, y){
    this.x = x;
    this.y = y;
}

这里通过function关键字定义了一个Point对象构造器，这里的this.x
、this.y表示用Point构造器构造出来的实例对象有x和y这样两个属性。

Point.prototype.move = function(x, y){
    this.x += x;
    this.y += y;
}

这里为Point的原型对象添加了自定义的属性，这里添加了一个move方法。构造器对象与普通对象相比有一个prototype属性，这表明构造器对象可以生成其他对象。
用new Point实例化一个对象var p = new Point(0,1);。
p这个对象有两个自身属性，x、y，它的原型链上有move这样一个方法。下面来说function原型中几个重要的方法。

Function.prototype.apply

Object.prototype.toString.apply("123");

这个例子中使用字符串"123"去调用字符串toString，它的返回值是[object String]。当参数中函数的调用者缺省的时候，只使用参数列表中的元素去调用其prototype.后的函数。来看一个复杂点的例子。

    function Point(x, y){
    this.x = x;
    this.y = y;
    }
    Point.prototype.move = function(x, y){
    this.x += x;
    this.y += y;
    }
    var p = new Point (0, 0);
    p.move(2,2);
    var circle = {x:1, y:1, r:1};
    p.move.apply(circle, [2, 1]);

这样，circle中的元素就变为了{x: 3, y：2, r: 1}。

Function.prototype.bind

function Point(x, y){
    this.x = x;
    this.y = y;
}
Point.prototype.move = function(x, y){
    this.x += x;
    this.y += y;
}
var p = new Point(0,0);
var circle = {x:1, y:1, r:1};
p.move.apply(circle,[2,1]);//这里可以用上面的方法执行移动
//但是，如果想实现让该圆在一定时间后再移动，可以用到下面这种方法：

var circlemove = p.move.bind(circle, 2, 1);
setTimeout(circlemove, 1000);

这样就把带参数的circle引用绑定给一个函数circlemove，然后用setTimeout的方式去设置在1秒后执行该函数引用，以此来达到目的。

子类构造器

上面的例子中，circle使用的是Point函数的原型方法move来进行的移动功能，下面介绍用子类继承的方法来实现circle这样功能的构造器，最后实现圆的移动。
首先，通过function关键字来定义Circle构造器。

function Circle(x, y, r){
    Point.apply(this, [x, y]);
    this.radius = r;
}
//此时可以把Circle的原型对象指定为Point的实例对象。
Circle.prototype = new Point();
delete Circle.prototype.x;
delete Circle.prototype.y;
//这样，原型链属性上有一个move方法，上面这3句话也可以简化为Object.create这样的一种方法去实现.将Circle的原型链属性更改为Point的原型对象。
Circle.prototype = Object.create(Point.prototype);
//还可以为Circle的原型对象添加constructor和一些自定义的功能属性方法。
Circle.prototype.constructor = Circle;
Circle.prototype.area = function(){
    return Math.PI*this.radius*this.radius;
}
var c = new Circle(1, 2, 3);
c.move(2, 2);
//这里顺着Circle向上追溯，可以追溯到.move这个方法。
c.area();

函数的调用方式

  1. ( )的方式
    这种方式很常见，括号中传入参数。
  2. apply,call方法
    可以用apply,call来指定调用者以及参数。

函数参数的特点

  1. 形参个数不一定等于实参个数。
  2. Js函数参数传递都是值传递。
  3. Js函数在调用时系统并不做参数类型检查，但是程序员可以通过参数类型检查来实现函数的重载。

当函数实参个数小于函数形参个数时，未被赋值的函数形参的值是Undefined；当实参个数大于函数形参个数时，该如何获取这些实参呢？这里就要用到arguments对象

arguments

arguments对象是在函数执行时在函数内部生成的，表示接收的实参列表。

  1. length：实参个数
  2. 0…arguments.length-1: 实参属性名称（也就是对象中key-value结构中的key）
  3. callee： 函数本身
  1. 比较两个数字大小并返回大数
function max(a,b){
return a>b?a:b;
}

这个方法比较容易。

  1. 比较不定数量的数字大小并返回大数
function max(a, b){
    if ( max.length === arguments.length){
    return a>b?a:b;
    } 
    else {
        var _max = arguments[0];
        for(var i = 0; i < arguments.length; i++){
            _max > arguments[i]? _max : _max = arguments[i];
        }
    return _max;
    }
}

以上代码也可以简化成以下形式：

function max(){
    var _max = arguments[0];
    for(var i = 0; i < arguments.length; i++){
        if(_max < arguments[i]){
            _max = arguments[i];
        }
    }
    return _max;
}

值传递

在提到值传递之前，需要回顾一下原始类型和引用类型的区别。
在Js中，使用原始类型将一个值赋值给另一个数据，赋值结束后栈内存中确实存在两个数据。

var num1 = 123;
var num2 = num1;//栈内存中num1为123，num2为123

使用引用类型创建一个对象，这时栈内存中只保存了一个地址，这个地址指向堆内存中实际保存的对象。再将这个对象赋值给其他对象，实际上只是在栈内存中复制了一个地址，新建的那个对象同样指向堆内存中之前的对象。

var obj1 = {a:1};
var obj2 = obj1;

这类似于C++中的对象的浅拷贝。这可能会造成一些不可预见的问题，比如：

function setname(obj){
    obj.name = "obama";
    obj = {name:"clinton"};
}
var president = {name: "bush"};
setname(president);

这里函数中第二行把一个临时定义的对象地址赋给了实参中的obj，但是并没有影响到president的地址。

函数重载

我们可以通过Js的类型识别来实现函数功能的重载。

var define = function (name, deps, callback){
    var node, context;
    if(typeof name !== "string"){
        callback = deps;
        deps = name;
        name = null;
    }
    if(!Array.isArray(deps)){
        callback = deps;
        deps = null;
    }
    …………
}；

这里类型检查的方法可以用JavaScript的数据类型中提到的方法实现。

RegExp (正则表达式构造器)

  1. 第一种：直接定义的方法，通过斜杠来表示：/pattern、/flags。
  2. 第二种方法是使用new关键字加正则表达式构造器new RegExp(pattern[,flags]); 
constructor
test
exec

RegExp.prototype.test

regexObj.test(str)

var reg = /^abc/i;
reg.test("Abc123"); //true
reg.test("1Abc23"); //false

Date

var myDate = new Date();
var myDate = new Date(2014, 3, 1, 7, 1, 1, 100);

constructor
Date
getDate
getHours
setDate
setHours

由于都比较简单就不一一介绍了。

Math

floor
random
abs
max
cos
ceil

这些方法主要用于数字计算。

Math.floor

Math.floor(0.97); //0
Math.floor(5.1); //5
Math.floor(-5.1); //-6

Math.random

Math.random();

JSON

JSON.stringify

JSON.stringify(value[,replacer[,space]])

这里的第一个参数value必须是一个JSON对象。

var json = {1:1, 2:'2', 3:{4:'4',5:{6:6}}};
JSON.stringify(json); //'{"1":1,"2":"2","3":{"4":"4","5":{"6":6}}}'

JSON.parse

JSON.parse(text[,reviver])

var str = '{"1":1,"2":"2","3":{"4":"4","5":{"6":6}}}';
JSON.parse(str);

//Object{1: 1, 2: "2", 3: Object}
    1: 1
    2: "2"
    3: Object
        4: "4"
        5: Object
            6: 6

全局对象

NaN
Infinity
undefined

parseInt
parseFloat
isNan
isFinite
eval

encodedURIComponent
decodeURIComponent
encodedURI
decodeURI

NaN

parseInt

parseInt("10");       //10
parseInt("10",8);     //8
parseInt("10",16);    //16

parseInt("010");      //默认被当做10进制处理
parseInt("010"，8);   //8

parseInt("0x1f");     //31
parseInt("0x1f",16);  //31
parseInt("1f");       //1 这里由于默认是十进制，f被忽略了
parseInt("1f",16);    //31

##eval
- 功能
eval()函数可计算某个字符串，并执行其中的JavaScript代码。
- 语法
比较简单:`eval(string)`
- 使用举例

var res = '{"error":"0","msg":"OK"}';
var obj;
if(!JSON){
obj = eval("("+ res+")");
}else{
obj = JSON.parse(res);
}

以上代码是将一个JSON字符串转换为一个JSON对象。在新版本浏览器中都有JSON对象，因此可以调用JSON.parse方法将JSON字符串转换为JSON对象。在老版本的IE浏览器中并没有JSON对象，所以可以通过eval这样的方法转换为JSON对象。但是在实际使用中，eval函数会带来一系列的安全性、性能、代码逻辑上的问题，因此通常不建议使用eval函数。

##encodedURIComponent
- 功能
用于将URI参数中的中文、特殊字符等作为URI一部分进行编码。
- 语法
`endodeURIComponent(URIstring)`
- 使用举例
通常我们在登录页面的时候要输入用户名密码这样一系列的参数，在点击提交时要进行编码，主要是为了防止注入性的攻击。
`var url="http://www.163.com/reg.html?name="+encodeURIComponent(name);`
第二种情况，在依赖URI进行参数传递时，需要考虑编码是否全都合法,比如:
`val url="test.html?param0="+"jack&lucy"+"&paraml="+"/image/test.png"`
由于具有"&"、"/"这种html中必须用转义字符的编码，会使Js解析错误，所以上面那种写法是错误的，应该使用:
`var url="test.html?param0="+encodeURIComponent("jack&lucy"+"&paraml")+encodeURIComponent("/image/test.png");`
上一篇 下一篇

猜你喜欢

热点阅读