Web 前端 Javascript笔记2

1、数组

为什么需要数组：因为变量只能存储一条数据，但是储存多条数据

数组的声明方式

1、new

let a1=new Array()
console.log(a1)

2、字面量

 let a2=[1,2,4,"k",true,"zhangsan",11]
console.log(a2)

数组里面可以存放不同的数据类型

数组长度

console.log(a2.length)

查看数组元素：数组下标

数组下标从0开始，没有-1下标，-1 下标只有python有

console.log(a2[2])

遍历数组

for(let i=0;i<=a2.length;i++){
            console.log(a2[i])
        }

练习

let a3=[2,3,4,5,6,1,22]求所有元素的和，求平均值

s=0 
av=0
let a3=[2,3,4,5,6,1,22]
for(let j=0;j<a3.length;j++){
    s=s+a3[j]
}
av=s/a3.length
console.log(av)
console.log(s)

2、循环加强:迭代数组对象

for in：i是下标

 let a3=[11,3,4,27]
    for(let i in a3){
        console.log(a3[i])
    }

for of：i是数组里的值

let a3=[11,3,4,27]
for(let i of a3){
    console.log(i)
}

3、数组操作

查：数组名[下标]

改：数组名[下标]=值

增：数组名.push() //能够一次把一个或多个元素在添加至末尾

数组名.unshift()        //能够一次把一个或多个元素在添加至开头

       数组名.splice(下标,删除元素的个数,增加的值) //在指定的下标中增加值



删：数组名.pop() //括号里面没有参数，删除最后一个元素

       数组名.shift()       //括号里面没有参数，删除第一个元素

数组名.splice(start,删除多少个元素)

其他方法

数组名.includes（）：用于确定数组中是否存在某个元素，含有则返回true，否则返回false

数组名.indexOf（）：返回数组中可以找到给定值的第一个索引，如果不存在返回-1

数组名.lastindexOf（）：返回数组中可以找到给定值的最后一个索引，如果不存在返回-1

数组名.sort（）：对数组的元素进行排序，并返回数组

数组名.reverse（）：颠倒数组中元素的位置

数组名.fill（）：用一个固定值填充数组中指定下标范围内的全部元素

数组名.concat(数组名2)：返回一个合并两个或多个数组后的新数组

4、函数、

函数：一段实现某个功能的代码集合

本质：实现代码的高度复用

函数在js中的定义方式

function 函数名（[参数]）{函数体}

函数调用

函数名（）

无参函数

<script>
        //function 函数名（[参数]）{函数体}
        function just(){
            console.log("helllllo!")
        }
        just()
    </script>

有参函数：

默认情况下你的形参有几个，传回去的实参就有几个，一对一的有顺序关系

  function get(n1,n2){
           console.log(n1+n2)
           return n1+n2,n2-n1,n1*n2//只能返回一个数据
       }
       let a=get(2,3)
       console.log(a)

函数的返回值：

在函数体中通过 return 实现返回值

返回多个数据的时候，只能返回return的最后一个数据

想要返回多个数据就返回一个数组

函数表达式：

将声明的函数赋值给一个变量，通过变量完成函数的调用与参数的传递

  <script>
        let fn=function sum(a,b){
            return a+b;
        }
        console.log(fn(2,4))
    </script>

运行结果为：6

匿名函数：

匿名函数指的是没有名称的函数，可以有效避免全局变量的污染及函数名的冲突，是函数表达式的另一种表现形式，可以通过函数声明的方式实现调用。

①、函数表达式中省略函数名

<script>
     let fn=function (a,b){
            return a+b;
        }
        console.log(fn(2,4))
</script>

②、自调方式

<script>
    ( function (a,b){
            console.log(a+b);
    })
        (2,4)
</script>

③、处理事件

<body> 
    <input type="button" value="btn" id="sub">
    <script>
    //获得按钮元素
    let sub = document.querySelector("#sub")

    //给按钮增加点击事件。
    sub.onclick=function(){

        alert("当点击按钮时会执行")

    }

</script>
</body>

④对象

let a = {
    name:"kkk",
    age:18,
    fn:function(){
        return "我叫"+this.name+"今年"+this.age+"岁了！";
    }
};

console.log(a.fn());//我叫kkk今年18岁了！

回调函数：

   <script>
    function t1(){
            console.log("test1------")
        }
    function t2(fn){
            fn()
            console.log("test2~~~~")
        }
t2(t1())
</script>

箭头函数：

①、标准语法

（参数1，参数2.......）=>{

函数体

}

②、返回值

（参数1，参数2.......）=>{

return 返回值

}

或者

（参数1，参数2.......）=>返回值

③、含有一个参数

（参数）=>{

函数体

}

或者

参数=>{函数体}

④、无参箭头函数

（）=>{函数体}

或者，将空括号改成_

_=>{函数体}

5、值传递与引用传递

①|值传递

k接到了a的数据

   <script>
       function c(a,b){
           console.log(a)
           console.log(b)
           a+=1
           b+=1
           return a,b
       }
       let k=c(1,2)
       console.log(k)
   </script>

再来：

声明两个变量，传到函数里面修改，出函数之外再打印这两个变量，发现变量大小没有发生改变

 <script>
       function c(a,b){
           a+=1
           b+=1
       }
       let x=1
       let y=3
       c(x,y)
       console.log(x)
       console.log(y)
   </script>

②、引用传递

将数组传到函数中修改，数组却真的被修改了


 <script>
       function c(a){
           a.push([1,4,10,25])
       }
       let a=[17]
       c(a)
       console.log(a)
   </script>

这些代码会被加载到内存当中，代码执行的时候会立刻有个执行栈，变量的声明会放在常量池里，数组存的东西比较多，无法放在栈中，于是放在堆里，堆里的数据都有对应的16进制地址，当调用数组的时候，其实我们拿到的是数组的地址，将数组去赋值给一个变量，这个变量就可以访问数组地址，这个变量修改时，会带着地址修改数组的值。

6、函数作为参数传递

函数调用函数是正常的现象：回调函数

<script>   
    function t1(){
            console.log("test1------")
        }
        function t2(fn){
            fn()
            console.log("test2~~~~")
        }
    t2(t1())
</script>

若是让被调用的t1()函数作为参数，可以用匿名函数

</script>
    function test2(fn){
            fn()
            print("test2~~")
        }
        
        t2(function(){
            console.log("test1~~")
        })
</script>

觉得麻烦用箭头函数

   <script>
        function test2(fn){
            fn()
            print("test2~~")
        }

            //箭头函数 主要是作于作为其他函数的参数进行
            test2(（）=>{
                console.log("test1~~")
            })
    </script>

 <script>
        function test2(fn){
            fn()
            print("test2~~")
        }

            //箭头函数 主要是作于作为其他函数的参数进行
            test2(x=>2)
    </script>

7、默认参数

<script>
    function Area(r,PI=3.14){
        return r*r*PI
    }
    let a=Area(3)
    console.log(a)//得出结果=28.26
</script>

8、可变参数（arguments）

 <script>
        function getsum(){//只放前两个
            console.log(arguments)
        }
        getsum(11,3,7,19,2)
 </script>

打印出来返回一个数组

9、剩余参数

如果函数的最后一个命名参数以...为前缀，则它将成为一个由剩余参数组成的真数组，其中从0（包括）到theArgs.length（排除）的元素由传递给函数的实际参数提供。

function(a, b, ...theArgs) {
  // ...
}

剩余参数和 arguments对象之间的区别主要有三个：

剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法。

10、作用域

变量名（名称）在某一个范围内生效，那么这个范围就是他的作用域

我的学号出了校门就没用了

全局作用域局部作用域块级作用域：对应全局变量局部作变量块级变量

1、全局作用域：在script标签下第一层

2、局部作用域：函数内

3、块级作用域：一对花括号内：{} var没有块级作用域这个概念

11、对象

JavaScript 对象是拥有属性和方法的数据

函数放在对象里叫做方法

变量放在对象里叫做属性

   <script>
        let name=[122,111,160]
        //对象：存储数据
        let zhangsan={
             uname:"zhanshan",
             age:21,
             sing: ()=>{
                 console.log("hahahahahah")
             }
        }//对象属性与方法
       
    </script>

//查看 ：

对象名.属性

对象名["属性或方法"]------->中括号里必须是字符串

 console.log(zhangsan["age"])
console.log(zhangsan.uname)