js函数与数组初步学习

函数与数组

JavaScript 中的基本组件之一。一个函数是 JavaScript 过程 — 一组执行任务或计算值的语句。要使用一个函数，你必须将其定义在你希望调用它的作用域内。 每个 JavaScript 函数实际上都是一个 Function 对象。运行 (function(){}).constructor === Function // true 便可以得到这个结论。

在 JavaScript 中，数组不是基本类型，而是具有以下核心特征的 Array 对象：

• JavaScript 数组是可调整大小的，并且可以包含不同的数据类型。（当不需要这些特征时，可以使用类型化数组。）
• JavaScript 数组不是关联数组，因此，不能使用任意字符串作为索引访问数组元素，但必须使用非负整数（或它们各自的字符串形式）作为索引访问。
• JavaScript 数组的索引从 0 开始：数组的第一个元素在索引 0 处，第二个在索引 1 处，以此类推，最后一个元素是数组的 length 属性减去 1 的值。
• JavaScript 数组复制操作创建浅拷贝。（所有 JavaScript 对象的标准内置复制操作都会创建浅拷贝，而不是深拷贝）。

1.函数定义

 //定义函数
      egg='鸡蛋';
      //params是函入参，比如说把鸡蛋放进锅里，鸡蛋就是入参；
      //function是关键词声明
      function weibolu(params) {
        console.log("加热");//代码执行块
        return "热鸡蛋";//返回值
      }
      const goodegg=weibolu(egg);
      console.log(goodegg);
    //   匿名函数了解即可
      (function (params) {
        console.log("加热");
        return "热鸡蛋";
      })('鸡蛋')

    //   es6中的函数写法 箭头函数
    const WashMachine=(params)=>{
        console.log('洗衣服');
        return '干净衣服'
    }
    const goodclose=WashMachine('脏衣服');
    console.log('goodclose');

    //想加的函数
    const add=(a,b)=>{
        let sum=a+b;
        return sum;
    }
    //返回值简写=>代表了返回
    add2=(a,b)=>a+b;

    // 返回对象
    // 复杂写法
    const add3=(a,b)=>{
        return a,
        b
    }
    // 简单写法，永圆括号包裹对象可以直接返回
    const add4=(a,b)=>({a,b})

2.函数提升

不能将var和fanction结合在一起，如果下面注释代码取消注释，打印的就是定义的变量，而不是函数对象。

//  var fn=2;
        function fn() {
            let a=1;
        }
        console.log(fn);

3.函数的作用域

• 每个函数都会创建一个作用域，
• 在作用域内声明的变量，我们成为局部变量。
• 在作用域外部无法访问到作用域内部的变量。
• 全局变量只有windows。
• 下述代码打印的值为1,22；

const fn1=()=>{
        let a=1
        const fn2=()=>{
            let a=2
            const fn3=()=>{
               console.log(a)
            }
            a=22
            fn3()
        }
        console.log(a)
        a=100
        fn2()
    }
    fn1();

4.函数arguments与this

4.1arguments

arguments获取函数调用时，传入的实参为伪参数组

function fn() {
                 console.log(arguments)
              }
              // 不传入参数，打印一个arguments对象，length为0
            fn()
      //         // 传入三个参数，打印一个arguments对象，length为3

      //         fn(1,2,3)

使用场景：你不知道函数应该传递几个参数的时候

             function add() {
                   let sum=0
                  for(let i=0;i<arguments.length;i++){
                      sum+=arguments[i]
                  }
                  return sum

              }
               const sum=add(3,6,9)
              console.log(sum);

4.2this

• 为什么要有this
• 有利于重构代码。
• this可以指代对象，当对象的名称发生变化时，不用去修改下面的函数代码；

function fn() {
        console.log(arguments);
        console.log(this);
        console.log(this.a);
    }
    fn.a=1;
    function fn3() {
        console.log('aaa')
    }
    // 使用()来电用函数实际是一个简写：fn();
    // 下面才是完整的写法，call函数的第一个参数，代表this默认指向windows，后面就是函数的实参，也就是arguments
    // fn(windows,1,2,3)
    // 我们可以改变call的第一个参数,来改变this的指向
    fn.call(fn,1,2,3)
    
   let objs={
    name:'钱多多',
    age:18,
    sayHi(){
        console.log(`hello i am${this.name}`);
    },
    sayHi2(){
        console.log(`hi i am${this.name}`);
    },
    sayHi3(){
        console.log(`em i am${this.name}`);
    },
    sayHi4(){
        console.log(`how do u do? i am${this.name}`);
    },
   }
   objs.sayHi();
//    等效于下面的代码
   objs.sayHi.call(objs);

箭头函数的this永远都是windows

const arrowFn=()=>{
    console.log(this);
 }
 arrowFn();
 arrowFn.call(objs);

5.数组的声明

1.用const声明一个方括号

const array=[1,2,3,5,6];
        const array2=new Array(1,2,3,4,5);
        console.log(array);
        console.log(array2);

2.字符串、对象转数组

let str='1,2,3,a,b,c';
        let strArr=str.split(',')//参数，分隔符，将字符串以一个符号分开
        console.log(strArr);

        // Array.from转将字符串转为数组，每一个字符都是一个项
        let str2='123abc'
        let strArr2=Array.from(str2)
        console.log(strArr2);
         // 从对象转数组
        let obj={
            '0':123,
            '1':false,
            '2':()=>{
                console.log('你好')
            },
            'length':3
        }
        // 对象转数组两点局限性：1.下标必须为数字类型的字符串 2.必须含有length属性。
        let objArr=Array.from(obj)
        console.log(objArr);

3.数组的截取与拼接

    let arr=[1,2,3,4,5,6]
    // slice截取数组
    let subArr=arr.slice(0,3);
    console.log(subArr);
   
    let shortArr=[1,3,4]
    let shortArr2=[5,6,8]
   //扩展：
//    ...可以将数组展开，[1,3,4]---->1,3,4
// contact可以填入多个参数，也可以直接填入一个数组
    let longArr=shortArr.concat(...shortArr2);
    console.log(longArr);
    longArr2=[...shortArr,...shortArr2]
    console.log(longArr2);
    

6.伪数组

 let arr=[1,2,3]
        console.log(arr);
        // forEach遍历
        arr.forEach(item=>{
            console.log(item);
        })

伪数组和真数组的原型不一样，这是我们判断伪数组的依据

        let divList=document.querySelectorAll('div')
        console.log(divList);
        divList.forEach(arguments=>{
            console.log(arguments);
        })

下面代码由于伪数组中没有foreach，所以运行会报错

        function fn() {
            console.log(arguments);
            arguments.contact(1,2,3);
            // 伪数组中没有forEach方法
            arguments.forEach(arguments => {
                console.log(arguments);               
            });           
        }
        fn(123);

7.数组的增改删查

1.push

用于在数组后面添加一个值，也可以添加多个

let arr = [1, 2, 3];
      arr.push(4);
      console.log(arr);
      arr.push(5, 6);
      console.log(arr);
      //push不能去传入一个数组，需要将数组展开，否则会将整个数组放进去
      arr.push(...[7, 8]);
      console.log(arr);

2.unshift（） 从头部添加元素

let arr2 = ["a", "b", "c"];
      arr2.unshift("d");
      console.log(arr2);
      arr2.unshift("e", "f");
      console.log(arr2);
      arr2.unshift(...["g", "h"]);
      console.log(arr2);

3.plice

增删改集成，第一个参数:从第几个下标开始，第二个参数：删除的个数，后面的参数都是需要添加的元素

      //缺少了feb may；
      let month = ["Jan", "March", "April", "June"];
      // 添加feb
      month.splice(1, 0, "Feb");
      console.log(month);
      // 添加may，删除june
      month.splice(4, 1, "May");
      console.log(month);
      month.splice(
        6,
        0,
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      );
      console.log(month);

4.删除元素

// 与push对应，pop从尾巴删除一个元素
    let arr3=[4,5,6]
    arr3.pop()
    console.log(arr3)
    // shift从头不删除元素
    arr3.shift()
    console.log(arr3)

5.查

 // 通过下标获取值
    let arr4=['a','b','c']
    let b=arr4[1]
    console.log(b);
    // 通过值获取下标
    let index=arr4.indexOf('c')
    console.log(index);//2
    // 判断数组中是否包含某个值includes,返回一个bool
    const isINArr=arr4.includes('c');
    console.log(isINArr);
    const isINArr2=arr4.includes('d')
    console.log(isINArr2);    
    const isINArr3=arr4.indexOf('a');//下标
    const isINArr4=arr4.indexOf('d');//-1
    if(isINArr3>=0){
        console.log('a在数组中');
    }
    if(isINArr4<0){
        console.log('d不在数组中');
    }

8.数组的遍历

1.foreach

        arr.forEach((item,index)=>{
            console.log(`${item}-${index}`);
            item='c'
        })

2.map映射

• ap和forEach一样接受一个函数作为参数
• map有返回值会返回一个数组,返回数组与原来的数组值相关
• map不会改变原来的数组

 let arr2=[1,2,3,4,5]
        // 将每一项都变为原来的两倍
        const double=(arr)=>arr.map(item =>{
                return item *2
            }
            )
        
        const newArray=double(arr2);
        console.log(newArray)
        console.log(arr2)

3.some

只要数组中有一项满足条件，返回true，否则返回false

let arr3=[1,2,3,4,5]
        const res=arr3.some(item=>{
            return item>3
        })
        const res2=arr3.some(item=>{
            return item<0
        })
        console.log(res);
        console.log(res2);

4.every

数组中的每一项都满足于条件返回true，否则为false

let arr4=[1,2,3,4,5]
        const res3=arr4.every(item=>{
            return item>0;
        })
        const res4=arr4.every(item=>{
            return item>3;
        })
        console.log(res3);
        console.log(res4);

5.findIndex

找到符合条件的值的下标，没有就返回-1

 const arr5=[1,2,3,{name:'钱多多'}]
        const index=arr5.findIndex(item=>{
            return item.name==='钱多多'
        })
        console.log(index);

6.find

返回第一个匹配的元素，如果没有找到，返回undifined

 const target=arr5.find(item=>{
            return item.name==='钱多多';
        })
        console.log(target);

7.filter

过滤，返回符合条件的值， 不会改变原数组

const nums=[1,2,3,4,5,6]
        const numsBig=nums.filter(item=>{
            return item>3;
        })
        console.log(numsBig);

本文由mdnice多平台发布