前端day10-JS学习笔记(数组、函数、对象)

==01-数组==

1.声明一个数组：var 数组名 = [元素1，元素2，元素3…………]

• 数组名其实就是变量名，只是习惯上称之为数组名
• 元素其实就是数组中保存的数据，只是习惯上称之为元素

• 2.获取数组中某一个数据:数组名[下标]
• 3.获取数组中元素的数量:数组名.length
• 4.总结：数组主要由三要素构成
  • 元素：数组中的数据
  • 下标：元素在数组中的位置(从0开始按照顺序递增)
  • 长度：数组中元素的数量

1.2-数组取值与赋值

• 1.取值：数组名[下标]
  • 取第一个元素: 数组名[0]
    • 下标从0开始
  • 取最后一个元素: 数组名[数组名.length - 1]
    • 最后一个元素下标（最大下标） = 长度 - 1
  • 如果下标超过数组最大下标，得到的是undefined
• 2.赋值：数组名[下标] = 值
  • 如果下标有对应的值，会把原来的值覆盖
  • 如果下标不存在，会给数组新增元素

1.3-数组长度

• 1.获取数组的长度:数组名.length
• 2.修改数组的长度会改变数组的元素数量:数组名.length = 值
• 3.删除数组的最后一个元素:数组名.length--

1.4-数组遍历

• 1.数组的遍历：获取数组中每一个元素的值，称之为遍历该数组
  • 如果想要获取数组中每一个元素的值，则需要通过循环语法来获取
• 2.一般使用for循环来遍历数组，只不过数组的遍历是一种固定格式的for循环
• 3.固定循环语句格式:for(var i = 0; i < arr.length; i++) {// 数组遍历的固定结构}

1.5-数组另一种声明方式

• 1.简洁方式:var 数组名 = [元素1，元素2，元素3，……]
  • 最常用
• 2.标准方式：var 数组名 = new Array(元素1，元素2，元素3……)
• 3.两种方式唯一区别：创建时如果数组的元素只有一个时含义不同
  • 简洁方式：[10]; 代表数组长度为1，元素是10
  • 标准方式：new Array(10); 代表数组长度为10，没有元素

数组练习

• 翻转数组
• 斐波那契数列

循环嵌套

嵌套循环执行的总次数 = 外层循环执行次数 * 内层循环执行次数

• 利用循环嵌套打印图案
• 利用循环嵌套打印九九乘法表
• 杨辉三角

02-函数

2.1-函数介绍

//1.声明函数：将代码存入变量中
function 函数名(){
    函数体：一段代码
}
//2.调用函数：执行函数体代码
函数名();

语法误区：函数语法就两个（声明与调用）

1.声明函数： function 函数名(){ 函数体代码 }

2.调用函数： 函数名()

3.变量取值： 函数名 (不会执行函数体代码，只是以字符串形式将变量中存储的东西打印出来而已)

2.2-函数参数

参数作用 ：

调用者 传递数据 给函数

语法：

传 ： 调用者

函数名(实参：实际参数)

收 ： 函数

function 函数名(形参：形式参数){ 函数体代码 }

返回值：

返回值 ： 函数 传递数据 给调用者

语法

传 ： 函数

function 函数名(形参){ return 值； }

收 ： 调用者

var 变量名 = 函数名()

函数返回值语法注意点

a. 如果函数没有写return，默认返回值是undefined

b. 如果函数有写return，但是后面没有接值。返回值是undeifined

c. 如果函数有写return，并且return后面有值。返回值就是return后面的值

d. return关键字作用 ： 结束函数体代码。 return后面代码不执行

2.3-函数另一种声明方式

• 1.函数声明:function 函数名() {};
• 2.函数表达式:var 函数名 = 匿名函数
  • 匿名函数：函数的字面量又称为匿名函数，顾名思义就是没有变量名的函数
  • var 函数名 = function(){};
• 3.两者唯一区别：函数声明可以在任何地方调用，而函数表达式方式调用必须在声明后面

高阶函数

回调函数

• 1.什么是回调函数：如果一个函数的参数也是一个函数，那么这个参数函数就叫做回调函数
• 2.为什么要有回调函数？
  • 当一个函数调用执行完毕之后，我想执行另一段代码块，也就是调用另一个函数
  • 但是有时候可能本函数执行完毕后，根据不同的情况需要调用的函数也不同，那么我们可以使用形参来接收这个函数，然后再调用
    • 此时：这个形参函数就称之为回调函数

自调用函数

• 1.什么是自调用函数：函数自己调用自己
  • 最常见的：匿名函数自调用
• 2.自调用函数作用
  • 开辟作用域，js中只有函数才可以开辟作用域
• 3.匿名函数自调用语法:( function(){} ) ()
  • 将整个函数使用小括号包裹，然后在后面再加上小括号调用

//补充：其实有名字的函数也可以自己调用自己，只是比较少见

03-对象(语法学习)

3.1-对象介绍

对象作用：一个变量存储多个数据

对象与数组异同点

相同点：一个变量存储多个数据

不同点：

数组有序存储：元素与下标一一对应

对象无序存储：属性名与属性值一一对应（键值对）

3.2-对象取值与赋值

a.声明： var 对象名 = {属性名:属性值}

b.取值： 对象名.属性名

属性存在，则获取属性值

属性不存在，则获取undefined

c.赋值： 对象名.属性名 = 值

属性存在，则修改属性值

属性不存在，则动态添加属性

3.3-对象的初始化

var 对象名 = { 属性名:属性值 }

问题：假设一个拥有名字name，价格price。 在代码中如何存储多个？

//我们可以用里一个数组来存储对象，这样就可以存储多个对象了
var arr = [
           {
 name: 'iPhone',
 price: 3888
            },
            {
 name: 'switch',
 price: 1688
            },
            {
 name: 'iPad',
 price: 2460
            }
        ];

3.4-对象的点语法与字符串语法

        var person = {
            age:32,
            sex:'男'
        };
       
        var sex = 'age';
        var aaa = 'sex';
        //点语法取sex属性值
        console.log(person.sex);// 男
        //字符串语法取sex属性值
        console.log(person['sex']);//男
        //person[“age”]  : 字符串语法取sex变量种存储的字符串对应的属性值
        console.log(person[sex]); // 32  

        console.log(person.aaa);//undefined
        console.log(person['aaa']);//undefined
        console.log(person[aaa]);//男

        console.log(person.age);//32
        console.log(person['age']);//32
        //真正报错的原因不是因为对象的取值语法报错，而是age变量未声明
        var age = 111;
        console.log(person[age]);// 程序报错 

3.5-对象遍历

对象的遍历 ： 获取对象的每一个属性值

2.复习数组的遍历语法

固定的for循环： for(var i = 0;i<数组.length;i++){ 数组名[i] }

3.对象无法使用数组的遍历语法，对象的遍历有专用的for循环结构

for-in循环 ： for(var key in 对象名){ 对象名[key] }

*** 注意点： 只能使用字符串语法取属性值 ***

 var stu = {
            name: "Li",
            sex: "男",
            age: 18
        }
//遍历对象中的属性名和属性值 用for in
for (var key in stu) {
   console.log(key + "---" + stu[key]);//name---Li sex---男 age---18 
}

3.6-方法中的this关键字

this : 谁调用我，我就指向谁

/* 
        this : 谁调用我，我就指向谁
        */
        var banzhang = {
            name: '坤坤',
            age: 32,
            sex: '男',
            sayHi:function(){
                console.log('我的名字叫' + this.name + '我的年龄是' + this.age ); 
            }
        };  
        banzhang.sayHi();//我的名字叫坤坤我的年龄是32

3.7-对象的另一种声明方式

    //1.（最常用）简洁方式：   var 对象名 = { 属性名：属性值 }
    var p1 = {name:'张三'};

    //2.构造函数：
    //构造函数：如果调用一个函数使用了new关键字，这个函数成为构造函数
    var p2 = new Object( {name : '张三'} );

    /*这两种方式没有任何区别，只是语法不同而已*/
    console.log ( p1 );
    console.log ( p2 );

最后来一张思维导图：