JavaScript基础

JavaScript基础

一、JavaScript介绍

1、JavaScript是什么

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScript的关系就像张雨和张雨生的关系，只是名字很像，没有任何关系。

Java 服务器端的编程语言

JavaScript 运行在客户端(浏览器)的编程语言

JavaScript是一种运行在***客户端*** 的***脚本语言***

JavaScript是一门脚本、解释性、动态类型、基于对象的语言

JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

脚本语言与编译语言区别：

编译语言：需要把代码翻译成计算机所认知的二进制语言，才能被执行。

脚本语言：无需被编译，直接在浏览器上运行，执行的平台是基于浏览器（JavaScript引擎）（任何一个浏览器）

2、JavaScript与CSS、HTML区别

1. HTML：提供网页的结构，提供网页中的内容

2. CSS: 用来美化网页

3. JavaScript: 可以用来控制网页内容，给网页增加动态的效果

二、JavaScript变量

数据的操作（存储、读取）都是在内存中的操作的，JavaScript中存储数据都是使用变量的方式：名字：值（数据）。数据存储到内存中之后，可以通过变量名来读取数据（变量的作用）。

JavaScript中存储数据都是使用var关键字声明变量的，JavaScript是一门弱类型的语言，不像java强类型语言那样使用专门的关键字（int、float、double、Boolean等）来声明区分变量数据类型；但JavaScript也是区分的数据类型的，JavaScript是根据变量中的值来确定数据类型的。

//变量声名
var  str ="hello world!";  //字符串类型
var  num = 123;  //number类型，数型

1、变量声明

// 变量声明
var str;
//有变量名字，并没有变量值，变量的声明只是在内存中开辟了一个内存空间，内存空间中没有值

//一次声明多个变量
var a, b, c, d, e;

2、变量初始化

变量的初始化，是变量声明同时并给变量赋值，内存中开辟了变量的内存空间，并给内存空间中存入值。

//变量初始化
var number = 1;
var str = "hello world!"
//初始化一个对象
var myobj = new Object();
var flag = true;
var null = null; //相当于null，是有值得，该变量值就是null

//变量声明并赋值
<script>
    //声名变量
    var num1, num2,num3;
    //变量赋值
    num1 = 10;
    num2 = 20;
    num3 = 30;
    console.log(num1);
    console.log(num2);
    console.log(num3);
</script>

3、变量命名规范（JavaScript代码规范）

1、JavaScript变量声明都使用关键字var ；

2、JavaScript的每一行代码结束，都应该使用分号（;）来结束，这个不是规定，只是规范；

3、JavaScript是区分大的：var N =1；var n=1; N不等于n；

4、JavaScript中的字符串可以使用单引号，也可以使用双引号。

5、JavaScript变量名的规范：

​ – 1.变量名要有意义

​ --2.变量名有一定规范：一般为字母，可以使用“ $ ”符号，“_”下划线开头，中间或后面可以使用“$”、字母数字；

​ --3.变量名一般都是小写的；

​ --4.变量如果是多个单词组成，一般首个单词的首个字母小写，其他单词首字母大写，这个称之为：驼峰命名法。var bigNumber;

4、变量值交换

三种方式：

第一种：使用第三方变量进行交换

//变量值交换
 var num1 = 10;
 var num2 = 20;
 //第一种方式：使用第三方变量进行交换
 //将num1中的值取出赋给temp
 var temp = num1;
 //将num2的值赋给num1
 num1 = num2;
 //将temp中的值赋给num2
 num2 =temp;
 console.log(num1);
 console.log(num2);

第二种：一般适用于数字交换

 //第二种方式：一般适用于数字交换
 var num1 = 10;
 var num2 = 20;
 //num1和num2中的值取出来相加，重新赋给num1
 num1 = num1 + num2;
 //num2中的值取出来，新的num1减去num2，等到的值重新赋给num2（此时的num2等于num1）
 num2 = num1 - num2;  //10
 //num1变量的值和num2的值取出来，相减重新赋给num1
 num1 = num1-num2;   //20
 console.log(num1);
 console.log(num2);

第三种：位运算

 //第三种：位运算
num1 = 10;
num2 = 20;
num1 = num1 ^ num2;
num2 = num1 ^ num2;
num1 = num1 ^ num2;
console.log(num1, num2);

三、JavaScript数据类型

JavaScript原始数据类型：number、string、Boolean、null、undefined、Object

number：数字类型（整数和小数）
string：字符串类型（值都是使用单引号或双引号括起）
Boolean：布尔型（true与false）（1真与0假）
null：空类型，值只有一个null
undefined：未定义，值只有一个undefined
什么情况下结果是undefined？
1、变量声明，没有赋值
2、函数没有明确的返回值，如果接收了，结果也是undefined
3、一个变量undefined和一个数字进行计算，结果NaN：not a number不是一个数字
Object：对象

如何变量的数据类型：

console.log(typeof 变量名);
console.log(typeof(变量名));

1、数据类型转换

//数据类型转换
//1、其他类型转数字类型
//a、parseInt()：转整
console.log(parseInt("10")); //字符串转为整数10
//b、parseFloat()：转为小数
console.log(parseFloat("10.69")); //字符串转为小数10.69
//c、Number()：转为数字，比上面两种严格
console.log(Number("10"));   //字符串10转为数字10
console.log(Number("10a"));   //无法转
//2、其他类型转字符串类型
//a、.toString()；
num = 10;
console.log(num.toString());
//b、String();
console.log(String(num));
//3、其他类型转布尔类型
//Boolean(值)
console.log(Boolean(1)); //true
console.log(Boolean(0)); //false
console.log(Boolean(11)); //true

2、运算符

操作符，用于变量计算。

a、算术运算符：+ - * / %（加减乘除取余）

b、一元运算符：++ --（只需一个操作数）

//++(--)在操作数后面
1++;
3--;
// ++(--)在操作数的前面
++1;
--3;

//两者的区别：
//1++：先使用操作数，再自加
//++1：操作数先自加，再使用

c、二元运算符：需要两个操作数

d、三元运算符：放在if语句讨论

e、复合运算符：+= -= *= /=

var num = 10;
num = num + 10;
//等同于
num += 10;

f、关系运算符：> 、< 、>=、<=、(不严格)、=（严格的）、!=、!==

//不严格：只判断值
//严格的：既判断值，又判断类型
var a ="5";
var b =5;
console.log(a==b);//=true,值相同，类型不相同,返回true
console.log(a===b);//false,值相同，类型不相同,返回false

g、逻辑运算符：

&&：逻辑与 --并且
||：逻辑或 --或者
!：逻辑非  --取反

四、流程控制

流程控制分为三种：顺序结构，分支结构、循环结构。

顺序结构：代码从上到下按照顺序执行；

分支结构：if语句，if-else语句 ，if-else if -else语句，switch-case语句，三元运算表达式；

循环结构：while循环，do-while循环，for循环；

1、if语句(判断)

if(条件表达式){
    代码块;
}
//条件表达式为true，则执行里面的代码块，反之为false，则不执行里面的代码块

if(条件表达式1){
    代码块1;
}else if(条件表达式2){
    代码块2;
}else{
    代码块3;
}
/*条件表达式1为true，则直接执行代码块1，下面的条件表达式将不再进行判断；如果为false，则往下继续进行判断表达式，如果为true，则执行相应的的代码块，反之继续进行往下判断；如果所有的表达式都为false，则执行else{}中的代码块
*/

//三元表达式:
//语法：var 变量 = 表达式1?表达式2:表达式3;
//执行的顺序：表达式1的结果是true还是false；如果是true，则执行表达式2，然后将表达式2结果赋给变量；
//如果为false,则执行表达式3，然后将表达式3的结果赋给变量。
//求最大值：
var x = 10;
var y = 20;
var result = x>y?x:y;//result=20

if(表达式){
   代码块1;
}else{
    代码块2;
}
//判断表达式，如果为true，则执行代码块1，后面的将不再判断执行；如果为false，则执行代码块2。

2、switch-case

也是分支语句

switch(表达式/值/变量){
    case 值1: 代码块1;break;
    case 值2: 代码块2;break;
    case 值3: 代码块3;break;
    case 值4: 代码块4;break;
    case 值5: 代码块5;break; 
    case 值6: 代码块6;break;
    default:代码块7;        
}
//取case中的值与switch中的表达式/值/变量进行比较，一旦case中的值与switch中的表达式匹配对上，则执行对应case中的代码块，其他的case中的值不再比较，且代码块也不再执行，直接break跳出；如果都没有匹配上，则执行default中的代码块。

3、while与do-while循环语句

while循环语句

while(条件表达式){
   代码块;   
}
//条件表达式为true，则循环执行里面的代码块，为false时，则结束循环

var i = 1;
while(i<5){
    console.log("我还是小于5");
    i++;
}
//i与5进行比较，为true，执行while循环体中的代码，i自动加1；i为5时，结束循环

do-while循环语句

do{
    
}while(条件表达式);
//先执行一次循环体，然后进行条件判断是否成立；不成立，则跳出循环体；成立则再执行循环体，然后进行条件判断是否成立，以此类推。
//do-while至少执行一次循环体
var i = 1;
do{
    console.log("我还是小于5");
    i++;
}while(i<5);

4、for循环

//for循环
for(表达式1;表达式2;表达式3){
    循环体;
}

for(var i = 0; i<5; i++){
    循环体;
}
//执行顺序：
//i赋值为0,i与5进行比较，为true，则执行循环体，然后i++，再进行判断；为false时，直接结束循环。

五、break与continue关键字

1、break关键字

break关键字如果在循环中使用，遇到break，则立即跳出当前所在的循环。

//break： 循环中，如果遇到break关键字，则立即跳出当前所在的循环
for (var i = 0 ; i<=7; i++) {
    console.log("我还是小于7！");
    if (i == 4){
        break;
    }
}
//上面循环输出5次，当i==4时，会执行break关键字，则会立即跳出该循环

for (var i = 0; i<=7; i++){
        for (var j =0;j<=2;j++){
            console.log("j:",j);
            if (j==1){
                break;
            }
        }
        console.log("i:",i);
  }

//break只在 for (var j =0;j<=2;j++)循环中，当j==1时，只跳出j的循环中

2、continue关键字

在循环中如果遇到continue关键字，则结束该次循环，开始下一个循环，不会跳出终止该循环。

//continue：循环中直接开始下一个循环
 for (var i = 0;i<=7; i++){
     if (i==2){
         continue;
     }
     console.log("i:",i);
 }
//结果：当i==2时，跳过了i=2的循环，开始了新的循环
i: 0
i: 1
i: 3
i: 4
i: 5
i: 6
i: 7

六、数组

数组：一组有序的数据；

作用：一次可以存储多个数据；

数组的下标从0开始；数组的元素个数=数组的长度；

1、数组定义：两种方式

1、通过构造函数创建数组

语法：var 数组名 = new Array();

//创建数组
//通过构造函数定义数组
var arr = new Array(5);
//设置数组值
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
arr[3] = 4;
arr[4] = 5;
var result = arr[0]; //获取arr数组下标为0的值
var long = arr.length; //获取arr数组的长度
console.log(arr);
//通过Array（）函数来创建数组，Array(5):表示长度为5的数组

构造函数创建数组该注意的问题：

1、如果Array（一个数字），这个数字代表该数组的长度；
例如：var arr  = new Array(5); //创建一个长度为5的空数组。
2、如果Array（1,2,3,5），代表创建一个长度为4的数组，从0到3下标的数组的值为：1,2,3,5

2、通过字面量的方式创建数组

语法：var 数组名 = [值1,值2,值3,…];

直接创建赋值

//通过字面量创建数组
var arr = [0,1,2,3];
console.log(arr);

数组需要注意的问题：

数组中存储的数据类型可以不一样；

var arr = [10,'arr',undefined,null];//也是可以的

2、数组遍历

通过for循环遍历数组

var arr = [0,1,2,3,2,5];
//小于数组的长度
for(var i = 0; i<arr.length;i++){
    console.log(arr[i]);
}

3、数组案例

//案例1：求数组中所有元素的和
var arr1 = [10,20,30,40,50];
var sum1 = 0;
for (var i =0;i<arr1.length;i++){
    sum1+=arr1[i];
}
console.log(sum1);

//案例2：求数组中所有元素的平均值
 var arr2 = [1,2,3,4,5];
 var sum2=0;
 for (var i =0;i<arr1.length;i++){
     sum2+=arr2[i];
 }
 console.log(sum2/arr2.length);

//案例3：求数组中所有元素的最大值
var arr3 = [1,2,5,10,100];
//假设max变量中存储的是最大值
var max=arr3[0];
for (var i = 0; i<arr3.length;i++){
    //进行判断比较：假如arr[i]比max大，就将arr[i]赋给max，如果比max小，arr[i]就不赋给max，
    // 不用管
    if (max<arr3[i]){
        max = arr3[i];
    }
}
//循环结束，max中的值就是最大了
console.log("最大值：",max);

//案例4：求数组中所有元素的最小值
var arr4 = [1,2,5,10,100];
var min = arr4[0];
for (var i = 0; i<arr4.length;i++){
    if (min>arr4[i]) {
        min = arr4[i];
    }
}
console.log("最小值：",min);

 //案例5：数组倒序
var arr5 = [1,2,3,4,5];
for (var i =arr5.length-1;i>=0;i--){
    console.log(arr5[i]);
}

 //案例6：把数组中的每一元素用|拼接到一起产生一个字符串输出
var names = ["鸣人","雏田","佐助","卡卡西","小樱"];
var str = "";
for (var i = 0; i<names.length;i++){
    str+=names[i]+"|";
}
console.log(str);

//案例7：去掉数组中的重复的0,把其他数据放在一个新的数组
var arr7 =[0,1,5,7,0,8,9];
var newArr = [];
for (var i = 0;i<arr7.length;i++){
    if (arr7[i]!=0) {
        newArr[newArr.length] = arr7[i];
    }
}
console.log(newArr);

数组中冒泡排序（重点）

将5,4,3,2,1从小到大排序
5,4,3,2,1
从5开始与后面各个数进行比较，如果5比后面的数大，就互相交换位置，如果是小于，就停止比较。
第一轮比较（第一次循环）：4,3,2,1,5     比较4次：arr.length-1-0
第二轮比较（第二次循环）：3,2,1,4,5     比较3次：arr.length-1-1
第三轮比较（第三次循环）：2,1,3,4,5     比较2次：arr.length-1-2
第四轮比较（第四次循环）：1,2,3,4,5     比较1次：arr.length-1-3



将6,7,2,5,1从小到大排序
6,7,2,5,1
第一轮比较（第一次循环）：2,7,5,1,6     比较4次：arr.length-1-0
第二轮比较（第二次循环）：2,5,1,6,7     比较3次：arr.length-1-1
第三轮比较（第三次循环）：1,5,2,6,7     比较2次：arr.length-1-2
第四轮比较（第四次循环）：1,2,5,6,7     比较1次：arr.length-1-3


//代码实现冒泡排序
//案例8：冒泡排序
var arr8 =[6,7,2,5,1];
var temp =0;
//控制比较的轮数
for (var i =0;i<arr8.length-1;i++) {
    //每轮比较的次数
    for (var j =0;j<arr8.length-1-i;j++){
        if (arr8[j]>arr8[j+1]) {
            temp = arr8[j];
            arr8[j]= arr8[j+1];
            arr8[j+1] =temp;
        }
    }
}
console.log(arr8);