JavaScript的数组、对象和函数

数组：存放数据的容器

表现形式：[ ]，多个数据之间使用逗号隔开，长度不限 类型

length 长度属性

取值：arr[下标] 可以通过for循环

1.for-in循环

• 字面量对象：存放数据的容器，数据不限类型，无序 无长度的
• 表现形式：{key: value} ，一对一对的存储 key-value对 键名-键值
• 键名可以用引号引起来，也可以不加引号

var obj = {
    "name": "小明",
    "info": '是一名学生',
    height: 180
};
console.log(obj);
console.log(obj.length); // undefined  没有长度

// 1.取值   对象.键名
console.log(obj.name); // 小明

var a = "height";
// console.log(obj.a); // undefined
// .后边跟的是变量，使用[]代替
console.log(obj[a]); // 180

// 2.添加
obj.adress = "河南";
console.log(obj);

// 3.添加一个已存在的属性是修改
obj.name = "小红";
console.log(obj);

// 4.遍历对象
// 遍历：根据数据的规律，从头到尾执行一次，不允许中途结束
// 循环：对数据/标签根据循环条件，执行循环体 for while
// 对象时无序的，没有长度的，所以不能使用for循环，使用for-in循环
/* for(var i = 0; i < obj.length; i++){
            console.log(1111);
        } */
for(var key in obj){
    // console.log(key,'key'); // 键名 name info height adress
    // console.log(obj.key); // undefined
    console.log(key, obj[key]); // .后边跟的是变量，使用[]代替
}

2 函数

函数：由事件驱动或者当他被调用时可以重复执行的代码块。函数的使用分为两步，第一步声明函数，第二部调用

函数的作用：提高代码的重用率，提升代码的效率

2.1 函数的声明

• 普通函数的声明
  • function 函数名(){ 可以重复执行的代码块 }
  • 调用: 函数名()
• 表达式函数的声明
  • var 变量 = function(){ 可以重复执行的代码块 }
  • 调用: 变量名()
• 函数的命名规则和变量的命名规则保持一致
• 区别：普通函数可以在声明之前就调用，表达式函数必须在声明之后才能调用

// 可以在声明之前调用
fun();

// 普通函数的声明
function fun(){
    // 代码块
    console.log("一个函数");
    console.log("今天真热");
}
// 调用  函数名()
// fun(); // 函数没有调用是不会执行的
// fun();
// fun();

add(); //报错  表达式函数必须在声明之后才能调用

// 表达式函数的声明 
var add = function(){
    console.log("这是表达式函数");
    console.log("加法运算");
}
// 调用: 变量名()
// add();
// add();
// add();

2.2 函数的使用场景

• 作为事件的处理函数 obtn.onclick = function(){ }
• 作为对象的方法(行为 动作) {name: , age: ,eat: function(){ } }
• 代码封装 复用

2.3 函数的参数

参数：函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数。在函数中可变化的值就可以作为函数的参数

函数参数

• 形参：形式参数
  • function 函数名(形参){ 代码块 }
  • var 变量 = function(形参){ 代码块 }
• 实参：实际参数
  • 函数名(实参)

参数个数

• 多个参数使用逗号隔开

• 参数个数不确定，不写形参，使用arguments

  arguments：是函数的内置对象，实参集合，length长度，通过下标取值arguments[下标]

// 1.使用函数求1-某个数的和
// 声明函数
function add(n){ // var n; 形参
    // 求1-某个数的和
    var sum = 0; // 存放和
    for(var i = 1; i<=n; i++){
        sum += i; // 累加
    }
    console.log(sum,'和');
}
// 调用
add(50); // 50：实际数据，实参
add(100);
add(200);// 传入不同的实参，得到不同的结果


// 2.对用户传入的两个数相加
// 多个参数使用逗号隔开
function fun(a, b){ // 形参
    console.log(a,'a');
    console.log(b,'b');
    var sum = a + b;
    console.log(sum, '两个数相加');
}
// 调用
fun(10, 20); // 实参 30
fun(20, 30);

// 3.对用户传入的所有数相加
// 函数的参数个数不确定时，不写形参，使用arguments
// arguments：是函数的内置对象，实参集合，有长度length，通过下标取值 
function add2(){
    console.log(arguments); // [100, 20, 30]
    console.log(arguments.length); // 有长度length
    console.log(arguments[0]);

    var sum = 0; // 存放和
    for(var i = 0; i < arguments.length; i++){
        // console.log(arguments[i], '每一个实参');
        sum += arguments[i];
    }
    console.log(sum, '所有数据的和');
}
add2(10, 20); // 30
add2(100, 20, 30); // 150
add2(1000, 20, 30, 40, 50); // 1140

参数类型

数据类型：number string boolean array object function

null undefined没有意义，不会作为函数参数

2.4注意点

• 形参和实参一一对应赋值，缺省的是undefined，多的不管

  // 1.形参和实参个数不一样
  function add(a, b){
      console.log(a, 'a');
      console.log(b, 'b');
      var sum = a + b;
      console.log(sum);
  }
  add(10); // a = 10, b = undefined
  add(10, 20);
  add(10, 20, 30); // a = 10, b = 20
  

• 重名问题

  • 函数和函数重名，后边把前边的覆盖
  • 函数和变量重名，变量会覆盖函数

  // 2.重名问题
  // 2.1 函数和函数重名，后边覆盖前边的
  function f(){
      console.log("函数1");
  }
  f(); // 函数2
  function f(){
      console.log("函数2");
  }
  f(); // 函数2
  
  // 2.2 函数和变量重名，变量会覆盖函数
  function a(){
      console.log("一个函数");
  }
  a(); // 正常执行
  
  var a = 10;
  console.log(a,'a'); // 10
  // a(); // 报错：a is not a function
  

• arguments和形参是一个东西，一改全改

  // 3.arguments和形参是一个东西，一改全改
  function f2(a){ // a = 10
      arguments[0] = 20;  // [10]
      console.log(a); // 20
  
      // a = 30;
      // console.log(arguments[0]); // 30
  }
  f2(10);
  

3.作用域

作用域：变量或者函数的有效使用范围

• 全局作用域：不在函数内就是全局作用域，比如script标签下
• 局部作用域：在函数内就是局部作用域
• 全局变量/函数：在函数外声明的变量/函数，在任何位置都可以访问，修改，一直存储在内存中，直到页面关闭才销毁
• 局部变量/函数：在函数内声明的变量/函数，只能在函数内访问，修改，出了函数的{}就被销毁了

// 1.全局变量/函数
var a = 10;
console.log(a); // 10
function fun(){
    console.log(a); // 10
    a = 20;
    console.log("全局函数"); 
}
fun();
console.log(a); // 20

// 2.局部变量/函数: 在函数内声明的变量/函数,只能在函数内访问
function add(){
    var b = 100;
    function inner(){
        console.log("在函数内声明的函数inner");
    }
    inner();
    console.log(b,'add内使用');
}
add();
// console.log(b); //  b is not defined b是局部变量，只能在函数的{}使用，出了{}就被销毁了
// inner(); // inner is not defined  inner是局部函数

function f(){
    x = 200; // 没有var不算是在函数内的声明，不是局部变量，是全局变量
}
f();
console.log(x); // 200

3.2 作用域链

作用域链：js的一种向上查找机制。访问某个变量/函数时，先在自身的作用域内查找，找到了就使用自己的，没找到就会向上一级查找，依次查找，直到全局，如果全局也没有就报错 xx is not defined

function outer(){
    function inner(){
        // console.log(y); // y is not defined
    }
    inner();
}
outer();

4.预解析(变量提升)

代码执行时第一步进行预解析，第二步逐行执行代码

预解析

• 找var和function的声明，把var和function声明提升到最前边
  • 对var只声明不赋值，多次声明只声明一次
  • 对function把整体的代码块都提升到顶部，多次声明声明多次
  • 局部作用域内也存在预解析
  • 在预解析中函数的预解析要高于变量

// 1.对于变量的预解析
console.log(a); // undefined
var a = 10;
console.log(a); // 10
var a = 20;
console.log(a); // 20

// 2.对于函数的预解析
fun(); // 函数2
function fun(){
    console.log("函数1");
}
fun(); // 函数2
function fun(){
    console.log("函数2");
}
fun();// 函数2


// 3.局部作用域内也存在预解析
function f(){
    console.log(a); // undefined
    var a = 100;
    console.log(a); // 100
}
f();

5 函数返回值

在函数内部声明的变量只能在函数中使用，想在函数外使用，作为函数的返回值

• 语法：return 返回值；
• 函数执行的结果就是返回值，如果没有返回值的话，结果为undefined
• 特点：
  • 一次只能返回一个数据，多个数据返回最后一个，借助[] {}
  • 函数中遇到return，函数就结束了，return后边的代码不会执行

function add(a, b){
    var sum = a + b;
    console.log(sum, '和');
    // 想要在函数外部访问sum，把它作为函数的返回值
    return sum;
}
var s = add(10, 20); // 30
console.log("数据的结果为" + s ); //局部变量  sum is not defined

function suan(x, y){
    // 加减乘除
    var a = x + y;
    var b = x - y;
    var c = x * y;
    var d = x / y;
    console.log(a,b,c,d);
    // 2.返回出去数据，借助数组返回多个数据
    return [a, b, c, d];
}
// 函数运行的结果就是返回值
var p = suan(10, 4); // [14, 6, 40, 2.5]
console.log(p);

// 3.函数中遇到return，函数就结束了，return后边的代码不会执行
function f(){
    console.log(111);
    return 100;
    console.log(222);
    console.log(333);
}
f();

// 4.函数没有返回值
function f2(){
    console.log("一个函数");
}
var s = f2();
console.log(s); // undefined

5.2 返回值的类型

数据类型：number string boolean null undefined array object function

null undefined没有意义，不会作为函数的返回值

function也可以为返回值

// 函数可以作为返回值
function outer(){
    function inner(){
        console.log("内部函数");
    }
    return inner;
}
// 函数运行的结果就是返回值
var s = outer();
console.log(s); // s = function inner(){ console.log("内部函数"); }
s();

6.代码复用

当结构一样，功能一致时，考虑使用代码复用

1.实现一个功能，通过父元素获取标签

2.把主要代码放到函数中，把父元素作为函数的参数