2 ECMAScript5.0

1 JavaScript的引入方式

• 内接式

<script type="text/javascript"></script>

• 外接式

<!--相当于引入了某个模块-->
<script type="text/javascript" src = './index.js'></script>

2 注释

• 单行注释

  单行注释以 // 开头。

• 多行注释

  多行注释以 /* 开始，以 */ 结尾。

3 变量

• 变量的声明的两种方式

  // 1.变量的声明和定义（赋值） 大部分前端工程师 都是使用的这种方式
  var a = 100;
  // 2.先声明变量  未来定义
  var b;
  b = '200';
  

• 变量的命名规范

  1. 变量由字母、数字、下划线组成
  2. 必须以字母开头
  3. 变量也能以 $ 和 _ 符号开头
  4. 变量名称对大小写敏感

4 基本数据类型

1. 数字类型 number

   var a = 100;            //定义了一个变量a，并且赋值100
   console.log(typeof a);  //输出a变量的类型 使用typeof函数 检测变量a的数据类型
   //特殊情况
   var b = 5/0;
   console.log(b); //Infinity 无限大
   console.log(typeof b); //number 类型
   

   ps:在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。

2. 字符串类型 string

   var a = "abcde";
   var b = "路飞";
   var c = "123123";
   var d = "哈哈哈哈哈";
   var e = "";     //空字符串
   

   连字符和+号的区别

   键盘上的+可能是连字符，也可能是数字的加号。如下：

   console.log("我" + "爱" + "你");   //连字符，把三个独立的汉字，连接在一起了
   console.log("我+爱+你");           //原样输出
   console.log(1+2+3);             //输出6
   

   总结：如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）。

   如果有数字和字符串，就会转换成字符串

3. 布尔类型 boolean

   var isShow  = 1>1;
   console.log(typeof isShow); 
   

4. 空对象 null

   var c1 = null;//空对象. object
   console.log(typeof c1);
   

5. 未定义 undefined

   var d1;
   //表示变量未定义
   console.log(typeof d1);
   

5 运算符

赋值运算符

以var x = 12,y=5来演示示例

算数运算符

var a = 5,b=2;

比较运算符

var x = 5;

6 数据类型转换

将number类型转换成string类型

隐式转换

var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
// 隐式转换
console.log(typeof n3);

强制转换

// 强制类型转换String(),toString()
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())

将string类型转换成number类型

var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2); //NaN  Not a Number 但是一个number类型

// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum))； //789
// parseparseFloat()可以解析一个字符串 并且返回一个小数
console.log(parseFloat(stringNum)); //789.123

任何的数据类型都可以转换为boolean类型

var b1 = '123'; //true
var b2 = 0; //false
var b3 = -123 //true
var b4 = Infinity; //true
var b5 = NaN; //false
var b6; //false
var b7 = null; //false
//使用Boolean(变量) 来查看当前变量的真假

7 流程控制

if 语句

var age = 20;
if(age>18){
    //{}相当于作用域
    console.log('可以去会所');
}
alert('alex'); //下面的代码照样执行

if-else 语句

var age = 20;
if(age>18){
    //{}相当于作用域
    console.log('可以去会所');
}else{
    console.log('好好学js,年纪够了再去会所');
}
alert('alex'); //下面的代码照样执行

if-else if-else 语句

var age = 18;
if(age==18){
    //{}相当于作用域
    console.log('可以去会所');
}else if(age==30){
    console.log('该娶媳妇了！！');
}else{
    console.log('随便你了')
}
alert('alex'); //下面的代码照样执行

switch 语句

var gameScore = 'better';

switch(gameScore){

//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止
    case 'good':
    console.log('玩的很好')
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了')
    break;
    case 'best':
    console.log('恭喜你 吃鸡成功')
    break;

    default:
    console.log('很遗憾')

}
//注意：switch相当于if语句 但是玩switch的小心case穿透

8 循环

while 循环

// 例子：打印 1~9之间的数
var i = 1; //初始化循环变量

while(i<=9){ //判断循环条件
    console.log(i);
    i = i+1; //更新循环条件
}

练习：将1~100所有是2的倍数在控制台打印。使用while循环

var i = 1;
while(i <= 100){
    if(i%2==0){
        console.log(i);
    }
    i +=1;
}

do while 循环

//不管有没有满足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{

    console.log(i)
    i++;//更新循环条件

}while (i<10) //判断循环条件

for 循环

//输出1~10之间的数
for(var i = 1;i<=10;i++){
     console.log(i)
 }

for 循环嵌套

for(var i = 0; i < 3;i++){ //控制着你的行数
   for(var j = 1;j <=6;j++){ //控制的星星
      document.write("*");
   }
   document.write('<br>');
} 

9 常用内置对象（复杂数据类型）（重点）

1 数组Array

• 数组的创建方式

  1. 字面量方式创建（推荐大家使用这种方式，简单粗暴）

     var colors = ['red','green','yellow'];
     
     

  2. 使用构造函数

     var colors = new Array();
     //通过下标进行赋值
     colors[0] = 'red';
     colors[1] = 'green';
     colors[2] = 'yellow';
     console.log(colors);
     
     

• 数组的常用方法

• concat() 数组的合并

  var north = ['北京','山东','天津'];
  var south = ['东莞','深圳','上海'];
  
  var newCity = north.concat(south);
  console.log(newCity)
  
  

• join() 将数组转换成字符串，元素使用指定的字符串连接起来

  var score = [98,78,76,100,0];
  var str = score.join('|');
  console.log(str);//"98|78|76|100|0"
  
  

• slice(start,end); 切片，顾头不顾尾

  var arr = ['张三','李四','王文','赵六'];
  var newArr  = arr.slice(1,3);
  console.log(newArr);//["李四", "王文"]
  
  

• pop 移除数组的最后一个元素

  var arr = ['张三','李四','王文','赵六'];
  arr.pop();
  console.log(arr);//["张三", "李四"，"王文"]
  
  

• push() 向数组最后添加一个元素

  var arr = ['张三','李四','王文','赵六'];
  arr.push('小马哥');
  console.log(arr);//["张三", "李四"，"王文"，"赵六"，"小马哥"]
  
  

• reverse() 翻转数组

  var names = ['alex','xiaoma','tanhuang','angle'];
  //4.反转数组
  names.reverse();
  console.log(names);
  
  

• sort() 对数组排序

  var names = ['alex','xiaoma','tanhuang','abngel'];
  names.sort();
  console.log(names)；// ["alex", "angle", "tanhuang", "xiaoma"]
  
  

• 判断是否为数组：isArray()

  // 布尔类型值 = Array.isArray(被检测的值) ;
  var a = 2;
  // isArray() 判断是否为数组  返回为ture|false
  var iArray = Array.isArray(a);
  if (iArray) {
      console.log('是数组');
  }else{
      console.log('不是数组');
  }
  
  

• forEach 方法

  // forEach（fn）==回调函数  匿名函数  通过forEach遍历数组的每一项内容  回调函数中的参数 第一个参数为item (每一项内容) 第二个参数 是数组的索引
  names2.forEach(function(item,index){
     console.log(item);
     console.log(index);
  })
  
  

2 字符串string

• chartAt() 返回指定索引的位置的字符

  var str = 'alex';
  var charset = str.charAt(1);
  console.log(charset);//l
  
  

• concat 返回字符串值，表示两个或多个字符串的拼接

  var str1 = 'al';
  var str2  = 'ex';
  console.log(str1.concat(str2,str2));//alexex
  
  

• replace(a,b) 将字符串b替换成字符串a

  var a = '1234567755';
  var newStr = a.replace("4567","****");
  console.log(newStr);//123****755
  
  

• indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样

  var str = 'alex';
  console.log(str.indexOf('e'));//2
  console.log(str.indexOf('p'));//-1
  
  

• slice(start，end) 左闭右开 分割字符串

  var str = '小马哥';
  console.log(str.slice(1,2));//马
  
  

• split(‘a’,1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度

  var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
  console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]
  
  

• substr(statr,end) 左闭右开

  var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
  console.log(str.substr(0,4));//我的天呢
  
  

• toLowerCase()转小写

  var str = 'XIAOMAGE';
  console.log(str.toLowerCase())；//xiaomage
  
  

• toUpperCase()转大写

  var str = 'xiaomage';
  console.log(str.toUpperCase());//XIAOMAGE
  
  

• trim() 去除字符串两边的空格

  var str10 = '                 alex                   ';
  console.log(str10.trim()); //alex
  
  

• toFixed() 四舍五入

  //特殊：
  var num = 132.32572;
  //四舍五入
  var newNum = num.toFixed(3);
  console.log(newNum);
  
  

3 Math内置对象

• Math.ceil() 向上取整，‘天花板函数’

  var x = 1.234;
  //天花板函数  表示大于等于 x，并且与它最接近的整数是2
  var a = Math.ceil(x);
  console.log(a);//2
  
  

• Math.floor 向下取整，‘地板函数’

  var x = 1.234;
  // 小于等于 x，并且与它最接近的整数 1
  var b = Math.floor(x);
  console.log(b);//1
  
  

• 求两个数的最大值和最小值

  //求 两个数的最大值 最小值
  console.log(Math.max(2,5));//5
  console.log(Math.min(2,5));//2
  
  

• 随机数 Math.random()

  var ran = Math.random();
  console.log(ran);[0,1)
  
  

  如果让你取100-200之间的随机数，怎么做？

  背过公式：min - max之间的随机数： min+Math.random()*(max-min);

  console.log(200+Math.random()*(500-200));
  
  

10 函数

//js中声明函数
function add(x,y){
    return x+y;
}
//js中调用函数
console.log(add(1,2));

解释如下：

• function：是一个关键字。中文是“函数”、“功能”。
• 函数名字：命名规定和变量的命名规定一样。只能是字母、数字、下划线、美元符号，不能以数字开头。
• 参数：后面有一对小括号，里面是放参数用的。
• 大括号里面，是这个函数的语句。

11 实参 arguments

function  add(){

   console.log(arguments);

   // arguments 到底是不是数组吧？？  arguments  伪数组  它有数组的索引  length 属性 但是它没有数组的方法

   // arguments.push('哈哈哈');
   // console.log(arguments);

   // arguments.forEach(function, thisArg?: any) 不能使用数组的forEach

   for(var i =0; i < arguments.length; i ++){
      console.log(arguments[i]);
   }
}

add('alex','wusir')

12 对象Object

1. 使用Object或对象字面量创建对象

   //第一种方式
   // 对象 是属性和方法
   var person =  new Object();
   console.log(person);
   console.log(typeof person);
   
   // 给对象赋值
   person.name = 'alex';
   person.age = 20;
   
   //第二种方式
   // var favfn = function(){
   //     // this 指的是当前的对象 跟python中的self类似
   //     console.log(this.name);
   // }
   var person2 = {
      name:'wusir',
      age:26,
      fav:function(){
      // this 指的是当前的对象 跟python中的self类似
      console.log(this.name);
    }
   }
   
   console.log(person2);
   person2.fav();
   
   

2. 工厂模式创建对象

   // 2.工厂模式创建对象
   function createPerson(name, age) {
       var o = new Object();
       o.name = name;
       o.age = age;
   
       return o;
   }
   
   var person1 = createPerson('alex', 20);
   var person2 = createPerson('alex2', 20);
   var person3 = createPerson('alex3', 20);
   var person4 = createPerson('alex4', 20);
   
   // instanceof 判断person1、person2是否是object类型
   console.log(person1 instanceof Object);
   console.log(person2 instanceof Object);
   
   function createFruit(name, age) {
       var o = new Object();
       o.name = name;
       o.age = age;
       return o;
   }
   
   

3. 构造函数模式创建对象

   function Person(name, age) {
       this.name = name;
       this.age = age;
       this.alertName = function() {
           alert(this.name);
       }
   }
   
   function Fruit(name, age) {
       this.name = name;
       this.age = age;
       this.alertName = function() {
           alert(this.name);
       }
   }
   
   var p1 = new Person('alex1', 20);
   p1.alertName();
   
   var f1 = new Fruit('香蕉',30);
   f1.alertName();
   
   console.log(p1 instanceof Person);
   console.log(f1 instanceof Fruit);
   
   console.log(p1 instanceof Object);
   
   

4. 原型模式创建对象

   function Person(name,age){
      this.name  = name;
      this.age = age;
   }
   
   Person.prototype.alertName = function(){   
      alert(this.name);
   };
   
   var p1  = new Person('alex',20);
   var p2  = new Person('alex2',23);
   
   // 内存地址 和值
   console.log(p1===p2); //False
   
   p1.alertName(); //alex
   p2.alertName(); //alex2
   
   

13 Date 日期对象


//返回本地时间
console.log(myDate().toLocalString());

14 JSON

JSON对象和JSON字符串转换

在数据传输过程中，JSON是以字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。例如：

• JSON字符串:

var jsonStr ='{"name":"alex", "password":"123"}' ;

• JSON对象：

var jsonObj = {"name":"alex", "password":"123"};

1. JSON字符串转换JSON对象

var jsonObject= JSON.parseJSON(jsonstr);

2. JSON对象转化JSON字符串

var jsonstr = JSON.stringify(jsonObject );

遍历JSON对象和JSON数组

1. 遍历JSON对象代码如下：

var packAlex  = {"name":"alex", "password":"123"} ;

for(var k in packAlex ){//遍历packAlex 对象的每个key/value对,k为key
   alert(k + " " + packAlex[k]);
}

2. 遍历JSON数组代码如下

var packAlex = [{"name":"alex", "password":"123"}, {"name":"wusir", "password":"456"}];

for(var i in packAlex){//遍历packJson 数组时，i为索引
   alert(packAlex[i].name + " " + packAlex[i].password);
}