JS 入门

J S 基础入门笔记

基本语法

输入输出语句

浏览器弹出输入框，用户可以输入

prompt(‘这里是输入框’);

浏览器弹出警示框

alert(‘这里是弹出的输出框’);

浏览器控制台打印输出信息

console.log(‘这是程序员看到的’);

变量

白话：变量就是一个装东西的盒子

通俗的说变量就是存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

本质：变量是程序在内存中申请的一块用来存放数据的空间。

//变量声明
var age;  //声明一个名称为age的变量
var age=18;  //变量的初始化  （声明并赋值）

• var是一个js的关键字，用来声明变量，使用该关键字声明变量后，计算机会自动分配内存空间，不需要程序员管。
• age是程序员定义的变量名，我们需要通过变量名来访问内存中分配的空间

变量的使用

    <script>
    //   读取用户输入并保存到name变量中
        var name=prompt('请输入你的名字');
    // 输出name变量
        alert(name);
    </script>

变量语法扩展

1.变量更新

一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋值的值为准

var age =1;
age=15;    	//最后的值是15，因为1被15覆盖了

2.声明多个变量

同时声明过个变量，只要写一个var，多个变量用英文逗号隔开。

//声明多个变量
        //  var age=5;
        //  var name='啊七';
        //  var home='泉州';
        // 改成
            var age=5,
                name='啊七',
                home='泉州';

3.声明变量的特殊情况
$$underfined未定义的$$

变量的命名规范

变量交换

var apple1=10;
var apple2=20;
var temp ;
temp = apple1;
apple1 = apple2;
apple2 = temp;
console.log(apple1)
console.log(apple2)

变量小结

数据类型

js 的变量数据类型是只有在程序的执行过程中，根据等号的右边值来确定的

js是动态语言 数据类型是可以变化的

数据类型的分类

js数据类型分为两类:

• 简单数据类型(Number,String,Boolean,Undefined,Null)
• 复杂数据类型(object)

数值型Number

  		// 数字型最大值
        // console.log(Number.MAX_VALUE);
        // 数值型最小值
        // console.log(Number.MIN_VALUE);
        // Infinity 无穷大
        // console.log(Number.MAX_VALUE*2);
        // -Infinity 无穷小
        // console.log(-Number.MAX_VALUE*2);
//这个方法用来判断非数字并返回一个值 如果是数字返回false 若果不是数字返回true
  		//  console.log(isNaN(15));
        //  console.log(isNaN('啊七'));

字符串型String

字符串型可以使引号中的任意文本，其语法为双引号""和单引号’’

字符串转义字符

\b	退格
\f	走纸换页
\n	换行
\r	回车
\t	横向跳格 (Ctrl-I)
’	单引号
"	双引号
\	反斜杠

字符串长度length

通过字符串的length属性可以获取整个字符串的长度

 // 检测字符串长度length
        var str="my name aq"
        console.log(str.length);
显示10

字符串拼接

数值相加 ，字符相连

多个字符串之间可以使用+进行拼接，方式为字符串+任何类型=拼接之后的新字符串

只要有字符串和其他类型拼接 最终结果都是字符串类型

   // 字符串的拼接+
        console.log("我是"+"啊七");
   显示   我是啊七
  		 console.log("12"+12);
   显示   1212

简单的交互

  // 案例       
        var age = prompt('请输入你的年龄');
        alert('你已经'+age+'岁了');

布尔类型Boolean

true 真 false假

    // 布尔类型
        var falg1 = true;
        var falg2= false;
       //显示为2   true与false参与加法运算当成 1 和 0
        console.log(1+falg1);

Undefined和Null

1. 一个声明变量没有被赋值的变量会有一个默认值Undefined（如果进行相连或者相加时，注意结果）

   var under =undefined;
           // undefined 和数字相加结果为 NaN （不是一个数字）
           console.log(1+under); 
           // undefined 和字符串相加 结果为字符串 underaq
           console.log(under+'aq');
   

2. null 空值

一个声明对象给null值，里面存的值为空

     //null 空值
        var nu = null;
        // 结果为 aqnu
        console.log('aq'+nu);
        // 结果为1
        console.log(1+nu);

**获取变量数据类型 **typeof

   // 检测数据类型typeof
        var num = 10;
        console.log(typeof num);
返回结果 number

       // 输出结果为strong字符串类型， 
       // prompt 取过来的值会变成字符串类型
        var age = prompt('请输入你的年龄');
        console.log(age);
        console.log(typeof age);
        

Chrome控制台的颜色 蓝色数值型 黑色字符串型

数据类型的转换

转为字符串：

**.toString()**方法：注意，不可以转null和underfined

//转为字符串-->toString方法
// 转化为字符串型
        var num=12;
        console.log(typeof num);                //输出number
        console.log(typeof num.toString());ue;  //输出string
console.log(bool.toString());
//注意，toString不能转null和underfined.

**String()**方法：都能转

console.log(String(null));//输出null

转换成数字型

parseInt() 可以将原来的字符串型改转换成数值型 得到是整数 注意大小写

	var age = prompt("请输入你的年龄")
	// parseInt(age)会将原来的字符串型改转换成数值型
	console.log(parseInt(age));   
	console.log(parseInt('3.94'));//取整 输出3   
	console.log(parseInt('120px'));  //输出120  会去掉px这个单位
	console.log(parseInt('rem120px'));  //NaN

**parseFloat()**可以将原来的字符串型改转换成数值型 得到是浮点数 注意大小写

console.log(parseFloat(3.14));  //输出3.14
console.log(parseFloat('120px')); //输出120  会去掉px这个单位
console.log(parseFloat('rem120px'));  //NaN

利用Number()

	var num = '123';
	console.log(Number(num));//输出123

**利用算数运算 ** 隐式转换 - * /

	// 利用算数运算
	console.log('12'-2);//输出10
	console.log('123'-'120');//输出3

数据转换案例

	//数据转换案例 计算年龄
	var Birth = prompt('请输入你出生年份');
	var age = 2020-Birth;
	alert('你今年'+age+'岁了');
	//简单加法器
    var num1 =prompt('请输入1个数');
    var num2 =prompt('请输入1个数');         
    var num3=parseFloat(num1)+parseFloat(num2);
    alert(num3);
    

转换成布尔型

**转换为Boolean()：**转换为Boolean()：0 ’ ’ null undefined NaN 会转换成false 其它都会转换成true

方法：

1、Boolean():

console.log(Boolean(2));//输出结果 true
console.log(Boolean('')); // 输出结果false

2、

不理解
var message;if(message){};

3、隐式转换：！！

var str="123";
var bool=!!str;
console.log(str);

数据类型小练习

	//小作业js视频40节
	var name = prompt('请输入您的姓名');
	var age = prompt('请输入您的年龄');
	var sex = prompt ('请输入您的性别');
	alert('您的姓名是:'+name+'\n您的年龄是:'+age+'\n您的性别是:'+sex);

运算符

JavaScript 算数运算符

算数运算符用于对数字执行算数运算：

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	系数
++	递加
–	递减

JavaScript 比较运算符

运算符	描述
== （转型）	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

==默认转换数据类型 会把字符串型的数据转换为数值型的数据

//值		相等就可以    ==默认转换数据类型 会把字符串型的数据转换为数值型的数据（隐式转换）
console.log(18=='18');//输出ture
//全等  等值等型
 console.log(18===18);//输出ture
 console.log(18==='18');//输出false

JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

JavaScript 逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
!	逻辑非

逻辑中断（短路操作）

逻辑与 && 的运算方式

var a = 5 && 6;

console.log(a); //返回的结果为 6

如果逻辑与运算符左边的值布尔转换后为true，那么返回右边的值（不管右边的值是真还是假）。

var a = false && 6;

console.log(a); //返回的结果为 false
//---------------------------------------------------------------------------------------------
逻辑或 || 的运算方式

var a = false || 6;

console.log(a); //返回的结果为 6

如果逻辑或运算符左边的值布尔转换后为false，那么返回右边的值（不管右边的值是真还是假）。

 var a = true || 6;
console.log(a); //返回的结果为 true

如果逻辑或运算符左边的值布尔转换后为true，那么返回左边的值，如果两个操作数都是是null（NaN/undefined），返回null（NaN/undefined）

JavaScript 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

JavaScript 位运算符

位运算符处理 32 位数。

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
|	或	5 | 1	0101 | 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

条件语句

if 语句

//if语句----------------------------------------
if (条件) {
    如果条件为 true 时执行的代码
} 
//实例
//如果时间早于 18:00，则发出 "Good day" 的问候：

if (hour < 18) {
    greeting = "Good day";
}
//如果时间早于 18 点，则 greeting 的结果将是：
	Good day
 //if  else 语句------------------------------------------------------
    if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}
//实例
//如果时间早于 10:00，则创建 "Good morning" 问候，如果不是，但时间早于 18:00，则创建 "Good day" 问候，否则创建 "Good evening"：

if (time < 10) {
    greeting = "Good morning";
 } else if (time < 18) {
    greeting = "Good day";
 } else {
    greeting = "Good evening";
 } 
//if...else if...else 语句-----------------------------------------------
语法
if (条件1)
{
    当条件 1 为 true 时执行的代码
}
else if (条件2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
 //三元表达式--------------------------------------------------
  　例如当你在经常用 if else 时：
　　　　if （ a = 1 ）{
　　　　　　会员 ;
　　　　}else{
　　　　　　不是会员 ;
　　　　}
　//　当用三元的表达式就是：
a = 1 ? 会员  :  不是会员
------------------------------------------------------- 
	var num = 10;      
	var result =  num>5 ? '是的':'不是的';
	console.log(result);//返回是的
    

    

Switch 语句

switch(表达式) {
     case n:
        执行语句;
        break;
     case n:
        执行语句;
        break;
        ...
     default:
        执行最后语句;
} 
//一般表达式写变量
//变量值和case的值相匹配的时候  是全等的  值和数据类型一致
//

代码解释：

• 计算一次 switch 表达式
• 把表达式的值与每个 case 的值进行对比
• 如果存在匹配，则执行关联代码
• 都没有匹配执行default的语句

如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。

循环

For 循环

for 循环的语法如下：

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

---

采用追加字符串

for循环控制台输出 一行五个☆

       var src = '';
          for(var i = 1; i<=5;i++ ){
              src=src+'☆';
          }
          console.log(src);
          

---

双重for循环

//打印五行五列星星☆
        var src = ''
        for(var i=1;i<=5;i++){
            for(var n=1;n<=5;n++) {                          
                src=src+'☆';                                                   
        }            
            src=src+'\n'                    
     }
      console.log(src);
      
 //用星星，打印倒10行的倒三角形
            var src = ''
            for(var i=1;i<=10;i++){
                for(var n=i;n<=10;n++){
                    src=src+'☆';
                }
                src=src+'\n'
         }
         console.log(src);
  //打印正10行三角形
        var src='';
        for(var i=1;i<=10;i++){
            for(var n=1 ;n<i;n++){
                src=src+'☆';
            }
            src=src+'\n'
        }
        console.log(src);

while循环

while (*条件*)
{
    *需要执行的代码*
}

do/while 循环

do
{
    *需要执行的代码*}
while (*条件*);

continue & break 关键字

continue

continue用于立即跳出本次循环，继续下次循环（本事循环体中continue之后的代码会少执行一次）

//假设在吃5个包子，吃到第三个发现坏了，借扔掉第三个，继续吃第四第五个
// continue  退出本次（当前次的循环） 继续执行剩余循环
for(var i=1;i<=5;i++){
	if(i==3){
		continue;//只要遇见continue就退出本次循环 直接跳到i++
		}
	console.log('我正在吃第'+i+'个包子');
            
}


// 0-100 除了能被7整除之外的整数和
        var sum = 0;
        for(var i = 1 ;i<=100 ; i++){
            if(i%7==0){
                continue;
            }
            sum= sum+i
        }
        console.log(sum);

break

break用于立即跳出整个循环（循环结束）。

//例如吃五个包子，吃到第三个发现有半只虫子，其余不吃了。
for(var i=1;i<=5;i++){
	if(i==3){
		break;
		}
	console.log('我正在吃第'+i+'个包子');
            
}

循环案例 简易ATM

 // 循环案例 简易atm
            var Balance = 100;//账户余额
            var Operation = prompt('请输入您要的操作：\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4.退出');
                Operation  = parseInt(Operation);              
                    switch(Operation){
                    	//-------------------存钱---------------------------     
                        case 1:
                        var Add = prompt('请输入您要存的金额');
                        Balance+=Add;
                        alert('您的当前可用余额为'+Balance+'元')
                        var Operation = prompt('请输入您要的操作：\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 																					4.退出');
                        break;
                        //--------------------取钱--------------------------
                        case 2:
                        var Less = prompt('请输入您要领取的金额');
                        if(Less>Balance){
                            alert('您的账户余额不足')
                        }else{
                            Balance=Balance-Less;
                            alert('您的当前可用余额为'+Balance+'元')
                        }
                        var Operation = prompt('请输入您要的操作：\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 																					4.退出');
                        break;
                        //---------------------显示余额----------------------------
                        case 3:
                        alert('您的当前可用余额为'+Balance+'元')
                        var Operation = prompt('请输入您要的操作：\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 																					4.退出');
                        break;
                        //------------------------退出-------------------------
                        case 4:
                        alert('谢谢惠顾')
                        break;
                    }
             

数组

创建数组

利用new创建数组

var 数组名 = new Array() ; 
var arr = new Array() ; //创建了一个新的空数组

利用数组字面量创建数组

//1.使用数组字面量创建空的数组
var 数组名 = [] ; 
// 2.使用数组字面量方式创建带初始值的数组
var 数组名 = ['小白'，'小红','小黑','小绿'];

• 我们数组里面的数据一定要用逗号分隔
• 数组里面的数据我们成为数组元素
• 数组里面可以存放任意类型的数据，例如字符串，数字，布尔值等。

var arrStus = ['小白',21,ture,3.14];

获取数组元素

数组的索引

// 数组的索引
        var arrStus = ['小白',true,12,'小绿'];
        console.log(arrStus);
        console.log(arrStus[2]);//输出12

遍历数组

遍历：就是把数组的元素从头到尾访问一次

      // 遍历数组
        var arr1 = ['小白','小红','小黑','小绿'];
        for (var i = 0; i <= 3; i++){
            console.log(arr1[i]);            
        }
//因为索引号从0开始  所以i也要从0开始

数组的长度

使用"数组名.length"可以访问数组元素的数量(数组长度)。

数组长度是元素个数 不要和索引号混淆。

动态检测数组元素的个数。

var arr1 = ['小白','小红','小黑','小绿'];
//                          ----↓------
        for (var i = 0; i < arr1.length; i++){
            console.log(arr1[i]);            
        }
        console.log(arr1.length);

   //输出数组中的最大值       
        var arr =[22,55,3,6,35,9];
        var max = arr[0];
        for(var i = 0;i < arr.length; i++){
            if(max<arr[i]){
                max = arr[i];
            }
        }
        console.log(max);

数组中新增元素

可以通过修改length长度以及索引号增加数组元素

可以通过修改length长度数组元素

• 以通过修改length长度来实现数组扩容目的
• length属性是可以读写的

        // 可以通过修改length长度数组元素
        var arr = [1,2,3,4];     
        arr.length = 7;
        console.log(arr);
        console.log(arr[4]);
        console.log(arr[5]);
//4 5 空间没给值 就是声明变量未给值  默认值是underfined。

可以通过修改索引号增加数组元素

 // 新增元素，修改索引号*

	var arr = [1,2,3,4];
	arr[4]='aq';
	console.log(arr);         

        //在数组里存 1-100
        var arr = [];
        for (var i = 0 ;i < 100 ;i++ ){
             arr[i] = i + 1 ;          
        } 
        console.log(arr);               

 //筛选数组 将数组里面比10大的数存进新数组
        var arr = [2,3,8,11,52,36,4,7,11];
        var arr1 = [];
        var j = 0; 
        for (var i = 0 ;i<arr.length ;i++ ){
            if(arr[i]>10){
                arr1[j]=arr[i];
                j++;
            }
        }
        console.log(arr1);
        console.log(arr);
//-------方法2--------------------------------
		var arr = [2,3,8,11,52,36,4,7,11];
         var arr1 = [];  
         for (var i = 0 ;i<arr.length ;i++ ){
             if(arr[i]>10){
                 arr1[arr1.length]=arr[i];
                 j++;
             }
         }
        console.log(arr1);
        console.log(arr);

数组排序(冒泡排序)

  //冒泡排序  代码实现
        var arr = [4,5,3,6,1,7];
        for (var i = 0 ;i <= arr.length - 1 ;i++ ){//外层循环管趟数
            for (var j = 0 ;j <= arr.length - i - 1 ;j++ ){//内层循环管 每一趟的交换次数
                //内部交换两个变量的值  前一个和后一个比较
                if(arr[j]<arr[j + 1]){
                    var temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);

删除数组

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX	可选。向数组添加的新项目。

说明

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

在本例中，我们将创建一个新数组，并向其添加一个元素：

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>

输出：

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

函数

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

函数的使用

        //函数使用分成两步
        //1.声明函数
        function 函数名(){
            //函数体
        }
        function say () {
            console.log('你好');            
        }
        //  （1）function 要小写    是声明函数用的关键字 
        //  （2）函数是做某件事情 ，函数名一般是动词
        //  （3）函数不调用自己不执行
        // 2.调用函数  调用函数不要忘记用小括号
        //函数名();
		say();

函数的封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

  // 用函数求 1-100累加和
        // 声明函数
        function getSum (){
            var sum = 0;
            for (var i = 0; i <= 100; i++){
                sum = sum + i
            }
            console.log(sum);           
        }
		getSum();
		getSum();

函数的参数

分为形参和实参

函数的参数可以有也可以没有 个数不限

  // 函数的参数
	形参：形式上的参数   
	实参：实际的参数  
        function (形参1,形参2,...){
           代码块
        } 
        函数名(实参1,实参2...);

            //形参是接收实参的  形参类似一个变量  aru='鸡米花' 类似变量赋值
            function cook (aru){   
                console.log(aru);               
            } 
            cook('鸡米花');
            cook('汉堡');
  		//函数例子 求任意两个参数的和
            function getSum( num1, num2){              
                sum=num1+num2
                console.log(sum);              
            }
            getSum(2,3)
             getSum(9,10)
      // 求任意两个参数之间的和
         function getSum( num1, num2){              
               var sum = 0;
               for (var i = num1; i <= num2; i++){
                    sum = sum +i;                    
            }
            console.log(sum);           
         }   
         getSum(1,100) 
//多个变量之间逗号隔开
//形参可以看做不用声明的变量

函数形参和实参匹配问题

尽量让形参和实参格式匹配

 // 函数形参和实参匹配问题
        function getSum( num1, num2){              
                sum=num1+num2
                console.log(sum);              
            }
 // 实参个数小于形参个数  形参可以看做不用声明的变量 此时num2 是一个变量没有接受到值 看做undefinded
            getSum(3)        // 输出NaN
 //形参和实参 个数一致 正常输出     
            getSum(2,3)      // 输出5
 // 实参 个数 大于 形参个数 取=取到形参个数
            getSum(2,3,4)    // 输出5

函数的返回值

return 语句

使用return语句可以实现 将函数值返回给调用者

             function getArrMax(arr)	{  //arr 接受一个数组
                    var max = arr[0];
                    for (var i = 0; i <= arr.length; i++){
                        if (arr[i] > max){
                            max = arr[i];
                        } 
                    }
                    return max
                }
            //    getArrMax([25,3,8,74,62,36,52]);//实参是一个数组送过去
                var resule = getArrMax([25,3,8,74,62,36,52]);
                console.log(resule);//函数的返回格式
function 函数名() {
	
	代码块
	 return 需要返回的结果; 	
}

函数名()

//1.我们函数只是实现某种功能，最终的结果需要返回给函数的调用者 --函数名()  是通过return实现的
//只要函数遇到return 就把后面的结果返回给调用者  函数名() = return 后面的结果


//代码验证
function getResult(){
    return 666;
}
getResult();//getResult()  = 666
console.log(getResult());

//求任意两个数之和
     function getSum( num1, num2){              
            return num1+num2;       
            }
        console.log(getSum( 1,2));      

    //  利用函数求两个数的最大值
        function getSum (num1,num2) {
            if (num1<num2){
                return num2
            }else{
                return num1
            }
        }
        console.log( getSum(1,3));
        console.log( getSum(5,3));

		//利用函数求数组 [25,3,8,74,62,36,52]中的最大值
             function getArrMax(arr)	{  //arr 接受一个数组
                    var max = arr[0];
                    for (var i = 0; i <= arr.length; i++){
                        if (arr[i] > max){
                            max = arr[i];
                        } 
                    }
                    return max
                }
            //    getArrMax([25,3,8,74,62,36,52]);		//实参是一个数组送过去
//在我们实际开发里面，我们经常用一个变量来接受 函数的返回结果 使用更简单
                var resule = getArrMax([25,3,8,74,62,36,52]);
                console.log(resule);
 

//利用函数冒泡排序
        function sort(arr) {
            for (var i = 0; i < arr.length - 1; i++) {
                for (var j = 0; j < arr.length - i - 1; j++) {
                    if (arr[j] < arr[j + 1]) {
                        var temp = arr[j];
                            arr[j] = arr[j + 1];
                            arr[j + 1] = temp;
                    }
                }
            }
            return arr
        }
		var arr1 = sort([1, 5, 6, 3, 4, 7]);
        console.log(arr1);
		var arr2 = sort([71, 5, 6, 43, 40, 73]);
        console.log(arr2);

return 语句之后的代码不执行

		//return 语句之后的代码不执行
	function getSum( num1, num2){              
            return num1+num2;  
    		alert('我不会被执行')
            }
        console.log(getSum( 1,2));      
	//return 语句只能返回一个值
	function getSum( num1, num2){              
            return num1,num2;  //返回最后一个值
            }
        console.log(getSum( 1,2)); 
//想要返回多个结果  ---  例子 要求任意两个数的加减乘除结果 
function getResult(num1,num2){
    return[num1 + num2,num1 - num2,num1 / num2 ,num1* num2];
}
car re = getResult(1,2);//返回的是一个数组 然后遍历把值取出来就好了
console.log(re);

函数没有return返回的undefined

我们的函数如果有return，则返回的是return后面的值，如果函数没有return 则返回undefined

argument使用

它是JS的一个内置对象，常被人们所忽略，但实际上确很重要，JS不像JAVA是显示传递参数，JS传的是形参，可以传也可以不传，若方法里没有写参数却传入了参数，该如何拿到参数呢，答案就是arguments了，在一些插件里通常这样使用。

每一个函数都有一个arguments对象，它包括了函数所要调的参数，通常我们把它当作数组使用，用它的length得到参数数量，但它却不是数组，使用instanceof查看下，若使用push添加数据将报错，代码如下：

function fn (){
     console.log(arguments);//里面存储量所有传递过来的实参
     console.log(arguments.length);//输出3
     console.log(arguments[0]);//输出1
    
   
    //我们可以按照数组的方法遍历
    for(var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
    
    
}
fn(1,2,3);
fn(1,2,3,4,5);

arguments展示形式是一个伪数组，因此可以被遍历。伪数组具有以下特点:

• 具有length属性
• 按水印方式存储数据
• 不具有数组的push，pop等方法

函数可以调用另一个函数

function fn1(){
	console.log(11);
	fn2;//这里fn1 函数调用了 fn2 函数
}
fu1();
function fn2(){
	console.log(22);
} 

函数第二种声明方式

函数表达式
var 变量名 = function(){};
//----------------------------------------
var fn = function(aru){
	console.log('我是函数表达式');
    console.log(aru)
}
fn('aq');
//fn是 变量名 不是 函数名 
//函数表达式声明方式跟变量的声明方式差不多，只不过变量的是值 而 函数表达式里面存的是函数
//函数表达式也可以进行传递参数

作用域

• 就是代码名字（变量）在某个范围内起作用和效果 目的是为了提高程序的可靠性 更重要的是为了提高程序的可靠性 和减少，命名冲突
• js的作用域（es6）之前：全局作用域 局部作用域

全局作用域：整个script标签 或者是一个单独的js文件

局部作用域（函数作用域）：在函数内部就是局部作用域 这个代码的名字只在函数的内部起作用和效果

全局变量和局部变量

**全局变量：**在全局作用域下的变量 在全局都可以使用

• 在代码的任何位置都可以使用
• 全局作用域下 var 声明的变量
• 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不推荐使用）

局部变量：在局部作用域下声明的变量 （在函数内部定义的变量）

• 局部变量只能在该函数内部使用
• 在函数内部 var 声明的变量就是局部变量
• 函数的形参实际上就是局部变量

<script>
    //变量的作用域：根据作用域的不同我们变量分为全局变量和局部变量
    //1.全局变量：在全局作用域下的变量 在全局都可以使用
    //注意！ 如果在函数内部没有声明直接赋值的变量也属于全局变量
	var num = 10  //num就是一个全局变量
	console.log(num);
	
	function fn (){
        console.log(num);
    }
	fn();
	//2.局部变量   在局部作用域下的变量  或者在函数内部的变量就是 局部变量
	//注意！ 函数的形参也可以看做局部变量
	function fun(){
        var num1 = 10; //num1 就是局部变量 只能在函数内部使用
        	num2 = 20;
    }
	fun();
	console.log(num1);//这里会报错
	console.log(num2);
//3.从执行效率来看全局变量和局部变量
//（1）全局变量 只有在浏览器关闭时候才会销毁，鼻尖占内存资源
//（2）局部变量 当我们程序执行完毕就会销毁，鼻尖节约内存资源
</script>

作用域链

• 只要是代码，至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在这个作用域中又可以诞生一个作用域
• 根据内部函数可以访问外部函数变量这种机制，用链式查找决定哪些数据能被内部函数访问就称作作用域链

//作用域链：  内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值 这种结构我们称作为作用域链  就近原则
	var num = 10 ;

	function fu (){		//外部函数 
        var num = 20;
        function fun (){//内部函数
            console.log(num);
        }
    }

作用域链案例

//案例1 输出结果是多少 
function f1(){
    var num = 123;
    
    function f2(){
        var num = 789
        console.log(num);
    }
    f2();
}
var num = 456;
f1();
//结果789

js预解析

预解析

• js引擎运行js 分为两步 ：预解析 代码执行

1. 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域 的最前面
2. 代码执行 按照代码书写的顺序从上往下执行

• 预解析分为 变量预解析（变量提升） 和 函数预解析（函数提升）

1. 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作 （2问 4问）
2. 函数提升 就是把所有的函数声明提升到当前的作用域最前面 不调用函数 （3 问）

//1问
	console.log(num);
//-------------------------------------------
//2问
	console.log(num);//undefined   坑1
	var num = 10;
//2相当于执行了下面代码
	var num
	console.log(num);
	num = 10;
//------------------------------------------------
//3问
	fn();
	
	function fn(){
        console.log(11);
    }
//3相当于执行了下面代码
	function fn(){
        console.log(11);
    }
	fn();
//-------------------------------------------------------
//4问
	fun();//报错 坑2
	
	var fun = function(){
        	console.log(22);
    }
    // 函数表达式 调用必须卸载函数表达式的下面
    //4问相当于执行了下面代码
	var fun； 
	fun();
	fun = function(){
        	console.log(22);
    }	

对象

在js中 ，对象是一组无序的相关属性和方法的集合，所有的食物都是对象 例如字符串、数值、数组、函数等。

对象是由属性****和方法组成的。

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

为什么需要对象

创建对象的三种方式

在js中，现阶段可以用三种方法创建对象（object）

• 利用 字面量 创建对象
• 利用 new Object 创建对象
• 利用 构造函数 创建对象

1. 利用 字面量 创建对象：就是花括号 { } 里面包含了表达这个具体事务（对象）的属性和方法

//1.利用 字面量 创建对象 {}
	var obj = {} ;// 创建了一个空对象

	var obj1 = {
        //属性
        uname : '啊七',
        age : 22,
        sex : '男',
       //方法
        sayHi: function (){
            conlose.log('Hi');
        }
        
    }
    //（1）里面的属性或者方法我们采用键值对的形式  键 属性名 :  值 属性值
    //（2）多个属性或者方法中间用逗号隔开的
    //（3）方法冒号后面跟的是一个匿名函数
    
    //2.使用对象
    //调用对象的属性 我们采取 对象.属性名  
    conlose.log(obj1.uname);
	//调用属性还有一种方法  对象名['属性名']
	conlose.log(obj1['are']);
	//调用对象的方法sayHi  对象名.方法名 不要忘记小括号
	obj1.sayHi();

2. 利用 new Object 创建对象

	    var obj = new Object();//创建了一个空的对象
        obj.uname = '啊七';
        obj.age = 18;
        obj.sex = '男';
		obj.sayHi = function(){
            console.log('hai');
            
        }
		console.log(obj['age']);      
  		console.log(obj.sex);          
		 obj.sayHi();

3. 利用构造函数创建变量

为什么构造函数创建变量

• 因为前面两种创建对象的方式一次只能创建一个对象
• 我们一次创建一个对象，里面很多属性和方法是大量相同的 我们只能复制 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数 称为构造函数
• 又因为这个函数不一样，里面封装的不是普通代码，而是 对象
• 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

**构造函数：**是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new 运算符一起使用。我们可以吧对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

  // 构造函数语法
            function 构造函数名 (){
                this.属性 = 值;
                this.方法 = function(){

                }
            }
            new 构造函数名();
//例子
//构造函数名字首字母大写
//构造函数不需要return 就可以返回结果
//调用构造函数必须使用 new
//我们只要 new Star()调用函数 就创建了一个对象
//属性和方法前面必须添加this
	function Star(uname,age,sex){
        this.name = uname
        this.age = age;
        this.sex = sex;
        this.sleep = function(sang){
            console.log(sang);
        }
    }
	var zxq = new Star('aq',18,'boy');
	zxq.sleep('睡觉');
   	console.log(zxq);
    console.log(typeof zxq);//输出object
    console.log(zxq.sex);       

	var ddq = new Star('dq',19,'bigboy');


//例子
                function Wzry(name,type,blood){
                    this.name = name;
                    this.type = type;
                    this.blood = blood;
                    this.attack = function (ack){
                        console.log(ack);        }                
                }
                var hy = new Wzry('后裔','射手','100血量');
               
                console.log(hy.blood);
                console.log(hy);
                hy.attack('提款机')
	

变量、属性、函数 方法的区别

变量和属性相同 他们都是来存储数据的

• 变量 单独声明并赋值 使用的时候直接写变量名单独存在
• 属性 在对象里面的不需要声明 使用的时候必须是 对象.属性

函数和方法的相同点 都是事先某种功能 做某件事

• 函数是单独声明并且调用的 函数名() 单独存在的
• 方法在对象里面 调用的时候 对象.方法()

	var num = 10;
	var obj = {
        age : 18
        
        fn:function(){
            
        }
    }
    console.log(obj.age);
	console.log(age);

new 关键字

new在执行的时候会做四件事情：

• 在内存中创建一个新的空对象
• 让this指向这个新的对象
• 执行构造函数里面的代码，给这个新对象添加属性和方法
• 返回这个新对象（所以构造函数里面不需要return）。

遍历对象

for…in 语句 用于对数组或者对象的属性进行循环操作

for…in 里面的变量一般用k 或者key

  // 遍历对象
                var obj = new Object();//创建了一个空的对象
                        obj.uname = '啊七';
                        obj.age = 18;
                        obj.sex = '男';
                        obj.sayHi = function(){
                            console.log('hai'); 
                            
                        }


                //    for in 遍历对象     
                // for (变量 in 对象){     //语法格式

                // }            

                for(var k in obj){
                    console.log(k);             //变量输出得到属性名
                    console.log(obj[k]);        //obj[k] 得到属性值
                    
                }        

    //判断一个对象是否有该属性  对象['属性名'] 
    var o ={
        age:18
    }
    if(o['age'] ){
        console.log('里面有该属性');
        
    }else{
        console.log('里面没有该属性');
        
    }

内置对象

指js自带的一些对象，这些对象提供开发者使用，并提供了一些常用的或是最基本而且必要的功能（属性和算法 ）

Math对象

Math对象 不是一个构造函数，所以不需要new来调用 而是直接使用里面的属性和方法

console.log(Math.PI);//一个属性 圆周率
onsole.log(Math.max(1,3));//最大值

封装自己的数学对象 里面有PI和最大值和最小值

							var myMath = {
                            PI: 3.141592653,
                            max : function () {
                                var max = arguments[0];
                                for (var i = 1;i < arguments.length; i++) {
                                    if (arguments[i]>max) {
                                        max = arguments[i]
                                    }
                                }
                                return max;
                            },
                            min: function () {
                                var min = arguments[0];
                                for (var i = 1;i < arguments.length; i++) {
                                    if (arguments[i] < min) {
                                        min = argumets[i]
                                    }
                                }
                                return min;
                            }
                        }
                        console.log(myMath.PI);
                        console.log(myMath.max(1,5,9));
                        console.log(myMath.min(1,5,9));

随机数方法 random()

返回一个随机的小数 0 <= x <1

日期对象

Date() 日期对象 是一个构造函数 必须使用 new 来调用创建我们的日期对象

Date对象和Math对象不一样。他是一个构造函数，所以我们需要实例化后才能使用

  		// 1.使用Date  
        var date = new Date();
        // 没有参数返回系统当前时间
        console.log(date);
        // 参数常用的写法  数字型 2020,6,22   或者是字符串型 '2020-6-22 8:30:30'
        var date1 = new Date('2020-10-1 8:30:30');
        console.log(date1);

格式化日期年月日星期

// 格式化年月日
var date = new Date();
//返回当前日期的年
console.log(date.getFullYear());
// 返回当前月份  但是返回的月份小一个月
console.log(date.getMonth() + 1);
// 返回日期
console.log(date.getDate());
// 返回星期几  周一返回1 周六返回6 周日返回0
console.log(date.getDay());
// 几年几月几日
var year = date.getFullYear();
var month = date.getMonth() + 1;
var date = date.getDate();

console.log(year+'年'+month+'月'+date+'日');

// 封装函数返回时分秒
    function getTime() {
        var time = new Date();
    var h = time.getHours();
  
    if (h<10){
        h = '0'+h;
    }else{
        h = h 
    };

    var m = time.getMinutes();
   
    var s = time.getSeconds();
   
    s = s < 10 ? '0'+s : s;

    return h + ':' + m + ':' + s;
    }                    
    console.log(getTime());

Date总的毫秒数(时间戳)

不是当前时间的毫秒数 而是现在时间距离1970年一月一号过了多少毫秒数

 var date = new Date();
    // 1.通过 .valueOf()  和  .getTime()
    // 现在时间距离1970年一月一号过了多少毫秒数
    console.log(date.valueOf());
    console.log(date.getTime());
    // 2.简单的写法  (最常用的写法)
    var date1 = +new Date();
    console.log(date1);
    // 3.H5新增 获得中的毫秒数  旧的浏览器可能不兼容
    console.log(Date.now());

利用时间戳写倒计时

function conutDown(time){
				var nowTime = +new Date();//返回当前时间的毫秒数
				var inputTime = +new Date(time);//返回用户输入时间的毫秒数
				var times = (inputTime - nowTime ) / 1000;  //times就是剩余时间总的秒数
				var d = parseInt(times / 60 / 60 / 24);//计算天数
				d = d < 10 ? '0' + d : d;
				var h = parseInt(times / 60 / 60 % 24);//计算小时
				h = h < 10 ? '0' + h : h;
				var m = parseInt(times / 60 % 60);//计算分钟
				m = m < 10 ? '0' + m : m;
				var s = parseInt(times % 60);//计算秒数
				s = s < 10 ? '0' + s : s;
				return d + '天' + h + '小时' + m + '分钟' + s + '秒'
			}
			console.log(conutDown('2020-6-23 20:8:00'));

数组对象

创建数组的方式

     var arr1 = new Array()//创建了一个空的数组元素
     var arr1 = new Array(3)// 3 表示数组长度为 3 里面有三个空的数组元素 
     var arr1 = new Array(2,3);//这样写等价于[2,3]  里面有两个数组元素2和3

检测是否为数组

方法一

//instanceof  运算符可以用来检测是否为数组
var arr = [];
console.log(arr instanceof Array);

方法二 H5新增方法 ie9以上版本支持

var arr = [];   
console.log(Array.isArray(arr));

添加删除数组元素的方法

添加数组元素

1. push()

 	// push() 在我们数组的末尾添加一个或者多个数组元素
    var arr = [1,2,3];
    // 将 4和 'aq'  添加在arr数组3的后面
    arr.push(4,'aq');
    console.log(arr);    	
    console.log(arr.push());// push 完毕之后 返回的结果是 新的数组长度
	//原来的数组也会发生变化

2. unshift()

    var arr = [1,2,3];	
    arr.unshift('aq');//将aq添加到数组的前面
    console.log(arr);
    console.log(arr.unshift());//返回数组长度

删除数组元素

1. pop()

 	// pop()  可以删除数组的最后一个元素  一次只能删除一个元素
    // pop()没有参数
    // pop完毕之后，返回的结果是  删除的那个元素
    // 原数组也会发生变化

    var arr = [1,2,3];
    //arr.pop();
    console.log(arr);
    console.log(arr.pop());

2. shift()

	// shift()  可以删除数组的第一一个元素  一次只能删除一个元素
    // shift()没有参数
    // shift()完毕之后，返回的结果是  删除的那个元素
    // 原数组也会发生变化
    var arr = [1,2,3,4];
    // arr.shift();
    console.log(arr);
    console.log(arr.shift())
    

筛选数组，[3,4,1,6,9,8,7,9,5,4,],要求删除大于6的数组元素

    // 筛选数组
    var arr =  [3,4,1,6,9,8,7,9,5,4];
    var newArr = [];
    for(var i = 0; i < arr.length ; i++){
       
        if(arr[i] < 6){
            // newArr[newArr.length] = arr[i];//方法一
            newArr.push(arr[i]);//方法二
        }
    }
    console.log(newArr);
    

数组排序

1. 翻转数组

  // 1.翻转数组
    var arr = ['啊七','xaq','ddq']
    arr.reverse();
    console.log(arr);

2. 数组排序（冒泡排序）

//2. 数组排序（冒泡排序）
    var arr = [11,12,23,4,9,6,17,6];
    arr.sort(function(a,b){
        return a - b; //升序的循序排列 将a-b改成b-a就是降序
    });
    console.log(arr);
    

数组的索引方法

返回数组元素索引号的方法

// indexOf(数组元素)  作用就是返回该数组元素的索引号  从前往后找
//只返回第一个满足条件的索引号--改
//如果在该数组找不到元素 则返回-1
        var arr = ['a','aa','aaa','aaaa','aa'];     
        console.log( arr.indexOf('aa'));//输出1
		console.log( arr.indexOf('ss'));//则返回-1
//lastindexOf(数组元素) 和 indexOf()  一样 不过是从后往前找
	 	console.log(arr.lastIndexOf('aa'));//输出4

数组去重（重点案例）

  // 数组去重（重点案例）   
        function unique(arr){
            var newArr = [];
            for (var i = 0; i < arr.length; i++){
                if(newArr.indexOf(arr[i]) === -1){
                    newArr.push(arr[i]);
                }
            }
            return newArr;
        }    
        var demo = unique([1,2,4,5,3,1,8,3,3,2,4]);
        console.log(demo);

数组转化为字符串

 		// 将数组转化为字符串
        // 1.toString()
        var arr = [1,2,3];
        console.log(arr.toString());
       
----------------------------------------------------
        // 2.join('分隔符')  分隔符可以随便用自己喜欢的
        var arr1 = ['aq','zxq','ddq'];
        // 不加分隔符默认用逗号隔开
        console.log(arr1.join());
        
        console.log(arr1.join('-'));
        
        console.log(arr1.join(' ヽ(￣▽￣)ﾉ '));

字符串对象

基本包装类型

字符串的不可变

 // 字符串对象  根据字符返回位置 str.indexOf('要查找的字符',[起始的位置])
    var str = '改革春风吹满地，春天来了'
    console.log(str.indexOf('春'));
    // 索引号是3的位置开始查找
    console.log(str.indexOf('春',3));

ASCII码 判断用户按了哪个键

字符串的操作方法

 // 字符串的操作方法
    // 1.concat('字符串1','字符串2'...)
    var str = 'ab';
    console.log(str.concat('c','d'));
    // 2.substr('截取的起始位置','截取几个字符')
    var str1 = '一闪一闪亮晶晶'
    console.log(str1.substr('1',3));

替换字符串以及转化为数组

• 替换字符串 replace(‘被替换的字符’,‘替换为的字符’)
• 字符替换为数组split(‘分隔符’)

    // 1.替换字符串 replace('被替换的字符','替换为的字符')  他只会替换一个字符
    var str = '一天天的'
    console.log(str.replace('天','些'));
    // 把字符串'一闪一闪亮晶晶'中的闪替换换成*
    var str = '一闪一闪亮晶晶';
    while(str.indexOf('闪') !== -1){
        str = str.replace('闪','*');
    }       
   console.log(str);
   
    //   2.字符替换为数组 split('分隔符')  与join()把数组转化为字符串相反  
    //  split('分隔符') 里面的分隔符取决于 字符串 里面用什么符号隔开
    var str = '1,2,3,4,5'
    console.log(str.split(','));
    var str1 = '1!2!3!4'
    console.log(str1.split('!'));
    

toUpperCase()//转换大写
toLowerCase()//转换小写

简单数据类型和复杂数据类型

   // 简单数据类型 null 返回的是一个空对象object
        var timer = null;
        console.log(typeof timer);
        // 如果有个对象我们已有打算存储为对象，暂时没想好放什么，这个时候可以给null

注意：js中没有堆栈的概念，通过堆栈的方式，可以更容易理解代码的一些执行方式，以便于其他语言的学习。

数据类型的内存分配

---

简单数据类型

简单数据类型 是存放在栈里面 里面直接开辟一个空间 存放的是值

---

复杂数据类型

复杂数据类型 首先在 栈里面存放地址 用十六进制表示 然后这个地址指向堆里面的数据

---

图解

简单类型传参

函数的形参也可以看做一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部的变量。

复杂数据类型传参

图解