JavaScript学习笔记一

web三大标准：

HTML(结构) + CSS（样式） +JavaScript(行为)

JavaScript的作用：

动态效果+数据交互

编程语言

编程 让计算机为解决某个问题而使用某种程序设计语言编写程序代码，最终得到结果

是什么？

世界上最流行的语言之一，是一种运行在客户端的脚本语言

脚本语言 不需要编译， 运行过程中 由**js解析器(js引擎)**逐行来进行解释并执行

现在也可以基于Node.js技术来进行服务器端编程

作用：

• 表单动态校验
• 网页特效
• 服务端开发(nodejs)
• 桌面程序
• APP
• 控制硬件—物联网
• 游戏开发

浏览器执行js

浏览器分为： 渲染引擎 和 js引擎

渲染引擎 ：用来解析HTML和CSS，俗称内核，比如谷歌浏览器 blink

js引擎: js解析器，用来读取网页中的javascript代码，对其处理后运行，比如谷歌的v8

逐行执行每一句代码

js的组成：

ECMAScript语法，BOM，DOM

js的几种引入方式：

行内式：

• 可以将单行或少量js代码写在HTML标签的事件属性中(以on开头的属性) 比如onclick
• 单双引号要错开使用，HTML中推荐使用双引号，js中使用单引号
• 可读性差，在html中编写大量js代码，不方便阅读，引号容易弄混

 <input type="button" value="点我" onclick="alert('hello 17期学员 大家晚上好')">

内嵌式：

• 可以将多行js代码写到script标签中
• 内嵌js是学习最常用的方式

<script>
    alert(123)
    alert(9)
</script>

外部式：

• 适合js代码量比较大的情况

• 利于HTML代码的结构化，把大段的js代码独立到HTML页面之外，方便复用

• 引用外部js文件的script标签中间不可以写代码

  新建一个js文件，xxx.js

  html页面中通过script引入js文件

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

js注释：

// 单行注释   ctrl+/

/* 多行注释 alt +shift+a */

变量：

什么是变量：

变量就是一个装东西的盒子（大白话）

变量是用于存储数据的容器，我们通过变量名获取数据，甚至数据可以更改

变量在内存中存储：

变量是程序在内存中申请的一块用来存放数据的空间，类似我们酒店的房间，一个房间可以看作是一个变量

变量使用：

1、变量声明

/* 
        var是js的关键字，用来声明变量的，用该关键字声明的变量，计算机会自动为变量声明内存空间，不需要程序员管
         name是程序员定义的变量名，我们要通过变量名来访问变量
        */
var name;   //声明了一个名称为name的变量

2、变量赋值：

// 2.变量赋值
/* 
         把等号右边的值赋值给左边的变量，变量值就是程序员保存到变量空间里的值
        */
name = "张三";   //给name这个变量赋值为 "张三"

3、变量初始化

// 3.变量初始化
var aa = 123;  //声明变量并赋值---称为变量的初始化

4、变量的扩展

/* 
        一个变量被重新赋值，原来的值会被覆盖，变量值将以最后一次赋的值为准
        */
var bb = 123;
bb = 44;

// 同时声明多个变量  同时声明多个变量，只需要写一个var ，多个变量名之间用逗号隔开

var  age =23,n=34,sex="男";

5、变量的特殊情况

var cc;
console.log(cc);   //只声明不赋值，默认值是undefined

// console.log(dd);   //不声明 不赋值 直接使用   报错:dd is not defined

ee = 45;
console.log(ee);   //不声明 只赋值  45

6、变量的命名规范

• 由字母，数字，下划线，$组成，如：num01，_age, $axios…
• 严格区分大小写， var a 和var A 是两个变量
• 不能以数字开头
• 不能是关键字，保留字 var for if else while do …
• 要有语义化
• 遵守驼峰命名法，首字母小写，后面单词的首字母要大写 myFirstName

数据类型：

变量存储的数据，可以是各种类型的数据

1、简单数据类型：

Number数字：

// 简单数据类型
// 1 Number 数字型
var age = 23;   //整数
var f =23.5 ;    //小数

// isNaN() ---is not a number 判断变量是否为非数字的类型  非数字返回true ，数字返回false

var usAge = 21;
var isOk = isNaN(usAge);   //false
console.log(isOk);

var username = "lucy";
console.log(isNaN(username));  //true

isNaN()：

判断变量是否为非数字的类型 非数字返回true ，数字返回false

String字符串：

字符串可以是引号中的任意文本，语法是双引号 " " 和 单引号 ‘’

var str ="欢迎大家";
var str1 = '大家好';

// var str3 = hello ;  报错  hello is not defined 没有使用引号，会被认为是js代码，但是js没有这个语法

// 单双引号要错开使用
var str3 = "我是 '高富帅'";
var str4 = '我是"高富帅"';

字符串转义符：

// 字符串转义符
// 类似于HTML里的特殊符号，字符串也有特殊符号，我们称为转义符
// 转义符 都是以  \ 开头的
/* 
 \n  换行符
 \\  斜杠
 '  单引号
 "  双引号
  \t tab缩进
  \b 空格

*/

alert("hello 大家好，\n\t\t\t欢迎来\b\b到 '丁鹿学堂' 17期")

字符串长度：

length

// 检测字符串的长度  length
var str5 = "my name is lucy";
console.log(str5.length);  //15

字符串拼接：

// 字符串拼接  + 只要由字符串和其他类型变量/值拼接，最终的结果是字符串
console.log("沙漠"+"骆驼");    //"沙漠骆驼"
console.log("丁鹿学堂"+13) ;  //"丁鹿学堂13"
console.log("丁鹿学堂" + true); //"丁鹿学堂true"
console.log(12+13);   //25  number
console.log("12"+24);  //"1224"



var  age=12;
console.log("我的年齡是age岁");  //我的年齡是age岁
// 引引相加
console.log("我的年齡是"+age+"岁");  //我的年齡是12岁

布尔类型：

布尔类型由两个值: true 和false,true表示真，false表示假

// 布尔型和数字型相加  true为1  false为0
var flag = true;

var flag1=false;
// true参与加法运算  当1来看
console.log(flag+1);  // 2

// false 参与加法运算  当0来看
console.log(flag1+1);  //1

undefined和null：

// 一个变量只声明不赋值，值为undefined，数据类型也是undefined

var str;
console.log(str);  //undefined
console.log(str + 1);  //NaN

var str1 = undefined;
console.log(str1 + "hello");  // "undefinedhello"
console.log(str1 + 1);  //NaN  not a number   undefined和数字相加，最后的结果是NaN

// 一个声明的变量给null值，里面存的值为空 (学习对象，研究null)
var space = null;
console.log(space + "hello");  //"nullhello"
console.log(space + 1);  //1

2、复杂数据类型：

获取变量数据类型：

获取变量的数据类型 typeof

// 获取变量数据类型
var num=12;
console.log(typeof num);  //number
console.log(typeof "xiaoxiao");  //string
var bol = true;
console.log(typeof bol);  //boolean

var boll;
console.log(typeof boll);  //undefined
var bol2 = null;
console.log(typeof bol2);  //object

字面量：

字面量是在源代码中一个固定值的表示法，通俗点说，就是字面量表示如何表达这个值

数字字面量  3,2,5,6
字符串字面量   "前端"
布尔字面量   true  false

数据类型转换：

// 数据类型转换

// 使用表单，prompt获取过来的数据默认都是字符串类型，不能进行简单的加法运算，需要进行数据类型转换

// var s = prompt("请输入一个数字");   //点确定 s的值为输入的值   点取消 s的值为null
// console.log(typeof s)
// console.log(s+3)

// 转换为数字型

// parseInt(s)  转换为整型
// console.log(parseInt(s));  // "123" ---123  "123sss"---123  "ss23"-- NaN   "2w2" ----2   "12.4"---12
console.log(parseInt(true))  //NaN

// parseFloat() 转换为浮点型

// console.log(parseFloat(s));// "123" ---123  "123sss"---123  "ss23"-- NaN   "2w2" ----2  "12.4"---12.4
console.log(parseFloat(true))  //NaN

// 强制转换  Number
// console.log(Number(s));  //"123" ---123  "123sss"---NaN  "ss23"-- NaN   "2w2" ----NaN  "12.4"---12.4

// 隐式转换 
console.log("23"-12) ;  //11

console.log("23"*12) ;  //276

console.log("23"/12) ;  //1.9166666666666667


// 转换为字符串型
var num = 78;
console.log(typeof num.toString())

var flag =true ;
console.log(typeof flag.toString())
console.log(num.toString())  //"78"

// String() 强制转换
console.log(typeof String(90))   //string   "90"
console.log(String(true))  //"true"

// 隐式转换
// 字符串和任何类型相加都是字符串
console.log("!23"+12);  //"!12312"
console.log("!23"+true);  //"!123true"


// 转换为布尔型
console.log(Boolean(null))  //false
console.log(Boolean(undefined))  //false
console.log(Boolean("123")) //true
console.log(Boolean(123))  //true
console.log(Boolean(""))  //false
console.log(Boolean(0))   //false
console.log(Boolean(1))  //true

console.log(true + 0)  //1
console.log(false +0 )  //0
console.log(true + 1)  //2
console.log(false +1)  //1

运算符：

算数运算符：

x +- */%       
console.log(12+34);        
console.log(34-12);        
console.log(2*8);       
console.log(98/23);      
console.log(98%9);

递增递减运算符：

如果需要反復的给数字变量添加和减去1，可以使用递增（++） 递减(–)运算符

++ – 可以放到变量的前面 （前置递增）也可以放到变量的后面（后置递增）

递增递减运算符必须和变量配合使用

var num = 3;

num += 1;    //num = num +1  把=右边的值赋给等号左边  4

num -= 1;   //num = num -1   3

num *= 7;   //num = num * 7   21

num /=2 ;   // num = num / 2;   10.5

num %= 3   //num = num % 3;`  1.5
// console.log(num)

// 前置递增就是自加1   ++num  类似于  num = num +1

var num1 = 10;
num1 ++;   //11

++ num1;  //12

// 前置递增 和后置递增如果单独使用，效果一样，都是自增，类似于 num1 = num1 +1


// 先加1 (自身自增变为13 ) 后运算
console.log(++num1 + 10);   //23   num1 = 13
// 后置递增  先运算 后自增
console.log( num1++ +10);   //23   num1 = 14

/* 
前置递增 和后置递增如果单独使用，效果一样，都是自增，类似于 num1 = num1 +1
前置递增 先自身加1 后运算
后置递增  先运算 后加1
*/


// console.log( num1++ *10)



var age=13;
++ age;
var b = ++age +2;
console.log(age,b)  //15,17
// --------------------


var i = 10;
alert(10 + i++);  //alert(20) i =11

// --------------

var b = 2;
var c = 3;
console.log(b++ +c);  //5   b=3  c =3
console.log(b)  //3
console.log(++b + c)  //b=4  7
console.log(b);  //4
console.log(b++ + ++c);  //c =4  4+4=8 b=5
console.log(b + "," +c)  //5,4

// 左边后置加的时候为5   后面的是前置  但是左边先的，结束加1  所以有++b = 7
console.log(b++ + ++b);  //5 + (6+1) =12
console.log(b)  //7


// 递减

var bb = 13;
bb --;
-- bb;
console.log(bb)  //11

console.log(bb-- - --bb)   //11 - (10-1)=2

// console.log(--bb - bb--);  //10 -10 =0`2`2

比较运算符：

两个数据进行比较使用的运算符，比较运算符会返回一个布尔值 true/false

// 小于号  <
console.log(4<9);  //true
// 大于号  >
console.log(8>10);  //false

// 大于等于
console.log(9>=9);  //true

// 小于等于
console.log(3<=2); //false

// 不等于
console.log(3!=5);  //true

// ==   只判断值
// 默认转换数据类型，把字符串型的数字转换为数字型  值相等就行
console.log(13=="13");  //true
console.log(3==5);  //false

console.log("hello"=="liudh"); //false

// ===   值和数据类型都必须相等
console.log(13==="13");  //false

逻辑运算符：

/* 
&& 逻辑与 and   true && false
|| 逻辑或 or    true || false
！ 逻辑非  not  !true
*/

// 两侧都为true 结果为true  只要有一侧为false 结果是false
console.log(true && true);   //true
console.log(true && false);  //fase
console.log(false && true);  //fase
console.log(false && false);//fase

console.log(3>5 && 3>2);   //false && true   false
console.log(3<5 && 3>2) ;  //true && true    true

    // console.log(1 && 0);


// 逻辑或   两侧都为false 结果才为false 只要有一侧为true 结果就是true
console.log(true || true);   //true
console.log(true || false);  //true
console.log(false || true);  //true
console.log(false || false);//fase

console.log(3>5 || 3>2);   //false && true   true
console.log(3<5 || 3>2) ;  //true && true    true


// 逻辑非
console.log(!true);   //false
console.log(!false);  //true
console.log("---------------------------------------------------")

短路运算：

/* 
短路运算原理：有多个表达式(值)时，左侧的表达式可以确定结果时，就不再继续运算右边的表达式的值



*/

// 逻辑与
// 表达式1 && 表达式2
// 第一个表达式值为真，返回第二个表达式
// 第一个表达式为假，返回第一个表达式
console.log((3+4)&&9);  //9
console.log(1&&0);  //0
console.log(0&&1);  //0

console.log("-------------")
// 逻辑或
// 表达式1 || 表达式2
// 第一个表达式值为真，返回第1个表达式
// 第一个表达式为假，返回第2个表达式
console.log((3+4)||9);  //7
console.log(1||0);  //1
console.log(0||1);  //1


var num;
console.log(num&&num>3)  ;  //
console.log("-------------")

console.log(null && 5);  //null
console.log(undefined && 7) // undefined
console.log("123"&&8);  //8
console.log(""&&8);  //""

三目运算：

条件?‘表达式1’:“表达式2”

看到问号主要看前面的条件

num>2?console.log(23):console.log(34)

var b = num>1?"hello":"word";
console.log(b)

优先级：

优先级                          运算符
1                              小括号()
2                              ++ -- ！
3                              算术(数)运算符 先 * / 后 + -
4                              > >= <
5                              == != === 
6                              先&& 后||
7                              =

if语句：

if-else

if(条件){
    语句1;
}else{
    语句2;
}

var num = 1;
num ++;  //2
//  条件语句
if(num <= 3){
    console.log(num)
}

console.log("hello");

if(3>2){
    console.log(3)
}else{
    console.log(2)
}

if-else if -else

var score = 78;

if(score>80 &&score <=100){
    console.log("优秀");
}else if(score >70 &&score<=80){
    console.log("良")
}else if(score>60&&score<=70){
    console.log("合格")
}else{
    console.log("不及格")
}

new Date()

创建时间对象，getDay() 获取今天是星期几 得到0-6

// new Date() 当前时间对象   getDay()  获取今天是星期几
var week = new Date().getDay();
console.log(week)
// 星期1-6   1~6   星期日 0

var weekStr = "";
switch(week){
    case 0:
        weekStr = "日";
    break;
    case 1:
        weekStr = "一";
    break;
    case 2:
        weekStr = "二";
    break;
    case 3:
        weekStr = "三";
    break;
    case 4:
        weekStr = "四";
    break;
    case 5:
        weekStr = "五";
    break;
    default:
        weekStr = "六";
    break;
}

document.write("今天是星期"+weekStr); //显示在屏幕上

switch语句：

switch(表达式){
       case 值1;
       		语句1;
       break;
       case 值2;
       		语句2;
       break;
       case 值3;
       		语句3;
       break;
       //都不满足情况下执行default
       default:
       		其它语句;
}

var j=8;

switch(j){
    case 1:
        console.log("电饭锅");
    break;
    case 2:
        console.log("钢笔");
    break;
    case 3:
        console.log("纸巾");
    break;
    default:
         console.log("其他");
}

循环语句：

重复执行相同的代码多少次

while循环：

初始化变量
while(条件表达式){
  //循环体
  //更新操作
}

do-while循环：

初始化变量
do{
  //循环体
  //更新操作
}while(条件表达式)

for循环：

for(初始化变量；条件表达式;更新操作){
  //循环体
}

break 和 continue:

break终止循环

continue跳出循环

/*
break和continue只能应用在循环中，但是break还可以使用在switch结构中
break 终止循环  立即终止循环，并跳出循环，循环结束

continue  停止当前循环，继续执行下一次循环

*/


//  for(var i=1;i<=100;i++){
//     if(i==20){
//         break;  //直接跳出循环
//     }
//     console.log(i);
//  }


for(var i=1;i<=100;i++){
    if(i==20){
        continue;   //停止第20次循环  继续21次
    }
    console.log(i);
}

函数：

什么是参数：

将需要反复使用的功能代码，封装成独立的模块，这个模块就是函数.

使用函数的好处：

• 可复用(可重复使用)
• 功能代码可控

函数的分类：

• 内置函数 （js给我们提供的）
• 自定义函数 （自己定义）

函数的类型：

Function

如何声明函数：

语句定义法(在任意位置都可以调用)：

function 函数名([参数]){
      //功能代码
}

表达式定义法(只能先声明后调用)：

 var 函数名 = function([参数]){
    //功能代码
 }

如何调用函数：

• 一般调用: 函数名([参数])
• 事件调用 触发事件后调用函数

函数的参数：

形式参数(形参)：定义函数时所传递的参数

实际参数(实参): 调用函数时所传递的参数

注意：

• 参数传递: 只能将实参 传递给形参，即单向传递
• 形参只能是变量; 实参可以是变量，常量，表达式
• 实参的数量 小于形参的数量时，多余的形参值为undefined
• 实参的数量 大于形参的数量时，自动忽略多余的实参

返回值：

return 函数返回值

return 也是函数的结束，后面的语句不会执行

function fn(){
    var a =10;
    console.log(a);
    return a;   //return 的是a的值  不是a这个变量  
}

事件：

事件是鼠标或键盘的动作.如：点击，双击，移入，移出，移动，按下，弹起，获取焦点，失去焦点…

事件驱动： 监听动作 onclick ，ondblclick，onkeyup，onkeydown,onmousemove,onblur…

事件处理程序: 事件触发后所调用的函数

对象.事件驱动=事件处理程序
如:
document.onclick=function(){

}

对象：

事件对象 获取操作的元素对象

document.getElementById(id值)   通过id获取元素对象
var oDiv = document.getElementById('box');
oDiv.onclick=function(){
    alert("hehe");
}

oDiv  事件监听的对象
click  点击事件
onclick  事件驱动
function(){}  事件处理程序

鼠标事件：

var oDiv = document.getElementById('box');

oDiv.onclick=function(){
    console.log("点击");
}

oDiv.ondblclick =function(){
    console.log("双击");
}

oDiv.onmouseover = function(){
    console.log("移入");
}

oDiv.onmouseout = function(){
    console.log("移出");
}

oDiv.onmousemove = function(){
    console.log("移动");
}
oDiv.onmousedown =function(){
    console.log("按下");
}

oDiv.onmouseup = function(){
    console.log("弹起");
}

oDiv.onmouseenter=function(){
    alert("enter")  //进入
}

oDiv.onmouseleave = function(){
    alert("leave")  //离开
}

键盘事件：

// document文档对象
var inp = document.getElementById("inp")

inp.onkeydown =function(){
    console.log("keydown"); //键盘按下
}

inp.onkeyup =function(){
    console.log("keyup");   //键盘弹起
}

inp.onkeypress = function(){
    console.log("keypress");   //按下
    // 无法响应系统功能键（如delete，backspace）
    // 对中文输入法支持不好，无法响应中文输入
}

表单事件：

var oTxt = document.getElementById("inp");

oTxt.οnfοcus=function(){
    console.log("获取焦点");
}

oTxt.οnblur=function(){
    console.log("blur");  //失去焦点事件
}

oTxt.οnchange=function(){
    console.log("内容改变");
}

oTxt.oninput =function(){
    console.log("input");   //输入事件---字数统计
}

函数与事件：

// id="box"的div中输出九九乘法表
//  获取div
var box =document.getElementById("box");
var oBtn = document.getElementById("btn");

// 给按钮添加点击事件
var onOff=false;  //默认div中没有内容

oBtn.onclick = function(){
    if(onOff){
        box.innerHTML="";
    }else{
        box.innerHTML=nine()
    }

    onOff = !onOff
}
//  函数封装九九乘法表
function nine(){
    var str ="";
    for(var i=1;i<10;i++){
        for(var j = 1;j<=i;j++){
            // str += "*";
            str += j + "*" + i + "=" + i*j + "&nbsp;&nbsp;&nbsp;&nbsp;"
        }
        str += "<br/>";
    }

    return str;
}

// 通过js给div元素添加内容  函数的返回值
// box.innerHTML = nine()

ID名称.innerHTML = 需要执行的函数

将文本显示在该ID盒子位置

作用域：

作用域的范围：

一旦进入作用域，就启动js解析器

在作用域中寻找一些东西？var function 形参

找到var 就是将var后面的变量名提取出来 并给他初始化一个值undefined

当变量和函数同名 丢变量 保函数

当在函数定义后，同名定义变量，在后面调用函数会报错

当在函数定义变量前，使用语句定义法定义函数，在开头使用函数，不会报错，丢变量，保函数

逐行解读代码

- 执行表达式

- 函数调用

有多个script标签时，从上到下依次解析并执行第一个script标签，然后下一个，依次类推

在上面script中声明的东西，下面script中都可以使用

在下面script中声明的东西，上面使用都会报错

全局定义变量，在子函数内重新定义，该变量不和全局变量有关，重新给变量赋值undefined

全局定义变量，在子函数不重新定义，只赋值其他参数，该子函数使用局部变量的参数值，并且值会传到子函数外面的后面程序。

当有形参时，如果形参和子函数内一样，直接使用传入的形参值

如果不和子函数内的未知数一样，则按没有形参的情况处理，有重新定义，赋undefined，没重新定义按全局变量值求。

在局部作用域下，未写var直接赋值，这个将是全局变量，外面没有声明没有影响

var a = b = 10;
表示只定义了a变量
b将是直接赋值，是全局变量

arguments：

接收调用函数时的所有实参

function fn() {
    // arguments 接收调用函数时的所有实参
    console.log(arguments)
}

fn(12, 34, 5, 6, 78, 84, 4, 3, 2, 2, 12, 5)

匿名函数：

将匿名函数赋值给一个变量：

var fn = function () {
    alert('hello')
}
fn()

将匿名函数绑定给一个事件：

document.onclick = function () {
    alert(0)
}

匿名函数自我执行:

(function{

})()

;(function () {
    alert(123)
})()

匿名函数的返回值（将一个匿名函数的返回值赋值给一个变量）:

var num = (function () {
    return 3
})()
alert(num)

输出一个匿名函数的返回值:

alert(
    (function () {
        return 'hello'
    })()
)

给匿名函数传递参数:

var sum = (function (a, b) {
    return a + b
})(3, 4)
alert(sum)

递归：

调用自身函数

// 递归：函数自己调用自己的过程
// 本质 ：实现了循环

// 1~n之间所有数的和

function fnSum(n) {
    // 结束条件
    if (n === 1) {
        return 1
    }
    return n + fnSum(n - 1)
}

// console.log(fnSum(100))

// ----------------------------
//  5的阶乘   n = 5

function fnFac(n) {
    // 结束条件
    if (n === 1) {
        return 1
    }
    return n * fnFac(n - 1) //5*4*3*2*1
}

alert(fnFac(5))

对象：

世界万物皆对象；

object，一切具有本质特征和行为的事物

属性：事物的本质特征

方法: 事物的行为

一个鼠标
  属性(本质特征)：大小   形状  颜色
  事物的行为： 干什么事情 --点击  选择
  
  
一个人
   属性(本质特征)：姓名  年龄  身高  体重
   事物的行为： 跑步  唱歌 敲代码

类

一类具有共同的本质特征和行为的实物

类是对象的抽象化

对象是类的具体化

如何创建对象：

/* 
 变量  只能存储一个值 
 对象   存储一个对象的所有信息   姓名，年龄，成绩.... 一条数据
*/


// 创建对象
//  1:字面量方式   {key:value,key:value}

var obj = {
    name: '张三',
    age: 12,
    showName: function () {
        return this.name
    },
    showAge: function () {
        return this.age
    },
}

// new 构造函数----放在高级

如何访问对象中的属性和方法：

// 访问对象中的属性和方法

var o = {
    name: 'lisi',
    age: 45,
    score: 100,
    showAge: function () {
        // this 就是o这个对象
        console.log(this.age)
    },
}

// 对象.属性
// 对象['属性']
// 对象.方法()
// 对象['方法']()

console.log(o.name)
// 对象中的key值都是字符串类型
console.log(o['name'])

o.showAge()
o['showAge']()

数组：

变量 ：存储数据的，只能存储一个值

var name = “张三” ； var age = 12；

对象：本质特征和行为的事物 能存储一条数据

var obj = {name:“张三”,age:12,score:100}

数组：可以存储一组（多条数据）或一系列相关数据的容器

数组元素：存储在数组中，并赋予唯一索引号(下标–从0开始)的数据段

数组元素的数据类型可以不相同

数组下标：标识数组元素的唯一索引号 最小下标 0 ，最大下标length-1

好处：

可以集中管理，提高性能

声明数组：

1:字面量方式 var 数组名 = []

2：构造函数的方式 var 数组名 = new Array()

有且仅有一个正整数作为参数，表示数组的长度 ,其他情况表示数组中的元素

数组的属性：

数组名.length 返回数组的长度

数组的数据类型：

object

遍历数组(循环数组):

// 遍历数组  读取数组中的所有数组元素
// 下标 从0开始   length-1结束
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

方法（增，删，改，截，拼，复，排，转):

增:

unshift 前面新增

push 后面新增

// 增
/* 
  unshift(新增元素)
  在数组的前面增加新的元素
  新增后数组的长度
  是否影响原数组:是
*/

var arr = [5, 6, 4, 5, 6, 7]
var res = arr.unshift(4, [1, 2, 3], 5)
// console.log(res) //9
// console.log(arr)

/* 
        后增 push(新增元素)
        在数组的尾部增加新的元素
        返回值：新增后数组的长度
        是否影响原数组:是
      */

var arr1 = [2, 3, 4, 5, 6, 7]
var res1 = arr1.push(4, [1, 2, 3], 4)
console.log(res1) //9
console.log(arr1)

删：

shift 从前删除

pop 从后删除

/* 
shift()
删除数组首部的元素，一次只能删除一个元素
返回值：返回被删除的元素
是否影响原数组：是

*/
var arr = [2, 3, 4, 5, 6, 78, 88]
var res = arr.shift()
//   console.log(res)//2
//   console.log(arr)

/* 
pop()
删除数组尾部的元素，一次只能删除一个元素
返回值：返回被删除的元素
是否影响原数组：是

*/

var arr1 = [23, 5, 6, 7, 8, 3, 5, 4, 2, 1]
var res1 = arr1.pop()
console.log(res1) //1
console.log(arr1) // [23, 5, 6, 7, 8, 3, 5, 4, 2]

改：

splice(从哪个下标开始，删除的长度，新增的元素,…)

/*  splice(从哪个下标开始，删除的长度，新增的元素,....)
      作用:在数组的任意位置可以实现增，删，改
      返回值：被删除的元素数组
      是否影响原数组：是 */

// var arr = [5, 6, 7, 8, 9]
// var res = arr.splice(2)
// console.log(res)  //[7, 8, 9]
// console.log(arr)  //[5, 6]

// var arr = [5, 6, 7, 8, 9]
// var res = arr.splice(2, 1)
// console.log(res) //[7]
// console.log(arr) //[5, 6, 8, 9]

// var arr = [5, 6, 7, 8, 9]
// var res = arr.splice(2, 1, [1, 2, 3], true)
// console.log(res) // [7]
// console.log(arr) // [5, 6, [1, 2, 3], true, 8, 9]

var arr = [5, 6, 7, 8, 9]
var res = arr.splice(2, 0, [1, 2, 3], true)
console.log(res) // []
console.log(arr) //[5, 6, [1, 2, 3], true,7, 8, 9]

拼：

concat(拼接的元素) 拼接在数组后面 添加的数组内有数组会将最外面一层拆开

/*  
      concat(拼接的元素)
      作用:将新的元素拼接到指定的数组后面，形成新的数组(新数组中有数组，则将最外层数组拆开进行拼接)
      返回值：拼接后的新数组
      是否影响原数组：否 */
var arr = [5, 6, 7, 8, 9]
var res = arr.concat(-4, -2, [2, 3, [4, 6]], 10)

console.log(res) // [5, 6, 7, 8, 9, -4, -2, 2, 3, [4, 6], 10]
console.log(arr) //[5, 6, 7, 8, 9]

截：

slice(start,end) 截取下来成为新的数组

// slice
/* 
slice(start,end)
作用:截取指定范围的数组元素
返回值:被截取的新数组
是否影响原数组:否

*/
var arr = [5, 6, 7, 8, 9]
// var res = arr.slice(2)
// console.log(res) //[7, 8, 9]
// console.log(arr) //[5, 6, 7, 8, 9]

// var res = arr.slice(2, 4)
// console.log(res) //[7, 8]
// console.log(arr) //[5, 6, 7, 8, 9]

// var res = arr.slice(4, 2)
// console.log(res) //[]
// console.log(arr) //[5, 6, 7, 8, 9]

var res = arr.slice(-4, -2)
console.log(res) //[6,7]
console.log(arr) //[5, 6, 7, 8, 9]

复：

通过截取全部

通过拼接，不往后拼接数据，返回原数据

通过遍历数组，切片赋值给新的数组

通过遍历数组，push从后面添加进新的数组

// 复
// var arr = [5, 6, 7, 8, 9]
// var list = []
// function fnCopyArr(arr) {
//   return arr.slice(0)
// }
// list = fnCopyArr(arr)
// arr[0] = 4
// console.log(arr, list) //[4, 6, 7, 8, 9]  [5, 6, 7, 8, 9]

// var arr = [5, 6, 7, 8, 9]
// var list = []
// function fnCopyArr1(arr) {
//   return arr.concat()
// }
// list = fnCopyArr1(arr)
// arr[0] = 4
// console.log(arr, list) //[4, 6, 7, 8, 9]  [5, 6, 7, 8, 9]

// var arr = [5, 6, 7, 8, 9]
// var list = []
// function fnCopyArr2(arr) {
//   var list = []
//   for (var i = 0; i < arr.length; i++) {
//     list[i] = arr[i]
//   }
//   return list
// }
// list = fnCopyArr2(arr)
// arr[0] = 4
// console.log(arr, list)//[4, 6, 7, 8, 9]  [5, 6, 7, 8, 9]

var arr = [5, 6, 7, 8, 9]
var list = []
function fnCopyArr3(arr) {
    var list = []
    for (var i = 0; i < arr.length; i++) {
        list.push(arr[i])
    }
    return list
}
list = fnCopyArr3(arr)
arr[0] = 4
console.log(arr, list) //[4, 6, 7, 8, 9]  [5, 6, 7, 8, 9]

排序：

reverse 实现数组逆序

sort 实现数组按字符串的编码从小到大排列

sort(function(a,b) {return a - b}) 按数字从小到大排列

sort(function(a,b) {return b - a}) 按数字从大到小排列

/*
      reverse
      作用:将数组元素逆序
      返回值:逆序后的数组
      是否影响原数组:是
      */

// var arr = [4, 2, 100, 3, 5]
// var res = arr.reverse()
// console.log(res) //[5, 3, 100, 2, 4]
// console.log(arr) //[5, 3, 100, 2, 4]

/*
        sort
        作用:将数组元素按字符串的编码进行从小到大的排列
        返回值:返回排序后的数组
        是否影响原数组:是
        */
var arr = ['A', 'C', 'D', 'B']
var res = arr.sort()

console.log(res) //[100, 3, 4, 5, true]
// console.log(arr)  //[100, 3, 4, 5, true]

/*
        扩展
        sort(function(a,b) {return a - b})  按数字从小到大排列
        sort(function(a,b) {return b - a})  按数字从大到小排列
        */

var arr1 = [23, 4, 5, 1, 3, 51, 43, 23]
var res1 = arr1.sort(function (a, b) {
    return b - a
})
console.log(res1) //[1, 3, 4, 5, 23, 23, 43, 51]
console.log(arr1) //[1, 3, 4, 5, 23, 23, 43, 51]

转换tostring：

toString() 将数组转为字符串

toString(进制数) 转换为相应的进制数

join(连接符) 将数组数据通过连接符连接成字符串

/* 
toString()  将数组转为字符串
返回值: 返回转后的字符串(以逗号分隔)
是否影响原数组：否
*/

var arr = [2, 3, 45, 7, true]
var res = arr.toString()
// console.log(res) //2,3,45,7,true
// console.log(arr) // [2, 3, 45, 7, true]

/* 
toString() 用于简单变量转成指定进制的字符串
toString(进制数)

*/
var iNum = 88
// console.log(iNum.toString(2)) //1011000
// console.log(iNum.toString(8)) //130
// console.log(iNum.toString(16)) //58

/* 
join(连接符)
将数组转为以指定连接符链接的字符串
返回值:返回转后的字符串
是否影响原数组：否
*/

var arr1 = [4, 2, 36, 5, 4]
// var res1 = arr1.join('*') //
var res1 = arr1.join('')
console.log(res1) //4*2*36*5*4
console.log(arr1)

for-in循环：

var arr = [1, 2, 4, 5, 63, 32, 22]
for (var i in arr) {
    // i 下标
    // console.log(i + '=>' + arr[i])
}

var obj = {
    name: '李四',
    age: 18,
    sex: '男',
}
for (var key in obj) {
    // key对象的属性名  对象名['属性']
    console.log(key + '=>' + obj[key])

    // console.log(key + '=>' + obj.key) //undefined
}

排序方法：

冒泡排序：

从前面开始把小的数往后传，越往后比较的数减一，后面的数已经定下，始终从前面的开始比较

通过最外层遍历length-1次

内层遍历前后两个数进行比较，前比后大就进行交换，直到遍历到倒数第二个数结束

/* 
冒泡排序:相邻的两个数进行比较，符号条件，交换位置
   9, 6, 15, 4, 2
   6, 9, 4 , 2, 15    4次
   6, 4, 2 , 9        3次
   4, 2, 6            2次
   2, 4               1次

   挨着的两个数进行比较，如果前一个比后一个大，就把两个数交换位置
   数组遍历一遍以后，最后一个数字就是最大的那个数
   进行第二遍遍历，按照之前的规则，第二个大的数字就会跑到倒数第二个位置了
   依次类推

*/
var arr = [9, 6, 15, 4, 2]

for (var i = 1; i < arr.length; i++) {
    //外层  遍历的次数 从第一次开始遍历
    for (var j = 0; j < arr.length - i; j++) {
        //内层  比较的次数  从第一个开始比较  第一个下标为0
        // arr[j] 前一个  arr[j+1]后一个
        if (arr[j] > arr[j + 1]) {
            // 交换位置
            var t = arr[j]
            arr[j] = arr[j + 1]
            arr[j + 1] = t
        }
    }
}

console.log(arr)

从后面把小的数往前传，同样越往后遍历，内层遍历数值减一，始终从最后开始比较

外层一样是遍历length-1次

内层相邻数进行比较，右边的大于左边的就往左传

/* 
冒泡排序:相邻的两个数进行比较，符号条件，交换位置
   9, 6, 15, 4, 2
   2, 9 ,6 ,15, 4   4次
      4 ,9 ,6 , 15   3次
         6, 9,  15    2次
            9   15   1次

   挨着的两个数进行比较，如果前一个比后一个大，就把两个数交换位置
   数组遍历一遍以后，最后一个数字就是最大的那个数
   进行第二遍遍历，按照之前的规则，第二个大的数字就会跑到倒数第二个位置了
   依次类推

*/

var arr = [9, 6, 15, 4, 2]
for (var i = 1; i < arr.length; i++) {
    for (var j = arr.length - 1; j >= i; j--) {
        if (arr[j] > arr[j - 1]) {
            var t = arr[j]
            arr[j] = arr[j - 1]
            arr[j - 1] = t
        }
    }
}
console.log(arr)

选择排序：

从前往后选择数，和后面的数进行比较

如果第一个数比后面大进行交换，将交换的这个数往后+1进行比较，如果大交换，依次往后，把小的往前传

// 选择排序   依次取出第一个元素，与后面所有元素进行比较，符合条件 交换位置

/*
      9, 6, 15, 4, 2
        2   9, 15, 6, 4      4次
            4  15, 9, 6     3次
                6  15,9     2次
                   9  15    1次
      */

var arr = [9, 6, 15, 4, 2]

for (var i = 0; i < arr.length - 1; i++) {
    //比较的轮数
    // 每一轮比较的次数
    for (j = i + 1; j < arr.length; j++) {
        if (arr[i] > arr[j]) {
            var t = arr[i]
            arr[i] = arr[j]
            arr[j] = t
        }
    }
}
console.log(arr)

值传递和引用传递：

简单数据类型（值传递）: 字符串，数值，boolean布尔,undefined,null

复杂数据类型(引用传递)：function arrary,object

简单数据类型传递会格外给个地址，因此两个没关系

复杂数据类型传递的是地址，地址相同，有一个变另一个也变

var a = 3
var b = a
a = 4
// console.log(a, b) //4 , 3

var arr = [1, 2, 3]
var list = arr //传递的是地址
arr[0] = 5
// console.log(arr, list) //[5, 2, 3]  [5, 2, 3]

var obj = { name: '张三', age: 18 }
var obj1 = obj
obj.name = '李四'
console.log(obj, obj1) //{name: '李四', age: 18} {name: '李四', age: 18}

ES5扩展：

严格模式

启动严格模式: “use strict”

注意: 只能加在作用域开头部分，如果函数里加 加载函数作用域开头的地方

// 严格模式  在严格的条件下运行

/*  

1:全局开启
"use strict"
function test(){}

2:针对某个函数开启
function test(){
  "use strict"
}


*/

// var b = null
// function fn() {
//   'use strict'
//   a = 3
// }
// fn()
// alert(a) // a is not defined  报错

// 1 全局变量必须先声明
// 'use strict'
// n = 10
// console.log(n)  //n is not defined  报错

//2 函数参数不能重名  会报错
'use strict'
function test(x, x, y) {
    console.log(arguments)
    console.log(x)
    console.log(y)
}
test(10, 20, 30)