JavaScript全笔记_下一章javascript:-优快云博客

本文链接：https://blog.youkuaiyun.com/U177578241/article/details/136921737

本文介绍了JavaScript的基本概念，包括脚本引入方式（行内式、嵌入式、外链式），以及变量的声明与赋值（var、let、const）、数据类型（基本类型、检测）、算数运算符、逻辑运算符、比较运算符、三元运算符和流程控制（if...else语句）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一章：初识JS

01-javascript初体验

编写JavaScript前需要先输入<script></script> 。

    <script>
       
    </script>

标签用于定义客户端脚本架标签用于定义客户端脚本。他可以写在HTML中也可以通过scr属性插入外部脚本文件(xxx.js)中。

1-输出语句

1.1alert()

alert()的功能是在浏览器中弹出一个带有指定消息和一个OK按钮的警告框。如图所示：

 <script>
        alert("未满18禁止访问")
    </script>

1.2console.log()

console.log()的作用就是把参数指定的内容输出到控制台中，方便调试代码，我们可以在检查中

看到我们在console.log（）中所写的内容。

<sccript>
console.log("111");
</script>

1.3document.write()

document.write()它的基本作用就是向文档中写入HTML表达式和JavaScript的代码，也就是所谓的打印变量在页面上。

<script>
document.write("三月对我好一点")
</scrtpt>

2-输入语句

2.1prompt

prompt方法用于显示一个可提示用户进行输入的对话框。如图所示：

<script>
prompt("请输入姓名")
</script>

2.2confirm

confirm是一个用于显示带有确定和取消按钮的对话框的方法，通常用于判断是否符合所设定的条件（在网页中弹出确认框）。如图所示：

<script>
confirm("你真的满24 吗")
</script>

02-javascript代码引入方式

1-行内式

行内式是将JavaScript代码作为HTML标签的属性值使用。例如，在单击超链接“test”时，弹出一个警告框提示“Hello”，例如。

<a href="javascript:alert('Hello'>test</a>

注意：需要说明的是，行内式只有在临时测试或者特殊情况下使用，一般情况下不推荐使用行内式，因为行内式有如下缺点。
(1)行内式可读性较差，尤其是在HTML文件中编写大量JavaScript代码时，不方便阅读。
(2)行内式在遇到多层引号嵌套的情况时，引号非常容易混淆，导致代码出错。

2-嵌入式

嵌入式（或称内嵌式）使用<script>标签包裹JavaScript代码。直接编写到HTML文件中，通常将其放3<head>标签或<body>标签中。<script>标签的type属性用于告知浏览器脚本类型，HTML5中该属性的默认1为“text/javascript”，因此在使用HTML5时可以省略type属性。

<script>
javascript代码
</script>

3-外链式

外链式（或称外部式）是将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML页面中使用<script 标签的src属性引入“js”文件。外链式适合JavaScript代码量较多的情况。

<script scr="test.js"></script>

嵌入式与外链式的区别

(1)外链式存在于独立文件中，有利于修改和维护

(2)外链式可以利用浏览器缓存提高速度。

(3)外链式有利手HTML页面代码结构化

第二章：JavaScript基本语法

01-变量

1.1变量的声明和赋值

变量有两种声明和赋值的方法：（1）先声明后赋值：变量声明完后，默认值会被设定为underfined，表示未定义，如果需要使用变量保存具体的值就需要为其赋值

 var boy;
        var girl;

         console.log(boy);//underfriend(未定义的)
        console.log(girl);

（2）声明时一起赋值：在声明变量的同时为变量赋值，这个过程又被定义为变量或初始化变量

 var myage =16;
        var myheight=188;

        console.log(myage);
        console.log(myheight);

1.2let声明变量

let是ES6新引入的关键字，用来替代var关键字，ES6指2015年推出的ECMscript语法

let不允许在一个代码块里面有变量的他取一样的名字，但是允许修改同一个变量值

注意：一个花括号{}就是一个代码块

var与let的区别

(1)初始化要求不同

使用var和let声明变量时可以先不初始化，而使用const声明变量时必须初始化。

(2)重复声明不同

使用var和let声明的变量可以多次被修改,其值只与最近一次赋值一致，

而使用const声明的变量，在整个运行过程中不能修改初值，

(3)对块级作用域的支持不同

使用一对花括号括起来的代码称为一个代码块所谓块级作用域，就是指变量起作用的范围是当前代码块，

离开当前代码块，变量就失效了，使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。

  var boyFriend="hh";
        var boyFriend="hhh";
        var boyFriend="hhhh";
        console.log


let girlfriend="刘梦"
        girlfriend="刘梦";
        console.log(girlfriend);

1.3const声明变量

const与var和let的区别：

let和var声明的变量可以改变 constant声明的变量不能改变，即常量

错误写法
        const a=314
         a=315
         console.log(a)


正确写法
        const a=3.14
        console.log(a);

*** const必须要在声明的时候就赋值

02-数据类型

1-数据类型分类

简单数据类型储存在栈内存里面，复杂数据类型存储在推内存中，地址储存在栈内存中

2-基本数据类型

Boolean-布尔型

 let flag1=true;
        let flag2=false;

        // Ture.False.TURE.FLASE这些写法都是错的

        console.log(flag1);
        let flag3="true"
        console.log(flag3);

number-数字型

let age=18;
        let date = "5555"
        console.log(age);
        console.log(date);

        console.log(Number.MAX_VALUE);//最大值
        console.log(Number.MAX_VALUE*2);   //infinity无穷大


        var a = 3-"b"
        console.log(a);//NaN (not a namber)NaN 也属于数字类型

        // isNaN判断是否是一个非数字
        // 如果是数字类型则判断为false
        // 如果不是数字类型则为true

string-字符串

let demo1 ="字符串"
        let bemo2 ='字符串'
        let demo3 =`字符串`
        let demo4 = "给哈哈哈哈"

undefined-未定义型

console.log(grade);//undefined

3-数据类型检测

<script>
        // isNaN 检测时否是一个非数字

        // typeof

        console.log(typeof("123"));//string
        console.log(typeof(false));//boolean
        console.log(typeof(null));//object

        console.log(typeof('aaa'*2));//number

        console.log(2-"true");//nan
        console.log(typeof(2-"true"));//number

        //布尔类型true，会在运算中转化为数字1 
        //布尔类型false，会在运行中转化为数字0
        console.log(2-true);//1
        console.log(typeof(2-true));//number

        //加号遇上字符串，做拼接使用
        console.log(2+"true");//2true
        console.log(typeof(2+"true"));//string

        console.log(2+true);//3
        console.log(typeof(2+true));//number
    </script>

03-运算符

1-算数运算符

算数运算符共有八个运算符分别为

（1）：加法运算

<script>
let a =12;
        let b=23;
        console.log(a+b);//35
</script>

(2)：减法运算

<script>
let a =12;
        let b=23;
        let c=b-a
        console.log(c);
</script>

（3）：乘法运算

<script>
let a =12;
        let b=23;
        console.log(a*b);//276
</script>

（4）除法运算

<script>
let a =12;
        let b=23;
        console.log(b/a);
</script>

（5）取模运算（取余数）

<script>
 console.log(26/5);//1
</script>

（6）幂运算

<script>
 console.log(2**10);//1024
    // 2*2*2*2*2*2*2*2*2*2
</script>

（7）自增运算

<script>
m=5;
      n = ++m;
      console.log(m);//5
      console.log(n);//6
</script>

(8)自减运算

<script>
 q=2;
      p=--q;
      console.log(q);
      console.log(p);
</script>

2-赋值运算符

3-比较运算符

 <script>
        // !=   不等于
        console.log(4!=5);
        console.log(4!=4);

        //!== 不全等
        console.log("5"!==5);

        // ==等于
        console.log(4=="4");

        // ===全等于
        console.log(4==="4");

        //==和！=在比较的数据类型时，会将比较的数据转化为相同的类型数据
        //===和！===则不会进行数据类型的转换
    </script>
</body>

4-逻辑运算符

逻辑运算符的口诀：

&&逻辑运算符一假则假

|| 逻辑或运算符一真则真

! 反逻辑运算符

<script>
        console.log(true&&true);//true
        console.log(false&&true);//false
        console.log(true&&false);//false
        console.log(false&&false);//false



        console.log(true||true);//true
        console.log(true||false);//true
        console.log(false||true);//true
        console.log(false||false);//false

        console.log(!true);//false
        console.log(!false);//true
    </script>

5-三元运算符

三元运算符也称为三元表达式，使用问号“?”和冒号 “：”两个符号号来连接，根据条件表达式的值来定问号后面的表达式和冒号后面的表达式哪个被执行

 <script>
        //条件表达式 ？ 表达式1：表达式2

        //如果条件表达式的值为TRUE，则返回表达式1的执行结果
       // 如果条件表达式的值为false，则返回表达式2的执行结果

       var age =prompt("请输入你的年龄")
       console.log(age);
       var res = age >=18?"你已经是一个成年人了":"小学生别来沾边"
       document.write(res)

       var sz1 = prompt("输入数字")
        console.log(sz1);
        var sz2 = prompt("再来一个")
        console.log(sz2);
        var res = sz1>=sz2? sz1:sz2
        document.write(res)

        var num3=prompt("输入数字")
         var res = num3>=10? num3:"0"+num3
         document.write(res)
    </script>

6-运算符优先级

小括号>一元运算符> 比较运算符>逻辑运算符(逻辑与>逻辑或)>赋值运算符

<script>
et a = 3 > 5 && 2 < 7 && 3 == 4
        console.log(a);//false
        let b = 3 > 5 || 2 < 7 && 3 == 4
        console.log(b);//false
</script>

04-流程控制

1-if... else语句（单分支）

if (条件表达式) {代码段1} else {代码段2}

  <script>      
       let age = prompt("输入年龄")
        if (age >=18){
            document.write("可以进入")
</script>

2-if... else语句（双分支）

if (条件表达式) {代码段1} else {代码段2}

<script>
let age = prompt("输入年龄")
         if (age >=18){
            document.write("可以进入")
        }else{
            document.write("非法看")
         }
</script>

3-if .. else.. if .. else语句（多分支）

if(条件表达式1){

条件表达式1的结果

/}else if(条件表达式2){

条件表达式2的结果

}else if(条件表达式3){

条件表达式3的结果

}else{除去123的结果}

第三章-数组

01-初识数组

数组是一种复杂数据类型。

用于将一组数组集合在一起

通过一个变量就可以访问一组数据

数组之间通过逗号（，）分隔

数据中的索引/下标，是从0开始计算的

声明数组

 let arr =["tom","lily","tony"]

打印数组

console.log(arr);

打印数组长度

    console.log(arr.length);//3

打印数组中下标为1的元素

 console.log(arr[1]);//lily

***数组可以是任意类型的元素例如：字符串，数字，数组***

02-创建数组

1.以new array()方式创建数组

var  arr = new Array();
        console.log(arr);//Array(0)
        var arr=new Array(5);
        console.log(arr);
        var arr= new Array('tom','j','y')
        console.log(arr);

2.使用数组字面量创建数组

var mood = ['sad',,,,,,,'lm']
         console.log(mood.length);//8
         console.log(mood[7]);//lm
         console.log(mood[6]);//undefined
         console.log(mood[0]);//sad

03-数组的基本操作

1.获取数组长度

数组名；length

2.修改数组长度

数组名：length = number

var arr = [0,1,2,3]
         console.log(arr.length);
        arr.length =5
         console.log(arr);//[0,1,2,3,empty]
         arr.length=3
         console.log(arr);//[0,1,2]

3.添加数组元素

arr[4]=3
         console.log(arr);//[0,1,2,empty,3]

4.修改数组元素

 arr[0]=1
         console.log(arr);//[1,1,2,empty,3]

5.删除数据元素

delete 数组名[index]删除数组中的元素值

delete arr[1];
         console.log(arr);//[1,empty,2,empty,3]

6.遍历数组

let arr1=[1,2,3,4,5,6]
        var sum=0;
        for (var i=0;i<arr1.length;i++){
            sum +=arr1[i]
             arr[o] 1    sum+1=0+1=1
             arr[1] 2    sum+2=1+=3
             .......
        }
 console.log(sum);

7.新增数组元素

push在数组后添加元素

let arr3 = [1,2,3,4] 
 arr3.push(5,6)
 console.log(arr3);//1,2,3,4,5

unshift在数组前添加元素

arr3.unshift(-2,-1,0)
 console.log(arr3);//[-2，-1，0，1，2，3，4，5，6]

04-二维数组

二维数组指的是数组元素的值是一个一维数组

 var arr =[80,100.75]
        var arr1 =[
            [80,100,75],
            [60,65,90],
            [12,34,45],
        ]

访问二维数组

  console.log(arr1[0]);
        console.log(arr1[0][0]);

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

第四章-函数

01-初识数组

函数定义：

函数用于封装完成一段特定功能的代码

相当于将一条或者多条语句组成的代码块包裹起来

用户在使用时只需要关心参数和返回值，就能完成特定的功能，二不用了解具体的实现

内置函数

console.log(isNaN("number"));
        console.log(parseInt('15.99'));

自定义函数：

提高代码的的复用性，降低程序维护的难度

函数格式

 function name(parseInt){
        }

function指这是一个函数语句

name是函数名

{}内放函数具体功能

封装函数

function demo (){
            console.log('我是一个函数');
        }

使用函数

function sum(a,b) {
            console.log(a+b);
        }
        sum(1,2)
        sum(1111.,5555)

        function total(price,num){
            document.write(price*num);
             var all= price*num
        console.log(all);

        }
        total(123,321)

函数返回值

函数返回值是指函数在调用获得的数据

在定义函数时，可以为函数指定一个返回值，函数的返回值可以是任意类型的数据

在js中使用return语句得到返回值并退出函数

{return 表达式}

function total01(price,num){
            all =price*num
            return all
        }
        console.log(total01(11,3));

声明变量存储下标

let index =-1
for(var i=0;i <arr.length; i++){
    // console.log(arr[i]);
    if(arr[i]=== 10){
        index = i;
        break
    }
}
return index
        }
console.log(getIndex(arr));//-1
var index= getIndex(arr1)

console.log(index);//4

获取函数调用时传递所有实参

function num (a,b){
    console.log(a,b);
}
num(1,2)//1,2
num(1,2,3,4,5)//1,2
num(1)//1 undefind

...扩展运算符

function num1 (...nums){
    console.log(nums);
}
num1(1,2,3,4,5)//1,2,3,4,5
num1(1,2,3)//1,2,3

arguments对象

在开发时，如果不确定形参的个数，可以不设置形参在函数体中直接通过arguments对象获取函数调用时传递的形参

function num2(){
    console.log(arguments);
    console.log(arguments.length);

}
num2 (1,2,3,4,5)

02-函数内外变量的作用

全局变量：

在函数体外声明的变量或者在函数体内省略var关键字声明的变量

var a=10
        function demo(){
            console.log(a);//a为全局变量，在函数体内可以被访问
        }
        demo()//a为全局变量，在函数体外也可以被访问

局部变量/函数变量：

在函数体内利用let关键字声明的变量

 function demo1(){
            let b =30//b是var关键字声明的变量，为局部变量
            console.log(b);//函数内部定义的局部变量b，可以在函数内部被访问


        c=20//c是省略var关键字声明的变量，为全局变量
        console.log(c);//全局变量c，可以在函数内部被访问
        }
        demo1()
        console.log(b);//b is notdefined  不可以在函数外访问全局变量b
        console.log(c);//可以在函数外访问全局变量c

块级变量：

在es6标准中，数据的let关键字声明的变量为块级变量

一个花括号{}为一个块级


        if(true){
            let sex ='男'// let声明的变量sex为块级变量console.log(sex);
        //块级变量sex可以在{}内部被访问
        }
//console.log(sex);// 块级变量sex不可以在{}内部被访问
for(let i =0 ; i<5; i++){
    console.log("循环内部"+i);
}
console.log("循环外部"+i);//i is not defined

【js三种作用域】

全局作用域:被全局变量所拥有:在{}外声明的变量

局部作用域:被局部变量所拥有:在函数内定义的变量

块级作用域:被块级变量所拥有:在分支语句或者循环大括号中定义的变量

可以访问到var声明的demo

但是demo目前没有赋值，为undefin

console.log(demo);//undefind

let声明的全局变量

不允许在变量声明前被访问

console.log(test);

可以访问到var声明的全局变量demo,

但是demo目前没有赋值，为undefinedconsole.log(demo); 为undefined

let声明的全局变量//不允许在变量初始化前被访问

03-函数的进阶

函数表达式是指将函数值赋值给变量的表达式

封装一个sum函数，在函数内可以求得变量num1和变量num2的和

function sum(num1,num2){
            // 在函数内部封装了一个打印语句
            // 调用此函数，就会执行打印语句
            
        var sum= num1 + num2;
        console.log(sum);
        }
    //    sum(1,2)//3
       fn(1,2)//3

function sum1 (num1,num2){
        // 在函数内部求得了一个值
        // 并将求得的和返回去
        // 让函数外部可以拿到
        return num1 +num2 
       }
       console.log(sum(1,2));

       var demo =1 
       console.log(demo);

       var fn1 =function sum1(num1,num2) {
//在函数内部求得了一个和
 //并将求得的和返回出去
 //让函数外面可以拿到
return num1+num2;

}
console.log(fn1(1,2));

 var demo = 1
 console.log(demo);

匿名函数

var fn3 =function sum(num1,num2){
        console.log(num1+num2);
        }
    
       fn3(1,2)
       var fn4 = function(num1,num2){
        return num1 + num2 
       }
       console.log(fn4(1,2));//4

箭头函数

删除function关键字在函数和函数体中间放上=>

var fn5 = (num1,nu2)=>{
        console.log(num1+num2);
    }
    fn5 (1,2)
// 当函数体中只有一句话时，可以省略大括号
    var fn6 = (num1,nu2)=>
        console.log(num1+num2);
    
    fn6 (1,2)

    // 当函数只有一句代码，并且函数的执行结果就是函数的返回值
    // 可以省略掉函数的大括号和return关键字
    var fn7=(num1,num2) => num1 + num2 
    console.log(fn7(1,2));

    // 当函数只有一个时，可以省略函数外部的小括号
    var fn8= num1 => num1 + num2 
    console.log(fn8(9));

04-回调函数

函数fn作为参数传递给cal，然后在cal中调用函数fn此时，fn是回调函数

function cal (num1,num2,fn){
        return fn(num1,num2)
        }
console.log( cal(10,20,function(a,b){
return a+b
}));//30
console.log( cal(10,20,function(a,b){
    return a*b
}));//200

05-定时器函数

setinterval()

interval间隔

时间间隔一到，代码就会执行一次

setinterval(function,time)

        // setInterval(function(){
        //     console.log("该上课了");
        // },500)

settimeout()

用来指某个函数或某段代码在多少毫秒执行一次

setTimeout(function(){
        console.log("要抢票了");
    },3000)

定时器函数是异步代码

setTimeout指定的代码，必须等同步代码执行完毕后执行

06-函数嵌套与作用域链

变量访问规则：就近原则

当在一个作用域中访问变量时，首先看当前作用域有没有声明

如果有则访问，没用则往上级作用域查找

知道达到顶端作用域没有时，程序报错

     var i =10;

        function fn1 (){
            var i = 20;

            function fn2 (){

                function fn3 (){
                    console.log(i);
                }
                fn3()
            }
            fn2()
        }
        fn1()

07-闭包函数

闭包{close} ：闭包是一种代码形式，内部函数访问外部函数的局部变量

举例：js函数A中有一个函数B，函数B访问了函数A里面定义的局部变量，此时就产生了闭包

变量所在的函数就是闭包函数，在这里，A就是闭包函数

1.外部函数

function outer() {

            //外部函数定义的局部变量
            let n = 10

2.内部函数

function inner() {

                //内部函数要访问外部函数定义的局部变量
                console.log(n);
            }
            inner()
        }
        outer()

闭包的作用：解决变量污染问题，让变量被函数保护起来

let count = 0
        setInterval(function(){
            console.log(count++);
        },1000)

        // 在这段代码中，count是一个很常用的变量名
        // 为了避免和其他位置的代码起冲突，可以使用一个函数将上面的代码包裹起来

内部函数setinterval访问外部函数fn定义的局部变量count

function fn(){
            let count = 0
            function add(){
                console.log(count++);
            }
            setInterval(add,count)
        }

        // 内部函数add访问外部

08-递归函数

递归函数是一个函数间接或直接的调用自身

以下是一下例题：

求斐波那契数列(循环写法)

function getvalue(n){
    var arr = [1,1]
    for(var i=2;i<n;i++){
        arr[i] =arr[i-1] +arr[i-2]
    }
    console.log(arr);
    return arr[arr.length-1]
}
console.log(getvalue(10));

求斐波那契数列（递归写法）

function get1(){

}
function getValuel(n){
//设置终点
if(n===1 || n===2){
    return 1
}
// 未到终点
return getValue1(n-1)+ getValue1(n-2)
}
console.log(getValue1(10));

第五章-数值迭代方法

1.map数组遍历器

map利用某种规则映射得到一个新的数组

map()中需要传入一个回调函数作为参数

在回调函数中定义需要map数组遍历方法做什么事情

arr.map((元素，下标)=>{return 新元素})

 let res1 = arr.map (function(value,index) {
            // 回调函数中一定要有return
            return value +1
        })

        let res2 = arr.map (function(value,index) {
            // 回调函数中一定要有return
            return value +1
        })

2.filtr数组过滤器

filtr用于筛选数组中满足条件的元素，返回筛选后的新数

arr.filtr(value,index)=>(筛选条件)

let res2 = arr.filter((value,index)=>{
            return value>10
        })
        console.log(res2);

        
        let arr1 = [12,13,14,15,67]
        let res3 = arr1 .filter((value,index) =>{
            return  value%2==0
        })
        console.log(res3);

3-foreach数组遍历

forEach也是用于遍历数组

数组 forEach(function(value,index,arr){算法})

et arr = [1,2,3,4,5]
        let sum=0
        for (i=0;i<arr.length;i++){
            sum += arr[i]
        }
        console.log(sum);

        // let sum1=0
// arr.forEach(function(value,index){
//     sum1+=value
 // })
 // console.log(sum1);
 arr.forEach(value=>sum1+=value)
 console.log(sum1);

回调函数的执行次数=原数组长度 forEach没有返回值不需要return

4.some

some用于判断数组元素是否符合条件

let arr = [-1, 1, 2, 3, 4, 5]
        //判断数组中有没有负数，有则返回true
        //假设这个数组中没有负数 返回false
        // let flag=false
        // for(let i=0;i<arr.length;i++){
        //     console.log(arr[i]);
        //     if(arr[i]<0){
        //         flag=true;
        //         break
        //     }
        // }
        // console.log(flag);

        // //通过forEach方法遍历并判断
        // arr.forEach(value=>{
        //    if(value<0){
        //         flag=true
        //     }
        // })
        // console.log(flag);

        let res = arr.some((item, index) => {
            return item < 0
        })
        console.log(res);

回调函数的执行次数!==原数组长度

some函数返回一个布尔值

只要有一个元素符合函数体的判断条件，则返回true

如果没有一个元素复核后函数体的判断条件则返回false

5-every

some和every遍历函数后返回的都是一个布尔类型的值

如果有元素满足条件，some的值为true 当全部元素满足条件，every的值为true

例题：

需求：判断数组是否全部为正数，全部为正数为true，反之false

let a=[1,2,3,4]
    // for(var b=0;b >a.length;b++){
    //     var res=true
    //     if(arr[i]<0){
    //         res=false
    //         break
    //     }
    // }

    let res = a.every(function (item) {
        return item>0
    })
    console.log(res);
    let res1= arr.every((item)=>item >0)
    console.log(res1);

6-findindex

findindex用于返回第一个符合元素的数组

例题：

为 var arr = [4,6,8,-2,-6]

找到一个非正数的下标并返回

var arr = [4,6,8,-2,-6]
for (a=0;a<arr.length;a++){
        //     var index =0
        //     if(arr[a]<0){
        //         index =a
        //         break
        //     }
        // }
        // console.log(index);
    //     let res = a.findidex(function (item) {
    //     return item>0
    // })

    var res = arr.findindex(function (item) {
        return item<0
    })
    console.log(res);
    // let res1= arr.findIndex((item)=>item <0)
    // console.log(res1);

7-reduce

例题： var arr=[97,45,32,95] 求数组各项平均值

 
var arr=[97,45,32,95]
// var sum = 0
        // for(var i= 0;i<arr.length;i++){
        //     sum +=arr[i]
        //     var res = sum/arr.length
        // }
        // console.log(res);
        var sum =arr.reduce((sum,value)=>{
            return sum += value
        })
        var avg = sum/arr.length
        console.log(avg);
        console.log(sum);

第六章-对象

01-介绍对象

对象是什么：对象是一种复杂数据类型

复杂数据类型的内容存储在堆内存中，地址存储在占内存中

对象的作用：以键值的形式存储多个数据

// 需求：存储一个人的信息（姓名，年龄，性别）
        let name = "站三"
        let agr = 35
        let sex = "男"
        // 好处：阅读性高。弊端：冗余
        
        // 数组
        let peopel =["站三",10,"男"]
        // 好处：一个变量存储多个数据 弊端：阅读性不高

对象

let obj={
            // 键：值
            name :"张三",
            age :10,
            sex :"男",
            gfs:["小花","小美","小爱"],
            sayHi:function(){
console.log("11111");
            }
        }
console.log(obj);
            
            
        console.log(obj);//{name:'张三'，age:30,sex:'男'}
        console.log(obj.name);//张三
        console.log(obj.age);//30
        console.log(obj.sex);//男
        console.log(obj.gfs);//["小花”,"小美”,"小爱”]
        console.log(obj.sayHi);
        console.log(obj.sayHi());

对象新增

obj.bf="李四"
        console.log(obj);

对象修改

obj.bf="王五"
        console.log(obj);

对于对象的属性，如果有这个属性，是修改属性值;如果没有这个属性，是新增。

对象删除

 delete obj.age
          console.log(obj);

对象遍历

// 遍历数组:for(let i=0; i<arr.length; i++){}
          // 遍历对象:for-in循环:for(let key in 对象名){对象名[key]}

            let score = {
                math:99,
                history:80,
                geology: 70 ,
                ehglish:60
            }

            for(let key in score){
                console.log(key);// 打印属性名
                console.log(score[key]);// 打印属性值
            }

            console.log(Math.ranfom(100*Math.random()));

02-math对象

内置对象：由js作者提前编写好的对象，里面存储了一些属性方法，直接就可以用

Math数学对象，Data日期对象

以下是案例：

计算一个半径为5的圆周长

const pi = 3.14
        const r = 5
        const c = 2 * pi * r
        console.log(c);

圆规率：Math.PI

console.log(Math.PI);
        const ch = 2 * Math.PI
        console.log(ch);

绝对值：Math.abs()

console.log(Math.abs(-3.4));//3.4

最大最小值Math.max()/Math.min()

console.log(Math.max(1, 2, 5, 7, 71, 8, 89, 100));//100
        console.log(Math.min(1, 2, 5, 7, 71, 8, 89, 100));//1

幂运算：Math.pow(x,y)求x的y次方

console.log(Math.pow(2, 10));//1024

四舍五入；Math.round()

console.log(Math.round(8.7));//9
        console.log(Math.round(4.2));//4
        console.log(Math.round(-8.7));//-9
        console.log(Math.round(-4.2));//-4

Math.cell天花板，向上取整

console.log(Math.floor(2.3));//3
        console.log(Math.floor(2.9));//3

Math.floor 地板向下取整

console.log(Math.floor(2.3));//2

随机数

console.log(Math.floor(Math.random() * 100));

math对象案例


    <!-- 需求：点击按钮抽奖
    抽到数字1，是一等奖
    2，3，是二等奖
    4-7，是三等奖
    8-10，是谢谢惠顾 -->
    <input type="button" value="抽奖" onclick="btn()" id="btn">
    <script>
        // 当点击btn按钮时，会触发function函数
        var btn = function () {
            var rand = Math.random()
            // 设置抽奖范围/人数
            var total = 100;
            // 设置抽奖等级
            var level = 0;
            // 设置抽奖结果
            var bouns = 0;
 
            // 抽奖过程
            // 将number转化为一个0-100的整数
            number = Math.round(Math.random() * 100)
 
            // 抽奖结果
            if (number == 1) {
                level = 1
            } else if (number <= 3 || number >= 2) {
                level = 2
            } else if (number <= 7 || number >= 4) {
                level = 3
            }
 
            if (level <= 7) {
                alert(" 恭喜你获得了" + level + "等奖")
            } else { alert("谢谢惠顾") }
 
        }

03-date对象

获取内置Date对象

 var date = new Date();

设置年份

date.setFullYear(2005)
date.setMonth(4)
date.setDate(9)

获取年份

var year = date.getFullYear()
var month = date.getMonth()
var day = date.getDate()

打印年份

console.log(year);
console.log(month);
 console.log(day);

 // 参数time是下一次生日的时间
 function count(time){
//得到当前时间时间戳
var nowTime = new Date()
//得到过生日时的时间戳
var overTime = new Date(time)
// 将即将过生日的时间剪去现在的时间，得到一个生日倒计时
//÷1000 是将亳秒数转化为秒数
var times =(overTime-nowTime)/1000
console.log(times);
//天=24小数=60分钟=60秒
var day =parseInt(times/60/60/24)// 天数
console.log(day);//70
// 小时
//%用于取余数，就是计算完之间70天之后，剩下的小时数
var hours =parseInt(times/60/60%24)
console.log(hours);//14
// 分钟
var mins=parseInt(times/60%60)
console.log(mins);//22
// 秒数
var sec=parseInt(times% 60)
console.log(sec);//1
 }
 prompt(count())
 confirm(day)

04-array对象

***这节没咋听懂***

var course = ["web", "java"]

        // push()在数组末尾添加一个元素
        course.push("JavaScript")
        console.log(course);['web', 'java', 'JavaScript']
        //unshift()在数组开头添加一个元素
        course.unshift("计算机基础")
        console.log(course);//['计算机基础'，'web'，'java'，'JavaScript']

        // pop() 删除数组中最后一个元素
        course.pop()
        console.log(course);//['计算机基础'，'web'，'java']

        // shift()删除数组第一个元素
        course.shift()
        console.log(course);//['web','java']

        // splice (start.deletecount)
        var arr = [1,2,3,4,5,6,7]
        arr.splice(3,2)
        console.log(arr);

        // splice(start.deletecount,item1,item2,item3)
        arr.splice(4,0,455,888)
        console.log(arr);

        var arr1 = [1,2,3,4,5,6,7]
        arr1.reverse()
        console.log(arr1);
        
        // sort()

        // 升序排序

        var arr2 = [1,5,7,3,7,9,1]
        arr2.sort(function(a,b){
            return a-b
        })
        console.log(arr2);


        // 降序排序
        var arr2 = [1,5,7,3,7,9,1]
        arr2.sort(function(a,b){
            return b-a
        })
        console.log(arr2);

        // 获取数组元素索引的下标
        // indexof(element):返回指定元素在数组中第一次出现的索引，不存在则返回-1
        // lastindexof(element):返回指定元素在数组中最后一次出现的索引，不存在则返回-1
        var color = ["green","pink","blue","red","yellow"]
        console.log(color.indexOf("red"));
        console.log(color.indexOf("blue"));
        console.log(color.lastIndexOf("pink"));

        // 将数组转化的为字符串
        // tostring() :将数组转化为字符串，用逗号分隔数组中的元素
    //    join():将数组中的所有元素链接成一个字符串，默认用逗号分隔，可指定分隔符
    
    console.log(color);//"green""pink""blue""red" "yellow"
    console.log(color.toString());//green,pink,blue,red,yellow
    console.log(color.join(""));//greenpinkblueredyellow
    console.log(color.join("-"));//green-pink-blue-red-yellow
    console.log(color.join("/"));//green/pink/blue/red/yellow

    // 数组类型检测
    var obj = {
        name:'张三'
    }
    console.log(Array.isArray(arr));//ture
    console.log(Array.isArray(obj));//false

05-string对象

创建字符串对象

var str = new String ("apple")
        console.log(str);

访问字符串长度

console.log(str.length);

数据类型检查

console.log(typeof(str));
        var str1 = "banana"
        console.log(typeof(str1));

根据字符串返回索引(下标)

index0f() 返回在字符串中首次出现的索引，没有则返回-1.

lastIndex0f()返回在字符串中最后一次出现的索引，没有则返回-1.

 var str = "helloworld"
             console.log(str.index0f("o"));//4
             console.log(str.lastIndex0f("o"));//6

根据索引返回字符串// chatAt()

 console.log(str.charAt(7));//"r"

字符串截取 slice(start)

console.log(str.slice(5));//"word"
             //slice(start,end) //从start的下标截取到end的下标
             console.log(str.slice(1,4));//"ell"
             console.log(str);//helloworld //截取不会改变原数组

字符串连接concat()

var str1 ="hello"
             var str2 =",world"
             console.log( str1.concat(str2));//hello,world

大小写转换

toUppercase()转化为大写

tolowerCase()转化为小写

console.log(str1.toUpperCase());//HELLO
             console.log("HELL0".toLowercase()); //hello

替换 replace(str1,str2)将str2替换str1

onsole.log(str);//helloworld
             console.log(str.replace("world","js"));//helloJS

字符串分隔(将字符串转化为数组) split(分隔符)

console.log(str.split("")); //['h','e','','','o','w','o','r','l','d']
             console.log(str.split());//['helloworld']
             console.log(str.split("o"));//['hell','w','rld']