一、循环:

1.语句:

1.1 for循环: for循环一般用于遍历数组(明确次数)

for(初始条件;判断条件;参数改变) {
	循环体;
 }

1.2 for-in循环:用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作)–了解

for(变量 in 对象){
	循环体;
}

1.3 while循环:

如果想要指定次数,应设置参数的改变:i++

while(判断条件) {
	循环体;
}

1.4 do-while循环:

do{
	循环体;
}while(判断条件);

1.5 代码实现:

<script>
	// 1. for-in循环:
	var arr = ["张三", "李斯", "王五", "赵六"]
	for(x in arr){
	    console.log("for-in循环: " + arr[x])
	}
	
	// 2.for循环:
	for(var i = 0; i<5; i++){
	    console.log("for循环: " + i)
	}
	
	// 3.while循环
	var i = 1;
	while (i < 3){
	    console.log("while循环: " + i)
	    i++;
	}
	
	// 4.do-while循环:
	var i = 1
	do{
	    console.log("do-while循环:" + i)
	    i++;
	}while(i < 3);               
</script>

运行结果:

二、数组及操作方法:

 数组就是一组数据的集合, js中数组里边的数据可以是不同类型的.

1.定义数组的方法:

• js中所有对象(除了函数)都是object类型;(所以说js是基于对象的语言,即基于object语言).
• js中的数组可以存放不同数据类型的数据,但是一般是存放同一数据类型的数据.
• js中所有对象(除了函数)，都是object类型

var arr1 = [];  // 空数组
var arr2 = ["鸣人","佐助", "小樱"]; // 字符串数组

var arr3 = new Array("a", "b", "c");
var arr4 = new Array()

2.数组的长度(重要的属性):

数组名.length // length是数组的一个属性

通过下标获取值和修改值

3. 数组的遍历:

var arr5 = ["aaa", "bbb", "ccc"];
for(var i = 0; i < arr5.length, i++) {
    console.log(arr5[i])
}

4.代码实现:

<script>
    // 1.数组的定义
    var arr = ["鸣人", "佐助", "小樱"];
    console.log(arr, typeof(arr))

    // 2. 数组的长度
    var len = arr.length
    console.log("数组的长度是:" + len)

    // 3.索引值
    // 获取数据
    console.log(arr[0])
    console.log(arr[2])
    console.log(arr[3]);    //索引越界
    
    // 设置值
    arr[2] = "卡卡西"
    console.log(arr[2])

    // 4.遍历数组
    for(var i = 0; i < arr.length; i++){
        console.log(arr[i])
    }
</script>

运行结果:

三、数组的API:(增删改查/反转排序/合成字符串)

1.增删改查:

var arr2 = ["鸣人","佐助", "小樱"];	//定义一各目标数组

1.1 增:

Array.push(): 在数组的末尾添加数据

arr2.push("卡卡西");

1.2 删:

Array.pop(): 删除末尾的数据, 有返回值.返回被删除的元素

var ele = arr2.pop()

1.3 改: 任意位置的添加/删除/替换…(重要):

Array.aplice(start, step, *args):


 参数一: start:从哪个索引值开始操作
 参数二: step:要删除那几个(0:不删除元素)
 参数三: *args: 新替换的元素

指定添加:

arr2.splice(1, 0, "卡卡西");    // 在"鸣人"和"佐助"中间添加"卡卡西"

指定删除:

arr2.splice(1,1);   // 删除"佐助"

指定替换:

arr2.aplice(1, 1, 123,234,345,456); // 将"佐助"替换成 123, 234, 345, 456, 

1.4 查:

Array.indexOf(ele); 返回数组中元素第一次出现的索引值,没有的话返回-1

1.5 反转:

Array.revers(): // 反转数组

var newArr = arr2.reserver()

1.6 排序: 排序的底层是冒泡排序

Array.sort(); //排序函数

sort方法衣服那个要传入匿名函数,指定排序格式:

newArr.sort(function(a, b) {
    return a-b; //升序排序
    return b-a; //降序排序
})

1.7 合并成字符串:

Array.join(“分隔符,默认使用’,'连接”)

1.8 代码演示:

script>
    // 定义一个测试数组
    var arr = ["鸣人", "佐助", "小樱"]
    console.log(arr)
    console.log("数组的初始数据为: " + arr)
    console.log("")
    
    // 1.增:arr.push
    arr.push("卡卡西");
    console.log("增加数据后的数组: " + arr)
    console.log(arr)
    console.log("")


    // 2.删除: arr.pop() 有返回值
    var ele = arr.pop()
    console.log("删除末尾元素后的数组: " + arr)
    console.log("被删除的元素为: " + ele)
    console.log(arr)
    console.log("") 

    // 3.改: splice()
    // 指定位置添加
    arr.splice(1, 0, "佐井")
    console.log("在数组1索引处添加元素后: " + arr)
    console.log(arr)
    console.log("")

    // 指定位置删除
    arr.splice(1, 1)
    console.log("将新添加的元素删除:" + arr)
    console.log(arr)
    console.log("")

    // 指定位置替换
    arr.splice(1, 1, "佐井", "鹿丸", "雏田", "小李")
    console.log("将数组索引1开始之后的1个元素替换: " + arr)
    console.log(arr)
    console.log("")

    // 4.查: indexOf(元素)
    var index1 = arr.indexOf("雏田")
    console.log("'雏田'在数组的中的索引:" + index1)
    var index2 = arr.indexOf("卡卡西")
    console.log("'卡卡西'在数组中的索引:" + index2)
    console.log("")

    // 5.反转: reverse()
    arr.reverse()
    console.log("反转后的数组为: " + arr)
    console.log("")

    // 6.排序: sort
    var newArr = [3, 7, 6, 4, 5, 11, 2]
    console.log("未排序的数组: " + newArr)
    newArr.sort(function(a, b){
        return a - b;   // 升幂排序
    })
    console.log("数组升序排序: " + newArr)

    newArr.sort(function(a, b){
        return b - a;   // 降幂排序
    })
    console.log("数组降序排序: " + newArr)
    console.log("")

    // 7. 数组元素拼接成字符串: join()
    var str = arr.join()  // 不传递参数，用逗号链接
    console.log("默认拼接: " + str)  
    var str = arr.join(' ')  // 传递参数空格，真的用空格链接
    console.log("使用空格拼接: " + str) 
    var str = arr.join('-')  // 传递参数空字符串，无缝链接
    console.log("使用'-'拼接: " + str)
    var str = arr.join('')  // 传递参数空字符串，无缝链接
    console.log("无缝拼接: " + str)
</script>  

运行结果:

---

2. 拓展:

2.1 拓展1:二维数据:

数字套数组

2.2 拓展2: python中的字典{}, 对应js中的对象

var obj = {"name": "张三", "age": 18, "address": "三里屯"}

2.3 拓展3: 以后用的最多的还是数组中套对象

var newArr = [
        {"name": "张三", "age": 18, "address": "三里屯"},
        {"name": "李四", "age": 45, "address": "三里屯"},
        {"name": "王五", "age": 25, "address": "三里屯"}
    ]

2.4 拓展4:数组中套对象,根据对象的键值排序:

 var newArr = [
        {"name": "张三", "age": 18, "address": "三里屯"},
        {"name": "李四", "age": 45, "address": "三里屯"},
        {"name": "王五", "age": 25, "address": "三里屯"}
    ]
newArr.sort(function(a, b) {
    return a.age - b.age; //根据年龄升序排序
    return b.age - a.zge; //根据年龄降序排序
})

5. 数组去重:

5代码演示:

<script>
    // 数组去重
    // 1.定义一个有重复数据的老数组和一个空的新数组
    var oldArr = ['刘备','刘备','关羽','关羽','张飞','张飞']
    var newArr = []

    // 2.遍历老数组
    for(var i = 0; i < oldArr.length; i++){
        //3.判断新数组中是否存在
        if(newArr.indexOf(oldArr[i]) == -1){
            // 添加到新数组中
            newArr.push(oldArr[i])
        }
    }
    console.log('打印新数组:' + newArr)
</script>

6.数组中的数据放入页面(炒鸡重要):

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_数组元素添加到页面中</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none
        }
        h1 {
            width: 500px;
            margin: 50px auto;
        }
        ul {
            width: 500px;
            margin: 0 auto;
        }
        ul li {
            font: 22px/50px 'simsun';
            border-bottom: 1px dashed #ccc;
        }
    </style>
    <script>
        window.onload = function(){
            // 1.定义一个数组
            var arr = ['葫芦娃','功夫熊猫','风语咒','冰雪奇缘','海底两万里']

            // 2.为ul的innerHTML属性赋值
            var ul = document.getElementById('box')
            var str = ""
            // 重点:遍历数组,把数组中的元素拼接到ul-li并累加到str中
            for(var i = 0;i < arr.length; i++){
                str += '<li>' + arr[i] + '</li>'
            }
            // 3. 赋值
            ul.innerHTML = str
        }     
    </script>
</head>
<body>
    <h1>动画片推荐</h1>
    <ul id="box">
        <!-- <li>肖申克的救赎</li>
        <li>阿甘正传</li>
        <li>战狼2</li>
        <li>我不是药神</li>
        <li>我是植物人</li> -->
    </ul> 
</body>
</html>

运行结果:

---

四、字符串及其操作:

1.字符串概述:

• 字符串是前后带引号的数据;
• 字符串是前后带引号的数据;
• 字符串是前后带引号的数据;
• 可以通过下标的形式获取字符串中的单个字符值;
• 字符串是不可变元素,所以不能修改;
• 字符串的连接"+", 如果连接的多个值(简单数据类型)中有一个是字符串,那么得到的是字符串 ==> 自动类型提升;

2. 字符串转换成数字:

2.1 截取整数,转换成数字:

string.parseInt();

2.2 截取浮点数,转换成小数:

string.parseFloat();

注意:数字在字符串中的位置对截取的影响, 只能截取以数字开头的那部分数字, 当字符串的开头不是数字事, 则不能截取.
字符串API:
 因为字符串是不可变类型,所以,没有"增/删/改"

3. 查看:

var index = str.indexOf(“元素”); //如果有返回第一个值的索引,没有或者不完整返回-1

4.切割:

var arr = str.split(“分隔标志”); // 用什么切割这个字符串就不存在了
var arr = str.split(""); // 用空字符串切割,把字符串中的每个元素都分隔

5.截取:索引值包左不包右

str.substring(start, end); // 用的不多,是老方法
str.silce(); // 常用,新方法

6.反转(字符串反转没有API,需要借助数组):

var newStr = str.split(’’).reverse().join(’’)

7.替换:

var newStr = str.replace(“旧字符串”, “新字符串”)

6. 代码演示:

<script>
	// 定义一个测试字符串
	var str = "abcdefgh"
	
	// 1.查看: indexOf()
	console.log(str.indexOf("cde"))    // 如果有返回第一个元素的索引值
	console.log(str.indexOf('bd'))  // 没有或者不完整，返回-1
	
	// 2.切割: split()
	var arr = str.split('d')  // 用什么切割，这个字符串就不存在了。
	console.log(arr)
	var arr = str.split('')  // 用空字符串切割，把字符串中的每一个元素都单独放入数组中。
	console.log(arr)
	
	// 3.截取: substring()  slice()
	console.log(str.substring(2, 5))  // 索引值：包左不包右
	console.log(str.slice(2, 5))  // 索引值：包左不包右
	
	// 4.反转:字符串没有API
	var newStr = str.split('').reverse().join('')
	console.log(newStr)
	
	// 5.替换: replace();
	var newStr = str.replace('d', 'D')
	console.log(newStr)
</script>

五、JS程序的调试:

1. API调试:

输出变量和对象的方法：
1、alert
2、console.log
3、document.title

2.debug:

f12 -> sources

六、定时器(重重点):

1.定时器在JS中的作用:

固定时间执行某个程序

• 定时调用函数:
• 制作动画

2. 定时器：

setTimeout: 超时定时器 ==> 只执行一次的定时器
clearTimeout: 关闭只执行一次的定时器
setInterval: 中断定时器 ==> 反复执行的定时器
clearInterval: 关闭反复执行的定时器

3. 效果:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>09_定时器</title>

    <script>
        window.onload = function(){
            // 定时器:固定时间执行的某个程序
            // 1.获取元素
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            var btn3 = document.getElementById("btn3");
            var btn4 = document.getElementById("btn4");

            var interValue = document.getElementById("interval");
            var timeoutValue = document.getElementById("timeout");

            // 2.定时器一般设置为全局变量
            var time1 = null;   // 定时器默认返回一个数值
            var time2 = null;

            // 演示1: 中断定时器
            var i = 0;
            btn1.onclick = function() {
                timer1 = setInterval(function() {
                    interValue.innerHTML = '我是中断定时器...' + i;
                    i++;
                }, 1000)
            }

            //演示2: 超时定时器
            btn2.onclick = function() {
                timer2 = setTimeout(function() {
                    timeoutValue.innerHTML = '超时定时器触发...';
                }, 3000)
            }

            // 3.关闭定时器:
            // 关闭中断定时器
            btn3.onclick = function() {
                // 清除定时器，必须知道定时器的名字(编号)。
                clearInterval(timer1)
            }

            // 关闭超时定时器
            btn4.onclick = function() {
                clearTimeout(time2)
            }
        }    
    </script>
</head>
<body>
    <div>
        <button id="btn1">setInterval定时器</button>
        <span id="interval"></span>
        <br><br>
        <button id="btn3">清除setInterval定时器</button>
        <br><br>
    </div>
    <div>
        <br><br>
        <button id="btn2">setTimeout定时器</button>
        <span id="timeout"></span>
        <br><br>
        <button id="btn4">清除setTimeout定时器</button>
    </div>
</body>

4. 定时器动画

代码演示:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>10_定时器完成动画</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
    
        /* 向让盒子移动，最好给盒子定位。 */
        #box1 {
            position: absolute;
            top: 10px;
            left: 0;
            width: 100px;
            height: 100px;
            background: skyblue;
        }
        #box2 {
            position: absolute;
            top: 200px;
            left: 0;
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
    </style>

    <script>
        window.onload = function() {
            // 1. 获取元素
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");

            // 需求1: box1向左移动
            // 定义一个变量用来存放left值
            var num1 = 0;
            //启动一个定时器
            setInterval( function() {
                // 向左移动,left为正值
                num1 += 5;
                box1.style.left = num1 + "px";
            },100)

            // 需求2: box2在一个范围内做往复运动
            // 定义一个变量用来保存left值
            var num2 = 0;
            // 定义一个变量来保存步长
            var step = 10;

           
            //启动一个定时器
            setInterval(function() {
                 // 判断方块该往左运动还是该往右运动
                if(num2 <= 0 ){  // left < 0;此时方块需要向左运动
                    step = 10;
                }
                if(num2 >= 600 ){  // left < 1000;此时方块需要向右运动
                    step = -10;
                }
                // 通过步长, 规定方块的移动方向
                num2 += step;
                box2.style.left = num2 + "px";
            },100)

        }
    </script>
</head>
<body>
    <div id="box1">简单移动</div>
    <div id="box2">往返移动</div>
</body>

六、变量的作用域:

1. 全局变量和局部变量

1.1 局部变量: 函数内部的变量

  局部变量只能在函数内部使用,作用域是函数体内部

1.2 全局变量:

• 全局变量的作用域是从定义开始,至程序结束,不管函数内还是函数外,修改/获取变量不需要使用关键字.
• 当函数内部有与全局变量同名的局部变量,那么函数使用的是自身的局部变量

七、封闭函数(沙箱):

1.封闭函数的定义:

定义: 封闭函数就是匿名函数的自调用

2. 匿名函数自调用:

2.1 方法一:使用小括号把函数括起来成一个整体,然后再用()执行调用

(function(){
    函数体;
})();

2.2 方法二: 使用! 声明之后的function为匿名函数整体,然后使用()调用

!function() {
    函数体2;
}();

2.3 方法三: 使用~ 声明之后的function为匿名函数整体,然后使用()调用

~function() {
    函数体2;
}();

3. 封闭函数的作用:

作用: 匿名函数自调用形成一个块级作用域.

八、js拓展:

1. 根据标签名/class/id名获取标签

1.1 通过id名获取元素

var ele = document.getElementById("id")

1.2 通过标签名

返回一个列表(伪数组)，一个和没有返回的也是列表(伪数组).
var eleArr = document.getElementByTagName("标签名)

• 获取到该标签的所有元素;
• 返回值是一个数组;
• 没取到值返回一个空数组;

1.3 通过类名:

var eleArr = document.getElementByClassName("类名")

• 获取到该类名的所有元素;
• 返回值是一个数组;
• 没取到值返回一个空数组;
• 这是html5后新增的,IE678浏览器不支持

2. 通过标签找兄弟标签/子标签/父标签(访问关系/节点层级) :

2.1 找兄弟标签:

var nextEle = 标签.nextElementSibling;  // 查找当前标签的下一个兄弟标签
var preEle = 标签.previousElementSibling;  // 查找当前标签的上一个兄弟标签

2.2 找父节点:

var prientEle = 标签.parentNode

2.3 找子标签:

var firstEle = 标签.parentNode.firstElementChild
var lastEle = 标签.parentNode.lastElementChild

var childsArr = 标签

3. 节点操作(创建/添加/删除/复制/替换)

3.1 创建:

var newEle = document.createElement("新标签名")

3.2 添加:

父标签.appendChild(标签)

3.3 删除:

父标签.removeChild(标签)

4.DOM - (很重要!!)

4.1 DOM简介:

DOM: (Document Object Model):把整个页面上的所有标签加载到内存中以树状数据结构存储;
js方法获取的标签也被称为:节点、 js对象、 DOM对象、标签.

拓展书籍:

<JavaScript权威指南>、<JavaScript高级编程>