JS基础教学02

第一章  数组

一、数组的概念

数组是存储一系列值的集合，它是由零个，一个或多个元素组成，各元素之间使用“,”分隔，数组中的每个元素由“索引”和“值”构成，其中，“索引”也可称为“下标”，以数字表示，默认情况下从0开始依次递增，用于识别元素；“值”为元素内容，可以是任意类型的数据，例如数字、字符串、数组、对象等。

二、数组的基本操作

      1、 创建数组

         1.以数组字面量创建数组

        var array=[1,2,3,4,5]

        console.log(array);

        // 2.以new Array()方式创建数组

        var array1=new Array(1,2,3,4,5)

        console.log(array1);

        2、数组构成

        // 数组的值可以是任意类型数据的值

        var array2=['String',123,null,undefined,NaN,array]

        console.log(array2);

        3、 数组长度

        // 数组名.length获取数组长度

        console.log(array2.length);//5

        console.log(array.length);//5

        4、 访问数组

        // "数组索引"也称"数组下标"，以数字表示，默认重0开始以此递增

        console.log(array[3]);//4

        console.log(array[4]);//5

        5、 更改数组

        通过下标更改

        var array4=[1,2,3,4,5]

        array4[0]=0;

        console.log(array4);//[0,2,3,4,5]

        6、 新增数组

        通过下标新增

        array4[7]=10

        console.log(array4);//[0,2,3,4,5,empty,empty,10]

        console.log(array4.length);//8

        7、 删除数组

        利用delete关键字+下标删除

        delete array4[7]

        console.log(array4);//[0,2,3,4,5,empty,empty,empty]

        console.log(array4.length);

        8、 修改数组长度

        array4.length=5

        console.log(array4);//[0,2,3,4,5]

        array.length=20

        console.log(array4);//[0,2,3,4,5,empty x 15]

        9、 数组方法

        // 在数组前新增元素.unshift

        var arr1=[1,2,3]

        arr1.unshift(1,2,3)

        console.log(arr1);

        // 在数组后新增元素.push

        arr1.push(7,8,9)

        console.log(arr1);

三 、遍历数组

// for(初始化变量;条件表达式;操作表达式){循环体}

例：数组求和

  var sum = 0;
  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  for (var a = 0; a < arr.length; a++) {
      console.log(arr[a]);
      sum += arr[a]
   }

  console.log(sum);//55

四 、二维数组

1、二维数组的概念

      二维数组：二维数组元素的值为一维数组

        var arr1=[1,2,3,4,5]

         var arr2=[

            [1,2,3],

            [4,5,6],

            [7,8,9]

        ]

        console.log(arr2[0]);//1,2,3

        console.log(arr2[1][1]);//5

2、二维数组的遍历

      需求：将数组arr2中的每一个元素一一打印出来

         console.log(arr2);

         for(var i=0;i<arr2.length;i++){

            for(var a=0;a<arr2[i].length;a++){

                console.log(arr2[i][a]);

            }

        }

        3、二维数组倒置

        var arr3 = [

           [1,2,3,4,5],

           [6,7,8,9,10],

           [11,12,13,14,15]

        ]

        var res=[]

        //渲染得到新数组，首先知道新数组有多少行

       //新数组的行数由原数组的列数决定

        for(var i=0;i<arr3[0].length;i++){

            //通过遍历原数组的行数，首先得到新数组的列数

         res[i]=[]

            //遍历原数组的列，得到新数组

            for(var j=0;j<arr3.length;j++){

                console.log(arr3[j][i]);

                res[i][j]=arr3[j][i]

            }

        }

        console.log(res);

 

        4、二维数组求和

        var score =[

            [98,67,90,88],

            [89,96,78,86],

            [78,87,88,90]

        ]

        var sum=0;

        for(var i=0;i<score.length;i++){

            console.log(i);//0,1,2

            sum=0;

            for(var j=0;j<score[a].length;j++){

                sum+=score[i][j];

            }

        }

         console.log("第"+(i+1)+"总和为"+sum);

五、数组迭代方法

1、map数组遍历器 

        map 使用某种规则映射得到一个数组

        遍历数组中的每个元素并对每个元素进行相应的处理，并返回新的数组

         数组.map(元素,下标) => {return 映射规则}

         var arr =[12,13,14,15]

        var arr2=arr.map(function(value,index){

            return value + 1

        })

        console.log(arr2);

2、filter数组过滤器

filter:用于筛选数组中满足条件的新数组并返回

 let arr = [-10,0,10,-20,20,30]

 let arr1 = arr.filter(v => v>=10)

 console.log(arr1);

3、forEach数组遍历器

forEach也是用于遍历数组

forEach没有返回值，不用写return返回值

let arr = [1,2,3,4,5,6,7]

let sum = 0

        arr.forEach(function(value){

            sum += value

        })

  console.log(sum);

4、some

var year=[2001,2002,2003,2004,2005]

 //判断这组数组中是否有闰年，有则为true ，无则为false

  var res2=year.some(val=>val % 400 == 0&& val%100!==0 || val%4==0)

  console.log(res2); //true

5、every

 every判断数组中是否有元素满足

 返回一个布尔类型的值

  一旦有元素符合条件，则返回true

//判断这个数组中是否有闰年，全部为闰年为true，否则为false

var year=[2001,2002,2003,2004,2005]

  var res2=year.every(val=>val % 400 == 0&& val%100!==0 || val%4==0)

   console.log(res2); //false

6、findindex

   findIndex同于返回第一个符合条件的元素下标

    需要return返回

        var arr = [-3,-2,-1,0,1,2,3]

        //需求：找到数组中第一个整数的下标

        var res=arr.findIndex(val=>val>0)

        console.log(res);//4

7、reduce 

    arr.reduce(function(sum,value)=>{sum+value});

    var arr = [10,20,30,40,50]

   求数组平均值

        var sum = arr.reduce((acc,cur)=>acc+cur,0)

        var avg = sum/arr.length

        console.log(avg);

第二章  函数

一 、初始函数

     1、 函数定义

       函数用于封装完成一段特定功能的代码相当于一条或多条语句组成的代码块封装起来，用户在使用时只需关心参数和返回值，就能完成特定功能

       2、内置函数

  例：

        isNaN是判断内容是否为非数字，非数字时为true，数字类型为false

console.log(isNaN('number'));//true

         Number()可以将字符串类型转化为数字类型       

console.log(Number('15.99'));//15.99

console.log(Number('15.abc'));//NaN

         parseInt()将小数点前的内容转化为数字类型       

 console.log(parseInt('15.99'));//15

 console.log(parseInt('15.abc'));//15

         此外还有自定义函数提高代码的复用性，降低程序维护的难度

         3、函数格式

        // function name(params){

        // }

        // function

        //name是函数名

        //params是函数参数

        //{}内放函数的具体功能

        4、无参函数

（）内没有参数

例：

        function demo(){

            console.log('我是一个函数');

        }

        5、有参函数

（）内有参数

例：

        function sum(a,b){

            console.log(a+b);

            return c=a+b

        }

        sum(1,2)

        sum(888,999)

      调用函数

        demo()

        demo()

        6、 函数返回值

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

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

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

二 、进阶函数

     1、函数名表达式

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

 let fun =function sum(num1,num2){

            console.log(num1+num2); //3

        }

        // 定义了函数表达式后，不能通过函数名调用函数sum(1,2)

        // 需要通过变量名调用函数fun(1,2) //3

        2、匿名函数

        //当使用函数表达式时，可以删除函数的名字       

let fun1 = function(num1,mun2){

            console.log(num1+mun2); //3

        }

        fun1(1,2)

        3、箭头函数

         删除function关键字在参数体()和函数体{}之间放上 =>     

   let fun3 = (num1,num2) =>{

            return num1+num2

        }

        console.log(fun2(1,2));

        当函数体只有一句话时，可以省略return返回值和大括号{}       

let fun4 = (num1,num2) => num1+num2

        console.log(fun2(1,2));

        当函数只有一个参数时，可以省略小括号()       

 let demo =a => a+a

 console.log(demo(1));

三 、回调函数

回调函数，就是在a，传入一个函数b作为参数，参数函数b就是回调函数

例：

var num = cal(10,20,function(num1,num2){

            return num1+num2

        })
console.log(num);//30

console.log(cal(30,40,function(num1,num2){return num1+num2})); //70

四 、函数作用域

    全局作用域：全局变量拥有全局作用域

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

    局部作用域：局部变量或函数变量拥有局部作用域

    局部变量：在函数体内用var关键字声明的变量

    块级作用域：被块级变量所拥有，在分支语句或循环大括号中定义的变量一般一个花括号{}为一                           个代码块

     块级变量：let关键字声明的变量

例：

var i = 10 ;   //i是全局变量，全局变量是可以在函数内外都可被访问的

var n = 30 ;

function fn1(){

console.log(i); //函数内可以访问全局年变量

 let n = 20    //n被声明在函数内部，属于函数变量

console.log(n); //n是函数变量，在函数作用域里可以拿到n的值
 }
// 函数外部拿不到函数内部声明的变量

   fn1()

console.log(i); //函数外也可以访问到全局变量i

五 、函数嵌套与作用域

        变量访问规则:就近原则

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

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

        直到达到顶端作用域没有时，程序报错。

let demo = 111
 
function fun1(){

console.log(demo);//111

function fun2() {

   let demo = 222

console.log(demo);//222

            }
  fun2()
}
fun1()

六 、定时器函数

// setTimeout(() => {}, timeout);         用来设置某个函数在多少秒后执行

setTimeout(() => {

console.log("要抢票啦");

}, 3000);

setInterval(() => {}, interval);              用来设置某个函数在多少秒后反复执行

 setInterval(() => {

 console.log("要抢票啦"); 

}, 3000);

 注：定时器函数时异步代码，需要等同步代码执行完执行。

七 、递归函数

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

function fun() {

  console.log();

       fun()

     }

例：

 // 需求：设置一个getSum函数
 //调用getSum函数，传入一个参数n
 //返回一个sum值，sum=n+(n-1)+(n-2)+...+1
 function getSum2(n){
            if(n==1){
                return 1
            }
            return n+getSum2(n-1)
        }
        console.log(getSum2(5));

八 、闭包函数

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

        举例：js函数outer中有一个函数inner

        函数inner访问函数outer定义的局部变量demo，此时产生了闭包

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

function outer(){

       let demo = 123

       function inner(){

       console.log(demo);

       }

     }

     闭包的作用:将变量以函数的形式保护起来，解决变量污染问题。

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

     闭包函数的作用：将变异函数的形式保护起来，解决变量污染问题

第三章  对象

一 、介绍对象

对象：(Object)是一种复杂数据类型

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

 对象形式；以赋值对的形式储存多个数据

 1、使用数据类型储存数据

        let name = "张三"

        let age = 18

        let sex = "man"

        // 弊端；冗余 好处:阅读性高

 2、数组

        let people = ["张三",18,"man"]

        //弊端；阅读性不高

  3、对象

        let obj = {

            name : "张三" ,

            sex : "man" ,

            age : 18 ,

            gfs : ["小美","小丽","小爱"]

        }

        4、对象查询

        console.log(obj.name);

        console.log(obj.age);

        console.log(obj.gfs);

       

        5、对象新增

        obj.bf = "李四"

        console.log(obj);

         6、对象修改

        //如果对象原有属性名是修改，没有则是新增

        obj.bf = "王小美"

        7、对象删除

        delete obj.age

        console.log(obj);

        8、对象遍历

       // for(let key in 对象名){对象名[key]}

        for(let key in obj){

            console.log(key)//打印属性名

            console.log(obj[key]);// 打印属性值

        };

二 、Math对象

        1、圆周率：Math.PI

        console.log(c=2*r*Math.PI);

        2、绝对值：Math.abs()

        console.log(Math.abs(-4));

        3、求最大/小：Math.max()/Math.min()

        console.log(Math.max(1,2,33,43,5,6,34));

        

        4、四舍五入：Math.round()

        console.log(Math.round(3.3));

        console.log(Math.round(-3.6));

       5、向上取整：Math.ceil()

        console.log(Math.ceil(1.4));//2

        console.log(Math.ceil(-1.4));//-1

        6、向下取整：Math.floor()

        console.log(Math.floor(1.4));//1

        console.log(Math.floor(-1.4));//-2

        7、生成一个0-1之间的随机小数：Math.random()

        console.log(Math.random());

三 、Date对象

        1、时间戳：1970年1月1日0时到现在的毫秒数

        console.log(new Date().getTime());

        2、获取年份

        console.log(new Date().getFullYear());//2024

        3、获取月份

        console.log(new Date().getMonth());//1-11

        4、获取日期

        console.log(new Date().getDate());

        5、获取星期

        console.log(new Date().getDay());//1-7

        6、获取小时

        console.log(new Date().getHours());

        7、获取分钟

        console.log(new Date().getMinutes());

四 、Array对象

        var course =['web','java'];

1、在数据末尾添加元素

         方法：push()

        course.push('js');

        console.log(course);

 2、 在数组前添加元素

         方法：unshift(element)

        course.unshift('html');

        console.log(course);

 3、删除数组中末尾元素

         方法：pop()

        course.pop();

        console.log(course);

4、删除数组第一个元素

         方法：shift()

        course.shift();

        console.log(course);//web ,java

5、删除指定元素

        方法：splice(startIndex,deleteCount) splice(起始下标，删除数目)

         var arr = [1,2,3,4,5,6,7]

        console.log(arr);

        arr.splice(1,5);

        console.log(arr);//1,7

 6、添加指定元素

        方法： splice(startIndex,deleteCount,addItem1,addItem2,addItem3)

        arr.splice(1,0,3,4,5,6,7)

        console.log(arr);//1,7,3,4,5,6,7

7、  颠倒数中的元素

        方法：reverse()

        arr.reverse()

        console.log(arr);//7,6,5,4,3,7,1

8、升序排序

        var demo = [23,12,78,13,24,35,45]

        demo.sort(function(a,b){

            return a-b

        })

        console.log(demo);

9、降序排序

        demo.sort(function(a,b){

            return b-a

        })

        console.log(demo);

10、查找元素

          方法：IndexOf(element) 返回指定元素在数组中最后一次出现的下标，没有返回-1

          var  arr = [1,2,3,4,5,6,7,8]

           console.log(arr.indexOf(5));//4

           console.log(arr.indexOf(100));//-1

  11、将数组转化为字符串

        // toString() 用逗号分隔数组中每个元素，不会改变原数组

        //join() 将数组中所有元素连成一个字符串，默认逗号分开

五 、String对象

       var str = "helloworld";

  1、访问字符串长度

        console.log(str.length);//10

   2、根据字符串返回下标

        // indexOf() 返回元素在字符串第一次出现的下标，没有返回-1

        //lastIndexOf() 返回元素在字符串中最后出现一次的下标，没有则是-1

        console.log(str.indexOf('o'));//4

        console.log(str.lastIndexOf('ix'));//-1

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

        chatAt(number)

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

    4、字符串截取

        slice(startIndex,EndIndex)  从第一个参数(下标)截取到end的下标

        console.log(str.slice(4,7));//owo

       

   5、字符串的链接：concat()

        var str1 = 'hello';

        var str2 = 'world';

        console.log(str1.concat(str2));       

    6、大小写转化

         //toUpperCase()  小写转大写

        console.log(str1.toUpperCase());//HELLO

     7、小写转化

        //tolowerCase()   大写转小写

        console.log(str1.toLowerCase());//hello

     8、 字符串的替换

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

        console.log(str.replace("world","JS"));//helloJS

     9、 字符串的分隔(将字符串转换成数组)

        // split(分隔符)

        console.log(str.split());//['helloworld']

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

第四章   DOM（部分）

一、DOM介绍 

DOM(Document Object Model , 文本对象模型)是用于处理HTML文档和XML文档的编程接口。

利用DOM可以完成元素获取以及元素内容、属性和样式的操作。

二、获取元素 

        根据id属性获取          document.getElementById('id属性值')

     根据标签名获取元素         documwent.getElementsByTagName('标签名')

  根据name属性获取元素       document.getElementsByName('name属性值')

        根据类名获取元素        document.getEkementsClassName('类名')

根据CSS选择器获取元素     document.querySelector(ALL)('CSS选择器')

获取基本结构元素的属性

document.documentElement	获取文档的html元素
document.body	获取文档的body元素
document.forms	获取文档中包含所有form元素的集合
document.images	获取文档中包含所有image元素的集合

三、事件基础

1、事件概述

事件是指可以被JavaScript侦测到的行为，不同行为对应不同事件，并且对每个事件都对应着与其相关的事件驱动程序。

事件有三要素：事件源、事件类型、事件驱动程序

对于一个交互效果的实现，首先需要确定事件源，事件源确定后就可以获取这个元素；然后需要确定事件类型，为获取的元素注册该类型的事件；最后分析事件触发后，实现相应网页交互效果的逻辑，编写实现该逻辑的事件驱动程序

2、注册事件

事件属性的命名方式为”on事件类型“

例：click事件类型对应的事件属性被命名为onclick
//元素对象.事件属性 = 事件处理函数
elememt.onclick = function(){}

四、元素内容操作

1、innerHTML

在项目开发的过程中，可能需要操作元素的HTML内容，此时可以使用innerHTML。innerHTML属性用于设置或获取元素开始和结束标签之间的HTML内容，返回结果包含HTML标签，并保留空格和换行

element.innerHTML = 'HTML内容';//设置内容

console.log(element.innerHTML);

2、innerText

当操作的元素内容只含文本时，使用innerHTML就不合适了。innerText属性用于设置或获取元素的文本内容，获取是会去除HTML标签和多余的空格、换行，在设置时会进行特殊字符转义。

element.innerText = '文本内容';//设置内容

console.log(element.innerText)

3、textContent

操作元素文本内容的方法，还可以使用textContent属性。textContent属性用于设置或获取元素中的文本内容，保留空格和换行。

element.textContent = '文本内容';

console.log(element..textContent);

五、元素样式操作

1、通过style属性操作样式

在开发中，我们可能需要实现页面中元素样式的交互效果，对于这种交互效果我们可以通过操作元素对象的style属性实现

element.style.样式属性名 = '样式属性值'

 2、通过className属性操作样式

操作className属性时，需要将元素的样式写在CSS中，利用CSS类选择器为元素设置样式，然后通过JavaScript操作className属性更改元素的类名，从而更该元素的样式。

element.className = '类名';

console.log(element.className);

3、通过classList属性操作样式

在开发过程中，对于元素中的操作，我们还可以使用元素对象的classList属性。在使用时要注意IE浏览器的兼容问题，classList属性从IE10开始才开始被支持，且IE10中classList属性不能对SVG原素进行操作。

classList属性的使用方式很灵活，可以对元素中的类名进行获取、添加、移除、判断等操作。

element.classList

classList对象常用的属性和方法

length	获取类名的数量
add(class1，class2，...)	为元素添加一个或多个类名
remove(class1,class2,...)	移除元素的一个或多个类名
contains(class)	判断元素中指定的类名是否存在，返回布尔值
item(index)	获取元素中索引对应的类名，索引从0开始

六、元素属性操作

1、操作property属性

 property并不是一个属性名，而是一个统称，他是指元素在DOM中作为对象拥有的属性，即内置属性。通常情况下，每个元素都有内置属性。

例：

操作img元素属性

 <div class="box">
        <img src="images/1.jpg" alt="" id="img">
        <button>选择</button>
 </div>
 <script>
var btn = document.querySelector('button');
var img = document.querySelector('img');
btn.onclick = function(){
img.src = 'images/selected.jpd'
};
 </script>

2、操作attribute属性

attribute属性也是一个统称，它是指HTML标签的属性，在程序中对attribute属性的操作会直接反应到HTML标签中。attribute属性不仅可以操作元素的内置属性，还可以操作元素自定义属性。

设置属性：

element.setAttribute('属性','值')；

获取属性值：

element.getAttribute('属性')；

移除属性：

element.removeAttribute('属性')；

七、操作data-*属性

HTML5提供了一种新的自定义属性的方式：通过data-*设置自定义属性。

1、设置data-*属性

<div data-index="2"></div>

"data-"是属性前缀，index时开发者自定义的属性名

2、获取data-*属性值

获取“data-*”属性值的方式有两种：第一种方式时通过“element.属性名”获取，也可以写成“element.dataset['属性名']“，如果属性名包含连字符”-“，需要采用驼峰命名法；第二种法式是通过getAttribute()方法获取。

例：

<body>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
//第一种方法
console.log(div.dataset.index);        //2
console.log(div.dataset['index']);     //2
console.log(div.dataset.listName);     //andy
console.log(div.dataset.['listName']); //andy
第二种方法
console.log(div.getAttribute('data-index'));     //2
console.log(div.getAttribute('data-list-name')); //andy
</script>
</body>