美文网首页工作生活
原生js知识点回顾(2)

原生js知识点回顾(2)

作者: 孤岛上的叶子 | 来源:发表于2019-07-03 18:42 被阅读0次

     数组

    var arr = new Array(); // 用构造函数的方式创建一个空的数组

    var arr = []; // 用字面量(直接量)的方式创建一个空的数组

    eg:

    var arr = new Array("a", "b", "c"); // 数组的3个成员(元素)

    var arr = ["a", "b", "c"];

    var arr = new Array(4); // 开辟了4个空间,每一个空间的内容没有定义

    var arr = [undefined, undefined, undefined, undefined]

                1.二维数组

                var arr = [

                    ["a", "b"],

                    ["x", "y"]

                ];

                console.log( arr[0][0] );  // "a"

                2.三维数组

                var arr = [

                    [

                        ["a", "b", "c"]

                    ]

                ];

                console.log( arr[0][0][1] );

                3.支持各种类型

                var arr = [ "abc", 123, true, NaN, undefined, function(){}, [] ];

                4.数组的操作方法

                var arr = ["a", "b"];     var arr2 = ["x", "y"];

                arr.push("c");    // 在末尾处追加

                var item = arr.pop(); // 删除最后一个成员

                var l = arr.unshift("xyz", 123, true); // 在开头处添加

                var item = arr.shift(); // 删除第一个成员

                arr.length = 4; // 可以设置长度

                var r = arr.concat(arr, arr2); // 连接数组

                数组转成字符串:

                var arr = ["abc", "xy", 123];

                var r = arr.join(); // "abc,xy,123"

                var r = arr.join("");    // "abcxy123"

                var r = arr.join(",");    // "abc,xy,123"

                var r = arr.toString();      // "abc,xy,123"

                var r = arr.toLocaleString(); // "abc,xy,123"

                var r = arr.toSource();      // '["abc", "xy", 123]'

                var r = arr.valueOf();          // ["abc", "xy", 123]

                数组倒置

                var arr = ["a", "b", "c"];

                var r = arr.reverse();

                console.log(arr);  // ["c", "b", "a"]

                console.log(r);    // ["c", "b", "a"]

                数组截取

                var arr = ["a", "b", "c", "d", "e", "f", "g"];

                console.log( arr.slice(1, 4) ); // 下标大于等于1,并且小于4

                console.log( arr.slice(-2) ); // ["f", "g"]  只有一个参数的话 代表截取从某位之后所有的

                console.log( arr.slice(-4, -2) ); // ["d", "e"]   负数代表倒数第几位

                数组排序

                arr.sort(); // unicode编码进行排序

                eg:

                var arr = [1, 22, 3, 212];

                arr.sort(); // unicode编码进行排序

                console.log( arr ); // [1, 212, 22, 3]

                获取下标

                var arr = ["a", "a", "a"];

                console.log( arr.indexOf("a") );        // 0    从左到右查找

                console.log( arr.lastIndexOf("a") );    // 2    从右到左查找

                forEach 循环

                var  arr = [1,2,3,4,5,] ;

                arr.forEach(function(item,index){

                    console.log(item);

                });

                map遍历

               let   phone=['小米','三星','苹果','一加','乐视','OPPO','VIVO','魅族','联想'];

               let   newphone=phone.map((x)=>{

                        return    x+'手机'

                        console.log(x)

                })

                console.log(phone,newphone)

                reduce 归并

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

                // 只传一个函数,不设置归并初始值

                var res1 = values.reduce(function(prev, cur, index, array){

                    return prev - cur;

                })

                // 传两个参数,给定归并初始值

                var res2 = values.reduce(function(prev, cur, index, array){

                    return prev - cur;

                }, 5)

                alert(res1) // -13 1-2-3-4-5=-13

                alert(res2) // -10 5-1-2-3-4-5=-10

                reduceRight ( )

                reduceRight ( ) 的功能与 reduce ( ) 相同,只不过是从后向前遍历,除此之外二者完全相同

                filter   筛选

                var   result=[60,58,31,70,55,43,21,18,98,50,42,31,15,76,50,48,63,80,73,61];

                let    pass=result.filter((x)=>{ 

                        returnx>=60;

                })

                console.log(pass)

                some  判断数组中是否存在符合条件的item判断为true则马上跳出循环并return成true

                1、不创建新数组

                2、不改变原数组

                3、输出的是判断为true则马上跳出循环并return成true

                4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

                5、使用return操作输出,会循环数组每一项,并在回调函数中操作

                var arr = [1,2,3,4,5] ;

                var new1 = arr.some(function(item,index){

                        return item>2&&item<5 ; //判断出一个符合条件则跳出循环并输出true

                })

                var new2 = arr.some(function(item,index){

                        return item>5 ;         //判断出数组全部元素都不符合条件则输出flase

                })

                console.log(new1);  //true

                console.log(new2); //false

                console.log(arr);  //[1,2,3,4,5] 

                every   判断数组中的item是否全部符合筛选条件

                1、不创建新数组

                2、不改变原数组

                3、输出的是判断为false则马上跳出循环并return成false

                4、回调函数参数,item(数组元素)、index(序列)、arr(数组本身)

                5、使用return操作输出,会循环数组每一项,并在回调函数中操作


    排序:

    冒泡排序:

    依次比较相邻的两个值,如果后面的比前面的小,则将小的元素排到前面。依照这个规则进行多次并且递减的迭代,直到顺序正确。

    var examplearr=[8,94,15,88,55,76,21,39];

    function sortarr(arr){

        for(i=0;i<arr.length-1;i++){

            for(j=0;j<arr.length-1-i;j++){

                if(arr[j]>arr[j+1]){

                    var temp=arr[j];

                    arr[j]=arr[j+1];

                    arr[j+1]=temp;

                }

            }

        }

        return arr;

    }

    sortarr(examplearr);

    console.log(examplearr);

    两个循环

    当i=0的时候,里面的循环完整执行,从j=0执行到j=6,这也就是第一遍排序,结果是将最大的数排到了最后,这一遍循环结束后的结果应该是[8,15,88,55,76,21,39,94]

    当i=1的时候,里面的循环再次完整执行,由于最大的数已经在最后了,没有必要去比较数组的最后两项,这也是j<arr.length-1-i的巧妙之处,结果是[8,15,55,76,21,39,88,94]

    说到这里,规律就清楚了,每次将剩下数组里面最大的一个数排到最后面,当第一个循环执行到最后的时候,也就是i=6,此时,j=0,只需要比较数组的第一和第二项,比较完毕,返回。

    选择排序

    首先从原始数组中找到最小的元素,并把该元素放在数组的最前面,然后再从剩下的元素中寻找最小的元素,放在之前最小元素的后面,知道排序完毕。

    var example=[8,94,15,88,55,76,21,39];

    function selectSort(arr){

        var len=arr.length;

        var minIndex,temp;

        console.time('选择排序耗时');

        for(i=0;i<len-1;i++){

            minIndex=i;

            for(j=i+1;j<len;j++){

                if(arr[j]<arr[minIndex]){

                    minIndex=j;

                }

            }

        temp=arr[i];

        arr[i]=arr[minIndex];

        arr[minIndex]=temp;

        }

        console.timeEnd('选择排序耗时');

        return arr;

    }

    console.log(selectSort(example));

    快速排序:

    1)在数据集之中,选择一个元素作为"基准"(pivot)。

    2)所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。

    3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。

    var quickSort = function(arr) {

      if (arr.length <= 1) { return arr; }

      var pivotIndex = Math.floor(arr.length / 2);

      var pivot = arr.splice(pivotIndex, 1)[0];

      var left = [];

      var right = [];

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

        if (arr[i] < pivot) {

          left.push(arr[i]);

        } else {

          right.push(arr[i]);

        }

      }

    return quickSort(left).concat([pivot], quickSort(right));

    };


    值传递和引用传递

    1.值传递

    function fn( b ){  // var b = 5

        b = 10;

    }

    var a = 5;

    fn( a );

    console.log( a );

    2.引用传递

    function fn( b ){ // var b = a = ["x", "y"]

        b[0] = 123; // [123, "y"]

    }

    var a = ["x", "y"];

    fn( a );

    console.log( a );   //[123, "y"]

    值传递还是引用传递,要看数据类型,如果是数组或对象,则执行引用传递


    浅拷贝与深拷贝

    1.浅拷贝

    var a = [1,2];

    var b = a;  // 浅拷贝(把地址赋值过去了)

    b[1] = 3;

    a[0] = 4;

    console.log( a ); //[4,3]

    2.深拷贝(把堆中的数据拷贝了一份,栈中指向新的地址)

        实现方式:

        2.1    JSON.parse(JSON.stringify(object))

        但是该方法也是有局限性的:

        会忽略 undefined

        会忽略 symbol

        不能序列化函数

        不能解决循环引用的对象  参考

        2.2    对obj逐层遍历

        2.3    lodash 的深拷贝函数


    回调函数

    把一个函数当成参数,传递给另一个函数的方式,叫做回调函数

    fn( function(a){ alert(a) } );


    严格模式

    1.

    "use strict"; // 设置当前代码为严格模式

    a = 123;

    console.log( a ); //报错a is not defined

    2.

    "use strict";

    var x = 2;

    console.log(eval("var x = 5; x")); // 5 // 严格模式下,eval里面的x和外面的x,不是相同的变量

    console.log(x); // 2


    对象

    数组和对象的相同点和不同点

    相同点:用一个变量表示一系列的数据

    不同点:数组仅存储具体的值;对象存储键值对(属性或方法的名字,属性或方法具体对应的数据)

    JS对象(创建)

    构造函数

    var obj = new Object(); 

    obj.a = 1;

    obj.b = true;

    obj.c = "abc";

    obj.fn1 = function(){

            alert("fn1");

    }

    字面量(直接量)

    var obj = {

        a : 1,

        b : true,

        c : "abc",

        fn1 : function( arg1 ){

                alert( arg1 );

        }

    }

    obj.d = "xy";

    obj.a = 102;

    obj.fn2 = function( x, y ){

            alert( x+y );

    }


    js对象和json对象

    对象是一系列数据的集合,每个数据必须由完整的键值对组成

    键值对:属性名称 和 属性值    ( 方法名称  和  该方法对应的具体的函数 )

    属性就是变量;方法就是函数

    JSON是什么?

    JSON是JS的一种简单数据格式,JSON是JavaScript原生格式,它是一种严格的js对象的格式,JSON的属性名必须有双引号,如果值是字符串,也必须是双引号

    var obj3={"width":100,"height":100,"name":"rose"}//JSON格式的JS对象

    var obj4='{"width":100,"height":200,"name":"rose"}';/*我们可以把这个称做:JSON格式的字符串 */

    var obj = { // 在定义一个对象时,键可以是任意写法(可以是单引号,可以是双引号,可以什么都不写)

        "abc" : 10,

        "xy" : 5,

        'a' : "hello",

        'b' : 'world',

        l : true,

        t : false,

        5 : 4,  // 在对象里面,直接写一个数字,是允许的,当成字符串处理

        '5' : 3,// 相同的命名,后面把前面覆盖

        "c-d" : 2 

    }

    字符串转为对象: JSON.parse( str )

    对象转为字符串: JSON.stringify( obj )

    字符串转json对象, 属性名必须是双引号

                var str = '{a:1}'; // 报错

                var str = '{"a":1}';  // 正确

                var str = "{'a':1}";  // 报错

    字符串转js对象

    console.log( eval(str) ); // 错误

    console.log( eval("("  +    str  +    ")") );  // 正确      eval("({a:1})")

    点. 和 中括号[]

    中括号这种方法的作用:在我们不知道具体的属性名时(只有变量描述属性名),只能用中括号这种方法得到该属性。

    点这种方法,是我们知道具体的属性名,然后可以直接通过点去得到该属性。

                var obj = {

                    "a" : 1,

                    '0' : 456,

                    fn : function(){alert()}

                }

                console.log( obj.a );  // 正确

                console.log( obj['a'] );// 正确

                console.log( obj["a"] );// 正确     

                //var str = "a";

                //console.log( obj[a] );    // 报错      a is not defined  这里面的a,为全局变量

                obj["fn"]();

    instanceof

    arr instanceof Array 判断arr在其原型链中是否存在 Array 这个构造函数的 prototype 属性

    判断属性是否存在

    var obj = {

        a : 1,

        b : 2

    }

    console.log( 'a' in obj );   //true

    console.log( 'c' in obj );   //false

    删除属性

    console.log(delete obj.a)   // delete 的返回值,表示是否删除成功


    字符串

    创建字符串对象

    var str = new String("你好");

    console.log( str, typeof(str) ); //String {"你好"} "object"

    创建字符串

    var str2 = "你好";

    console.log( str2, typeof(str2) );   //你好 string

    字符串方法:

    str.substring

    str.substr

    str.slice

    str.split   

    参数的作用:用哪一个字符串来分割

    var str = "123|345|456";

    console.log( str.split("|") );     // ["123","345","456"]

    var str = "abc123abc123";

    console.log( str.split("a") ); // ["","bc123","bc123"]

    var str = "abcdef";

    console.log( str.split("") ); // ["a", "b", "c", "d", "e", "f"]

    var str = "abcdef";

    console.log( str.split() ); // ["abcdef"]

    str.charCodeAt     ascii值

    var str = "09azAZ";

    console.log( str.charCodeAt(0) );

    console.log( str.charCodeAt(1) );

    console.log( str.charCodeAt(2) );

    console.log( str.charCodeAt(3) );

    console.log( str.charCodeAt(4) );

    console.log( str.charCodeAt(5) );


    1(B) byte = 8 bit

    1KB = 1024B

    1MB = 1024KB

    1GB = 1024MB

    1TB = 1024GB


    Math

    Math.abs    取绝对值

    Math.abs(-5)     //5

    Math.ceil    向上取整

    console.log( Math.ceil(5.1) ); // 6

    console.log( Math.ceil(-5.1) ); // -5

    Math.floor   向下取整

    console.log( Math.floor(5.1) ); // 5

    console.log( Math.floor(-5.1) );//-6

    min     max     最大值    最小值

    console.log( Math.max(5, 3, 6, 2, 91) ); //91

    console.log( Math.min(5, 3, 6, 2, 91) );    //2

    Math.pow(a,b)   a的b次方

    console.log( Math.pow(3, 4) ); // 3*3*3*3

    console.log( Math.pow(3, 0) );        // 1

    Math.random()   随机数     

    Math.random()     0-----1

    Math.round     四舍五入

    console.log( Math.round(5.7) ); //6

    console.log( Math.round(0.7) ); //1

    Math.sqrt     开方

    console.log( Math.sqrt(9) );    //3


    Date

    var date = new Date();

    d2 = new Date("2017/1/3");      // 可以仅写 年月日

    d3 = new Date("2017/1/3 8:1:1");    // 可以完整的写 年月日 时分秒

    d4 = new Date(2017, 12, 3, 25, 10, 5);  // 月份为0-11,所以当设置0时,表示1月份

    d5 = new Date("2017-1-3"); 

    console.log( d2 );  //Tue Jan 03 2017 00:00:00 GMT+0800 (中国标准时间)

    console.log( d3 );  //Tue Jan 03 2017 08:01:01 GMT+0800 (中国标准时间)

    console.log( d4 );  //Thu Jan 04 2018 01:10:05 GMT+0800 (中国标准时间)

    console.log( d5 );  //Tue Jan 03 2017 00:00:00 GMT+0800 (中国标准时间)

    date.toLocaleFormat()

    date.getYear()

    date.getFullYear()   获取date年份           date.setFullYear(2019)

    date.getMonth()     0表示1月,11表示12月            date.setMonth(5);

    date.getDate()    获取date日期            date.setDate(32)

    date.getTime()     date这个时间和1970-1-1 8:0:0 的时间间隔(单位毫秒)

    date.setTime(3000)      // 在1970-1-1 8:0:0 这个基础上,增加3秒


    BOM和DOM

    BOM

    location.href 

                location.href = "http://www.baidu.com";   跳转

                self.location.href;//当前页面打开URL页面

                window.location.href;//当前页面打开URL页面

                this.location.href;//当前页面打开URL页面

                location.href;// 当前页面打开URL页面

                parent.location.href;//在父页面打开新页面

                top.location.href;//在顶层页面打开新页面 

    location.reload();  重新加载页面

    window.close();    关闭窗口(只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。这阻止了恶意的脚本终止用户的浏览器。)

    history

                history.go( )

                go(-1): 返回上一页,原页面表单中的内容会丢失;history.go(-1):后退+刷新;history.go(1) :前进

                back(): 返回上一页,原页表表单中的内容会保留;history.back():后退 ;history.back(0) 刷新; history.back(1):前进

    DOM

    prompt   对话框

    var r = prompt("标题", "abcd");

    alert( r );

    window.onload           //    事件会在页面加载完成后触发。

    window.onscroll         //页面滚动条事件

    window.onresize           //onresize 事件会在窗口或框架被调整大小时发生

    scrollTop

    scrollLeft

    scrollHeight

    scrollWidth

    clientHeight

    clientWidth

    innerHTML     outerHTML    innerText    outerText 

    innerHTML:从对象的起始位置到终止位置的全部内容,不包括Html标签。

    outerHTML:除了包含innerHTML的全部内容外, 还包含对象标签本身。

    eg:

    <div id="test">

    <span style="color:red">test1</span> test2

    </div>

    1)innerHTML的值是“<span style="color:red">test1</span> test2 ”

    2)outerHTML的值是<div id="test"><span style="color:red">test1</span> test2</div>

    outerText和innerText属性获取的值都是一样的,但是在设置内容的功能上有差别,outerText属性可以将原来元素节点被文本节点替换掉,而innerText不会

    eg:

    <div id="top">蚂蚁部落top</div>

    <div id="bottom">蚂蚁部落bot</div>

    window.onload=function(){

          var top=document.getElementById("top");

          var bottom=document.getElementById("bottom");

          top.outerText="<b>蚂蚁部落t</b>";

          top.innerText="<b>蚂蚁部落b</b>";

    }

    运行结果如下:

    定时器

    setInterval        设置每隔一定时间调用某个函数

    timer = setInterval(move, 1000); // 创建了一个定时器,用变量timer来表示

    clearInterval( timer ); // 停止定时器

    setTimeout        在指定的毫秒数后调用函数或计算表达式

    优化:在调用定时器之前最好先进行所有定时器的清空操作

    属性

    设置属性

    1、  div1.setAttribute("title", "bbb");

            console.log( div1.getAttribute("title") );  //bbb

    2、  div1.attributes.abc = "456";

            console.log( div1.attributes.abc );

    3、   div1.x = true;

            console.log( div1.x,  typeof(div1.x) );  //true "boolean"

            div1.setAttribute("y", true);

            console.log( div1.getAttribute("y"),  typeof(div1.getAttribute("y")) );    //true string

    文档碎片

    var tmp = document.createDocumentFragment(); // 创建虚拟节点

    for(var i=0; i<10; i++){

        var li = document.createElement("li");

        li.innerHTML = i;

        tmp.appendChild(li);    // 将li标签放入虚拟节点里

        //div1.appendChild(li);

    }

    div1.appendChild(tmp);  // 将虚拟节点添加到页面上

    节点

    nodeType 节点类型(节点类型共有12种)

    div1.nodeType      // 1指元素节点

    div1.attributes[0].nodeType    // 2指属性节点

    div1.firstChild.nodeType    // 3指文本节点

    nodeName 节点名称

    nodeValue 节点值

    ul1.firstChild     //第一个子节点

    ul1.lastChild    //最后一个子节点

    ul1.parentNode    //父节点

    ul1.childNodes[1].previousSibling    //前一个兄弟节点

    ul1.childNodes[1].nextSibling    //后一个兄弟节点

    document.createTextNode("文本内容"); // 创建一个文本节点

    ul1.insertBefore(li1, li2) ; // 将li1这个元素节点,插入到li2这个元素节点的前面

    获取样式

    #div1:after{

        content : '内容';

        color: green;

        font-size:40px;

    }

    <div id="div1" >div</div>

    console.log( getComputedStyle(div1, false)["background-color"] );

    console.log( getComputedStyle(div1, null).backgroundColor );

    console.log( getComputedStyle(div1, null).color );

    console.log( div1.currentStyle['background-color'] ); // 在低版本IE下获取非行间样式

    console.log( getComputedStyle(div1, ':after')["color"] );

    创建和删除元素

    document.createElement

    document.body.removeChild

    获取元素

    // 低版本IE不支持

    console.log( document.getElementsByClassName("c") );

    console.log( document.querySelector("#div1") );

    console.log( document.querySelectorAll("div") );

    data属性

    相关文章

      网友评论

        本文标题:原生js知识点回顾(2)

        本文链接:https://www.haomeiwen.com/subject/gcazcctx.html