【知识体系】JavaScript基础（1）——ECMAScript 标准

阳光穿透心脏的1/2处 2023-03-03 06:22 28阅读 0赞

写js系列文章主要是为了帮助自己复习…该系列文章主要包含四个部分，本章内容是第一部分：

*  JavaScript基础（1）——ECMAScript 标准
 *  [JavaScript基础（2）——DOM][JavaScript_2_DOM]
 *  [JavaScript基础（3）——BOM][JavaScript_3_BOM]
 *  [JavaScript高级][JavaScript]

### 文章目录 ###

*  变量
 *  数据类型
 *   *  Number
     *   *   *  数值判断
             *  操作符
     *  String
     *   *   *  字符串拼接
             *  转义字符
     *  Boolean
     *  nulL
     *  Undefined
     *  Array
     *   *   *  声明注意
             *  数组特性
             *  相关案例
     *  Function
     *   *   *  声明与调用
             *  函数参数
             *  函数作用域
             *  预解析
             *  函数的返回值
             *  函数案例
             *  注意事项
     *  Object
     *   *   *  编程思想
             *  面向对象
             *  创建对象的方式
             *  访问与修改属性的方法
             *  JSON
             *  值类型与引用类型的传递
             *  内置对象
 *  基本包装类型
 *  数据类型转换
 *  流程控制
 *   *   *   *  1.顺序结构
             *  2.分支结构
             *  3.循环结构

**JS分为三个部分**

*  **ECMAScript 标准----js的基本的语法**
 *  DOM------Document Object Model 文档对象模型
 *  BOM-----Browser Object Model 浏览器对象模型

**JavaScript是什么**

*  一门运行在**客户端**的脚本语言、一门解释性语言、一门动态类型的语言、一门基于对象的语言。
 *  编译语言：需要把代码翻译成计算机所认知的二进制语言，才能够执行；脚本语言：不需要霸译，直接执行，常见的脚本语言有t-sql，cmd。

**JS应用场景**

1.  网页特效
2.  服务端开发（Node.js）
3.  命令行工具（Node.js）
4.  桌面程序（Electron）
5.  App（Cordova）
6.  控制硬件-物联网（Ruff）
7.  游戏开发（cocos2d-js）

# 变量 #

--------------------

**什么是变量**  
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据

**如何使用**

*  **声明**：有变量名 没有值
    
        var age
 *  **初始化赋值**：有名有值
    
        var age=18
 *  **其他写法**
    
        var num1 num2 num3
        num1=1;
        num2=2;
        num3=3
    
        var num1=1 num2=2 nume=e

# 数据类型 #

## Number ##

可以表示十进制、八进制、十六进制

*  init——整数
 *  float——浮点数
 *  double

#### 数值判断 ####

*  NaN：与任何值都不相等包括它本身
 *  isNaN：验证结果是否为NaN;判断不是一个数字，不是为true

#### 操作符 ####

*  算术运算符： `+` `-` `*` `%, /`(取余)——加减乘除
 *  一元运算符：`++` `--`——只需要一个操作数即可计算
    
        var num=10
        num++ //10
        ++num  //10
        num++ +10 //20
        ++num +10 //21
        //num++先参与运算后才自身++，
        //++num先自身++后再参与运算
 *  二元运算符：`+` `-` `*` `%` `/`——需要两个操作数
 *  三元运算符
 *  复合运算符|赋值运算符：`+=` `-=` `*=` `/=` `%=`
    
        num+=10
        num=num+10
 *  关系运算符：`>` `<` `>=` `<=` `==` `===` `!=` `!==`
    
        var str="5"
        var num=5
        console.log(str==num)//true，==不严格，只需要值相等而数据类型不一定
        console.log(str===num)//false ===严格，要求值与数据类型都相等
 *  逻辑运算符：`&&` `||` `！`

## String ##

> **在别的语言中**  
> string str=“hello”  
> char ch=’h‘  
> ***字符***：有单引号括起来，值只有一个  
> ***字符串***：双引号括起来，可看成是多个字符组合成的数组

> **在js中**，无论是单引号还是双引号都是字符串，它可以看成一个数组

#### 字符串拼接 ####

用“+”连接，拼接两个字符串。如果另一个是数字，不会计算结果；如果其中一个字符串里面是数字，另一个是数字，用的不是“+”，会隐式转换，有计算结果

#### 转义字符 ####

除了普通的可打印字符以外，一些特殊有特殊功能的字符可以通过转义字符的形式放入字符串中

## Boolean ##

【false】判断为flase的几种情况：
    	1. undefined（未定义，找不到值时出现）
    	2. null
    	3. false（布尔值的false，字符串"false"布尔值为true）
    	4. 0（数字0，字符串"0"布尔值为true）
    	5. NaN（无法计算结果时出现，表示"非数值"）
    	6. ""或''（空字符串,空格时为true）
    	
    【注意】空数组空对象，负值转的布尔值时都为true

## nulL ##

表示一个空，变量的值如果想为null，必须手动设置

## Undefined ##

声明而没有赋值；函数没有明确返回值

## Array ##

#### 声明注意 ####

var arr=new Array(5)//数组内有五个undefined元素
    var arr=new Array(5,6,7,8)//[5,6,7,8]

#### 数组特性 ####

*  数组元素：数组内的数据；元素的数据类型可以多样
 *  数组长度：数组内元素个数`arr.length`
 *  数组索引：根据索引获取指定的数组元素`arr[0]`

#### 相关案例 ####

//案例1：去掉数组中重复的0
    var arr=[1,0,3,0,5,0,7]
    var newArr=[]
    for(var i=0;i<arr.length;i++){ 
    	if(arr[i]!=0){ 
    		newArr[newArr.length]=arr[i]
    	}
    }

//案例2：冒泡排序从小到大
    var arr=[10，0，100，20，60，30]；
    for（var i=0；i<arr.length-1；i++）{ 
    	for（var j=0；j<arr.length-1-i；j++）{ 
    		if（arr[j]>arr[j+1]）{ 
    			var temp=arr[j]；
    			arr[j]=arr[j+1]；
    			arr[j+1]=temp;
    		}
    	}
    }

## Function ##

#### 声明与调用 ####

*  命名函数
    
        //函数声明
        function funcName(){ 函数体}
        
        //函数调用
        funcName()
 *  匿名函数：不能直接调用
    
        //函数声明
        function(){ }
        
        //调用方法1：把函数给一个变量才能调用，这里称为函数表达式
        var f1=function(){ }
        f1()
        
        //调用方法2：将函数包裹在括号内，也称自调用函数
        (function(){ })()

#### 函数参数 ####

*  形参：函数在定义的时候括号里面的变量叫做形参
 *  实参：函数在调用的时候括号里传入的值
    
        function sum(x,y){ 
            var sum=x+y
            console.log(sum)
        }//x,y为形参
        
        console.log(2,3)//2,3为实参
        //注意：形参与实参的参数数量可以不一致，但可能实现不了预期效果
 *  arguments：可以获取每个传入的参数值，即实参。它是一个伪数组
    
        function f1(){ 
        	console.log(arguments.length)//6
            console.log(arguments)//[1,2,3,4,5,6,collee:f...]
        }
        f1(1,2,3,4,5,6)
 *  **回调函数**：即当**函数作为参数使用时**，这个函数就称为回调函数
    
        function f1(fn){ 
        	fn()//将函数作为变量、参数传进去，之后被调用
        }
        
        function f2(){ 这是一个将要被作为参数的函数}
        f1(f2)//传入f2函数，此时f2函数作为参数传入，被称为回调函数。传入的是函数的代码，不需要加括号；如果加括号了就是传入了函数的返回值

#### 函数作用域 ####

>  *  ***全局变量***：全局变量可以在页面的任何位置使用。**函数域外定义的变量**都是全局变量。如果页面不关闭就不会释放，会占用内存。
>  *  ***局部变量***：在**函数内部定义的变量**。
>  *  ***隐式全局变量***：声明的变量没有var，区别在于没有var的变量会被轻易删除

*  全局作用域：全局变量的使用范围
 *  局部作用域：局部变量的使用范围
 *  块级作用域：一对大括号，里面的**变量只能在里边使用**，`js`**只有函数内是块级作用域**
 *  作用域链：函数会在内部逐级调用；在内部的变量会在当前作用域找，如果找不到，会依次往外围作用域寻找
    
        var num=10//---0级作用域
        function f1=(){ 
            var num=20//---1级作用域
            function f2(){ 
                //var num=30---2级作用域
                console.log(num)//由于2级作用域的num被注释了，就往上找，在1级作用域中找到num，输出20
            }
            f2()//在f1中调用其内部的f2，f2才会被执行
        }
        f1()//调用f1，会循循往里深入

#### 预解析 ####

提前解析代码。它可以把变量的声明提前，提前到**当前所在作用域**的最上面，即函数内的变量只会提前到函数内部的最上边；函数的声明也会被提前，提前到当前所在作用域的最上面

//原本形式
    console.log(num)//输出undefined
    var num=10
    
    //预解析后
    var num//预解析会把声明放在上边
    console.log(num)//输出undefined
    num=10

//原本形式
    function f1(){ 
        console.log(num)//undefined
        var num=10
    }
    
    //预解析后
    function f1(){ 
        var num
        console.log(num)//undefined
        num=10
    }
    console.log(num)//报错，因为变量只是提前到当前作用域最上边，外部没有声明

//原本形式
    f1()
    function f1(){ }
    
    //预解析后
    function f1(){ }
    f1()

var a=25;
    function f1(){ 
    	alert(a)//输出undefined。
        var a=10
    }
    //预解析会把a的声明提前，即alert上边是var a
    //在这里a由于没有值，可以理解为a被赋值undefined
    //所以函数能在内部找到a变量，
    //所以函数不会根据作用域链的原理往外找外边的a变量，而只是输出内部的undefined

f1()
    console.log(a)//报错
    console.log(b)//9
    console.log(c)//9
    function f1(){ 
        var a=b=c=9;
        console.log(a)//9
        console.log(b)//9
        console.log(c)//9
    }
    //解析：首先函数预解析后会被提前，函数可调用。其次，函数内部的变量声明会被提前，即:
    //var a;a=9;b=9;c=9;
    //在这里，a是局部变量，而b和c是隐式全局变量，故b和c外部可以访问，而外部访问局部变量a的时候会报错

f1()
    var f1=function(){ 
    	console.log(a);
        var a=10;
    }
    //结果：报错，函数不能调用
    //解析：注意，这里的f1是一个变量，首先变量的声明会被提前，即：
    //var f1；
    //f1()
    //在这里，f1不是一个函数，而是一个没有被赋值的变量 ，所以f1无法调用，报错

#### 函数的返回值 ####

*  `return`后面的值称之为返回值，**注意**，当你需要返回值，调用函数之后需要定义一个变量接收；**`return`后面的代码不会执行**
    
        function getSum(x,y){ 
            return x+y
        }
        //定义变量接收返回值
        var result=getSum(x+y)
        console.log(result)
    
        function getSum(x,y){ 
            return x+y
        }
        //这里表示先调用再输出返回值
        console.log(getSum(x,y))
 *  **函数作为返回值使用**
    
        function f1(){ 
            return function(){ 我是返回的匿名函数}
        }
        var f2=f1()//在这里，f2就成了f1返回的那个匿名函数，即f2=function(){我是返回的匿名函数}
        f2()//调用返回的匿名函数

#### 函数案例 ####

//求n-m内数字的和
    function getSum(n,m){ 
        var sum=0;
        for(var i=n;i<m;i++){ 
            sum+=i;
        }
        return sum
    }
    console.log(getSum(1,100))

//求圆的面积
    function getS(r){ 
        return Math.PI*r*r;
    }
    console.log(getSum(10))

//求一组数字的和
    function getSum(array){ 
        var sum =0;
        for(var i-0;i<array.length;i++){ 
            sum+=array[i]
        }
        return sum
    }
    console.log(getSum([1,2,3,4]))

#### 注意事项 ####

*  函数需要先定义才能使用
 *  函数名字：遵循驼峰命名法
 *  函数一旦重名，后面的会把前面的覆盖掉
 *  一个函数最好是一个功能

> 函数部分的内容会在[这篇文章][Link 1]有更多细节的展开

## Object ##

#### 编程思想 ####

*  面向过程：每件事都自己做，具体过程都要知道，注重过程
 *  面向对象：根据需求找对象，所有的事都用对象来做，注重结果

#### 面向对象 ####

*  特性：封装，继承，多态（抽象，可模拟特性）
 *  `js`不是面向对象的语言，但是可以模拟面向对象的思想，`js`是一门**基于对象**的语言，即本身有对象可以直接用。
 *  对象：有特征和行为，具体特指某一个事物

#### 创建对象的方式 ####

> ***引入*** ：  
> instanceof ，判断变量是否属于某类型,语法：`变量` `instanceof` `类型的名字`  
> `xiaoming instanceof Object`——判断小明是否属于对象

1.  **调用系统的构造函数**
    
        //语法
        var 变量名=new Object()
        
        
        //实例化对象
        var xiaoming=new Object()
        //添加属性
        xiaoming.age=18
        xiaoming.sex="男"
        //添加方法(行为)
        xiaoming.sleep=function(){ 
            console.log("我天天睡懒觉")
        }
        //获取与调用
        console.log(xiaoming.name)
        xiaoming.sleep()
    
        //在当前的对象的方法中，可以使用this关键字代表当前对象
        xiaoming.sleep=function(){ console.log("我天天睡懒觉，我是"+xiaoming.name)}
        xiaoming.sleep=function(){ console.log("我天天睡懒觉，我是"+this.name)}
2.  **工厂模式**
    
    > ***需求***：第一种方法无法一次性创建多个对象，我该怎么做？
    > 
    > ***解决***：把创建对象的代码封装在一个函数中
    
        function createPerson(){ 
            var person=new Object();//---1.创建对象
            person.name="小明";//---2.添加属性
            person.age=18;
            person.sayHi=function(){ 
                alert('你好，我叫'+this.name+"我今年"+this.age+"岁")
            }//---3.添加方法
            return person//---4.返回对象
        }
        
        //使用：创建人的对象
        var person1=createPerson()
        person1.sayHi()//---此时就能使用封装函数内定义的属性和方法
    
    > ***需求***：上面的方法只能创建相同的对象，但我要不同的，我该怎么办？
    > 
    > ***解决***：传入变量
    
        function createPerson(name,age){ 
            var person=new Object();
            person.name=name;//在这里，左边的person.name是个属性，右边name是个变量
            person.age=age;
            person.sayHi=function(){ 
                alert('你好，我叫'+this.name+"我今年"+this.age+"岁")
            }
            return person
        }
        
        var person1=createPerson("小明",18)
3.  **自定义构造函数**
    
    > ***需求***：不能分辨出对象到底属于哪个对象类型？怎么办？
    > 
    > ***解决***：自定义构造函数。
    
        function Person(){ 
            this.name="小明";
            this.age=18;
            this.sayHi=function(){ 
                alert('你好，我叫'+this.name+"我今年"+this.age+"岁")
            }
        }
        
        var person1=new Person()
        console.log(person1 instanceof Person)//true
    
        function Person(name,age){ 
            this.name=name;
            this.age=age;
            this.sayHi=function(){ 
                alert('你好，我叫'+this.name+"我今年"+this.age+"岁")
            }
        }
        
        var person1=new Person("小明",18)
        console.log(person1 instanceof Person)//true
    
    > ***与工厂模式对比***，少了new Object()和return；属性与方法直接用this而不用person。构造函数与函数的区别：名字上，构造函数首字母要大写；调用上，没有区别
    
    > ***自定义构造函数创建对象做了四件事***：
    > 
    > 1.开辟空间，储存创建的新对象
    > 
    > 2.把this设置为当前对象
    > 
    > 3.设置对象的属性和方法的值
    > 
    > 4.返回创建后的新对象
4.  **字面量的方式**
    
        //1.原始写法
        var person={ }//创建了一个空对象
        person.name="小明";
        person.age=18;
        person.sayHi=function(){ 
            alert('你好，我叫'+this.name)
        }
    
        //2.优化后的写法
        var person={ 
            name:"小明",
            age:20,
            sayHi:function(){ 
            	alert('你好，我叫'+this.name)
        	}
        }
    
    > 缺陷：它是一次性的对象，无法轻易改值，只能在对象内部更改。即对象一开始就被写死

#### 访问与修改属性的方法 ####

*  `obj.name` 、`obj.name="小明"`
 *  `obj["name"]`、`obj["name"]="小明"`

#### JSON ####

json也是一个对象，一般json格式的数据无论是键还是值都是用双引号括起来的

#### 值类型与引用类型的传递 ####

>  *  基本类型（值类型）：number，string，boolean  
>     值类型的值在**栈**中储存。值在栈。
>  *  复杂类型（引用类型）：object  
>     引用类型的值在**栈和堆**中储存。对象在堆，引用（地址）在栈

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70]

*  值类型作为函数的参数时，传递值
    
        function f1(x){ 
        	x=100;
        }
        var num=10
        f1(num)  
        console.log(num)//10
        //解析：f1调用相当于在栈创建了一个内存=> x=100
        //函数内部可以这样理解：var x;x=100 传进来的参数10自动化为变量x
 *  引用类型作为函数的参数时，传递的是地址
    
        var obj={ name="小明"}
        function f2(obj2){ 
        	obj2.name="小红"
        }
        console.log(obj.name)//"小明"
        f2(obj);
        console.log(obj.name)//"小红"
        //解析：f2调用相当于传递obj的地址，进而在堆的找到地址上进行修改。这里obj和obj2指向的是同个地址

#### 内置对象 ####

> ***JS包括三种对象***
> 
>  *  内置对象——js系统自带的对象
>  *  自定义对象——自定义构造函数创建的对象
>  *  浏览器对象——BOM

>  *  ***实例对象***：通过构造函数创建出来，实例化的对象
>  *  ***静态对象***：不需要创建，静态方法直接通过这个对象的名字调用

1.  [Math][]，它具有数学常数和函数的属性和方法。它不是一个构造器，不能直接new实例化。
    
        //属性
        Math.E//自然对数的底数e==>2.718281828459045
        Math.PI//圆周率
        
        //方法
        Math.abs(-2)//取绝对值==>2
        Math.ceil(10.1)//向上取整==>11
        Math.floor(10.1)//向下取整==>10
        Math.max(1,2,3,4)//获取最大值==>4 
        Math.random() //返回一个0-1的浮点
    
    ***\[案例1\]在1-10中获取随机数***
    
        parseInt(Math.random()*10+1)
    
    ***\[案例2\]自定义构造函数，实现取最大值***
    
        function MyMax(){ 
        	this.getMax=function(){ 
                var max=arguments[0];
                for(var i=0;i<arguments.length;i++){ 
                    if(max<arguments[i]){ 
                        max=arguments[i]
                    }
                }
                return max
            }
        }
        
        var mt=new MyMath();
        var result=mt.getMax(10,20,30)
        console.log(result)//30
    
    ***\[案例3\]随机生成一个十六进制的颜色值***
    
        function getColor(){ 
            var str="#"
            //十六进制的值的数组
            var arr=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]
            //生成十六进制的6个索引
            for(var i=0;i<6;i++){ 
                //随机生成arr数组的索引，以根据索引获得里面的值
                var num=parseInt(Math.random()*16);
                //拼接字符串
                str+=arr[num]
            }
            return str
        }
2.  [Date][]，创建date实例来处理时间和日期，可以new实例化
    
        //与Math不同，Date首先要实例化
        var dt=new Date()//表示实例化时刻的日期和时间。已自动转换成字符串类型
        
        dt.toDateString()//英文格式==>Fri Jul 31 2020
        dt.toLocaleDateString()//数字格式==>2020/7/31
        dt.toTimeString()//小时分钟秒==>16:16:12 GMT+0800 (中国标准时间)
        dt.toLocaleTimeString()//小时分钟秒==>下午4:16:12
            
        dt.getFullYear()//获取年份
        dt.getMonth()+1//获取月份，这里的月份是从0开始算的
        dt.getDate()//获取日期
        dt.getHours()//获取小时
        dt.getMinutes()//获取分钟
        dt.getSeconds()//获取秒
        dt.getDay()//获取星期，0指的是星期日
    
    ***\[案例1\]封装函数——格式化后的指定格式的日期和时间***
    
        指定的格式：2020年7月31日 16:16:12
        
        function getDate(dt){ 
            var year=dt.getFullYear();
            var month=dt.getMonth()+1;
            var day=dt.getDate();
            var hour=dt.getHours();
            var minute=dt.getMinutes();
            var second=dt.getSeconds();
            
            month=month<10?"0"+month:month;
            day=day<10?"0"+day:day;
            hour=hour<10?"0"+hour:hour;
            minute=minute<10?"0"+minute:minute;
            second=second<10?"0"+second:second;
        
            return year+"年"+month+"月"+day+"日"+hour+"："+minute+"："+second
        }
        
        //调用
        getDate(new Date())
3.  [String][]，全局对象，用于字符串或一个字符串序列的构造函数
    
    > string：字符串类型——值类型 `var str="hello"`  
    > String：字符串类型——引用类型 `var str=new String("hello")`  
    > 一个字符串既是值类型又是引用类型。以上两种方式声明的字符串都可以被认为是实例化的一个对象，即都可以使用内置的方法。区别在于是否使用了内置方法和属性。
    
    ***字符串特性***：不可变性，即字符串原来的值不可改变
    
        //这里的改变是因为重新赋值了
        var str="hello"//这里在堆生成了地址1
        str="hi"//这里在堆生成了地址2，原来的地址1没改
        console.log(str)//hi 这里是因为地址的指向发生改变
        
        
        //不可变性
        var str="hello"
        str[1]="w"//字符串可以通过索引访问某个值，但是只可以访问不能修改，即只读
        console.log(str)//hello
    
    ***属性与方法***

*  **`string.length`**
    
    返回字符串的长度
    
        var str="hello"
        str.length//5
 *  **`chartAt()`**
    
    输入索引，找到该索引位置的值。语法：`str.chartAt(索引)`。如果指定的索引超出了该范围，则返回一个空字符串
    
        var str="hello"
        str.charAt(2)//l
 *  **`concat()`**
    
    合并字符串，并返回一个新的字符串。语法：`str.concat(字符串1，字符串2，字符串3...)`
    
        var str="hello"
        str.cancat('my','name','is','xiaoming')//hellomynameisxiaoming
 *  **`indexOf()`**
    
    返回字符串中第一次出现指定值的**索引**，只找一个。语法：`str.indexOf(指定值，从哪里开始找)`，第二个参数默认是0；如果未找到该值，则返回 -1；**区分大小写**
    
        //通常用法
        var str="Blue Whale"
        str.indexOf("Blue")		   // 返回 0
        str.indexOf("Blute")       // 返回 -1
        str.indexOf("Whale", 5)    // 返回 5
        str.indexOf("blue")        // 返回 -1
        
        //检测是否存在某字符串
        str.indexOf('Blue') !== -1    // true
        str.indexOf('Bloe') !== -1    // false
 *  **`includes()`**
    
    判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。语法：`str.includes(要找的字符,从哪开始])`。**区分大小写**
    
        var str= "Blue Whale"
        str.includes('blue'); // false
 *  **`match()`**
    
    返回一个字符串匹配正则表达式的的结果。语法：`str.match(regexp)`
    
    > 正则表达式相关知识请看[这篇文章][JavaScript]
    
        var str="中国移动10086；中国联通10010"
          var array=str.match(/\d{5}/)//这样只能匹配一个
          var array=str.match(/\d{5}/g)//全局匹配 ["10086","10010"]
 *  **`replace()`**
    
    如果与正则表达式相匹配，就将这个字符串替换成自己想要的  
    语法：`str.replace(regexp|substr, newSubStr|function)`
    
        var str="小明睡懒觉了"
          str=str.replace(/睡懒觉/,"起床")
          console.log(str)//小明起床了
 *  **`slice()`**
    
    输入开始索引与结束索引，截取其中间的字符。语法：`str.slice(开始索引，结束索引)`，从第一个索引开始，到第二个索引前结束。
    
        var str = 'The morning is upon us.'
        str.slice(1, 8)//he morn
 *  **`substr()`**
    
    从指定位置开始，直到满足指定字符数后结束，返回字符串。语法：`str.substr(开始索引，字符数)`，如果后面没有参数，则返回从索引开始到结束的字符串。
    
        var str = "abcdefghij";
            str.substr(1,2);   // bc
            str.substr(1);     // bcdefghij
 *  **`toLocaleLowerCase()`**
    
    把字符串转换为小写的格式。
    
        var str=HELLO
        str.toLocaleLowerCase()//hello
 *  **`toLocaleUpperCase()`**
    
    把字符串转换为大写的格式。
    
        var str=hello
        str.toLocaleLowerCase()//HELLO
 *  **`split()`**
    
    用特定分隔符认定字符串中需要分割的位置，分割成数组。语法：`str.split(分隔符，切割后留下的个数)`
    
        var str = "Hello World. How are you doing?";
          str.split(" ", 3)//["Hello", "World.", "How"]
 *  **`String.fromCharCode()`**
    
    返回使用指定的Unicode值的序列创建的字符串。**静态方法**，即不能通过实例化直接调用，而是直接用大写的String调用
    
        String.fromCharCode(65)//A 如果输入多个则返回拼接后的字符串
    
    ***\[案例\]找到这个字符串中索引a出现的位置***
    
        var str="asjdhqohkjasekcaxa"
        var index=0//开始的位置
        var key="a"//要找的字符串
        while((index=str.indexOf(key,index))!=-1){ 
        	console.log(index)
            index+=key.length
        }

1.  [Array][] 数组对象是用于构造数组的全局对象

*  **`forEach()`**  
    遍历数组。对数组的每个元素执行一次给定的函数，不会改变原数组。这个函数不能终止循环  
    语法：`arr.forEach(item,(index)=>{操作})`
    
        const arr1= ['a', 'b', 'c'];
        arr.forEach(item => console.log(item));
        const arr2 = [1, 4, 9, 16];
        arr.forEach(item=> item * 2);//打印输出：[1, 4, 9, 16]
 *  **`map()`**  
    把每个元素进行处理后返回一个新数组  
    语法：`arr.map(item,(index)=>{处理})`
    
        const arr = [1, 4, 9, 16];
        arr.map(item=> item * 2);//打印输出：[2, 8, 18, 32]
 *  **`every()`**  
    测试数组内的所有元素是否都能通过某个指定函数,返回一个布尔值。可提前终止  
    语法：`arr.every(item,(index)=>{测试})`
    
        const arr = [1, 30, 39, 29, 10, 13];
        arr.every(item=>item<40))//打印输出：true 即所有元素满足小于40
 *  **`some()`**  
    测试数组是否至少有1个元素通过了测试，返回一个布尔值。可提前终止  
    语法：`arr.some(item,(index)=>{测试})`
    
        const arr = [1, 2, 3, 4, 5];
        arr.some(item=>item%2===0)//打印输出：true 即至少有一个元素可被2整除
 *  **`find()`**  
    返回数组中通过测试的第一个元素值。否则返回 undefined。可提前终止  
    语法：`arr.find(item,(index)=>{测试})`
    
        const arr = [5, 12, 8, 130, 44];
        arr.find(item=>item>10)//12 即12是第一个大于10的元素，返回
 *  **`findIndex()`**  
    返回数组中通过测试的第一个元素的索引。否则返回-1。可提前终止  
    语法：`arr.findIndex(item,(index)=>{测试})`
    
        const arr = [5, 12, 8, 130, 44];
        arr.findIndex(item=>item>13)//打印输出：3 即第一个满足测试的元素的索引是3
 *  **`cancat()`**  
    合并两个或多个数组,**返回一个新数组**。  
    语法：`旧数组.cancat(数组1，数组2...)`
    
        const arr1 = ['a', 'b', 'c'];
        const arr2 = ['d', 'e', 'f'];
        arr1.concat(arr2)//打印输出：["a", "b", "c", "d", "e", "f"]
 *  **`filter()`**  
    创建一个新数组, 里面是通过测试的所有元素。  
    语法:`arr.filter(item,(index)=>{测试})`
    
        const arr = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
        arr.filter(item=>item.length>6)//打印输出：["exuberant", "destruction", "present"]
 *  **`push()`**  
    将元素添加到数组的末尾，并返回该数组的新长度。改变原有  
    语法：`arr.push(元素1,元素2...)`
    
        const animals = ['pigs', 'goats', 'sheep'];
        animals.push('cows')//打印输出：4
        animals//打印输出：["pigs", "goats", "sheep", "cows"]
 *  **`unshift()`**  
    将元素添加到数组的开头，返回该数组的新长度,改变原有  
    语法：`arr.unshift(元素1,元素2...)`
    
        const arr = [1, 2, 3];
        arr.unshift(4, 5)//打印输出：5
        arr//打印输出：[4, 5, 1, 2, 3]
 *  **`pop()`**  
    从数组中删除最后一个元素，返回该元素的值,更改了数组的长度。  
    语法：`arr.pop()`
    
        const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
        plants.pop()//打印输出："tomato"
        plants//打印输出：["broccoli", "cauliflower", "cabbage", "kale"]
 *  **`shift()`**  
    从数组中删除第一个元素，返回该元素的值。更改了数组的长度。  
    语法：`arr.shift()`
    
        const arr = [1, 2, 3];
        arr.shift()//打印输出：1
        arr//打印输出：[2, 3]
 *  **`indexOf()`**  
    找给定元素的索引，返回。如果不存在，则返回-1。  
    语法：`arr.indexOf(要找的元素，从哪里开始)`
    
        const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
        beasts.indexOf('bison')//打印输出：1
 *  **`join()`**  
    用一个指定符号把数组元素连接起来，返回连接好的字符串  
    语法：`arr.join("指定符号")`
    
        const arr = ['Fire', 'Air', 'Water'];
        arr,join('-')//打印输出："Fire-Air-Water"
 *  **`reverse()`**  
    颠倒数组元素的位置  
    语法：`arr.reverse()`
    
        const arr = ['one', 'two', 'three'];
        arr.reverse();//打印输出：["three", "two", "one"]
 *  **`sort()`**  
    对数组的元素进行排序，并返回数组,改变了。按照转换为的字符串的各个字符的Unicode位点进行排序。  
    语法：`arr.sort()`，`arr.sort(比较函数)`
    
        const months = ['March', 'Jan', 'Feb', 'Dec'];
        months.sort();//打印输出：["Dec", "Feb", "Jan", "March"]
        
        var numbers = [4, 2, 5, 1, 3]; 
        sort((a, b) => a - b); //打印输出：[1, 2, 3, 4, 5]
 *  **`slice()`**  
    从开始位置到结束位置抽取新数组,不包括结束位置的元素  
    语法：`arr.slice(开始索引，结束索引)`
    
        const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
        animals.slice(2)//打印输出：["camel", "duck", "elephant"]
        animals.slice(2, 4)//打印输出：["camel", "duck"]
 *  **`splice()`**  
    删除、替换或添加元素来修改数组,以数组形式返回被修改(替换)的内容。改变原数组。  
    语法：`arr.splice(开始位置，要移除的个数，要添加（替换）的元素)`
    
        //删除
        var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
        myFish.splice(3, 1)//从第三位删除一个元素。打印输出：["mandarin"]
        myFish//打印输出：["angel", "clown", "drum", "sturgeon"]
        
        //替换
        var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
        myFish.splice(2, 1, "trumpet");//从第二个元素开始删除一个插入一个，即替换第三个元素。打印输出：["drum"]
        myFish//打印输出：["angel", "clown", "trumpet", "sturgeon"]
        
        //添加或插入
        var myFish = ["angel", "clown", "mandarin", "sturgeon"];
        myFish.splice(2, 0, "drum");//从第二个位置添加元素“drum”。打印输出:[]
        myFish//打印输出：["angel", "clown", "drum", "mandarin", "sturgeon"]
 *  **`Array.isArray()`**  
    静态方法，判断传递的值是否为一个数组
    
        Array.isArray([1, 2, 3]);  // true
        Array.isArray({ foo: 123}); // false

# 基本包装类型 #

> 普通变量不能直接调用属性或者方法 对象可以直接调用属性和方法

本身是基本类型，但是在执行代码的过程中，如这种类型的变量调用了属性或者是方法，那么这种类型就不再是基本类型了，而是基本包装类型。这个变量也不是普通的变量了，而是基本包装类型对象

var num=Number("10")//类型转换
    var num=new Number//基本包装类型

# 数据类型转换 #

*  `parseInt（）`：转为整数
 *  `parseFloat（）`：转小数
 *  `Number()`：转数字，更为严格
 *  `.toString()`：转字符串，如果变量有意义使用
 *  `String（）`：转字符串，没有意义时转换，即可以是未声明或null等
 *  `Boolean（）` ：转布尔值。0|字符串没有内容|null|undefined等没有意义的为false

# 流程控制 #

#### 1.顺序结构 ####

从上到下，从左到右

#### 2.分支结构 ####

`if` `if-else` `if-else if` `switch-case`

if(条件){ 事件1}else{ 事件2}
    
    //三元表达式可达到同等效果
    //解释：判断条件的结果是true还是false，如果是true执行事件1，如果是2执行事件2，最后把结果赋值给变量
    var a=条件?事件1:事件2

if(条件1){ 事件1}else if(条件2){ 事件2}else{ 事件3}
    //else if可无限添加

switch(变量){ 
    	case 值1:事件1:
    	break;
    	case 值2:事件2:
    	break;
    	case 值3:事件3:
    	break;
    	default:事件4
    }
    //获取变量的值，与case的值依次比较，如果一样则执行事件并且跳出整个语句。若前面都不相同，执行default事件。
    //变量与case值比较时，是严格模式，即“===”
    //若事件重复，值可集合在一起，在这个集合中，前面的事件和break可以省略，只保留最后一个即可

#### 3.循环结构 ####

`while` `do-while` `for` `for-in`

while(循环条件){ 
    	循环体；
    	计数器++
    }
    //判断循环条件是否为true，为true时执行，先循环体再计数器
    
    //计算1-100所有值的和
    var sum=0
    var i=0
    while(i<100){ 
    	sum+=;
    	i++;
    }
    //解析：第一次进入循环，sum=0，i=1；
    //第二次进入循环,sum=0+1，i=2;
    //第三次进入循环，sum=1+2，i=3

do{ 
    	循环体
    }while(循环条件)
    //先执行循环体，再判断条件，成立时继续执行，否则跳出

for(变量；判断；计数器){ 
    	循环体
    }
    //例子
    for(var i=0;i<10;i++){ 
    	执行事件
    }

`break`：循环中如果碰到则会跳出当前循环  
`continue`：不再执行其后面的事件，直接进入下一次循环

[JavaScript_2_DOM]: https://blog.csdn.net/aaaaapipi/article/details/107734029
[JavaScript_3_BOM]: https://blog.csdn.net/aaaaapipi/article/details/107749841
[JavaScript]: https://blog.csdn.net/aaaaapipi/article/details/107817093
[Link 1]: https://editor.csdn.net/md/?articleId=107817093
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70]: /images/20230208/619ad65097f94530ac7748bbb7b608d4.png
[Math]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math
[Date]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date
[String]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String
[Array]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array