学习JS的第二周（总结）

一、函数的返回值
可使用return关键字返回函数的内容
需要注意的是：

1. return一次只能返回一个结果
2. return具有结束函数的功能
3. 任何函数都有返回值，若没有return关键字，则返回undefind
4. 可返回的数据类型有：string、number、boolean、function、array、object等等。
   二、作用域
   定义：变量或函数的作用范围，根据作用范围不同，可以分为全局作用域和局部作用域。
   作用域链：JS内部中一种变量、函数查找机制，它决定了变量和函数的作用范围，向上查找的方式(逐层向上查找)。
   三、预解析
   预解析时，会把由var定义的变量和function定义的函数保存起来(变量会被保存为undefined，函数定义被保存，但是并没有执行)。
   四、定时器
   setInterval() 每隔一定时间执行一次。
   setTimeout() 延迟一定时间执行，只执行一次。
   clearInterval(num) num为定时器编号，每个定时器只有一个编号。
   clearTimeout(num)
   五、获取节点对象的样式

//1.方案一   
/*
	对象.style.样式名                 行内样式
*/

//2.方案二
/*
	getComputedStyle(对象，null)     标准浏览器
*/

//3. 方案三  
/*
	对象.currentStyle.样式名
*/

//4. 最终方案：兼容性方案
        function getStyle(obj, prop) {
            if (obj.currentStyle == undefined) {    //标准浏览器  会返回undefined
                return getComputedStyle(obj, null)[prop]
            }
            return obj.currentStyle[prop];//低版本IE
        }

六、运动函数的封装

/*
   功能：向右移动
   参数：
     @obj     目标物体
     @prop    参与运动的属性
     @step    每次移动的距离
     @target  终点位置
 */
function move(obj, prop, step, target) {
    var preTar = parseFloat(getStyle(obj, prop));//初始位置
    //判断起点和终点的位置关系 决定 step的正负
    step = preTar > target ? -step : step;//
    clearInterval(obj.timer);//清除当前正在起作用的定时器，
    //启动新定时器
    obj.timer = setInterval(function () {
        //思路：div的新位置=取出当前div的位置，在当前位置基础上加位移的距离     
        var speed = parseFloat(getStyle(obj, prop)) + step;// '50px'+5
        //判断当前的位置和终点位置的关系   判断方向

        //preTar>target  初始位置>终点位置    向左
        //preTar<target  初始位置<终点位置    向右
        //if(向右&&到达终点 || 向左&&到达终点)
        if (speed >= target && step > 0 || speed <= target && step < 0) {
            clearInterval(obj.timer);
            speed = target;//到达终点之后，
        }
        obj.style[prop] = speed + "px";
    }, 10);
}

七、Math对象

• PI 圆周率
• abs(x) 求绝对值
• ceil(x) 向上舍入
• floor(x) 向下取整
• round(x) 四舍五入
• max(x,…) 求最大值
• min(x,…) 求最小值
• pow(x,y) x的y次幂
• random() 生成0-1之间的随机数 [0,1)

八、Date对象
var d=new Date();//创建一个日期对象，为当前时间。
var d=new Date(“2021.3.10 22：22：22”);//创建一个日期对象，为指定时间。
get.年/月/日/小时/分钟/秒 //取值

九、String对象
有索引 有长度
常见的方法：

字符串查找

• charAt(index) //根据索引取字符
• charCodeAt(index) //根据索引取ASCII码
• indexOf() //找指定字符/字符串在母串中第一次出现的位置，找到返回索引值，找不到返回0；
• lastIndexOf() //找指定字符/字符串在母串中第一次出现的位置，从后往前找。

字符串截取

• substring(start,stop) //从start开始，截取到stop
• slice(start,end)
• substr(start,length) //从start开始，截取length个字符

大小写转换

• toLowerCase() //转小写
• toUpperCase() //转大写

使用指定字符将字符串分隔为数组

• split()

替换字符串

• repalce(oldChar,newChar) //只能替换一个
• trim() //去除字符串首尾字符

十、Array对象

创建数组

// var arr=new Array();//创建一个数组示例
        // arr[0]=100;
        // // console.log(arr);
        // arr[1]=200;
        // // console.log(arr);
        // arr[5]=300;

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


        // var arr=new Array(10,20,100,90);
        // console.log(arr);
        // arr[0]='hello';//覆盖
        // console.log(arr);


        // var arr=new Array(3);//声明一个长度为3的数组
        // console.log(arr,arr.length);
        // arr[5]=100;
        // console.log(arr);


        // var arr=[];
        var arr0=[10,20,100];
        arr0[0]='你好';
        console.log(arr0);

数组增删

• push() 数组末尾追加元素
• push(item/(item,item,…) 添加一个或多个
• pop() 删除数组末尾的元素
• shift() 删除数组头部元素
• unshift() 在数组头部添加元素
• unshift(item/(item,item,…) 添加一个或多个

splice

• splice(start,deleteCount,item1,item2,…,itemx)

冒泡排序

var arr = [10, 20, 10, 5, 6, 4, 5, 9, 10, 100, 3];

        //外层循环控制 比较的轮数
        for (var i = 1; i < arr.length; i++) {
            //每一轮都要比较
            //相邻的元素作比较，前比后大，交换位置
            for (var j = 0; j < arr.length - i; j++) {
                if (arr[j] > arr[j + 1]) {
                    var temp = arr[j];//大数据
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }

sort

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

        // console.log(arr);
        
        //随机排序
        // arr.sort(function (a, b) {
        //     return Math.random() - 0.5;// 0-1   
        // });

数组去重

 //方法一
        // function uniqArr(arr0) {
        //     var arrx = [];//保存不重复的数据
        //     //遍历原数组
        //     for (var i in arr0) {
        //         //判断arrx中是否已经有了该元素，若没有，要
        //         if (arrx.indexOf(arr0[i]) == -1) {
        //             arrx.push(arr0[i]);
        //         }
        //     }
        //     return arrx;
        // }
	
	//方法二：
        //数组去重
        /*
            遍历原数组，取出数组中的元素和后面的每一个元素作比较，若二者相等，则删除一个数据
        */
        function uniqArr(arr) {
            for (var i = 0; i < arr.length; i++) {
                //遍历当前元素后面的所有元素
                for (var j = i + 1; j < arr.length; j++) {
                    if (arr[i] == arr[j]) {
                        arr.splice(j, 1);//删除一个元素
                        j--;//上一步删除一个元素之后，数组长度发生了改变，导致后面元素的索引-1，此处应该保证j的值不改变
                    }
                }
            }
            return arr;
        }

其他方法

• indexOf()
• lastIndexOf()
• reverse() 倒序
• slice(start,end) 分隔数组
• concat() 合并数组(一个或多个均可)
• join() 使用指定字符将数组元素拼接为字符串

DOM（document object model 文档对象模型）

• DOM：允许开发人员通过JavaScript来操作(增加、删除、修改、查询)HTML、XML

• 在DOM中，将HTML页面描绘成了一个由节点组成的树(DOM 树)。 倒立DOM树

节点属性

• childNodes 子节点 集合 (索引、length) 直接后代(元素节点、文本节点)

• children 子节点 集合 直接后代 (元素节点)

• parentNode 父节点

• previousSibling 上一个兄弟节点

• nextSibling 下一个兄弟

• firstChild 第一个孩子

• lastChild 最后一个孩子

nodeType 节点类型

• 元素节点值 1
• 属性节点 2
• 文本节点 3
• nodeValue 节点的值
• nodeName 节点的名称

删除节点

• removeChild() 删除子节点
• remove() 删除自身 (“自杀”)

替换节点

• replaceChild(newChild,oldChild)

克隆节点

• cloneNode(deep)//参数为布尔类型，默认为false，只复制标签，true复制子节点。

根据选择器找元素

• document.querySelector()
• document.querySelectorAll()

修改样式

• 节点.style.样式名=值;

获取样式

• 节点.style.样式名 只能获取行内样式
• getComputedStyle() 既能获取行内、又能获取样式表样式 兼容性
• 节点.currentStyle.样式 IE低版本

标签的属性

• 节点属性的获取
• 节点.属性名
• 节点[属性名]
• getAttribute(属性名)//可获取自定义属性
• 节点属性的修改
• 节点.属性名=值;
• 节点[属性名]=值;
• setAttribute(属性名,值)

基本数据类型与引用数据类型

• 基本类型数据存储在栈中
• 引用类型数据存储在堆中，它有一个地址，存储在栈中，调用时先在栈中找地址。