JavaScript的基础知识

为什么要学习JavaScript？ 

        js是用来实现用户交互的

        有了node.js可以实现数据交互

     JavaScript是 web 开发人员必须学习的 3 门语言中的一门：

        1.HTML定义了网页的内容

        2.css描述了网页的布局

        3.JavaScript控制了网页的行为

JS的基本概念

        JavaScript是弱类型的语言。

1.引用js的方式：

        ● 将js代码编写到外部js文件中，然后通过link标签引用

            如：<link rel="stylesheet" href="css/index.css">

        ●使用<script></script>标签嵌入网页，一般放在body标签内部的底部，也可放在

           head内部，放在头部需要加window.οnlοad=function(){编写的js语句}，这个方法是

           页面加载完毕以后再执行js语句。注意：window.onload只能执行一次

        ●直接作为某个标签的事件代码，如： <button οnclick="del()">按钮 </button>

   2.变量和常量

         ●常量：一些不可改变的值，字面量可以直接使用。如1,2,3等

         ●变量：即对"值"的引用，使用变量等同于引用某个值，变量的值是可以任意改变的。

         ●声明：var作用于全局；

                      let写在区块内，作用于局部(es6新增加的)；

                      const声明一个常量（标识符为大写，赋值后就不能被改变）（es6新增的）

    3.标识符的命名规则

            标识符：在js 中所有的可以由我们自主命名的都可以称为是标识符，

                           如：变量名、函数名、属性名都是属于标识符。

            规则：标识符中可以含有字母、数字、下划线（_）、$；

                       标识符不能以数字开头；

                       标识符不能是js中的关键字和保留字,infinity（正无穷）,NaN,undefined；

                       严格区分大小写；

                      变量名最长为255个字符（实际上可以超过）

   4.数据类型

             五种基本类型:string（字符串类型 ）最明显的就是用引号包裹的；

                                    number（数值类型 ）类似于数学中的数字；

                                    boolean （布尔类型）true或false；

                                    null （空值） 空类型检测不到；

                                    underfined 未定义或者未赋值的变量

              三种引入型:object （对象）、 array （数组） 、function （函数）

      常用方法

//判断Number类型常用方法
isIntegert()  判断参数是否为整数
isNaN()       判断是否为NaN(not a number非数值)
parseFloat()  把字符串转换为浮点数
parseInt()    把字符串转换为整数
prompt()      可输入弹出框   如：=prompt('请输入内容')

//使用typeof(变量)判断来检查一个变量类型
//1.数值、字符串、布尔类型的返回类型分别为number、string、boolean
//2.函数，返回类型为function
//3.undefined，返回类型为undefined
//4.除此之外的返回类型为object。
 a="123";
 console.log(typeof(a));

//JS预测某个位置应该为布尔值，会将该位置上现有的值自动转化为布尔值除了以下6个值被转换为false，
//其他均为true
undefined、null、false、0、NaN、""(空字符串)

    5. 类型转换

           类型转换：指将一个数据类型转换为其他的数据类型

           ●  数字转换成字符串  

                方式一：调用被转换数据类型的toString（）方法。如：a.toString()，该方法不会影响到                       原变量的数据类型，它会将结果返回，注意：null和undefined没有toString方法。 

                方式二：调用String（）函数，并将被转换的数据作为参数传递给函数，使用String（）                       函数做强制转换时，对于Number和boolean实际上就是调用的toString（）方法，但                       是对于null和undefined，就不会调用toString（）方法，它会将null  直接转换为“null”                      如：String（a）     

           ● 字符串转换成数字

                方式一：调用number（）函数。   如：number（a）

                方式二：专门用来转换字符串的，

                                parseInt( )把一个字符串中有效的整数内容取出来；parseInt（a）

                                parseFloat( )把一个字符串转换为一个浮点数

                        注意：它只会把字符串开头是数字的转换，开头不是数字的会返回一个NaN

              转换进制：将一个字符串转换成十进制，parseInt(a,10)；将一个字符串转换成2、8、16                                   进 制，parseInt(a,2或8或16)

           ● 其他数据类型转换为Boolean

                  调用Boolean（a）函数。

                  数字—>布尔，除了0和NaN，其余的都是true；

                  字符串—>布尔，除了空字符串，其余都是true；

                 null和Undefined都会转换为false； 对象会转换为true

    6.JS中进制的表示

           ● 表示一个16进制的数字，则需要以0x开头。如：0xff  255

           ● 表示一个8进制的数字，则需要以0开头。如：0123

           ●  表示一个2进制的数字，则需要以0b开头，但不是所有的浏览器都支持,。如0b101

    7.运算符（也称操作符）

         ● 运算符可以对一个或多个值进行运算，比如：typeof就是运算符，可以获得一个值的类型。

         ● 任何值和字符串相加都会转换成字符串，再做拼接操作。如：123+“12”=12312

         ● 任何值和字符串除了（+）会转换成String外，其他（-、*、/）都会自动转成number

         ● a++的值等于原变量的值（自增前的值）；++a的值等于原变量的新值（自增后的值）

.        ● 任何值和NaN 做比较都是false,包括它自己本身

                  算术运算符：加（+）,减（-）,乘（*）,除（ /）,取余（%）,自增（++）,自减（--）

                  逻辑运算符 ：与（&&）、或（ ||）、 非（ !）

                  关系运算符：大于号（>）、大于等于（>=）、小于号（<）、小于等于（<=）

                  相等运算符：等于（==）、不等于（！=）、全等于（===）、不全等于（！==）

                  条件运算符（三元运算符）：      语法：表达式？语句1：语句2 。

                                                        含义：如果表达式为真，则执行语句1，否则执行语句2

        注意：

            强制转换：

                布尔值和数值进行比较的时候，强制转化为了0和1

            隐式转换：

                字符串+数值类型=字符串类型

                数值类型+布尔类型=数值类型，true转换1 false转换0

                布尔类型+字符串类型=字符串类型

  8.函数

        函数的作用：把重复的代码封装起来，在需要的时候执行

        （1）创建一个函数对象。如：var  fun=new  Function( ) （少用，基本不用）

        （2）使用函数声明来创建一个函数对象，

                 语法：function  函数名（[形参1，形参2，……，形参n]）{   语句….  }

        （3）使用函数表达式来创建一个函数

                语法：var  函数名=function（[形参1，形参2，……，形参n]）{   语句….  }；

        （4）调用函数语法：函数名字（参数 ）      

                如：fun(  )    当调用函数时，函数中封装的代码会按照循序执行

     9.数组

              数组：用一个变量名存储所有的值，并且可以用变量名访问任何一个值，数组中的每个                             元素都有自己的ID，以便它可以很容易地被访问到。

             数组的特点：●数组下标从0开始。

                                  ● 虽然创建数组时，指定了长度，但实际上数组都是可变长度的，

                                        即使超出指定长度也不会有任何问题。

                                  ●数组存储的数据可以是任何类型。

              创建数组的方式：

                 （1）创建数组不指定长度  ， 如： var  arr=new  Array（）；

                 （2）创建数组指定长度，    如：arr2=new Array(10);

                 （3）创建函数时直接赋值，  如：var  arr2=new Array （"Saab","Volvo","BMW"）；

                 （4）使用字面量来创建数组    语法：[  ]     如：var  arr=[  ]；var arr=[1,2,.3,5,10,15];

                 （5）.创建一个数组数组中只有一个元素10     如：arr=[10];

                 （6）数组中的元素可以是任意的数据类型。 如：arr=[“hello”,1,true,null,undefined];

                           也可以是对象，如：arr=[{name:”赵丽颖”},{ name:”陆贞”},{ name:”楚乔”}];

                            是一个函数  ，如：arr=[function( ){alert(1)},function( ){alert(2)}];

                          数组中也可以放数组，如下这种数组我们称为二维数组    

                                 如：arr =[[1,2,3],[3,4,5],[5,6,7]];

                数组中的方法

常用的方法案列

<script>
    var arr=new Array();
	//push()将新元素添加到一个数组的尾部，并返回数组的新长度值
    arr.push(5);
    console.log(arr);
   //sort()对数字排序
    arr.sort();
    console.log(arr);//未能成功完成排序[1, 12, 3, 4, 5]
    //解决方法
    arr.sort(rule);
    function rule(num1,num2){
        return num1-num2;
    }
    console.log(arr);//排序成功[1, 3, 4, 5, 12]

    //join()把数组所有元素放入一个字符串中，通过一个分隔符进行分割
    arr = [2021,8,23];
    let result = arr.join('/');
    console.log(result);//2021/8/23

    // splice()可以对数组元素做删除、插入等多种操作
    // 从数组中间删除元素splice(开始位置,删除元素长度)
    arr=[1,2,3,4,5,6,7];
    arr.splice(0,3);
    console.log(arr);//[4, 5, 6, 7]

    //在数组中间插入元素：splice(开始位置,删除元素长度,新插入元素… …)
    arr=[1,2,3];
    arr.splice(1,0,'a','b','c');
    console.log(arr); [1, "a", "b", "c", 2, 3]

    //替换数组中某个元素：splice(开始位置,要替换的元素长度,替换元素… …)
    arr=[1,2,3];
    arr.splice(1,1,'a');
    console.log(arr);//[1, "a", 3]
</script>

            遍历数组       

<script>
	//遍历数组
        let arr =[1,2,3,4];
        for(let i=0;i<arr.length;i++){
            console.log(arr[i])
        }
</script>