[JavaScript知识库][前端学习笔记]JavaScript基础知识

一、JS三种书写位置

1. 行内式
   直接写到元素的内部。

<input type="button" value="唐伯虎" onclick="alert('秋香姐')">

2. 内嵌式
   写在script标签内部。

<script>
     alert('沙漠骆驼');
</script>

3. 外部式
   通过script标签引入外部js文件。

<script src="my.js"></script>

二、输入输出

1. 输入

// 输入框
prompt('请输入您的年龄');

2. 输出

// 输出展示给用户
alert('计算的结果是');
// 控制台输出 给程序员测试用的  
console.log('我是程序员能看到的');

三、变量

1. 变量命名
   变量名可以由字母、数字、下划线、美元符号组成，但不能数字开头，不能和关键字、保留字重名，例如name。变量一般用小驼峰命名法，最好要有实际意义。
2. 变量语法

// 1 只声明不赋值 
var sex;
console.log(sex); // undefined
// 2 不声明 直接赋值使用
qq = 110;
console.log(qq); // 不报错，但不提倡...

四、数据类型

1. 分类
   ·简单数据类型：
   1）Number 数值型，包含整形、浮点型，默认值0
   2）Boolean 布尔型，默认值false
   3）String 字符串，默认值“”
   4）Undefined 声明了变量没有给值，例如var a;
   5）Null 声明了变量为空值，例如var a=null;
   ·复杂数据类型：
   6）Object 对象
2. JS是动态语言，变量的数据类型是可以变化的。

var x = 10; // x 是数字型 
x = 'pink'; // x 变成字符串型

3. 举例

// 1）Number 数值型
        // 1. 八进制0~7 数字前面加0表示八进制
        var num1 = 012;
        console.log(num1); // 10
        // 2. 十六进制0~9 a~f 数字的前面加0x表示十六进制
        var num2 = 0xa;
        console.log(num2); // 10
        // 3. 数字型的最大值
        console.log(Number.MAX_VALUE);
        // 4. 数字型的最小值
        console.log(Number.MIN_VALUE);
        // 5. 无穷大
        console.log(Number.MAX_VALUE * 2); // Infinity 超过最大值
        // 6. 无穷小
        console.log(-Number.MAX_VALUE * 2); // -Infinity 超过最小值
        // 7. 非数字
        console.log('啦啦啦' - 100); // NaN
        // 8. 判断非数字 isNaN()
        console.log(isNaN(12)); // false
        console.log(isNaN('啦啦啦')); // true
// 2）Boolean 布尔型
        var flag1 = true;
        var flag2 = false;
        console.log(flag1 + 1); //=2 true当1来看
        console.log(flag2 + 1); //=1 false当0来看
// 3）String 字符串
        // 1. 转义字符实现换行
        var str1 = '我是一个\n程序员';
        console.log(str1);
        // 2. 字符串长度
        var str2 = 'my name is andy';
        console.log(str2.length); // 15
        // 3. 字符串拼接（只要有字符串，最终的结果就是字符串类型）
        console.log(12 + 12); // 24
        console.log('12' + 12); // '1212'
// 4）Undefined 声明了变量没有给值
        var str3;
        console.log(str3); // undefined
        var variable = undefined;
        console.log(variable + 'pink'); // undefinedpink
        console.log(variable + 1); // NaN(Not a Number) 非数字
// 5）Null 声明了变量为空值
        var space = null;
        console.log(space + 'pink'); // nullpink
        console.log(space + 1); // 1       

4. 获取变量的数据类型 typeof

// 获取变量的数据类型
        var num = 10;
        console.log(typeof num); // number
        var str = 'pink';
        console.log(typeof str); // string
        var flag = true;
        console.log(typeof flag); // boolean
        var vari = undefined;
        console.log(typeof vari); // undefined
        var timer = null;
        console.log(typeof timer); // object
// prompt 取过来的值是字符串型的
        var age = prompt('请输入您的年龄');
        console.log(age);
        console.log(typeof age); //string
// +prompt 取过来的值是数值型的
        var num1 = +prompt('请输入第一个数据：');

5. 数据类型的转换

// 1）转换为字符型
        // 1. 变量.toString()
        var num = 10;
        var str = num.toString();
        console.log(typeof str);
        // 2. 强制转换 String(变量)   
        console.log(String(num));
        // 3. + 拼接字符串 隐式转换
        console.log(num + '');
// 2）转换为数字型
        // 1. parseInt(变量) 是取整的
        console.log(parseInt('3.14')); // 3 取整
        console.log(parseInt('120px')); // 120 带单位的会去掉单位
        console.log(parseInt('rem120px')); // NaN 无法转换为数字
        // 2. parseFloat(变量) 是小数浮点数
        console.log(parseFloat('3.14')); // 3.14
        console.log(parseFloat('120px')); // 120 带单位的会去掉单位
        console.log(parseFloat('rem120px')); // NaN 无法转换为数字
        // 3. 强制 Number(变量) 
        var str = '123';
        console.log(Number(str)); // 123
        console.log(Number('12')); // 12
        // 4. 算数运算 - * / 隐式转换 加号不行！
        console.log('12' - 0); // 12
        console.log('123' - '120'); // 3
        console.log('123' * 1); // 123
// 3）转换为布尔型
        // 强制 Boolean(变量) 
        console.log(Boolean('')); // false
        console.log(Boolean(0)); // false
        console.log(Boolean(NaN)); // false
        console.log(Boolean(null)); // false
        console.log(Boolean(undefined)); // false
        console.log('-----------其余的都为TRUE------------');
        console.log(Boolean('123')); // true
        console.log(Boolean('你好吗')); // true

五、运算符

1. 算数运算符
   加+、减-、乘*、除/、取余%、自加++、自减–

console.log(1 + 1); // 2
console.log(1 - 1); // 0
console.log(1 * 1); // 1
console.log(1 / 1); // 1
console.log(5 % 3); // 2
console.log(3 % 5); // 3

// 小数转换成二进制进行计算会产生误差
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.07 * 100); // 7.000000000000001
// 所以我们不能直接拿着浮点数来进行相比较是否相等
var num = 0.1 + 0.2;
console.log(num == 0.3); // false

// ++ --前置（先加1 后返回值）
var p = 10;
console.log(++p + 10); // 21 p=11
// 后置++ --（先返回值 后加1） 
var age = 10;
console.log(age++ + 10); // 20 age=11

2. 比较运算符
   大于>、小于<、大于等于>=、小于等于<=、值等于、全等于

// > < >= <= 
console.log(3 >= 5); // false
console.log(2 <= 4); // true
// == != 值等于 比较值
console.log(18 == '18'); // true
// === !=== 全等于 比较值和类型
console.log(18 === '18'); // false

3. 逻辑运算符
   0、’’、null、undefined、NaN五种为假。

// 1. 逻辑与 && 全真才真
        console.log(3 > 5 && 3 > 2); // false
        console.log(3 < 5 && 3 > 2); // true
// 2. 逻辑或 || 全假才假
        console.log(3 > 5 || 3 > 2); // true 
        console.log(3 > 5 || 3 < 2); // false
// 3. 逻辑非 ！取反 
        console.log(!true); // false

// 逻辑与&& 短路运算
        // 如果表达式1为真，则返回表达式2
        console.log(123 && 456); // 456
        // 如果表达式1为假，则返回表达式1
        console.log(0 && 456); //  0

// 逻辑或|| 短路运算
        // 如果表达式1为真，则返回表达式1
        console.log(123 || 456 || 456 + 123); // 123
        // 如果表达式1为假，则返回表达式2
        console.log(0 || 456 || 456 + 123); // 456
        // 逻辑中断会影响程序运行结果
        var num = 0;
        console.log(123 || num++); // 123 中断了
        console.log(num); // 0

4. 赋值运算符
   =、+=、-=、*=、/=、%=

var num = 10;
num += 5;
console.log(num); // 15

var age = 2;
age *= 3;
console.log(age); // 6

5. 运算符优先级

/*
	1.括号          ()
    2.一元运算符     ++ -- !
    3.算数运算符     先* / %  后+ -
    4.关系运算符     > >= < <=
    5.相等运算符     == != === !==
    6.逻辑运算符     先&&  后||
    7.赋值运算符     =
    8.逗号运算符     ,
*/
console.log(4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true) // true

var num = 10;
console.log(5 == num / 2 && (2 + 2 * num).toString() === '22'); // true

var a = 3 > 5 && 2 < 7 && 3 == 4;
console.log(a); // false

var b = 3 <= 4 || 3 > 1 || 3 != 2;
console.log(b); // true

var c = 2 === "2";
console.log(c); // false

var d = !c || b && a;
console.log(d); // true            

六、流程控制

1. 分支

1）if 分支语句

// if...
        var age = 20;
        if (age >= 18) {
            console.log('你可以进网吧');
        }
// if... else...
        var year = 2021;
        if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
            console.log('是闰年');
        } else {
            console.log('是平年');
        }
//if.. else if.. else...
        var score = 78;
        if (score >= 90) {
            console.log('A');
        } else if (score >= 80) {
            console.log('B');
        } else {
            console.log('C');
        }

2）switch 分支语句

	var num = 1;
		// 必须是值和数据类型都一致才可以！！
        switch (num) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            default:
                console.log('没有匹配结果');
        }

3）三元表达式

// 条件表达式? (True)表达式1 : (False)表达式2
var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result);

2. 循环

1）for 循环

/* 
    for (初始化变量; 条件表达式; 操作表达式) {
          循环体;
    }
*/
// 打印九九乘法表(正三角形)
        var str3 = '';
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                str3 += j + '*' + i + '=' + (i * j) + '\t';
            }
            str3 += '\n';
        }
        console.log(str3);

2）while 循环
当条件比较复杂的时候用while，其他情况尽量都用for。

/* 
    while (条件表达式) {
         循环体;
         操作表达式;
    }
*/
// 计算 1-100 所有整数的和
        var sum = 0;
        var j = 1;
        while (j <= 100) {
            sum += j;
            j++;
        }
        console.log(sum);

3）do while 循环

/*
    do {
         // 循环体
    } while (条件表达式)
*/
// 循环体至少能执行一次
        var i = 1;
        do {
            console.log('how are you?');
            i++;
        } while (i > 100)

4）break和continue

// break 退出整个循环
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
            	// 退出整个for循环
                break;
            }
            console.log('我正在吃第' + i + '个包子');
        }
// continue 退出本次循环
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                // 退出i=3这一轮的循环
                continue;
            }
            console.log('我正在吃第' + i + '个包子');
        }

七、数组

数组(Array) 就是一组数据的集合，存储在单个变量下。

1. 创建数组

// 1. 利用new
        var arr = new Array();
// 2. 利用数组字面量[]
        var arr = [];
        var arr1 = [1, 2, '啦啦啦', true];

2. 访问数组元素（数组下标是从0开始的）

console.log(arr1);
console.log(arr1[0]); // 1
console.log(arr1[4]); // undefined

3. 遍历数组

var arr2 = ['red', 'green', 'blue'];
for (var i = 0; i < 3; i++) {
     console.log(arr2[i]);
}

4. 数组长度 arr.length

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

5. 数组增加元素

// 1）通过修改length长度 
        var arr2 = ['red', 'green', 'blue'];
        arr2.length = 5;
        console.log(arr[3]); // undefined
        console.log(arr[4]); // undefined
// 2）可以直接追加数组元素
        var arr2 = ['red', 'green', 'blue'];
        arr2[3] = 'pink';
        arr2[4] = 'hotpink';
        console.log(arr2);

6. 应用举例

// 翻转数组
        var arr = ['red', 'green', 'blue', 'pink', 'purple', 'hotpink'];
        var newArr = [];
        for (var i = arr.length - 1; i >= 0; i--) {
        // newArr.length从0开始，随着元素增加变大
            newArr[newArr.length] = arr[i]
        }
        console.log(newArr);

八、函数

封装了一段可以被重复执行调用的代码块 ，目的是让大量代码重复使用。

1. 函数形式

/* 
	function 函数名() {
     	函数体
	} 
*/
sayHi();
// 1.函数声明提升：可以在函数前面调用
function sayHi() {
     console.log('hi~~');
}
sayHi();

// 2.函数表达式：没有函数提升的特性了
const fun = function (n, m) {
      return n + m;
}
fun(1, 2);

// 3.设置函数默认值
function fun1(a = 1, b = 2) {
      return a + b;
}
console.log(fun1()); // 3

2. 形参实参个数匹配

function getSum1(num1, num2) {
    console.log(num1 + num2);
}
getSum1(1, 2);
// 多的不要了
getSum1(1, 2, 3);
// 少的为undefined
getSum1(1); // NaN

3. 函数的返回值

// 1. return 会终止函数
        function getSum(num1, num2) {
            return num1 + num2; 
            // return 后面的代码不会被执行
            alert('我是不会被执行的哦！')
        }
        console.log(getSum(1, 2));
// 2. return 只能返回一个值
        function fn(num1, num2) {
            return num1, num2;
        }
        console.log(fn(1, 2)); // 2
// 3. 我们求任意两个数的 加减乘数结果
        function getResult(num1, num2) {
        	// 返回的是一个数组
            return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
        }
        var re = getResult(1, 2);
        console.log(re);
// 4. 如果函数没有return 则返回undefined
        function fun2() {
        }
        console.log(fun2()); // undefined

4. arguments对象
   只有函数才有arguments对象，arguments里面存储了所有传递过来的实参。

// 存储形式为“伪数组”的形式，没有真数组的一些方法，pop()push()等...
function fn() {
     for (var i = 0; i < arguments.length; i++) {
     		// [1,2,3] 
           console.log(arguments[i]);
     }
}
fn(1, 2, 3);

5. 函数间相互调用

function fn1() {
     console.log(111);
     fn2();
     console.log('fn1');
}
function fn2() {
     console.log(222);
     console.log('fn2');
}
fn1(); // 111 222 fn2 fn1

6. 匿名函数（函数表达式）
   利用函数关键字自定义函数的为“命名函数”，而与之对应的即“匿名函数”。
   函数表达式里面存的是函数，通过变量名来调用函数。

//  var 变量名 = function() {};
var fun = function (aru) {
      console.log('我是函数表达式');
      console.log(aru);
}
fun('啦啦啦');

8. 立即执行函数
   用来代码封装，外界访问不到里面的变量，仅执行一次。

(function () {
     let a = 10;
     let b = 20;
     console.log(a + b);
})()

九、作用域

1. JS的作用域

// ES6之前：分为全局作用域、局部作用域 
// 1. 全局作用域：整个script标签 或一个单独的js文件
        var num1 = 10;
        var num1 = 30;
        console.log(num1);
// 2.局部作用域/函数作用域：只在函数内部起效果和作用
        function fn() {
            // 局部作用域
            var num2 = 20;
            console.log(num2);
        }
        fn();
        
// 3. ES6新增的块级作用域
        if (3 < 5) {
            let num3 = 10;
        }
        console.log(num3); // 会报错 外面不能调用num3

2. 变量的作用域

// 1. 全局变量： 在全局作用域下的变量
// 注意！如果在函数内部，没有声明直接赋值的变量也属于全局变量！
        var num = 10;
        console.log(num);

        function fn() {
            console.log(num); // num为全局变量
        }
        fn();
// 2. 局部变量：在函数内部的变量
// 注意！函数的形参也可以看做是局部变量！
        function fun(aru) { // aru为局部变量
            var num1 = 10; // num1为局部变量
            num2 = 20; // num2为全局变量！
        }
        fun();
// 从执行效率看：
        // 1) 全局变量 只有浏览器关闭的时候才会销毁，比较占内存资源
        // 2) 局部变量 当我们程序执行完毕就会销毁，比较节约内存资源

3. 作用域链
   作用域链：内部函数访问外部函数的变量，采取的是“链式查找”的方式来决定取那个值，即就近原则！

        var num = 10;

        function fun1() { // 外部函数
            var num = 20;
            function fun2() { // 内部函数
                console.log(num);
            }
            fun2();// 20 就近原则
        }
        fun1();

十、预解析

JS引擎运行分为两步：预解析、代码执行。
1）预解析：JS引擎把所有的var、function声明提升到当前作用域的最前面。
2）代码执行：按照代码书写的顺序从上往下执行。

预解析分为：变量预解析（变量提升）、函数预解析（函数提升）
1）变量提升：把所有的“变量声明”提升到当前的作用域最前面，不提升赋值操作。
2）函数提升：把所有的“函数声明 ”提升到当前作用域的最前面，不调用函数。

1. 变量提升

        console.log(num); // undefined
        var num = 10;
        // 相当于执行了以下代码
        // var num;
        // console.log(num);
        // num = 10; 

2. 函数提升

 		fn(); // 可 
        function fn() {
            console.log(11);
        }
       
        fun(); // 报错
        var fun = function () {
            console.log(22);
        }
        // 相当于执行了以下代码
        // var fun;
        // fun();
        // fun = function() {
        //         console.log(22);
        // }

十一、JS对象

JS对象笔记