javascript入门（一）

非零基础学js

前言：
javacript跟java没有丝毫联系，半毛钱关系都没有；而且两种语言的最初的应用场景迥异，语言特性又截然不同，大家不要混为一谈。

如果一定要扯上一些联系，那就打个比方：大家都知道肯德基的汉堡不错，我这里开了个包子铺卖包子，为了增加知名度，打个牌子叫做肯德基包子，当然也没有得到肯德基的任何授权。

事实上也是这么回事，某浏览器厂商让某程序员大牛十天设计出了一个脚本语言，运行在他们的浏览器上，用于产生动态/交互效果；而后为了推广自己的浏览器和这个脚本语言，需要给这个语言起个名字吧，恰好当时java语言正是名气最大的网红，那就借网红个东风吧，姑且叫做javascript。

如今js是真的如日中天，动态语言特性加函数式编程风格，在移动互联网的大环境下，各大互联网公司的推动下，js成为了真正的网红。

说实话，js学习很容易起步，但仅限于一般的编程语言会用的范畴，要想真正走进js的世界，很难。

1 变量与数据类型

1.1 动态数据类型

与C、java等静态语言不同，javascript是一种动态类型语言，即变量的类型不是静态的，而是动态的。

那么什么是静态呢，静态有两个特点
* 变量在定义时就已经固定下类型了，比如 int a；这个语句定义了一个变量a，a是int类型的；变量的类型名字十分确定
* 在程序运行过程中，变量的类型不会发生变化，整型的变量不能变成字符型，其实原因在于静态类型语言下，一旦变量定义了，变量的内存结构也就确定下来了。

相对于静态语言，很容易得出动态语言的特点：
* 变量定义时不必固定类型
* 程序运行过程中，变量的类型可以随时改变

//来个小栗子 js的var i; //定义了一个变量，使用var关键字，不会指明具体类型i=1; // i赋值为1，i是 number类型i='ab'; // 同一个1赋值为'ab'字符串，i是string类型，i的类型发生了变化

1.2 js的数据类型种类

// 1 string 字符串var carname="Volvo XC60";var carname='Volvo XC60';// 2 Number 数字 ， 不区分整型和浮点型var x1=34.00;      //使用小数点来写var x2=34;         // //不使用小数点来写// 3 布尔类型 booleanvar x=true;var y=false;// 4 数组 Array// 4.1 第一种var cars=new Array();cars[0]="Saab";cars[1]="Volvo";cars[2]="BMW";// 4.2 注意，不是大括号，而是小括号，数组元素作为参数传入var cars=new Array("Saab","Volvo","BMW");// 4.3 json的方式，最常用的方式var cars=["Saab","Volvo","BMW"]; var bikes=[];//定义了一个空数组// 5 对象 object// 其实跟键值对类似 key:value ， value可以为任意类型// json格式var person={firstname:"John", lastname:"Doe", id:5566};//如何引用某元素，有两种方式name=person.lastname;name=person["lastname"]; // 6 函数 functionfunction a(){}; //正常定义函数的方式var b= function(){ }; // 匿名函数引用的方式// 7 未赋值的类型 undefined // 8 空值 null，用于清空对象// null其实也是对象类型 var dd;var nn = null;console.log(typeof dd); //undefinedconsole.log(typeof nn); // object

用于确定类型的操作符是typeof

 typeof "John"                 // 返回 stringtypeof 3.14                   // 返回 numbertypeof NaN                    // 返回 numbertypeof false                  // 返回 booleantypeof [1,2,3,4]              // 返回 objecttypeof {name:'John', age:34}  // 返回 objecttypeof new Date()             // 返回 objecttypeof function () {}         // 返回 functiontypeof myCar                  // 返回 undefined (if myCar is not declared)typeof null                   // 返回 object 

事实上，所有数据类型都是对象，因为js是基于对象的

1.3 js是基于对象的

什么是对象

与java的区别

• java是OO语言，Object-Oriented，面向对象的，但其实是基于类的。java中要想有对象，必须先有类，先有个对象的概念模型（形式化描述），然后根据这个模型进行实例化，造出一个具体的对象。一句话就是java是先有类，后有对象
• 而js创建对象则不需要任何模型事先的定义，直接 var a={}就定义了一个a对象，那么a对象有哪些属性呢？可以随时添加

构造器 constructor

构造器 在java中有构造方法的概念，用于初始化对象，js中的对象也有constructor属性，既然js中的变量都是基于对象的，那么每个变量的构造器constructor又是什么呢？

console.log("John".constructor ); // function String() { [native code] }console.log(1.3.constructor ); // function Number() { [native code] }console.log(true.constructor ); // function Boolean() { [native code] }console.log([].constructor ); // function Array() { [native code] }console.log({}.constructor ); // function Object() { [native code] }console.log(function(){}.constructor ); // function Function() { [native code] }

JSON数据格式 （进阶学习）

JSON 英文全称 JavaScript Object Notation

js的对象定义的方式，很简洁，很简洁地就描述了一个对象有哪些属性及其内容。在对象描述和程序交互数据时，可以使用xml的方式，而js的这种简洁对象描述也得到程序员的倾慕，于是就出现了一种使用js对象定义的格式的字符串用于描述数据的方式，叫做JSON。

js对JSON的支持体现在【对象】和【JSON文本】之间的转换
* JSON.parse(text) //将text转换为对象
* JSON.stringify(object) // 将object文本化

2 语句

2.1 if语句

凡是程序设计语言都需要有的结构，js同样，没有太大新意，需要注意的就是if(expr)中的expr表达式什么时候是真是假

expr中可以出现各种类型的值，下面分别做出测试

if(0.11) console.log("a"); else console.log("b"); // aif(1) console.log("a"); else console.log("b"); // aif(0) console.log("a"); else console.log("b"); // bif("a") console.log("a"); else console.log("b"); // aif("") console.log("a"); else console.log("b"); // bif('') console.log("a"); else console.log("b"); // bif(false) console.log("a"); else console.log("b"); //bif([]) console.log("a"); else console.log("b");//aif({}) console.log("a"); else console.log("b");//aif(undefined) console.log("a"); else console.log("b");//bif(null) console.log("a"); else console.log("b");//b

结论是，数字0、空字符串、null、undefined、布尔false都为假

注：空数组和{}这种对象（只要不是null的对象）也是真的

2.2 for循环

同样只说特殊用法
* for循环可以用于遍历对象属性，for..in..的方式

var car={    color:"white",    type:"jetta",    run:function(){console.log("run run run")}}//输出所有属性for(var x in car)    console.log(x + ": "+car[x]);/* color: white type: jetta run: function (){console.log("run run run")} *///如果不输出类型为方法的属性，则如下for(var x in car){    if(typeof(car[x])!='function')        console.log(x + ": "+car[x]);}

3 常用内置对象

3.0.1 基本介绍

常用内置对象有Number String Date Array Math RegExp

其中，Math是个对象，其余的都是方法，或者叫做function对象。

console.log(typeof Number);//functionconsole.log(typeof String);//functionconsole.log(typeof Array);//functionconsole.log(typeof Date);//functionconsole.log(typeof RegExp); //functionconsole.log(typeof Math); //object

弄懂这点有什么意义呢?

如果是function对象的话，可能就是构造方法，事实上确实如此，Number String Date Array RegExp可以用来作为对象构造器（构造函数）来用，即可以用来生成新的属于该类型的对象

下文介绍的各内置对象，一般会说明两块内容：属性和方法，其中属性一般适用于内置对象，而方法适用于使用对象构造器构造出来的对象

3.0.2 prototype 原型属性

原型对象有点类似于java中类的概念，当使用对象的prototype属性进行增加对象属性或方法时，会作用于所有的该原型的对象

var i = new Number(18);var j = new Number(19);console.log(i["a"]);console.log(j["a"]);Number.prototype.a = "hello";console.log(i["a"]);console.log(j["a"]);//error ******i.prototype.a = "hello" ;//Uncaught TypeError: Cannot set property 'a' of undefined

事实上，prototype这个属性适用于所有的对象构造器，比如

function foo(a){    this.a=a}var a = new foo("c");foo.prototype.b="dd";console.log(a.b);

3.1 Number对象

3.1.1 数字类型和数字对象

数字类型和数字对象的区别，与java中int与Integer的区别有些类似

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

3.1.2 Number对象（function对象）的属性

• NaN 用于表示非数值
• MAX_VALUE 可表示最大的值
• MIN_VALUE
• constructor 生成Number对象的方法
• prototype 用于给Number构造的对象添加属性和方法的对象

3.1.3 Number构造的对象的方法

• toFixed(x) 转换成带有x小数的字符串
• toPrecition(x) 转换成x长度（不包含小数点）的字符串
• toString(x) 转换成x进制的字符串 相当好用
• valueOf() 转换成number类型

3.2 String对象

3.2.0 string类型与String对象

这两个在js中做过特殊处理，方法可以通用

3.2.1 对象属性 length 长度

3.2.2 对象方法

• 字符串内查找
  

  charAt indexOf lastIndexOf search(可用regexp） match(匹配)

//没有注释上结果，懒得写了 ， match很重要var str="hello world world";console.log(str.charAt(1));console.log(str.indexOf("wo"));console.log(str.lastIndexOf("wo"));console.log(str.search(/wo/)); //6 var ma = str.match(/wo/g);console.log(typeof ma);console.log(ma.length);console.log(ma);

• 替换
  

  replace 两个需要注意的地方：1）可以用正则表达式 2）不会更改原始字符串

var str="hello world world";var cc = str.replace(/world/,"cc");var dd = str.replace(/world/g,"dd");console.log(str); // hello world worldconsole.log(cc); // hello cc worldconsole.log(dd); //hello dd dd

• 获取子串
  

  slice ~ substring ， substr(start,len)

var str="hello world";console.log(str.slice(1,3)); // elconsole.log(str.substr(1,3)); // ellconsole.log(str.substring(1,3));//elconsole.log(str.slice(1)); // ello worldconsole.log(str.substr(1)); // ello worldconsole.log(str.substring(1));//ello worldconsole.log(str.slice(-1)); // dconsole.log(str.substr(-1)); // dconsole.log(str.substring(-1));//hello worldconsole.log(str.slice(-1,3)); // ""console.log(str.substr(-1,3)); // dconsole.log(str.substring(-1,3));//hel

*大小写转换

toLowerCase toUpperCase 注：不会改变原字符串

var str="hello WORLD";var lower = str.toLowerCase();var upper = str.toUpperCase();console.log(str);console.log(lower);console.log(upper);

3.3 Date对象

3.1 创建对象

• new Date() // 当前日期和时间
• new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
• new Date(dateString)
• new Date(year, month, day, hours, minutes, seconds, milliseconds)

3.2 主要方法

注意：getDay getMonth获得的是从0开始的

方法 说明 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) 第一天是周日sunday。 getFullYear() 从 Date 对象以四位数字返回年份。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。 getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

3.4 Array对象

• Array对象与[]数组类型的方法通用

主要方法

• 查找子元素
  

  indexOf lastIndexOf

var arr=['a','b','a'];console.log(arr.indexOf('a'));//0console.log(arr.lastIndexOf('a'));//2

• join数组元素串联,形成大的字符串

var arr=['a','b','a'];console.log(arr.join()); //a,b,aconsole.log(arr.join("-"));//a-b-a

• 改变数组内容
  

  • push append ,return length
    
  • pop return last ,delete
    
  • shift return first,delete
    
  • unshift insert at first, return len
    
  • splice return (index,len),delete, add

  
  

var arr=['a','b','c'];console.log(arr.push('d'));//4 console.log(arr); // a,b,c,dconsole.log(arr.pop()); // dconsole.log(arr);//a,b,cconsole.log(arr.shift());//aconsole.log(arr);//b,cconsole.log(arr.splice(1,1,"e","f"));//cconsole.log(arr);//b,e,fconsole.log(arr.unshift("g"));//4console.log(arr);//g,b,e,f

• sort排序 reverse反转顺序

var arr=['a','b','a'];console.log(arr.sort()); //a,a,bconsole.log(arr.reverse());//b,a,a

• every,some 对数组元素是否满足条件进行判断

var arr=['a','b','a'];function hasA(e){    return e=='a';}console.log(arr.every(hasA)); // falseconsole.log(arr.some(hasA)); //true

• filter 过滤元素，生成新数组

var arr=['a','b','a'];function isA(e){    return e=='a';}console.log(arr.filter(isA).length)console.log(arr.filter(isA))

• map 对每个元素处理，并生成新的数组

var arr=['a','b','c'];function wrap(a){    return "<h1>"+a+"</h1>";}console.log(arr.map(wrap));console.log(arr);

3.5 RegExp对象

3.5.1 创建正则表达式对象

• var patt=new RegExp(pattern,modifiers);
• var patt=/pattern/modifiers; 简单方式

3.5.1.1 修饰符

• i 忽略大小写
• g 全局匹配

3.5.1.2 范围内字符

表达方式 内容 [abc] 查找方括号之间的任何字符。 [^abc] 查找任何不在方括号之间的字符。 [0-9] 查找任何从 0 至 9 的数字。 [a-z] 查找任何从小写 a 到小写 z 的字符。 [A-Z] 查找任何从大写 A 到大写 Z 的字符。 [A-z] 查找任何从大写 A 到小写 z 的字符。 [adgk] 查找给定集合内的任何字符。 [^adgk] 查找给定集合外的任何字符。 (red blue

3.5.1.3 元字符

表达方式 内容 . 查找单个字符，除了换行和行结束符。 \w 查找单词字符。 \W 查找非单词字符。 \d 查找数字。 \D 查找非数字字符。 \s 查找空白字符。 \S 查找非空白字符。

3.5.1.4 量词

表达方式 内容 n+ 匹配任何包含至少一个 n 的字符串。 n* 匹配任何包含零个或多个 n 的字符串。 n? 匹配任何包含零个或一个 n 的字符串。 n{X} 匹配包含 X 个 n 的序列的字符串。 n{X,Y} 匹配包含 X 或 Y 个 n 的序列的字符串。 n{X,} 匹配包含至少 X 个 n 的序列的字符串。 n$ 匹配任何结尾为 n 的字符串。 ^n 匹配任何开头为 n 的字符串。

3.5.2 正则表达式对象的方法

• exec 检索
• test 测试是否存在

var str = "word o WORD";var reg = /WO\w*/ig;console.log(reg.exec(str)); //woconsole.log(reg.test(str)); //true

3.5.3 字符串中支持regexpr的方法

表达方式 内容 search 检索与正则表达式相匹配的值。 match 找到一个或多个正则表达式的匹配。 replace 替换与正则表达式匹配的子串。 split 把字符串分割为字符串数组。

杂项

• js是大小写敏感的，跟C、java类似，即变量a与变量A不一样
• js中语句后面的分号是可以省略的。
• > 但强烈建议不要省略，因为编译器会悄悄地把分号加进来，有时候编译器程序并没有那么智能，可能自动添加的分号破坏程序逻辑。
• var是用于声明(定义）变量的关键字，将变量声明到当前作用域中；如果不用var，则变量自动成为全局变量 《- 这点十分重要，可惜有道笔记的markdown语法不支持颜色
• 关系运算==，会自动进行类型转换，比如 5==’5’的结果是true
• 关系运算===，进行“绝对等于”，比如5===’5’会先对比类型，结果是false