前端基础之JavaScript基础【一】

【1】、JavaScript 的历史

1992年底，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫做Mosaic。
- 这是人类历史上第一个浏览器，从此网页可以在图形界面的窗口浏览。
- 但是该浏览器还没有面向大众的普通用户。
1994年10月，NCSA的一个主要程序员Jim Clark，成立了一家Netscape通信公司。
- 这家公司的方向，就是在Mosaic的基础上，开发面向普通用户的新一代的浏览器Netscape Navigator。
1994年12月，Navigator发布了1.0版，市场份额一举超过90%。
Netscape 公司很快发现，Navigator浏览器需要一种可以嵌入网页的脚本语言，用来控制浏览器行为，因为当时，网速很慢而且上网费很贵，有些操作不宜在服务器端完成。
- 比如，如果用户忘记填写“用户名”，就点了“发送”按钮，到服务器再发现这一点就有点太晚了，最好能在用户发出数据之前，就告诉用户“请填写用户名”。
- 这就需要在网页中嵌入小程序，让浏览器检查每一栏是否都填写了。
管理层对这种浏览器脚本语言的设想是：
- 功能不需要太强，语法较为简单，容易学习。
1995年5月，Netscape 公司只用了10天，就设计完成了这种语言的第一版。
Netscape 公司的这种浏览器脚本语言，最初名字叫做 Mocha，
- 1995年9月改为LiveScript。
- 12月，Netscape公司与Sun公司（Java语言的发明者和所有者）达成协议，后者允许将这种语言叫做JavaScript。
- 这样一来，Netscape公司可以借助Java语言的声势，而Sun公司则将自己的影响力扩展到了浏览器，索引并不是因为JavaScript本身与Java语言有多么深的关系才叫做javaScript。
1996年3月，Navigator 2.0 浏览器正式内置了 JavaScript 脚本语言，也就是可以直接在浏览器中运行JavaScript 脚本语言。
JS的作用：
- 简单来说可以处理前端的一些简单的业务逻辑和用户行为、网页事件的触发和监听。

【2】、JS的引入方式

1 直接编写
    <script>
        console.log('hello yuan')
    </script>
2 导入文件
    <script src="hello.js"></script>

【3】、基本语法

js是一门弱类型的编程语言,属于基于对象和基于原型的脚本语言.

// 变量
// 数据类型
// 运算符
// 流程控制语句
// 函数

【3.1】变量

格式:
	  // 方式1 先声明再赋值
	  var 变量名;   // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
      变量名 = 变量值;

	  // 方式2 声明并赋值
      var 变量名 = 变量值;

    // 方式3 一行可以声明多个变量.并且可以是不同类型
    var name="yuan", age=20, job="lecturer";

1、声明变量时可以不用var. 如果不用var 那么它是全局变量

2、变量命名,首字符只能是字母,下划线,$美元符三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写

【3.2】注释

// 单行注释

 /*
   多行注释
 */

【3.3】语句分隔符

var a = 1;   // 分号和换行符作为语句分隔符号
var b = 2;
console.log(a,b);

【4】、JS 基本数据类型

【4.1】、数字类型

JavaScript 没有整型和浮点型，只有一种数字类型，即number类型。

var x = 10;
var y = 3.14;
console.log(x,typeof x);  // 10 "number"
console.log(y,typeof y);  // 3.14 "number"

【4.2】、字符串

字符串创建(两种方式)

变量 = “字符串”
字串对象名称 = new String (字符串)

var str1="hello world"; //推荐
var str1= new String("hello word");

// 字符串对象的操作
var str = "hello"; // 这就是字符串对象
console.log(str);

// 字符串对象内置属性
// length 计算字符串的长度
console.log( str.length );

// 字符串对象内置方法
// toUpperCase();  字母大写转换
// toLowerCase();  字母小写转换

console.log( str.toUpperCase() );
console.log( str.toLowerCase() );

// indexOf 获取指定字符在字符串中第一次出现的索引位置
// 字符串也有下标,也可以使用中括号来提取字符串的指定字符
console.log(str[1]); // e
console.log( str.indexOf("e") ); // 1

// match  正则匹配
// js中也存在正则,正则的使用符号和python里面是一样的
//语法：/正则表达式主体/修饰符(可选)
//修饰符：
	//i:执行对大小写不敏感的匹配。
	//g:执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。

var str = "我的电话是: 13312345678,你的电话: 13512345678";
var ret = str.match(/\d{11}/g); // 匹配,提取数据
console.log(ret);

// replace  正则替换
var str = "我的电话是: 13512345678";
var ret = str.replace(/(\d{3})\d{4}(\d{4})/,"$1****$2"); // 正则 的 捕获模式  $1$2表示的正则中第一个和第二个小括号捕获的内容
console.log(ret);
// search  正则查找,如果查找不到,则返回-1
var str = "hello";
var ret = str.search(/l/);
console.log(ret);

// 切片,当前方法支持使用负数代表倒数下标
// slice(开始下标)   从开始位置切到最后
// slice(开始下标,结束下标)  从开始下标切到指定位置之前
var str = "helloworld";
var ret = str.slice(3,6); // 开区间,不包含结束下标的内容
console.log(ret); // low
var ret = str.slice(5);
console.log(ret); // world
var ret = str.slice(2,-1);
console.log(ret); // lloworl


// split   正则分割,经常用于把字符串转换成数组
var str = "广东-深圳-南山";
var ret = str.split("-");
console.log( ret );

// substr  截取
var str = "hello world";
var ret = str.substr(0,3);
console.log(ret); // hel

// trim    移除字符串首尾空白
var password = "    ge llo   ";
var ret = password.trim();
console.log(password.length); // 13
console.log(ret.length);  // 6

【4.3】、布尔值

1、Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
2、Boolean值主要用于JavaScript的控制语句

console.log(true);
console.log(false);
console.log(typeof true);
console.log(true == 1);
console.log(true + 1);
console.log(false + 1);

【4.4】、空值（Undefined和Null）

undefined类型

undefined类型只有一个值，即 undefined。

(1) 当声明的变量未初始化时，该变量的默认值是 undefined。

(2)当函数无明确返回值时，返回的也是值 undefined;

null类型

另一种只有一个值的类型是 null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 js 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

【4.5】、类型转换

js中,类型转换有2种.一种就是强制转换,一种就是自动转换.

因为js是一门弱类型的脚本语言,所以变量会在运算符的运行要求,有时候根据运算符的要求,进行自动转换的.

强制转换

 // 1. 转换数据为数值类型
// parseInt     把数据转换成整数
// parseFloat   把数据转换成小数
var box1 = "100";     // 转换会成功
var ret = parseInt(box1);
console.log(box1);
console.log(ret);
//
var box2 = "3.14";
console.log( parseFloat(box2) ); // 3.14
// 对于转换数值,如果转换失败的话,则结果为 NaN ,是 Not a Number ,但是NaN的类型也是number类型

// 2. 转换数据为字符串
  // 变量.toString()
  // String(数据)
var box4 = 3.14;
var ret = box4.toString();
console.log(ret);

自动转换

// 所谓的自动转换,其实弱类型中的变量会根据当前代码的需要,进行类型的自动隐式转化
var box1 = 1 + true;
// true 转换成数值,是1, false转换成数值,是0
console.log(box1); // 2

var box2 = 1 + "200";
console.log(box2); 
// ‘1200’ 原因是,程序中+的含义有2种,第一: 两边数值相加, 第二: 两边字符串拼接.但是在js中运算符的优先级中, 字符串拼接的优先级要高于正数    
// 值的加减乘除,所以解析器优先使用了+号作为了字符串的拼接符号了,因为程序就需要+号两边都是字符串才能完成运算操作,因此1变成字符串了。最终的结果就是 "1" +"200"

var box3 = 1 - "200";
console.log(box3); // -199;因为-号中表示的就是左边的数值减去右边的数值,因此程序就会要求"200"是数值,因此内部偷偷的转换了一下

【4.6】、原始值和引用值

// 初始值类型
var a = "yuan";
var b = a;
a = "alvin";
console.log(a);//alvin
console.log(b);//yuan

// 对象类型
var arr1=[1,2];
arr2 = arr1;
arr1.push(3);
console.log(arr1)// [1,2,3]
console.log(arr2);//[1,2,3]

arr1=[4,5];
console.log(arr1);//[4,5]
console.log(arr2);//[1,2,3]

【5】、运算符

运算符

/*
//算术运算符
   +   数值相加
   -   数值相减
   *   数值相乘
   /   数值相除
   %   数值求余
   **  数值求幂
   a++ 变量被使用后自增1 
     var a = 10
     print(a++) 输出结果为10
     print(a) 就是11
   ++a 变量被使用前自增1  
     var b = 10
     print(++b) 输出的就是11
   b-- 变量被使用后自减1   
   --b 变量被使用前自减1   
   
//赋值运算符
   =
   +=
   -=
   *=
   /=
   %=
   **=

//比较运算符,比较的结果要么是true, 要么是false
	>   大于
	<   小于
	>=  大于或者等于
	<=  小于或者等于
	!=  不等于[计算数值]
	==  等于[计算]

  !== 不全等[不仅判断数值,还会判断类型是否一致]
	=== 全等[不仅判断数值,还会判断类型是否一致]

//逻辑运算符
  &&   并且  and    两边的运算结果为true,最终结果才是true
  ||   或者  or     两边的运算结果为false,最终结果才是false
  !    非    not    运算符的结果如果是true,则最终结果是false ,反之亦然.
 

//条件运算符[三目运算符]
	 条件?true:false
	 例如:
	      var age = 12;
        var ret = age>=18?"成年":"未成年"; 
        console.log(ret);
 */

【6】、流程控制语句

编程语言的流程控制分为三种：

顺序结构(从上向下顺序执行)
分支结构
循环结构

之前我们学习的方式就是顺序执行，即代码的执行从上到下，一行行分别执行。

例如：

console.log("星期一");
console.log("星期二");
console.log("星期三");

【6.1】、分支结构

if 分支语句

 if(条件){
     // 条件为true时,执行的代码
   }
   
   if(条件){
     // 条件为true时,执行的代码
   }else{
     // 条件为false时,执行的代码
   }
   
   if(条件1){
     // 条件1为true时,执行的代码
   }else if(条件2){
     // 条件2为true时,执行的代码
   
   }....
   
   }else{
     // 上述条件都不成立的时候,执行的代码
   }

switch语句

switch(条件){
      case 结果1:
           满足条件执行的结果是结果1时,执行这里的代码..
           break;
      case 结果2:
      	   满足条件执行的结果是结果2时,执行这里的代码..
      	   break;
      .....
      default:
           条件和上述所有结果都不相等时,则执行这里的代码
   }

switch('a'):
  case 1: //只会会执行case 1下面的xxx代码
  	xxx
  	break;
  case 2:
  	xxx
  	break;
  default:
  	xxx
  	break

1、switch比if else更为简洁

2、执行效率更高。switch…case会生成一个跳转表来指示实际的case分支的地址，而这个跳转表的索引号与switch变量的值是相等的。从而，switch…case不用像if…else那样遍历条件分支直到命中条件，而只需访问对应索引号的表项从而到达定位分支的目的。

3、到底使用哪一个选择语句，代码环境有关，如果是范围取值，则使用if else语句更为快捷；如果是确定取值，则使用switch是更优方案。

【6.2】、循环语句

while循环

   while(循环的条件){
      // 循环条件为true的时候,会执行这里的代码
   }

循环案例：

 var count = 0
 while (count<10){
     console.log(count);
     count++;
 }

for循环

   
   // 循环三要素
   for(1.声明循环的开始; 2.条件; 4. 循环的计数){
      // 3. 循环条件为true的时候,会执行这里的代码
   }
   
   for(循环的成员下标 in 被循环的数据){
      // 当被循环的数据一直没有执行到最后下标,都会不断执行这里的代码
   }

循环案例：

// 方式1
for (var i = 0;i<10;i++){
	console.log(i)
}

// 方式2
var arr = [111,222,333]
for (var i in arr){
    console.log(i,arr[i])
}

退出循环（break和continue）

 for (var i = 0;i<100;i++){
           if (i===88){
               continue  // 退出当次循环
               // break  // 退出当前整个循环
           }
           console.log(i)
       }