JavaScript高级教程笔记

1. JavaScript对象

JavaScript中所有的事物都是对象: 字符串, 数值, 数组, 函数. JavaScript允许自定义对象. JavaScript提供多种内建对象, 如: String, Date, Array等. 对象只是带有属性和方法的数据类型.
布尔类型, 数字类型, 字符串类型, 日期类型, 数学和正则表达式类型, 数组类型, 函数类型都可以是对象.
对象是特殊的数据类型, 对象拥有属性和方法.

//访问对象的属性的语法:
objectName.propertyName\
//如:
var message="Hello World!";
var x=message.length;

//访问对象的方法:
objectName.methodName()
如:
var message="Hello world!";
var x=message.toUpperCase();

创建JavaScript对象的集中方法:

// 1. 直接创建对象
person = new Object();
person.firstname = "wei";
person.lastname = "walden";
person.age = 50;
person.eyecolor = "blue";
替代语法(使用对象常量(literals)创建):
person = {firstname: "wei", lastname: "walden", age: 50, eyecolor: "blue"};

//2. 使用对象构造器创建对象
//对象构造器
function person(firstname, lastname, age, eyecolor){
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age;
    this.eyecolor = eyecolor;
}
//使用构造器创建对象
var myFriend = person("xiao", "ming", 15, "red");
var xiaoyu = person("xiao", "yu", 23, "blue");

//3. 把属性添加到JavaScript对象上
可以通过为对象赋值, 向已有的对象添加新属性.

//4. 把方法添加到JavaScript对象上
方法不过是附加在对象上的函数, 可以再构造函数内部定义对象的方法.
代码如下所示: 
    function Person(firstname, lastname, age){
        this.firstname = firstname;
        this.lastname = lastname;
        this.age = age;
        this.changeFirstName = changeFirstName;
        
        function changeFirstName(name){
            this.firstname = name;
        }
    }

    var per = new Person("wei", "walden", 23);
    alert(per.firstname);
    per.changeFirstName("wang");
    alert(per.firstname);

JavaScript类:

  • JavaScript是面向对象的语言, 但是JavaScript不使用类.
  • 在JavaScript中, 不会创建类, 也不会通过类来创建对象.
  • JavaScript是基于prototype, 而不是基于类.

JavaScript中 for in 循环:

for (variable in object)
{
  code to be executed
}

2. JavaScript Number对象

JavaScript只有一种数字类型, 可以使用, 也可以不使用小数点来书写数字.

例如:

var pi = 3.14;
var x = 34;

//科学计数法
var y = 1.23e5; //123000
var z = 1.23e-5; //0.0000123

所有JavaScript数字均为64位:
JavaScript不是类型语言, 所以JavaScript不定义不同类型的数字; 在JavaScript中, 数字不分为整数类型和浮点类型, 所有数字都是浮点类型的.

八进制和十六进制:
如果前缀是0, 则数值会被解释为八进制; 如果前缀是0x, 则解释为十六进制; 默认情况下, js数字为十进制.
使用toString()方法, 可以输出各种进制的数, 如:

    var num = 900;
    alert(num.toString(20)); //250
    alert(num.toString(16)); //384
    alert(num.toString(10)); //900
    alert(num.toString(8)); //1604
    alert(num.toString(2)); //1110000100

无穷大:
当数字运算结果大于JS能表示的上限(溢出), 结果是一个无穷大的值, 在JavaScript中用Infinity表示. 当负数小于能表示的最小数时候为负无穷小, 用-Infinity表示. 无穷大值得行为特性和我们期望是一致的: 基于他们的加减乘除运算结果还是无穷大(正负号相同).

//JavaScript代码:
    var num = 2;
    var n = 0;
    while(num != Infinity) {
        num = num * num;
        document.write(num+"<br />");
        n++;
    }
    document.write(" n = " + n);

//运行结果
4
16
256
65536
4294967296
18446744073709552000
3.402823669209385e+38
1.157920892373162e+77
1.3407807929942597e+154
Infinity
n = 10

NaN - 非数字值:
NaN 属性表示非数字值的特殊值. 该属性用来指示某个值不是数字, 可以把Number对象设置为该值, 来指示其不是数字值. 可以用isNaN()全局函数来判断一个值是否是NaN值.


    var x = 1000 / "Apple";
    isNaN(x); // returns true, 除法结果是非数字, 是NaN, 所以返回true
    var y = 100 / "1000";
    isNaN(y); // returns false. 除法成立, 结果是数字, 所以返回false.

一个数除以0, 是无穷大, 无穷大是一个数字.

var bigNum = 1 / 0; //big == Infinity

数字可以是数字, 也可以是对象:
例如:

var x = 123;
var y = new Number(123);
typeof(x) // returns Number
typeof(y) // returns Object

数字的属性:

  • MAX_VALUE
  • MIN_VALUE
  • NEGATIVE_INFINITY
  • POSITIVE_INFINITY
  • NaN
  • prototype
  • constructor
    **数字的方法: **
  • toExponential()
  • toFixed()
  • toPrecision()
  • toString()
  • valueOf()

3. JavaScript String

String用于处理已有的字符快. js中字符串可以用双引号或者单引号来定义都可以.
通过位置索引, 可以访问字符串中任何的字符.

var name = "Wei Dongfang";
var cr4 = name[4]; //cr4 == 'D'

一些方法的用法:

    // 查找字符串
    var str="Hello world, welcome to the universe.";
    var n=str.indexOf("welcome1");
    alert(n);

    // 匹配字符串, 如果字符串包含参数给出的字符串, 则返回这个字符串, 没有返回 `null`
    var str="Hello world!";
    document.write(str.match("world") + "<br>");
    document.write(str.match("World") + "<br>");
    document.write(str.match("world!"));
    
    //替换字符串
    str="Please visit Microsoft!"
    var n=str.replace("Microsoft","w3cschool");

    //字符串分割, 分割之后是数组类型的.
    var str = "asd,asd,ad, yre,jh";
    var arr = str.split(",");
    alert(arr[0]);

字符串的属性和方法:

属性:

  • length : 取得字符串的长度
  • prototype
  • constructor : 取出对象的构造函数代码. 如: function String() { [native code] }

方法:

  • charAt() : 返回在指定位置的字符。
  • charCodeAt() : 返回在指定的位置的字符的 Unicode 编码。
  • concat() : 连接字符串。
  • fromCharCode() :从字符编码创建一个字符串。
  • indexOf() : 返回参数字符串在字符串中的位置, 没找到返回 -1
  • lastIndexOf() : indexOf() 从字符串开头开始查找, lastIndexOf()从末尾开始查找
  • match() :匹配字符串, 如果字符串包含参数给出的字符串, 则返回这个字符串, 没有返回 null
  • replace() : 替换字符串,用参数中第二个字符串替换参数中的第一个字符串
  • search() : 检索与正则表达式相匹配的值。
  • slice()
  • split() : 字符串分割, 分割后是数组类型
  • substr() : 从起始索引号提取字符串中指定数目的字符。stringObject.substr(start,length)
  • substring() : 提取字符串中两个指定的索引号之间的字符。stringObject.substring(start,stop)
  • toLowerCase() : 转换成小写
  • toUpperCase() : 转换成大写
  • valueOf() : 取出值

4. JavaScript Date(日期)

属性:

  • constructor : 返回创建此对象的Date函数的引用.
  • prototype : 可以向此对象动态的添加属性.

常用的方法

方法 描述
getFullYear() 从Date对象以四位数字返回年份. 有对应set方法,设置年份
getMonth() 从Date对象返回月份(0 ~ 11). 有对应set方法
getDate() 从Date对象返回一个月中的某一天(1 ~ 31). 有对应set方法
getHours() 返回Date对象中的小时(0 ~ 23). 有对应set方法
getMinutes() 返回Date对象的分钟(0 ~59). 有对应set方法
getSeconds() 返回Date对象的秒数(0 ~ 59). 有对应set方法
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 有对应set方法
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6).
getTime() 返回1970年1月1日至今的毫秒数. 有对应set方法
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
toDateString() 把 Date 对象的日期部分转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toString() 把 Date 对象转换为字符串。
toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
toLocaleString() 据本地时间格式,把 Date 对象转换为字符串。

详解: http://www.w3school.com.cn/jsref/jsref_obj_date.asp

5. JavaScript Math 对象

Math对象属性

  • PI : 返回圆周率 3.14159 用法: Math.PI
  • SQRT2 : 返回2的平方根
  • SQRT1_2 : 返回2的平方根的倒数

Math对象方法:

方法 描述
Math.abs(x) 返回x的绝对值
Math.ceil(x) 对数字进行上舍入
Math.floor(x) 对数进行下舍入
Math.round(x) 把数字四舍五入
Math.max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
Math.min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
Math.pow(x,y) 返回 x 的 y 次幂。
Math.random() 返回 0 ~ 1 之间的随机数。
Math.sqrt(x) 返回数的平方根。

6. JavaScript Array 对象

  • concat() 连接两个或更多的数组,并返回结果。
  • every() 检测数值元素的每个元素是否都符合条件。
  • some() 检测数组元素中是否有元素符合指定条件。
  • indexOf() 搜索数组中的元素,并返回它所在的位置。
  • join() 把数组的所有元素放入一个字符串。
  • lastIndexOf() 返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
  • pop() 删除数组的最后一个元素并返回删除的元素。
  • push() 向数组的末尾添加一个或更多元素,并返回新的长度。
  • reverse() 反转数组的元素顺序。
  • sort() 对数组的元素进行排序。
  • toString() 把数组转换为字符串,并返回结果。
// concat()连接两个或者多个数组
  var arr1 = ["Cecilie", "Lone"];
  var arr2 = ["dfgs", "fgerev"];
  obj = arr1.concat(arr2, arr1, arr2);

// array.join(separator)
obj = obj.join("&");//数组元素以 `&` 分割 .  
obj = obj.join(); //数组元素以 `,` 分割 .  

// 检测数组 ages 的所有元素是否都大于 18 :
var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.every(checkAdult);
}

// 检测数组中是否有元素大于 18: 用法类似every()
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    return age >= 18;
}
function myFunction() {
    document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
输出结果为:
true

//sort() 排序
// 字母升序
var arrWord = ["jfds", "asdf", "aaswf", "poyt"];
obj = arrWord.sort();
// 字母降序
obj = arrWord.sort();
obj = obj.reverse();

//数字升序
var arrNum = [100, 20, 50, 30, 8];
obj = arrNum.sort(function(a,b){ return a-b; });
//数字降序
var arrNum = [100, 20, 50, 30, 8];
obj = arrNum.sort(function(a,b){ return b-a; });

详解 : http://www.runoob.com/jsref/jsref-obj-array.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,548评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,069评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,985评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,305评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,324评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,030评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,639评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,552评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,081评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,194评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,327评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,004评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,688评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,188评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,307评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,667评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,337评论 2 358

推荐阅读更多精彩内容