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 布尔类型 boolean
var 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 函数 function
function a(){}; //正常定义函数的方式
var b= function(){ }; // 匿名函数引用的方式
// 7 未赋值的类型 undefined
// 8 空值 null，用于清空对象
// null其实也是对象类型
var dd;
var nn = null;
console.log(typeof dd); //undefined
console.log(typeof nn); // object用于确定类型的操作符是typeof
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof 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"); // a
if(1) console.log("a"); else console.log("b"); // a
if(0) console.log("a"); else console.log("b"); // b
if("a") console.log("a"); else console.log("b"); // a
if("") console.log("a"); else console.log("b"); // b
if('') console.log("a"); else console.log("b"); // b
if(false) console.log("a"); else console.log("b"); //b
if([]) console.log("a"); else console.log("b");//a
if({}) console.log("a"); else console.log("b");//a
if(undefined) console.log("a"); else console.log("b");//b
if(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);//function
console.log(typeof String);//function
console.log(typeof Array);//function
console.log(typeof Date);//function
console.log(typeof RegExp); //function
console.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 Number
typeof(y) // returns Object3.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 world
console.log(cc); // hello cc world
console.log(dd); //hello dd dd- 获取子串
slice ~ substring ， substr(start,len)
var str="hello world";
console.log(str.slice(1,3)); // el
console.log(str.substr(1,3)); // ell
console.log(str.substring(1,3));//el
console.log(str.slice(1)); // ello world
console.log(str.substr(1)); // ello world
console.log(str.substring(1));//ello world
console.log(str.slice(-1)); // d
console.log(str.substr(-1)); // d
console.log(str.substring(-1));//hello world
console.log(str.slice(-1,3)); // ""
console.log(str.substr(-1,3)); // d
console.log(str.substring(-1,3));//heltoLowerCase 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'));//0
console.log(arr.lastIndexOf('a'));//2- join数组元素串联,形成大的字符串
var arr=['a','b','a'];
console.log(arr.join()); //a,b,a
console.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
- push append ,return length
var arr=['a','b','c'];
console.log(arr.push('d'));//4
console.log(arr); // a,b,c,d
console.log(arr.pop()); // d
console.log(arr);//a,b,c
console.log(arr.shift());//a
console.log(arr);//b,c
console.log(arr.splice(1,1,"e","f"));//c
console.log(arr);//b,e,f
console.log(arr.unshift("g"));//4
console.log(arr);//g,b,e,f- sort排序 reverse反转顺序
var arr=['a','b','a'];
console.log(arr.sort()); //a,a,b
console.log(arr.reverse());//b,a,a- every,some 对数组元素是否满足条件进行判断
var arr=['a','b','a'];
function hasA(e){
return e=='a';
}
console.log(arr.every(hasA)); // false
console.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 ""
+a+"";
}
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)); //wo
console.log(reg.test(str)); //true3.5.3 字符串中支持regexpr的方法
| 表达方式 | 内容 |
|---|---|
| search | 检索与正则表达式相匹配的值。 |
| match | 找到一个或多个正则表达式的匹配。 |
| replace | 替换与正则表达式匹配的子串。 |
| split | 把字符串分割为字符串数组。 |
杂项
- js是大小写敏感的，跟C、java类似，即变量a与变量A不一样
- js中语句后面的分号是可以省略的。
- > 但强烈建议不要省略，因为编译器会悄悄地把分号加进来，有时候编译器程序并没有那么智能，可能自动添加的分号破坏程序逻辑。
- var是用于声明(定义）变量的关键字，将变量声明到当前作用域中；如果不用var，则变量自动成为全局变量 《- 这点十分重要，可惜有道笔记的markdown语法不支持颜色
- 关系运算==，会自动进行类型转换，比如 5==’5’的结果是true
- 关系运算===，进行“绝对等于”，比如5===’5’会先对比类型，结果是false