js 数组 函数

数组

所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。

数组是一个有序的列表，可以在数组中存放任意的数据，并且数组的长度可以动态的调整。

// 创建一个空数组
var arr1 = []; 
// 创建一个包含3个数值的数组，多个数组项以逗号隔开
var arr2 = [1, 3, 4]; 
// 创建一个包含2个字符串的数组
var arr3 = ['a', 'c']; 

// 可以通过数组的length属性获取数组的长度
console.log(arr3.length);
// 可以设置length属性改变数组中元素的个数
arr3.length = 0;

获取数组元素

数组的取值

// 格式：数组名[下标]	下标又称索引
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0];	// red
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined

遍历数组

遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。

数组遍历的基本语法：

for(var i = 0; i < arr.length; i++) {
	// 数组遍历的固定结构
}

数组中新增元素

数组的赋值

// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";

函数

把一段相对独立的具有特定功能的代码块封装起来，形成一个独立实体，就是函数，起个名字（函数名），在后续开发中可以反复调用

函数的作用就是封装一段代码，将来可以重复使用

函数的表达式

• 函数声明

function 函数名(){
  // 函数体
}

• 函数表达式

var fn = function() {
  // 函数体
}

函数的调用

• 调用函数的语法：

函数名();

• 特点：

  函数体只有在调用的时候才会执行，调用需要()进行调用。
  可以调用多次(重复使用)

代码示例：

// 声明函数
function sayHi() {
  console.log("吃了没？");
}
// 调用函数
sayHi();

// 求1-100之间所有数的和
function getSum() {
  var sum = 0;
  for (var  i = 0; i < 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 调用
getSum();

函数的参数

语法：

// 函数内部是一个封闭的环境，可以通过参数的方式，把外部的值传递给函数内部
// 带参数的函数声明
function 函数名(形参1, 形参2, 形参...){
  // 函数体
}

// 带参数的函数调用
函数名(实参1, 实参2, 实参3);

形参和实参

1. 形式参数：在声明一个函数的时候，为了函数的功能更加灵活，有些值是固定不了的，对于这些固定不了的值。我们可以给函数设置参数。这个参数没有具体的值，仅仅起到一个占位置的作用，我们通常称之为形式参数，也叫形参。
2. 实际参数：如果函数在声明时，设置了形参，那么在函数调用的时候就需要传入对应的参数，我们把传入的参数叫做实际参数，也叫实参。

var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
//x,y实参，有具体的值。函数执行的时候会把x,y复制一份给函数内部的a和b，函数内部的值是复制的新值，无法修改外部的x,y

函数的返回值

返回值语法：

//声明一个带返回值的函数
function 函数名(形参1, 形参2, 形参...){
  //函数体
  return 返回值;
}

//可以通过变量来接收这个返回值
var 变量 = 函数名(实参1, 实参2, 实参3);

函数的调用结果就是返回值，因此我们可以直接对函数调用结果进行操作。

返回值详解：
如果函数没有显示的使用 return语句 ，那么函数有默认的返回值：undefined
如果函数使用 return语句，那么跟再return后面的值，就成了函数的返回值
如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined
函数使用return语句后，这个函数会在执行完 return 语句之后停止并立即退出，也就是说return后面的所有其他代码都不会再执行。

arguments

保存实参数据 数据类型

arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。arguments是一个伪数组，因此及可以进行遍历

匿名函数

匿名函数：没有名字的函数

将匿名函数赋值给一个变量，这样就可以通过变量进行调用
匿名函数自调用

自执行函数（匿名函数自调用）的作用：防止全局变量污染。

作用域

作用域：变量可以起作用的范围

全局变量和局部变量

• 全局变量

  在任何地方都可以访问到的变量就是全局变量，对应全局作用域

• 局部变量

  只在固定的代码片段内可访问到的变量，最常见的例如函数内部。对应局部作用域(函数作用域)

不使用var声明的变量是全局变量，不推荐使用。
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

变量提升

• 变量提升

  定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升。

• 函数提升

  JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

预解析

avaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候，分为两个过程：预解析过程和代码执行过程

 预编译: 发生在函数执行之前
* 1:创建AO对象
* 2：找形参和变量声明，将变量和形参名作为AO属性名 值undefined(同名只写一次)
* 3:将实参和形参相统一
* 4：在函数里找函数声明 函数体作为值赋予函数名(AO的属性)
*

ar f = 10;
function fn(a) {
console.log(a); //a(){}
var a = 123;
console.log(a) //123
function a() {} //函数声明
console.log(a) //123
var b = function () {} //函数表达式
console.log(b) //function(){}
function d() {} //函数声明

DOM引入

面向对象

基于事件  
*点击 （单击 双击 ）onclick   滚动条 onscroll
* 聚焦  onfocus  离焦 onblur
* 按下键盘  onkeydown 抬起键盘 onkeyup
* 表单提交 （默认）onsubmit

/*1： 通过id获取元素  document.getElementById()*/

var btn = document.getElementById('btn')
var  mydiv = document.getElementById('dv')

console.log(btn)

/*? 如何绑定事件   事件当成是元素的属性   zhnagsan.year = 24 */
btn.onclick = function () { //回调函数
    /*  alert('你点到我了 芳草天')*/

    mydiv.style.width = '300px'
    mydiv.style.height = '400px'
    mydiv.style.backgroundColor = 'green'

}