JS基础知识

js基础知识

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 ,是一种高级语言（Script 是脚本的意思）。
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行。
JS 产生最初的目的 ：表单动态校验（密码强度检测）。
JS有三种书写模式：行内、内嵌、外部。
变量：用于存放数据的容器。
变量命名规范

1. 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成 如：usrAge, num01, _name
2. 严格区分大小写。 var app; 和 var App; 是两个变量
3. 不能 以数字开头。 18age 是错误的
4. 不能 是关键字、保留字。 例如：var、for、while
5. 变量名必须有意义。 MMD BBD nl → age
6. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName

简单数据类型

字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
转义符都是 \ 开头的，常用的转义符及其说明如下：（转移符必须写在引号中）
转义符 解释说明
\n 换行符，n 是 newline 的意思
\ \ 斜杠
’ ’ 单引号
" ”双引号
\t tab 缩进
\b 空格 ，b 是 blank 的意思
三元表达式★

1. 语法结构
   条件表达式 ? 表达式1 : 表达式2;
2. 执行思路
   如果条件表达式 为 true ，则返回表达式1的值，如果为 false，则返回表达式2的值
   switch分支流程控制
3. 语法结构
   oswitch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。switch一般用于判断固定值
   switch( 一个变量-是一个固定值 ){
   case value1:
   表达式 //等于 value1 时要执行的代码
   break;
   case value2:
   表达式 //等于 value2 时要执行的代码
   break;
   default:
   表达式 //才不等于任何一个 value 时要执行的代码
   }
   switch ：开关 转换 ， case ：小例子 选项
   关键字 switch 后面括号内可以是表达式或值， 通常是一个变量
   关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号
   switch 表达式的值会与结构中的 case 的值做比较
   如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
   如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
   注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。
   switch 语句和 if else if 语句的区别
   一般情况下，它们两个语句可以相互替换
   switch…case 语句通常处理 case为固定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
   switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
   当分支比较少时，if… else语句的执行效率比 switch语句高。
   当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
   数组
4. 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式（数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式）。
   利用 new 创建数组
   var 数组名 = new Array() ；
   利用数组字面量创建数组
   var 数组名 = [ ]；
   遍历
   数组遍历: 把数组中的每个元素从头到尾都访问一次。
   可以通过 for 循环索引遍历数组中的每一项

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

数组的长度
数组的长度：默认情况下表示数组中元素的个数
使用“数组名.length”可以访问数组元素的数量（数组长度）。

var arr = [1,2,3];
alert(arr.length);   // 3

数组中新增元素
数组中可以通过以下方式在数组的末尾插入新元素：
数组[ 数组.length ] = 新元素; 如： arr[ arr.length ] = 10；

求数组元素和及平均值
注意：for里面的i是计数器，当索引号使用，[ arr( I ) ]是数组中第i个数组元素

求数组中的最大值
for里面的i是计数器，当索引号使用，[ arr( I ) ]是数组中第i个数组元素

求数组中的最大值

将数组转换为字符串，并用任意符号隔开

可用内置属性直接实现将数组转换为字符串，并用任意符号隔开



数组去重（删除数组中指定元素）


翻转数组

用内置属性翻转数组

冒泡排序
冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小）。
原理：
将数组从大到小排列（if里用<，从小到大用>）

不优化的写法：

冒泡排序内置属性实现

从小到大：
console.log(arr.sort());
函数
函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
调用函数：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。不声明直接调用会报错（is not defined）
函数的封装：函数的封装
函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）
函数参数语法 ：
形参：函数定义时设置接收调用时传入
实参：函数调用时传入小括号内的真实数据
参数的作用 : 在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去

函数参数的运用：

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3…) { // 可以定义任意多的参数，用逗号分隔
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3…);

1.调用的时候实参值是传递给形参的
2.形参简单理解为：不用声明的变量
3.实参和形参的多个参数之间用逗号（,）分隔

函数行参和实参数量不匹时

注意：在JavaScript中，形参的默认值是undefined。
小结：

1. 函数可以带参数也可以不带参数
2. 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
3. 调用函数的时候，函数名括号里面的是实参
4. 多个参数中间用逗号分隔
5. 形参的个数可以和实参个数不匹配，但多了可以，少了不行，最好一样多
   break ,continue ,return 的区别
   1、break ：
   结束当前的循环体（如 for、while）；
   break不能用于结束函数；
   2、continue ：
   跳出本次循环，继续执行下次循环（如 for、while）；
   不能用于结束函数，也不能用于switch语句；
   3、return ：
   目前只能退出函数，同时还可以结束当前的函数体内的代码（return后面的代码都不执行），并返回 return 语句中的值，只能返回最后一个值，若要返回多个值可以利用数组；
   若函数有return则返回的是return后面的值，没有则返回undefined；
   Return可以放在function函数嵌套的for、while循环里，但不能直接放在for、whlie循环中
   arguments的使用★
   当不确定有多少个参数传递的时候（2个参数以上用），可以用 arguments 来获取，接收所有实参，并放在一个数组里。在 JavaScript 中，arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象。
   ​
   注意：
   只有函数才有arguments内置对象（每个函数都内置了该对象，无需声明直接用）
   arguments展示形式是一个伪数组，因此可以进行遍历。
   arguments是伪数组，不属于数组，数组中的所有内置属性都不可以使用
   伪数组的特点：
   1具有 length 属性
   2按索引方式储存数据
   3不具有真正的数组的一些方法，如push（） , pop（）
   利用函数求数组中任意个数的最大值

利用函数翻转任意数组

利用函数冒泡排序

利用函数判断闰年

函数的两种声明方式
自定义函数方式(命名函数) 利用函数关键字 function 自定义函数方式
// 声明定义方式
function fn( ) {…}
// 调用
fn();
函数表达式方式(匿名函数）
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn= function( ){…}；
作用域概述
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突
JavaScript（es6前）中的作用域有两种：
全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
局部作用域（函数作用域） ：作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。
JS es6前没有块级作用域
块级作用域由 { } 包括。
变量的作用域
全局变量（尽量不用）：在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量 是全局变量
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

注意：num2也是全局变量，函数外可以调用
局部变量：在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量
全局变量和局部变量的区别
全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间
作用域链
只要是代码都在一个作用域中，写在函数内部的在局部作用域，未写在任何函数内部即在全局作用域中；
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；
根据在**[内部函数可以访问外部函数变量]**的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
​
案例分析1：
function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1();

结果为：123

作用域链：采取就近原则的方式来查找变量最终的值。
var a = 1;
function fn1() {
var a = 2;
var b = ‘22’;
fn2();
function fn2() {
var a = 3;
fn3();
function fn3() {
var a = 4;
console.log(a); //a的值 4
console.log(b); //b的值 ‘22’
}
}
}
fn1();

预解析
预解析的相关概念
JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。
预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
代码执行： 从上到下执行JS语句。
预解析会把变量和函数的声明在代码执行之前执行完成。
变量预解析
预解析也叫做变量、函数提升。
变量提升（变量预解析）： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。
例：
console.log(num);
var num = 10;
结果：undefined
注意：变量提升只提升声明，不提升赋值
命名函数预解析
函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。
fn();
function fn() {
console.log(‘打印’);
}
结果：控制台打印字符串 — ”打印“
注意：函数声明代表函数整体，所以函数提升后，函数名代表整个函数，但是函数并没有被调用！
匿名函数预解析
函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：
fn();
var fn = function() {
console.log(‘想不到吧’);
}
结果：报错提示 ”fn is not a function"
​
解释：该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用：

预解析案例

案例1
        var num = 10;
        fun();

        function fun() {
   
            console.log(num);
            var num = 20;
        }
        

        相当于执行了以下操作
        var num;

        function fun() {
   
            var num;
            console.log(num);       //结果undefined
            num = 20;
        }
        num = 10;
        fun();                     

案例2
        var num = 10;

        function fn() {
   
            console.log(num);
            var num = 20;
            console.log(num);
        }
        fn();

        相当于以下代码
        var num;

        function fn() {
   
            var num;
            console.log(num);    //结果undefined
            num = 20;
            console.log(num);     //结果 20
        }
        num = 10;
        fn();

案例3
        var a = 18;
        f1();

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


        相当于以下代码
        var a;
        function f1() {