非零基础学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 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 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));//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开始的

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

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 "<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 范围内字符

3.5.1.3 元字符

3.5.1.4 量词

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)); //true

3.5.3 字符串中支持regexpr的方法

杂项

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