JavaScript基础简述

作者: 老衲灬 | 来源:发表于2018-07-28 20:10 被阅读8次

一、Js概述

Js内容主要分两大块：

1、语言结构：主要是语言规则及内置对象
2、宿主环境提供的API：根据宿主环境不同而不同，以浏览器为例，分为三类：浏览器控制类、DOM操作类、网络控制类

二、Js的三种书写方式

1、行内方式

<input type="button" value="按钮" onclick="alert('Hello World')">

2、标签方式

<head>
    <script type="text/javascript">
        alert('Hello World');
    </script>
</head>

3、外部文件引入方式

<!-- 注意：使用外部引入方式时，标签内不写代码 -->
<script src="./main.js"></script>

main.js中的代码如下：

//Js代码最后可以不写分号
//如果不写分号就必须要回车

//弹框显示内容
alert('Hello World')

//声明变量
//命名规则同PHP
//注意：可含有$符号，但不能含有其它特殊符号
var a = 10
//可同时声明多个变量
var a,b,c
var name="张三",age=20

//打印变量a，需要在控制器内查看
console.log(a)

//打印变量a的类型
console.log(typeof a)

结果如下：

三、Js数据类型

【异：PHP数据类型】字符串型、整型、浮点型、布尔型、数组型、对象、资源、null

Js数据类型：

第一种分类：
字符串、数值（number）、布尔、对象、null、undefined

第二种分类：
简单类型：字符串、数值、布尔
复合类型：对象（广义对象和狭义对象）、数组、函数
特殊类型：null、undefined

1、数值范围

最小值：Number.MIN_VALUE  // 这个值为： 5e-324  5乘以10的-324次方
最大值：Number.MAX_VALUE  // 这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

2、浮点数

浮点数的精度问题：
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
如要进行浮点数大小比较，应转化为整数再做比较。

3、字符串

字符串长度：

<script type="text/javascript">
    //声明字符串类型
    var str = "Hello World";
    //字符串的链接，使用+
    str += "和尚";
    //打印字符串长度
    console.log(str.length);
</script>

图片.png

【注意：有关"+"】如图：

PHP语言中

Js语言中

四、Js数据类型转换

<script type="text/javascript">
    var num = 100;
    //转换成字符串类型
    //方式1：
    console.log(num.toString());
    //方式2：
    console.log(String(num));

    //转换成数值类型
    // Number()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN
    var a = Number('1');        //1
    var b = Number(1);          //1
    var c = Number('c');        //NaN
    var d = Number(null);       //0
    var e = Number(undefined);  //NaN
    console.log(a,b,c,d,e);     // 1 1 NaN 0 NaN

    // 如果第一个字符是数字会解析,直到遇到非数字结束
    // 如果第一个字符不是数字或者符号就返回NaN
    var a = parseInt('1.2df');
    var b = parseInt(1);
    var c = parseInt('c12');
    var d = parseInt(null);
    var e = parseInt(undefined);
    console.log(a,b,c,d,e); //1 1 NaN NaN NaN

    // parseFloat() 把字符串转换成浮点数
    // parseFloat()和parseInt非常相似，
    // 不同之处在与parseFloat会解析第一个 . 遇到第二个.或者非数字结束
    // 如果解析的内容里只有整数，解析成整数
    var a = parseFloat('1.2df');
    var b = parseFloat('1.3.4');
    var c = parseFloat('c12');
    var d = parseFloat(null);
    var e = parseFloat(undefined);
    console.log(a,b,c,d,e); //1.2 1.3 NaN NaN NaN

    // 0、''(空字符串) 、null、 undefined 、NaN 会转换成false  其它都会转换成true
    var a = Boolean('0');
    var b = Boolean(0);
    var c = Boolean('1');
    var d = Boolean(null);
    var e = Boolean(undefined);
    var f = Boolean(NaN);
    console.log(a,b,c,d,e,f); //true false true false false false
</script>

五、Js逻辑运算符

<script type="text/javascript">
    // JS逻辑运算中的逻辑或和逻辑与的运算结果：
    // 决定整个表达式的子表达式的值
    //【注意：在PHP中返回的是布尔值 例：$a="abc"&&1; 则$a为布尔值true】
    var a = 1;
    var b = 2;
    var c = 0;
    console.log(a || b);        //1
    console.log(b || a);        //2
    console.log(c && a);        //0
    console.log(a || c && b);   //1

    //注意与PHP的异同
    console.log("abc"==1);      //false    //同
    console.log("abc"==0);      //false    //PHP中是true
    console.log("abc"=="def");  //false    //同
    console.log("abc"==10);     //false    //同
</script>

六、Js数组

<script type="text/javascript">
    //Js数组
    //1、声明索引数组
    var arr = ["张三",18,"山东"];
    document.write(arr[1]);     //18
    document.write(arr[3]);     //undefined
    //2、使用内置的构造函数创建数组
    var arr = new Array(1,2,3);
    //注意：Js中只有索引数组 所以无法使用foreach遍历数组
</script>

七、Js函数

<script type="text/javascript">
    // Js函数
    //声明及调用函数：
    //1、关键字声明
    function fn1(/*形参1,形参2 …*/){
        //函数体
        document.write("yes");
        /*return 返回值*/;
    }
    //调用函数
    fn1();

    //2、表达式声明（匿名函数）
    var fn2 = function(/*形参1,形参2 …*/){
        //函数体
        document.write("ok");
        /*return 返回值*/;
    } 
    //调用函数
    fn2();

    //3、自执行函数（匿名函数无变量表示，则自调用）：封装作用域
    (function(){
        //函数体
    })();

    //关于返回值：
    //1、如果函数没有使用return语句，那么函数有默认的返回值：undefined
    //2、如果函数使用return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
</script>

八、Js作用域

1、全局变量和局部变量

在Js中有两个作用域
1）全局作用域
变量在全局作用域中，就被称为全局变量
2）局部作用域（函数内部）
变量在局部作用域中，就被称为局部变量
访问权限：
全局作用域不能访问局部变量
局部作用域可以访问全局变量

2、Js代码的运行

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。
JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析(编译)过程和代码执行过程

预解析过程：

①语法检查，如果有错误，直接停止后续步骤不再运行。
②把变量和函数的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值和调用。
③先提升变量后提升函数，如果函数和变量同名，则被替换；

代码执行过程：

变量的赋值，函数的调用，循环判断等，根据代码由上往下顺序执行；

var a = 10;
function fn(){
    console.log(a); //10
}
fn();

var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a); //undefined
    console.log(b); // 9
    var a = '123'; 
}

// 如果变量和函数同名的话，函数优先做提升
console.log(a); //function a(){ console.log('abc'); }
function a() {
  console.log('abc');
}
var a = 1;
console.log(a); //1

3、变量提升和函数提升

变量提升
定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。
函数提升
JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

console.log(a); //a is not defined

//变量提升
console.log(a); //undefined
var a = 10;

//函数提升
fn();
function fn(){
    console.log(12); //12
}

//函数提升在前，示例：
var fn = 10;
function fn(){
    console.log(12); //12
}
fn();   //f is not a function
// 由于函数提升在前，所以被变量声明替换了
// 执行阶段，变量被复制为1，不再是一个函数

4、作用域链