45-1 JavaScript的对象-native object

在 ECMA-262 中没有出现“类”这个词。ECMAScript 定义了“对象定义”，逻辑上等价于其他程序设计语言中的类。

var obj = new Object();

本地对象(native object)。包括普通本地对象和“内置对象”。“内置对象”，程序开始执行时它已被自动实例化了。
宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。所有 BOM 和 DOM 对象都是宿主对象。

ECMAScript 中的所有对象都由Object这个对象继承而来；Object 对象中的所有属性和方法都会出现在其他对象中。

ToString() :  返回对象的原始字符串表示。
ValueOf()  :  返回最适合该对象的原始值。对于许多对象，该方法返回的值都与 ToString() 的返回值相同。

11种内置对象，包括：Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object

Function对象

一、函数的定义

1、正常方法创建函数

推荐用这种方法。

function 函数名(参数){
    函数体;
}

2、用Function() 构造函数创建函数

这种方法并不常用，可用来理解“函数是对象”这件事。注意Function首字母为大写。

var func = new Function("参数1", "参数2", ... ,"函数体")

var func = new Function("a", "b", "alert(a+b)");
func(2, 3);

示例

3、用匿名函数创建函数

function()是个匿名的函数，将它赋给变量func（函数名）。

var func=function(){
    函数体;
}

4、自执行函数（匿名函数）

(function(arg){
    console.log(arg);
})('123')

// 作用等价于：
f=(function(arg){
    console.log(arg);
})
f('123')

　　括号内是一个匿名函数代码块，用括号标识其边界。这种函数的好处是执行完就了事，没有函数名去占用内存空间。

二、函数的调用

1、js的函数加载执行与python不同，它是整体加载完才会执行，所以函数调用放在上面或下面都可以。

2、实参的传入

（1）容错性强

传入实参的个数与形参不符时，不报错。容错性强，甚至可以说有点太随便了。

var ret=0;
function func(a,b){
    ret =a+b;
};

func();                                // NaN
func(1);                               // NaN
func(1, 2);                            // 3
func(1, 2, 3);                         // 3   这里函数只取前两个实参用
func(1, 2, 3, 4)                       // 3

（2）函数的内置对象arguments

调用函数时，传入的参数自动被封装为一个名为arguments的数组，甚至于函数定义时都不用写形参了。相当于python中的*args。

function add(a,b){
    console.log(a+b);                   // 3
    console.log(arguments.length);      // 2
    console.log(arguments);             // 数组[1,2]
    }

add(1,2)

// 实例1：加法器
var ret=0;
function add(){
    for (var i in arguments){
        ret= ret + arguments[i];
    };
    return ret;
}

alert(add(1, 2, 3, 4));                     // 10

// 实例2：验证实参输入是否符合要求
function f(){
    if (arguments.length != 3){
         throw Error("param should be 3!");
    }
}

f(1, 2, 3, 4, 5);                            // Uncaught Error: param should be 3!

应用实例

三、函数对象的属性和方法

1、属性

length

alert(func1.length)                     // func1函数参数的个数

2、方法

void()

function f(){
    return 8
}

alert(f())                              // 8
alert(void(f()))                        // undefined    void的作用是阻拦return值的返回

四、作用域

1、js的作用域和py相似，if 、while、for等控制语句并没有自己作用域；而函数是有自己的作用域的

2、闭包

所谓闭包通俗讲就是里层的函数能用外层函数中的数据，这样一种封装方法。

var city = 'beijing';
function bar(){
    console.log(city);
}

function func(){
    var city = "shanghai";
    return bar;
}

var ret = func();
ret();                   // beijing

    


var city = 'beijing';
function func2(){
    var city = "shanghai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = func();
ret();               // shanghai

View Code

3、局部变量与全局变量

function f2(){
    var a= 1;
}
f2();
alert(a);         // 定义时前面加var了，a是局部变量。console中查看：a is not defined。网页上不报错，与Python不同


function f3(){
    a = 1;         // a全局变量。平时尽量不用，因为很容易乱。仅看这一句并不知道是在定义变量还是在给变量重新赋值
}

f3();
alert(a)

4、作用域链

参考：http://www.cnblogs.com/yuanchenqi/articles/5980312.html

String对象

一、创建字符串对象

var s1 = "hello";                  // 直接创建字符串
var s2 = new String("nihao");      // 通过实例化一个对象的方法创建出字符串

二、字符串对象的属性和方法

1、length 属性

var s1 = "hello";                  
alert(s1.length);                   // 5

2、遍历字符串中的字符

var s1 = "hello";
for (i in s1){
    console.log(s1[i])
}

3、编排方法

是String对象针对HTML格式的一组方法。功能是给字符串加相应的html标签。了解即可，一般是直接写html标签，而不是用这种方式生成。

s="Hello"
document.write(s.italics());        // html代码中：<i>hello</i>
document.write(s.bold());           // html代码中：<b>hello</b>
document.write(s.anchor());         // html代码中：<a name="undefined">hello</a>

4、大小写转换

s="Hello";
document.write(s.toUpperCase());      // HELLO
document.write(s.toLowerCase());      // hello

5、获取指定字符

s.charAt(index)
s.charCodeAt(index)

s 代表字符串对象
index 代表字符位置的索引号
index 从0开始编号
charAt 返回index位置的字符
charCodeAt 返回index位置的Unicode编码

s="hello world"
document.write(s.charAt(6));         // w     索引值为6的字符
document.write(s.charCodeAt(6));     // 119   索引值处字符的asc码

6、查询字符串

console.log(s.search("l"));          // 2        匹配第一个字符l的索引值
console.log(s.indexOf("l"));         // 2
console.log(s.lastIndexOf("l"));     // 9
console.log(s.match("e"));           // ["e"]    返回一个数组，里面是所有匹配结果

7、字符串处理

s="hello world"

// 替换
console.log(s.replace("e","E"));    // hEllo world

// 分割
console.log(s.split("e"));          // ["h", "llo world"]

// 连接
console.log(s.concat(" world"));    // hello world world


// 字符串的截取
console.log(s.substr(1, 3));        // ell       从索引1位置开始，取3个字符
console.log(s.substring(1, 3));     // el        从索引1位置开始，到索引3的位置，不包括索引3
console.log(s.slice(1, 3));         // el        从索引1位置开始，到索引3的位置，不包括索引3
console.log(s.slice(1, -3));        // ello wo   与substring的区别是：第二参数可为负数，表示从索引1开始取到倒数第3个位置

Array对象

一、创建数组对象

var arr = [1, 2, 3];               // 创建方式1

var arr2 = new Array(1, 2, "a")    // 创建方式2   与python不同的是：python输入的参数需是一个对象
var arr3 = new Array(3);           // 注意：用方式2时，若实参只有一个值且是一个数字，数字表示的是长度而不是内容。当然创建完后，数组也是可变长的

二维数组：

var arr4 = [5, [2, 4], 3, [7, 8]]

二、数组的属性和方法

1、成员个数

arr.length

2、获取子数组

即切片操作。

（1）slice

var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);       //end省略则相当于从start位置截取以后所有数组元素
var arr4=arr1.slice(2,-1);

alert(arr2.toString());       //结果为"c,d"
alert(arr3.toString());       //结果为"e,f,g,h"
alert(arr4.toString());       //结果为"c,d,e,f,g"

（2）splice

主要用途是对数组指定位置进行删除和插入。

arr.splice(start, deleteCount, value, ...)

start 开始位置索引
deleteCount 删除数组元素的个数
value 表示在删除位置插入的数组元素
value 参数可以省略

var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
console.log(a);   // [1, 4, 5, 6, 7, 8]

a.splice(1,0,2,3);
console.log(a);   // [1, 2, 3, 4, 5, 6, 7, 8]

3、进出栈操作

即成员的增、删、改操作。

队列模式是“先进先出”，栈模式是“先进后出”。JavaScript数组采用“栈模式”。

（1）push和pop

var arr5=[1, 4, 6];
arr5.push(13);           // 压栈，即往数组中添加成员  相当于python的append
console.log(arr5);       // [1, 4, 6, 13]
arr5.push("hello", 7);   // 同时压入两个成员
console.log(arr5);       // [1, 4, 6, 13, "hello", 7]

arr5.pop();              // 弹栈，相当于python的pop
console.log(arr5);       // [1, 4, 6, 13, "hello"]

（2）unshift和shift　　

var arr6 = [1, 4, 6];
arr6.unshift(45);    // 压栈，与push不同的是：新加进去的成员放在数组的开头
console.log(arr6);   // [45, 1, 4, 6]
arr6.shift();        // 弹栈，与shift不同的是：从数组的开头位置往外弹
console.log(arr6);   // [1, 4, 6]

4、连接数组

（1）join

功能与python中类似，将数组中的字符串拼接成一个字符串。区别：js中join是数组的方法，python中是字符串的方法。

ret=[1, 2, 3, 4, 5, 6, 7].join("-") ; 
console.log(ret);                        // "1-2-3-4-5-6-7"

（2）concat

合并数组。

var a = [1,2,3];
var b=a.concat(4,5);
console.log(a);   // [1, 2, 3]
console.log(b);   // [1, 2, 3, 4, 5]

5、数组排序　　

（1）reverse

翻转方向。

var arr7 = [1, 2, 4, 3, 5, 100];
arr7.reverse();
console.log(arr7);  // [100, 5, 3, 4, 2, 1]

（2）sort

排序，注意：当成字符串排序，是根据首字符的asc码排。

var arr7 = [1, 2, 4, 3, 5, 100];
arr7.sort();
console.log(arr7);  // [1, 100, 2, 3, 4, 5]

如果就想按照数字的大小排呢？

var arr7 = [1, 2, 4, 3, 5, 100];

console.log(arr7.sort(mysort));   // [1, 2, 3, 4, 5, 100]

function mysort(a, b){           // 排序实际上内部是这样进行的
    if (a>b){                    // 简便写法 return a-b
        return 1;
    }else if(a<b){
        return -1;
    }else{
        return 0;
    }
}

View Code

Date对象

一、创建Date对象

var date_obj = new Date();                         // 不输入实参，默认是当前时间
alert(date_obj);                                   // Thu Aug 31 2017 09:27:57 GMT+0800 (中国标准时间)

var date_obj2 = new Date("2016/3/16 12:20:20");    // 输入待转为真正时间的字符串
alert(date_obj2);                                  // Wed Mar 16 2016 12:20:20 GMT+0800 (中国标准时间)

var date_obj3 = new Date(5000);                    // 5000是5000毫秒，即5秒
alert(date_obj3);                                  // Thu Jan 01 1970 08:00:05 GMT+0800 (中国标准时间)   因是东八区，所以是8点

二、Date的方法

1、获取日期和时间

var date_obj4 = new Date();
console.log(date_obj4.toLocaleString());    // 2017/9/5 下午4:02:18            当地时间
console.log(date_obj4.toUTCString());       // Tue, 05 Sep 2017 08:02:18 GMT   国际标准时间
console.log(date_obj4.getFullYear());       // 2017  年（全称），因为2017年可以简写为 17
console.log(date_obj4.getMonth());          // 8     月，它的月份是0-11这么来的
console.log(date_obj4.getDate());           // 5     日
console.log(date_obj4.getDay());            // 2     星期几，星期天为：0，星期一-星期六为：1-6
console.log(date_obj4.getHours());          // 16    时
console.log(date_obj4.getMinutes());        // 2     分
console.log(date_obj4.getSeconds());        // 18    秒
console.log(date_obj4.getMilliseconds());   // 920   毫秒

// 输出这样的实际格式：2016年11月08日15:02 星期二


function getTime(){
    var date_obj = new Date();
    var year = date_obj.getFullYear();
    var month = date_obj.getMonth();
    var day = date_obj.getDate();
    var hour = date_obj.getHours();
    var minute = date_obj.getMinutes();
    var second = date_obj.getSeconds();
    var week = date_obj.getDay();
    return year+"年"+month+"月"+f(day)+"日"+hour+":"+minute+":"+second+" "+ch_week(week);
}

function ch_week(n){
    var week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
    return week[n]
}

function f(num){
    if(num<10){
        return "0"+num
    }
    return num
}

alert(getTime());

示例：自定义时间格式

2、设置日期和时间

var date_obj=new Date();
date_obj.setFullYear (1997);                         //设置年1997
date_obj.setMonth(7);                                //设置月7
date_obj.setDate(1);                                 //设置日1
date_obj.setHours(5);                                //设置小时5
date_obj.setMinutes(12);                             //设置分钟12
date_obj.setSeconds(54);                             //设置秒54
date_obj.setMilliseconds(230);                       //设置毫秒(0-999)为230
document.write(date_obj.toLocaleString()+"<br>");    //返回1997年8月1日5点12分54秒

date_obj.setTime(870409430000);                       //设置累计毫秒数(从1970/1/1午夜)
document.write(date_obj.toLocaleString( )+"<br>");    //返回1997/8/1 下午12:23:50

3、日期和时间对象的转换

getTimezoneOffset()    返回本地时间与GMT的时间差，以分钟为单位，如东八区：8个时区×15度×4分/度=480;
Date.parse(x)          返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)            返回累计毫秒数(从1970/1/1午夜到国际时间)

RegExp对象

一、创建

// 方式1：
var re_obj=new RegExp("\d+", "g");    // "g"表示全局通用

// 方式2：
var re_obj2=/\d+/g;                   // 用两个斜杠包住

二、方法

var re_obj=/\d+/g;
re_obj.test("jangja892jlag");         // true               检测字符串中是否有相匹配的结果，如果有返回布尔值true

var s="hell65o";
console.log(s.match(/\d/g));          // ["6", "5"]         取出所有匹配到的内容，放入一个数组
console.log(s.search(/\d/g));         // 4                  取出第一个结果的索引值
console.log(s.split(/\d/g));          // ["hell", "", "o"]  有空
console.log(s.replace(/\d/g, "*"));   // hell**o            替换

Math对象

是一个内置对象，拿来即用。即不用实例化。ECMA已经给实例化好了。

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)       返回角的正切。

补充：

1、字典　

   <script type="text/javascript">
       // 定义
        var dic = new Array();            // 注意它的类型是Array
        dic["zs"] = "张三";
        dic["ls"] = "李四";
        dic["ww"] = "王五";
        dic["zl"] = "赵六";

       // 查
        console.log(dic);                  // [zs: "张三", ls: "李四", ww: "王五", zl: "赵六"]
        console.log(dic["zs"]);            // 张三
        console.log(dic.zs);               // 用点的方式也可以读取字典的值


        //遍历字典
        var output = "";
        for (var key in dic) {
            console.log(key, dic[key])
        }


        //特殊的字典,注意它的类型是Array
        var dic2 = ["a", "b", "c", "d"];
        //遍历字典
        for (var key in dic2) {
            console.log(key, dic2[key]);    // 它的key是 0,1,2,3
        }


        //字典的简化风格方式,注意它的类型就不是Array了，而是Json对象
        var dic3 = { "zs": "张三1", "ls": "李四1", "ww": "王五1" };
        for (var key in dic3) {
            console.log(key, dic3[key])
        }
       
    </script>

2、JavaScript对象的序列化

JSON.parse(arg)           将字符串转换成对象       
JSON.stringify(arg)       将对象转换成字符串

参考：http://www.cnblogs.com/yuanchenqi/articles/5980312.html　　

posted @ 2017-08-29 08:18 seaidler 阅读(130) 评论(0) 收藏举报

刷新页面返回顶部