20230304----重返学习-回调函数与数组与数组常见相关方法

方朝端
111 阅读10分钟

day-020-twenty-20230304-回调函数与数组与数组常见相关方法

复习

  • 创建函数的方法

    • function total(a = 100) { }//关键字、字面量
    • var total2 = function () { }//表达式

  • 使用函数

    • total();//函数名加个小括号。

      1. 执行total函数里面的代码
      2. 将返回值给到函数调用之后的结果

  • 函数的参数（形参和实参）

    • 形参: 声明函数时候的小括号里面的参数

    • 实参: 函数调用时候的小括号里面的参数

    • 形参与实参个数对比

      • 形参个数=实参个数: 从左往右，一一对应
      • 形参个数>实参个数: 从左往右，一一对应,多出的形参值是undefined
      • 形参个数<实参个数: 从左往右，一一对应,多出的实参被忽略

  • 形参接收

    • 形参接收

    • arguments: 是一个实参集合（伪数组）

    • 剩余运算符...

      function num(...arg) {
  console.log(arg);//[1,2,3]
}
num(1, 2, 3);

      function num(a,...arg) {
  console.log(arg);//[2,3]
}
num(1, 2, 3);

      //剩余运算符后面的变量叫做剩余参数，剩余参数后面不能还有形参
function num(...arg,c) {//报错
  console.log(arg);
}
num(1, 2, 3);

      • 剩余运算符后面的变量叫做剩余参数

        • 剩余参数后面不能还有形参

      • ...运算符

        • 在形参里面是剩余运算符

        • 在函数里面是展开运算符

          function num(...arg) {//在形参里面是剩余运算符
  console.log(arg);//[1,2,3]
  console.log(...arg);//1 2 3  在函数里面是展开运算符
}
num(1, 2, 3);

  • return 返回值

    • 不写return，那就是undefined
    • 写了return,没写内容，也是undefined
    • return了什么内容，那就是什么

  • 匿名函数常见写法

    • function () { }
    • var fn2 = function () { };
    • () => { };

  • 自调用函数常见写法

    • (function () { })();

      • 其它写法

        • -function () { }();
        • ~function () { }();
        • !function () { }();
        • -function () { }();

  • 箭头函数

    • 与正常函数的对比

      function func(a, b) { return a + b };
var func = (a) => { return a + b };

    • 简写

      • 如果形参只有一个,省略小括号

      • 如果函数体只有一条return语句，那就大括号和return都省略

        var func = (a) => { return a + b };
var func = a => a + b;

回调函数

  • 回调函数的特点

    1. 函数是自己声明定义的
    2. 自己没有调用它
    3. 它却自己执行了

  • 可以认为参数是被当成实参的函数。

  • 回调函数示例

    var ary = [1, 2, 3];
ary.forEach(() => {
  console.log('@@@@');
});

    var ary = [1, 2, 3];
const myFunction =() => {
  console.log('@@@@');
} 
ary.forEach(myFunction);//函数myFunction是我自己声明定义的，并没有用小括号去调用它，它却会被执行。

数组

数组定义

  1. 数组是值的有序集合。
  2. 每个值叫做一个元素。
  3. 每个元素在数组中有一个位置, 以数字表示,称为索引 (有时也称为下标)。
  4. 数组的元素可以是任何类型。
  5. 数组索引从 0 开始,数组最大能容纳 4294967295 个元素。

创建数组

  • 字面量写法

    var ary = [10, 20, 30];
console.log(ary);

数组的读写

  • 使用操作符 [] 来读写数组的每一个元素, []中是数组的索引。

  • 数组可以通过 length 属性获取数组的长度，也就是数组中元素的个数。

  • 数组length属性的特别之处（他不是只读的，通过修改length，可以从数组末尾删除或添加元素）

  • 读数组

    var ary = [10, 20, 30];
var item = ary[2]// 读取数组中的元素
console.log(item);

  • 写数组

    var ary = [10, 20, 30];
ary[1]=100// 修改数组中的元素
console.log(ary);

length属性

  • length是数组的长度，代表元素的个数

  • 稀疏数组

    • 数组名[大小length的索引] 可以创建稀疏数组

      var ary = [10, 20, 30];
ary[5] = 500;//创建稀疏数组
console.log(ary);//稀疏数组 [100,20,30,empty*2,500]

  • length属性的常见作用

    1. 知道数组的长度 var ary = [10, 20, 30];ary.length
    2. 可以拿到数组的最后一项 var ary = [10, 20, 30];ary[ary.length - 1]
    3. 可以删除最后一项 var ary = [10, 20, 30];ary.length--;//ary.length=ary.length-1;
    4. 可以在末尾增加一项 var ary = [10, 20, 30];ary[ary.length] = 400;

遍历数组（迭代数组/循环数组）

遍历数组也叫迭代数组或循环数组

  • 方法

    • for循环

      var ary2 = [10, 20, 30];
for (var i = 0; i < ary2.length; i++) {
  console.log(ary2[i]);
}

    • for in循环

      • for (var key in 对象) {} key是一个变量，一定要用中括号

      • 循环数组

        var ary2 = [10, 20, 30];
for (var key in ary2) {
  console.log(key);//0 1 2
  console.log(ary2[key]);//key是一个变量，一定要用中括号
}

      • 可以用来循环对象

        var obj = { a: 1, b: 2 }
for (var key in obj) {
  console.log(key);
  console.log(obj[key]);
}

多维数组

  • 原理就是每一个中括号的返回值就是一个数组
// 创建多维数组
var cityList = [
  ['广州', '深圳', '佛山', '东莞', '惠州'],
  ['南京', '苏州', '徐州', '无锡', '南通'],
  ['济南', '青岛', '烟台', '潍坊', '淄博'],
  ['杭州', '宁波', '温州', '绍兴', '湖州']
];

// 多维数组取值
cityList[2][1];
  • 类似于 每一个函数的返回值都是函数
    fn()()()

数组常见方法

前提

学习思路

  • 该方法的作用
  • 该方法的参数
  • 该方法的返回值
  • 该方法是否改变原数组

原生js的方法原则

  • 方法传参一般都尽量简单
  • 方法出参一般实用
具体方法

  • push()

    • 作用: 在原数组末尾增加追加的元素

    • 参数: 追加的元素

    • 返回值: 加完之后原数组的长度

    • 是否改变原数组: 改变

      var ary = [10,20,30]
var res = ary.push(40,50)
console.log(res,'返回')//5 '返回'
console.log(ary,'原数组')//[10, 20, 30, 40, 50] '原数组'

  • pop()

    • 作用: 删除原数组最后一项

    • 参数: 无参数

    • 返回值: 删除的那一项的值

    • 是否改变原数组: 改变

      var ary = [10,20,30]
var res = ary.pop()
console.log(res,'返回')//30 '返回'
console.log(ary,'原数组')//[10, 20] '原数组'

  • unshift()

    • 作用: 在原数组开头增加追加的元素

    • 参数: 追加的元素

    • 返回值: 加完之后原数组的长度

    • 是否改变原数组: 改变

      var ary = [10,20,30]
var res = ary.unshift(-10,0)
console.log(res,'返回')//5 '返回'
console.log(ary,'原数组')//[-10, 0, 10, 20, 30] '原数组'

  • shift()

    • 作用: 删除原数组第一项

    • 参数: 无参数

    • 返回值: 删除的那一项的值

    • 是否改变原数组: 改变

      var ary = [10,20,30]
var res = ary.shift()
console.log(res,'返回')//10 '返回'
console.log(ary,'原数组')//[20, 30] '原数组'

  • reverse()

    • 作用：翻转数组
    • 参数：无参数
    • 返回值：翻转之后的数组
    • 是否改变原数组：改变

  • sort()

    • 作用：数组排序

    • 参数：排序条件

    • 返回值：

    • 是否改变原数组：

    • 示例

      var ary = [30, 15, 2];
// 不填参数，只能排10以内
// var returnValue = ary.sort();
// >=10要传参数
var returnValue = ary.sort(function (a, b) {
  return a - b;//升序
  // return b - a;//降序
});
console.log(returnValue, '返回值');
console.log(ary, '原数组');
      • 回调函数是(a, b)=>a - b 升序
      • 回调函数是(a, b)=>b - a 降序
      • 无回调，只能排10以内数字，因为默认的是比的字符串编码

    • 回调函数

      • 有一些第三方函数，要求自己传入一个固定入参及固定出参类型的函数，我们所写的那个固定入参及固定出参类型的函数相对于那个第三方函数就是回调函数。

        • 对于第三方函数来说，回调函数的出入参的个数及数据类型都是固定的，他们只是传入固定的入参，得到一个固定类型的出参。
        • 对于固定入参及固定出参类型的函数来说，我们要写固定数量及类型的形参及一个固定类型的出参。到时会有不同的形参值传入并执行多次，每次结果都可能不一样。
        var ary = [10, 5, 8];
ary.sort((a, b) => a - b);//`(a, b) => a - b`就是回调函数
//ary.sort(function (a, b) { return a - b; });

        //内部函数实际上就是类似于这样调用。
function sort(callback) {
  //执行时 ，callback指的就是传进来的箭头函数`(a, b) => a - b`，不同的执行条件，callback函数也不一样。但基本上入参及返回值是确定的，入参是函数内控制，而返回值则是函数定义后开放标准，由回调函数来实际书写的，但一般一定会有个符合回调函数要求的返回值。
  callback()
}
sort((a, b) => a - b)

  • splice()

    • 作用：增删改一体化

    • 参数：

    • 返回值：删除的元素，数组包着

    • 是否改变原数组：改变

      var ary = [10, 20, 30];
// @1 没有传参数 什么也没做
// var returnValue = ary.splice();
// @2 第一个参数是开始删除的位置（下标）
// 从下标为1开始，往后全部删除
// var returnValue = ary.splice(1);//[20,30]
// @3 第二个参数是删除的个数
// var returnValue = ary.splice(1, 1);//[20]
// @4 第三个参数,以及三往后的参数，都是添加的元素
// var returnValue = ary.splice(1, 1, 111, 222);//[20]

// var returnValue = ary.splice(0, 1);//删除第一项
// var returnValue = ary.splice(ary.length-1, 1);//删除最后一项
// 在开头添加一项
// var returnValue = ary.splice(0,0,111);
// 在末尾追加一项
var returnValue = ary.splice(ary.length,0,'haha');

console.log(returnValue, '返回值');//[]
console.log(ary, '原数组');

  • slice(startIndex,endIndex)

    • 作用：从原有的数组中选中特定的内容

    • 参数：可以有一个或者两个

    • 返回值：返回值是一个数组，返回的每一项是复制的项

    • 是否改变原数组：不改变

      注意:

      1. 如果只有一个参数，slice()会返回该索引到数组末尾的所有元素
        - 复制数组 数组变量名.slice(0);

        • var arr=[10,20,30,40,50];var newarr=arr.slice(0);

      2. 如果有两个参数，slice()返回从开始索引到结束索引对应的所有元素
        - 但是不包含结束索引nums.slice(startIndex,endIndex),包含startIndex，不包含endIndex

      3. 如果slice()的参数有负值，那么就以数组长度加上这个负数来确定位置

      4. 如果结束位置小于开始位置，则返回空数组

      5. 数组里面的项如果是对象，则返回的是引用。如果是基础数据类型，则返回的基础数据。

  • concat()

    • 作用：实现多个数组或者值的拼接

    • 参数：数组或者值

    • 返回值：返回值是拼接后的新数组

    • 是否改变原数组：不改变

      var ary1 = [1, 2, 3];
var ary2 = [4, 5, 6];
var res = ary1.concat(ary2, "珠峰", "同学");
console.log(ary1);//[1, 2, 3]
console.log(res);//[1, 2, 3, 4, 5, 6, '珠峰', '同学']
      • 如果里面是数组，就把数组解析一层再拼接，相当于。

  • toString()

    • 作用：可以把一个数组转换为字符串

    • 参数：无

    • 返回值：返回值是转换后的字符串

    • 是否改变原数组：不改变

      var ary1 = [1, { a: 1 }, null, undefined, 3];
var res = ary1.toString();
console.log(ary1);//[1, {a:1},null, undefined, 3]
console.log(res)//1,[object Object],,,3

      • 将里面的对象都转为字符串

        • 遇到null/undefined会变成空，但前后逗号依然还在

      • 默认,拼接

        • alert()方法最终体现的是字符串，会调用toString()

  • join()

    • 作用：把数组通过指定的连接符，转换为字符串

    • 参数：连接符

    • 返回值：返回值是转换后的字符串

    • 是否改变原数组：不改变

      var ary1 = [1, 2, undefined, 3, { a: 1 }];
var res = ary1.join("|");
console.log(ary1);//[1, 2, undefined, 3, { a: 1 }]
console.log(res)// 1|2||3|[object Object]  
eval(res) //==> eval  执行计算，会报错

      • 不写参数时，默认,拼接

      • 有参数时，参数是什么就用什么来拼接

      • 拼接符为+，可配合eval()做加法

        • 可以用这个来做简易计算器

            var arr=[10,20,30];
  var newstr=arr.join("+");
  //newstr => "10+20+30"
  //eval(newstr) => eval("10+20+30") => 60
  console.log(eval(newstr));

  • indexOf()/lastIndexOf()

    • 作用：获取某项在数组中(首次出现/最后出现的) 索引（也可以用来是否包含某项）

    • 参数：（n,m）

      • 参数说明：

        • n:检测的项
        • m:如果是indexOf 的话，就是从索引m开始检索。如果是lastIndexOf 的话，就是从索引m停止检索

    • 返回值：-1或者具体的索引值

    • 是否改变原数组：不改变

      //+ 作用：检测数组中的某项在数组中（首次indexOf/最后lastIndexOf）出现的位置

var ary=[1,2,3,4,1,55,1];
//检测1这个项目在数组ary 中首次出现的位置
ary.indexOf(1); //0
//从索引2开始，检测1这个项目在数组中首次出现的位置
ary.indexOf(1,2); //4

// 检测1这个项目在数组中最后一次出现的索引
ary.lastIndexOf(1);
// 检测1这个项目在数组中最后出现的索引，在索引5的位置停止检测
ary.lastIndexOf(1,5)

//如果此项在数组中没有出现，返回值就是-1
ary.indexOf(66)===>-1

      • 也可以理解为

        • 判断数组里是否含有某项内容，含有就返回 索引下标，不含有返回-1

        • 参数:

          • 第一个参数：某项内容
          • 第二个参数：开始查找的位置

        • 查找方向

          • indexOf:从前往后找
          • lastIndexOf：从后往前找

  • includes()

    • 作用：检测数组中是否包含某一项

    • 参数：具体项

    • 返回值：布尔值

      • 有true
      • 没有false

    • 是否修改原数组：不改变

      var arr=[10,20,30,10];
console.log(arr.includes(10));//true
console.log(arr.includes(100));//false
console.log(arr);//[10,20,30,10];

  • forEach() 数组的迭代方法 类似for循环

    • 作用：遍历数组中的每一项

    • 参数：函数

    • 返回值：undefined

    • 是否修改原数组：不改变

    • 示例:

      var arr=[10,20,30];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
    console.log(i);
    console.log(arr);
}

      var arr=[10,20,30];
var res = arr.forEach((item,index,ary)=>{
    console.log(item);
    console.log(index);
    console.log(ary);
})

      var arr=[10,20,30];
var res = arr.forEach((item,index,ary)=>{
    console.log(item);
    console.log(index);
    console.log(ary);
    return (item * 5)
})
console.log(res,'返回值');//undefined '返回值'
console.log(arr,'原数组');//[10,20,30] '原数组'

      • forEach(回调函数)

        • 回调函数(数组的每一项,索引下标,当前数组)

          • 回调函数中，一般没有return，因为写了也没用

        • 返回值 undefined

  • map()

    • 作用：把一个数组可以映射成一个新的数组

    • 参数：函数

    • 返回值：映射后的新数组

    • 是否修改原数组：不改变

    • 示例:

      var arr=[100,200,300];
var res = arr.map((item,index,ary)=>{
    console.log(item);
    console.log(index);
    console.log(ary);
    return item+10;
})
console.log(res,'返回值');//[110,210,310] '返回值'
console.log(arr,'原数组');//[100,200,300] '原数组'
      • map跟forEach 的用法一样
      • 唯一不一样的是 map 有return(返回值)
      • 结果新的数组(新数组的每一项，就是循环后返回的值)

  • 可以用索引 in 数组来判断一个位置是否是空，还是undefined。

数组元素加1案例

数组代表一个家庭的年龄，过年了，每个人长1岁

  1. map()

    var userAages = [19,21,18,34,32,25,45];//[20,22,19...]
var newuserAages=userAages.map(item=>item+1)
console.log(newuserAages);

  2. for

        var userAages = [19,21,18,34,32,25,45];//[20,22,19...]
    var newarr=[];
    for(var i=0;i<userAages.length;i++){
        newarr.push(userAages[i]+1)
    }
    console.log(newarr);

  3. forEach()

        var userAages = [19,21,18,34,32,25,45];//[20,22,19...]
    var newarrA=[];
    userAages.forEach(item=>{
        newarrA.push(item+1)
    })
    console.log(newarrA);

  4. for-in

        var userAages = [19,21,18,34,32,25,45];//[20,22,19...]
    var newarr=[];
    for(var key  in userAages){
        newarr.push(userAages[key]+1)
    }
    console.log(newarr);

进阶参考

  1. 数组的空位与undefined的注意点
avatar
文章
阅读
粉丝