JS基础二

自定义属性及getAttribute等方法

    //自定义属性，
        //通过手动添加，通过getAttribute()或者节点操作获取.
        //通过js点操作(中括号)符添加，用点操作或者中括号访问.
        //通过setAttribute('a','b')添加，getAttribute('a')获取

outerHTML/innerHTML

childNodes/children

        //childNodes 获取当前元素节点的所有子节点,这里面包含空白节点
        //children 获取当前元素节点的所有子节点,这里面不包含空白节点

读写css样式的值

        //offsetLeft/offsetTop:获取任意盒子的位置(偏移值),没有单位。不一定有定位。
        //offsetWidth/offsetHeight:获取盒子盒模型的尺寸(填充和边框)
        //offsetParent:获取定位父级，没有就是body。
        //4.1单个直接写入
            //oBox.style.width=2000+'px';
        //4.2写入多个:将css代码以字符串的形式赋值给cssText属性。
            //oDiv1.style.cssText='width:200px;height:200px;background:blue;';

文档碎片–面试

BOM概念

        //Browser Object Model 浏览器对象模型，用来描述与浏览器进行交互的方法和接口。
        //BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
        //BOM的核心--window

window内置对象及方法(location/history)

        //2.1 location对象：操作地址栏的接口。
            //地址栏可以带数据，通过?进行拼接，数据之间用&符号。
            //href属性：读写地址栏的所有信息。
            //search属性：读取地址栏的数据信息(包括?)。地址栏?后面的内容。
            //reload(true):刷新页面。true:缓存刷新。
            //location.reload();
            //hash属性：获取哈希值。--onhashchange:事件，哈希值发生改变进行相关操作
            // history.go() 函数 -- 前进或后退指定的页面数（负数后退，正数前进）
            // history.back() 函数 -- 后退一页
            // history.forward() 函数 -- 前进一页
            // history.length 属性 -- history对象中缓存了多少个URL

window下面的事件

        //3.1 onload事件：页面内容加载完成（DOM结构，图片.....）触发事件
        //3.2 onscroll事件：拖动浏览器的滚动条触发此事件,注意触发频率问题。(节流和抖动)
        //3.3 onresize事件：浏览器窗口缩放所触发的事件,注意触发频率问题。(节流和抖动)

可视区和滚动条

        //4.1可视区宽高：
            //document.documentElement.clientWidth  宽
            //document.documentElement.clientHeight  高
        //4.2滚动条的距离--scrollTop/scrollLeft
            //document.documentElement.scrollTop
            //document.body.scrollTop
        //4.3 scrollTo

定时器(同步和异步)

        //5.1两个定时器：(间隔、延时)   
            //定时器：进入队列(queue)
            //同步和异步问题
            //js单线程的。先执行主线程上面的任务，再执行对列的任务。*****
            //同步：阻塞模式。后一个任务必须等到前一个任务完成才开始。
            //异步：非阻塞模式，任务放到队列里面，定时器模拟异步。
        //5.2开启间隔定时器
            //var timer = setInterval(fn, 3000); //每隔3s调用一次函数
        //5.3开启延时定时器
            // var timer=setTimeout(fn,2000);

DOM概念

        // DOM是”Document Object Model”的首字母缩写，即文档对象模型。
        //元素节点，属性节点，文本节点
        //父元素，父节点，子元素，子节点   祖先元素

DOM元素对象的增删改查

        //7.1获取元素：通过id名称，类名，name名称 ，选择器......
            // 通过类名获取元素
            // 通过标签名
            // 查询选择--通过选择器，和获取css写法一致
        //7.2创建DOM元素--document.createElement(元素名称)
        //7.3追加元素--appendChild()   父元素对象.appendChild(元素对象)
        //7.4删除节点--removeChild()
        //7.5插入元素--insertBefore(a, b)把新创建的a节点插入到已经存在b的节点前面
        //7.6克隆元素--cloneNode(true);  true:包含内部的子元素
        //7.7替换子节点:obj.replaceChild(新添加的节点 , 被替换的节点)
        //7.8children:获取元素对象的子元素。类数组

DOM元素类型(节点的划分，节点拥有三个属性)

        // 节点可以分为元素节点、属性节点和文本节点...，他们分别用不同的数字代表类型.例如：元素(1) 属性(2) 文本(3) 注释(8)
        // 每个元素节点又有三个非常有用的属性，分别为：nodeName、nodeType、nodeValue

Math内置对象的常见API

        Math.random():随机数
        Math.pow(底数,指数):求幂
        Math.round():对参数四舍五入取整
        Math.max():参数是多个数字，获取最大值
        Math.min():参数是多个数字，获取最小值
        Math.ceil():对参数进行向上取整。
        Math.floor():对参数进行向下取整。
        Math.sqrt():开根号
        Math.abs():绝对值
        Math.PI: 代表π--3.1415626
       
    //1.1三角函数
        //Math.sin()
        //Math.cos()

熟练使用常用的日期函数

        //1.日期对象的创建--构造函数
            //var d=new Date(); 
            //d.toLocaleString();//按照本地字符串的显示方式
            // console.log(d.getYear());//年份差2019-1900=119
            // console.log(d.getFullYear());//四位的年份
            // console.log(d.getMonth()+1);//月份，注意月份要加1  0-11 --> 1月--12月
            // console.log(d.getDate());//日
            // console.log(d.getDay());//星期    0-6-->周日--周六
            // console.log(d.getHours());
            // console.log(d.getMinutes());
            // console.log(d.getSeconds());

理解包装对象(为什么基本类型会有属性和方法)

        // string是基本类型，同时也是包装对象，当string类型需要使用属性和方法的时候,系统会临时给string类型的创建一个对象(new String)。一旦使用完成，立刻销毁。

字符串的常用方法

        //1.1 字符编码类
             charAt( ):返回对应字符串索引的内容。  
            // charCodeAt( ):返回对应的字符串索引的内容的unicode编码
            // String.fromCharCode(unicode编码);将参数中的unicode编码返回成对应的字符串的内容，多个编码用逗号分隔。
        //1.2 trim() 创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果
        //1.3 replace( , )替换
        //1.4 split( , )——根据分隔符、将字符串拆分成数组。
            //第一个参数就是分割字符串的符号
            //第二个参数用来限制数组的长度，多余的切掉
        //1.5 substring( , )：用来截取字符串的内容
            // 没有参数全部截取。相当于从第0位开始截取。 
            // 一个参数代表截取从参数的位置往后的字符串。
            // 两个参数代表截取两个参数之间的字符串，包括第一个参数的位置。
            // 两个参数的时候，当第二个参数小于第一个参数，自动交换位置。
            // 如果是负数，当做0来处理。
        //1.6 substr(start, length); 用来截取字符串的内容
            // start：开始的索引，如果为负数，从后往前进行截取，包括开始的索引。
            // length：截取的长度。
        //1.7 大小写字母转换的方法--验证码
            //toUpperCase()转换成大写.
            //toLowerCase()转换成小写.
        // 1.8 indexOf()和lastIndexOf():区别是如果第一个参数为负数，数组是从后往前找，字符串是当做0处理。

ES5新增的语法–严格模式

        //进入"严格模式"的标志--"use strict";
        //语法和行为改变
        //1.1变量显式声明：一定加var
        //1.2禁止使用with语句
        //1.3禁止this关键字指向全局对象
        //1.4对象不能有重名的属性--覆盖
        //1.5函数不能有重名的参数
        //1.6禁止八进制表示法
        //1.7不允许对arguments赋值
        //1.8禁止使用arguments.callee:函数指针。

精通ES5的数组新方法–9个

        //1.1位置方法--返回要查找的项在数组中的索引位置,没找到的情况下返回-1(两个参数：要查找的项和(可选的)表示查找起点位置的索引)
            //indexOf() 方法从数组的开头开始向后查找。
            //lastIndexOf() 方法则从数组的末尾开始向前查找。
        //1.2迭代方法（不会改变原数组）
        //每个方法两个参数：
        //第一个参数：要在每一项上运行的函数(函数当参数，回调函数)
        //此函数会接收三个参数：数组项的值、该项在数组中的位置、数组对象本身。
        //第二个参数：(可选的)运行该函数的作用域对象--影响 this 的值
            // every()对数组中的每一项运行给定函数，如果该函数对每一项都返回 true ，则返回 true ,否则返回false
            // some() 对数组中的每一项运行给定函数，如果该函数对任意一项返回 true ，则返回 true
            // filter() 对数组中的每一项运行给定函数，返回该函数结果为 true 的项组成的数组。[过滤]
            // map()  对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。返回就是数组，不考虑true或者false；[遍历]
            // forEach() 对数组中的每一项运行给定函数。这个方法没有返回值。--for循环
         //1.3归并方法
            //  reduce() 方法从数组的第一项开始，逐个遍历到最后。
            //  reduceRight() 方法从数组的最后一项开始，向前遍历到第一项。
            // 两个参数：每一项上调用的函数和（可选的）作为归并的初始值。
            // 调用的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。

数组的方法：10个

        //1.1.栈方法(后进先出)
            //push() 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
            //pop() 从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。
        //2.队列方法(先进先出)
            //unshift()方法能够在数组前面添加任意个项并返回新数组的长度。
            //shift() 方法能够移除数组中的第一个项并返回该项，同时将数组长度减 1。
        //3. 重排序方法
            //reverse() 方法会反转数组项的顺序。
            //sort() 方法按字母表升序排列数组项。
                //如果按照其他方式而非字母表顺序进行数组排列，必须给sort方法传递一个比较函数做参数;sort(function (a,b){return a-b;})

结构方法

            //concat() 方法可以基于当前数组中的所有项创建一个新数组，参数可以是数组项或者数组。
            //slice() 方法它能够基于当前数组中的一或多个项创建一个新数组。可以接受一或两个参数，即要返回项的起始和结束索引位置，不包括结束位置。(截取)
                // var arr=["a", "b", "c", "d", "e", "f", "g"];
                // console.log(arr.slice());//没有参数，全部截取
                // console.log(arr.slice(1));//从起始位置到最后["b", "c", "d", "e", "f", "g"]
                // console.log(arr.slice(1,5));//索引之间的值，不包括结束["b", "c", "d", "e"]
                // console.log(arr.slice(1,-5));//负数：从后往前数组，-1开始。 ["b"]
                // console.log(arr.slice(-15,-10));//[] 没有截取到，返回空数组。
            //splice() 方法，对数组进行删除、插入、替换，是最强大的数组方法，返回值是数组,代表删除项,改变原数组。
                //参1：开始的索引位置，参2：删除的长度 参3，4...:替换的内容
            //join()方法，将数组转换成对应的字符串。参数就是连接符。

对象的创建

。
//1.1构造函数创建对象
// var obj=new Object();//自定义的对象。
// obj.name=‘zhangsan’;//对象添加属性
//1.2字面量可以创建对象
// var obj={
// name:‘zhangsan’,
// age:100,
// showinfo:function(){
// return obj.name+’,’+obj.age;
// }
// };

类,构造函数,实例对象。

        //类：一类事物
        //类：产生对象(实例对象)
        //对象：属性+方法
        //函数-->属于对象-->属性和方法。

自定义对象属性的访问。

        //获取：点操作符和[]访问对象属性的值
        //点操作符后面只能跟字符串，和变量没有关系。  

值传递和引用传递

        // 基本类型采用值传递   引用类型采用引用传递。 

浅拷贝和深拷贝–面试题

        //通过拷贝实现引用传递--for...in一一赋值

  		 var arr=[1,2,3];
         var newarr=[];
         for(var i in arr){
             newarr[i]=arr[i];//通过遍历，将arr的值逐个赋给newarr
         }
         newarr.push(4);
         console.log(arr);//[1,2,3]
         console.log(newarr);//[1,2,3,4]

数组的排序(冒泡排序、选择排序、快速排序)–面试题

冒泡排序

 var arr=[12,-1,0,-36,569,8,9,36,100,9];
             冒泡排序算法的原理如下：
             比较相邻的元素。如果第一个比第二个大，就交换他们两个。
             对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。
             针对所有的元素重复以上的步骤，除了最后一个。
              持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。
             每一轮会排好一个数字
             var times=0;//计算遍历的次数。
             for(var i=0,len=arr.length;i<len-1;i++){//轮数 -1:10个数字只需要比较9轮
                 for(var j=0,len1=arr.length;j<len1-i-1;j++){//两两比较  -1:10个数字两两比较9次   -i:每一轮都有一个数字已经排好了。
                     if(arr[j]>arr[j+1]){
                        var temp=arr[j];
                         arr[j]=arr[j+1];
                         arr[j+1]=temp;
                     }
                     times++;
                 }
             }
             console.log(arr);//[-36, -1, 0, 8, 9, 9, 12, 36, 100, 569]    
        

选择排序

    选择排序（Selection sort）是一种简单直观的排序算法。它的工作原理是：第一次从待排序的数据元素中选出最小（或最大）的一个元素，存放在序列的起始位置，然后再从剩余的未排序元素中寻找到最小（大）元素，然后放到已排序的序列的末尾。以此类推，直到全部待排序的数据元素的个数为零。选择排序是不稳定的排序方法。

  var arr = [12, -1, 0, -36, 569, 8, 9, 36, 100, 9];
             for (var i = 0, len = arr.length; i < len; i++) {
                 var minindex = i;//假设的最小值的索引。
                 var minvalue = arr[minindex];//假设最小值。
                 for (var j = i + 1; j < len; j++) {
                     if (arr[j] < minvalue) {
                         minvalue = arr[j];
                         minindex = j;
                     }
                 }
                 //确定最小值的索引。minindex
                 if (i !== minindex) {//minindex=i 如果假设的最小值真的是数组的最小值，不需要交换。
                    var temp = arr[i];
                     arr[i] = arr[minindex];
                     arr[minindex] = temp;
                 }
             }
             console.log(arr);//[-36, -1, 0, 8, 9, 9, 12, 36, 100, 569]

快速排序

 function quicksort(arr) {
                     if (Array.isArray(arr)) {
                         //1.如果是数组，设置基点
                         if (arr.length <= 1) {
                             return arr;
                         } else {
                             //2.从数组中获取中间值
                             var midindex = parseInt(arr.length / 2);//中间索引
                             var midvalue = arr.splice(midindex, 1)[0];//中间值  splice改变原数组
                             //3.数组的其他项和当前的中间值进行比较，比中间值大的放到右边的数组，比中间值小的放左边的数组。
                             var left = [];
                             var right = [];
                             for (var i = 0, len = arr.length; i < len; i++) {
                                if (arr[i] < midvalue) {
                                     left.push(arr[i])
                                 } else {
                                     right.push(arr[i]);
                                 }
                             }
                             return quicksort(left).concat(midvalue, quicksort(right))
                         }
                     } else {
                         throw new Error('你输入的不是数组');
                     }
                 }