js总结，易错，难记点

最新推荐文章于 2024-05-21 14:15:14 发布

先new一个对象.

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量96

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Gyh9421/article/details/120656554

版权

1.1 数据类型

简单/基本/原始数据类型
- number、string、boolean、undefined、null
复杂数据类型
- object、Array、function、Date、RegExp.....

区别：在内存中的存储位置

基本数据类型的存取都发生在栈内存中
引用类型在堆中保存数据，在栈中保存数据在堆中的地址(引用)

1.1.1 数据集类型转换

隐式类型转换
- 运算过程、
强制类型转换
- Number()
- String()
- parseInt()
- parseFloat()
- toString()

函数

1.1 递归函数

  //递归函数
        function fn(num) {
            if (num == 1) {         //终止条件
                return 1
            }
            return num * fn(num - 1)
        }

        var num = fn(10)
        console.log(num);
        /*
            分析递归函数的执行过程：
            10    10*fn(9)
            9     10*9*fn(8)
                        8*fn(7)
                            7*fn(6)
                            ...
                            2*fn(1)
                                1
        */

1. 2回调函数

普通函数

高阶函数：可以接收一个函数作为参数的函数

// function show(fn) {     //fn回调函数   show:高阶函数
        //     console.log(fn);
        // }

        // show(function(){
        //     console.log('hello world');
        // })

匿名函数

 (function() {
            console.log('哈哈哈');
        })();

1.3 什么是闭包

闭包：有权在一个函数内访问另一个函数作用域中的变量(返回该函数)

闭包是连通函数内外的一个桥梁，可以实现局部变量常驻内存。

闭包常见面试题：

 var arr = [];

        for (var i = 0; i < 3; i++) {
            (function (i) {
                arr.push(function () {
                    console.log(i);
                })
            })(i)
        }

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

 var lis = document.querySelectorAll("ul li")
        // for(var i=0;i<lis.length;i++){
        //     // lis[i].index=i;
        //     lis[i].onclick=function(){
        //         console.log(this.index);
        //     }
        // }

        for (var i = 0; i < lis.length; i++) {
            (function (a) {
                lis[a].onclick = function () {
                    console.log(a);
                }
            })(i);
            // (function (i) {//0
            //     lis[i].onclick = function () {
            //         console.log(i);
            //     }
            // })(0);

            // (function (i) {//1
            //     lis[i].onclick = function () {
            //         console.log(i);
            //     }
            // })(1);

            // (function (i) {//2
            //     lis[i].onclick = function () {
            //         console.log(i);
            //     }
            // })(2);

            // (function (i) {
            //     lis[i].onclick = function () {
            //         console.log(i);
            //     }
            // })(3);
        }

1.4 递归

一种常见的算法思想：

求阶乘：

 //递归
        //求阶乘
        // function fn(n){
        //     if(n==1){
        //         return 1;
        //     }
        //     return n*fn(n-1);
        // }

        // console.log(fn(10));
        // 10*fn(9)

打印杨辉三角形：

 for (var i = 1; i < 9; i++) {   //行
            for (var j = 1; j <= i; j++) {//列
                document.write(cal(i, j) + "&nbsp;&nbsp;&nbsp;&nbsp;")
            }
            document.write("<br>")
        }

        //数字的计算
        function cal(m, n) {
            //第一行、第一列、最后一列
            if (m == 1 || n == 1 || m == n) {
                return 1;
            }
            return cal(m - 1, n) + cal(m - 1, n - 1)
        }

1.5 call和apply

this在不同的地方，指向不同。

全局中this指向window

在事件函数中指向事件调用者

对象的方法中，this指向对象(this指向调用者，谁调用，this指向谁)

call和apply都可以修改函数中的this指向问题（功能一致，用法不一致）

call(obj,参数1,参数2,参数2)
apply()

   // function show(){
        //     console.log(this);
        // }
        function show(a,b){
            console.log(this,a,b);
        }


        // show();
        // show.call({})   ;//无参
        show.call({},10,20)
     show.apply({}, [10, 20])

2.面向对象

对象：万物皆对象，  事物的抽象

实例：对象的实例化

原型模式
- 原型 prototype 所有对象都包含一个原型的属性，该属性用来保存对象的公有的属性和方法
  - 对象.ptototype
  - 对象实例.__proto__
- constructor 原型对象的属性指向构造函数
特点：属性放置在原型中，会成为公共属性
混合模式

构造函数+原型

 function Person(name,age,no){
            this.no=no;
            this.name=name
            this.age=age;
        }

        Person.prototype.say=function(){
            console.log(this.name+" 哈哈哈");
        }
        Person.prototype.walk=function(){
            console.log(this.name+" 跑的飞起......");
        }

        var p1=new Person("秦始皇",55,'001')
        var p2=new Person("赵高",56,'002')

动态混合

 //动态混合
        function Person(name, age, no) {
            this.no = no;
            this.name = name
            this.age = age;
            console.log(typeof this.say);
            //方法
            if (typeof this.say != 'function') {
                Person.prototype.say = function () {
                    console.log(this.name + " 哈哈哈");
                }
            }

            // Person.prototype.walk = function () {
            //     console.log(this.name + " 跑的飞起......");
            // }
        }

DOM的增、删、改、查

找元素
方法
- getElementById
- getElementsByClassName
- getElementsByTagName
- getElementsByName
- querySelector
- querySelectorAll
DOM节点的属性
- childNodes 子节点(文本节点和元素节点)
- children 子节点元素节点
- firstChild
- lastChild
- parentNode
- previousSibling

nextSibling

备注：
节点类型：元素节点、文本节点、属性节点、注释节点.......
节点关系：兄弟、父子

修改页面的样式

获取样式
- 对象.style.样式名行内样式
- getComputedStyle() 获取样式(行内和样式表) 不支持IE8之下
- currentStyle IE低版本
兼容性写法：

//样式的兼容性写法
        // function getStyle(o, property) {
        //     if (window.getComputedStyle) {
        //         return getComputedStyle(o)[property]
        //     }
        //     return o.currentStyle[property]
        // }
        function getStyle(o, property) {
            var tag = 'getComputedStyle' in window
            return tag ? getComputedStyle(o)[property] : o.currentStyle[property]
        }

修改样式
- 节点.style.样式名=值

修改页面的内容

修改文本内容（闭合标签、表单元素）
- innerHTML innerText
- value

属性

获取
- 节点.属性名
- 节点[属性名]
- 节点.getAttribute(属性名)

设置

节点.属性名=值
节点[属性名]=值
节点.setAttribute(属性名,值)

三种属性方案的区别：
	getAttribute和setAttribute可以获取自定义标签属性的值

页面节点操作

创建节点：
- createElement 创建元素节点
- createTextNode 创建文本节点

增

appendChild 末尾追加子元素
insertBefore 指定位置插入元素

var o = document.querySelector("#box")
        var op = document.createElement('p')
        op.innerHTML = 'hello world';
        o.appendChild(op)

        var op1 = document.createElement('p')
        op1.innerHTML = '你好，';
        o.appendChild(op1)

        var myLink=document.createElement("a")
        myLink.href='#'
        myLink.innerHTML='我是超链接'
        // o.appendChild(myLink)
        o.insertBefore(myLink,op1)

删
- removeChild
- remove
改
- replaceChild() 替换

事件

事件的机制：事件不会自动执行，需要触发才可以执行
添加事件
- HTML标签中添加
- 脚本绑定节点.on-事件名注意：不能为同一个节点对象添加多个同名事件
- 绑定
  - addEventListener() 不兼容低版本IE
  - attachEvent()

  /*
            事件兼容性写法
            @nodeObj   事件绑定对象
            @eventName  事件名称(不含on)
            @callback   事件函数
        */
        function addEvent(nodeObj, eventName, callback) {
            if (nodeObj.addEventListener) {         //标准浏览器
                nodeObj.addEventListener(eventName, callback, false);
                return;
            }
            nodeObj.attachEvent('on' + eventName, callback)       //低版本IE
        }

移除事件

removeEventListener
detachEvent
null

 /*
            事件移除兼容性写法
            @nodeObj   事件绑定对象
            @eventName  事件名称(不含on)
            @callback   事件函数
        */
        function removeEvent(nodeObj, eventName, callback) {
            if (nodeObj.removeEventListener) {         //标准浏览器
                nodeObj.removeEventListener(eventName, callback);
                return;
            }
            nodeObj.detachEvent('on' + eventName, callback)       //低版本IE
        }

事件对象、事件流
- 事件对象：是对事件的一个抽象表述。当事件触发时，浏览器会将事件对象传递
- 事件对象的属性：
  - type 事件类型
  - srcElement(IE低版本)/target(标准浏览器) 事件绑定者
  - clientX/clientY
  - pageX/pageY
  - screenX/screenY
  - altKey 是否按下alt键 true/false
  - ctrlKey 是否按下了Ctrl键 true/false
  - keyCode 键码
- 事件对象的兼容性写法：
- ```
    e = e || window.event;
```
  事件流：事件的传递机制（捕获、冒泡）
- 冒泡：
  - 阻止事件冒泡
  - ```
    e ? e.stopPropagation() : window.event.cancelBubble = true
```
  捕获：
- 键盘事件
  - keydown keyup keypress input
- 事件默认行为

   addEventListener()   e.preventDefault()
        节点.事件             return false;
        attachEvent()       e.returnVlaue=false

事件委托 :又可以称为事件代理

将事件委托给父元素，子元素触发事件(冒泡机制)

 box.onclick=function(e){
            // console.log(e.target.nodeName);
            if(e.target.nodeName=='BUTTON'){
                alert("哈哈哈哈，终于知道")
            }
            // alert("我是一个按钮")
        }

        document.querySelector('button').onclick = function () {
            // box.innerHTML =box.innerHTML+ "<button>按钮</button>";
            var btn = document.createElement('button')
            btn.innerHTML = '按钮'
            box.appendChild(btn)
        }

滚轮事件

onmousewheel 谷歌、IE

wheelDelta 上：正值下：负值

 var box = document.querySelector("div");
        box.onmousewheel = function (e) {
            // console.log(e.wheelDelta);//上 正值   下：负值
            // console.log(e.wheelDelta);
            if (e.wheelDelta > 0) {
                console.log(1,this.offsetHeight);
                this.style.height = this.offsetHeight - 5 + 'px'
            } else {
                console.log(2,this.offsetHeight);
                this.style.height = this.offsetHeight + 5 + 'px'
            }
        }

addEventListener("DOMMouseScroll") 火狐

detail 上：负值下：正值

 //火狐
        box.addEventListener("DOMMouseScroll", function (e) {
            // console.log(e.wheelDelta);//上 正值   下：负值
            // console.log(e.detail);      // 上：负值   下：正值
            if (e.detail < 0) {
                console.log(1, this.offsetHeight);
                this.style.height = this.offsetHeight - 5 + 'px'
            } else {
                console.log(2, this.offsetHeight);
                this.style.height = this.offsetHeight + 5 + 'px'
            }
        })

其它事件：

onfocus
onblur
onresize 尺寸改变
....

先new一个对象.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js总结，易错，难记点

1.1 数据类型简单/基本/原始数据类型 number、string、boolean、undefined、null 复杂数据类型 object、Array、function、Date、RegExp..... 区别：在内存中的存储位置基本数据类型的存取都发生在栈内存中引用类型在堆中保存数据，在栈中保存数据在堆中的地址(引用) 1.1.1 数据集类型转换隐式类型转换运算过程、强制类型转换
复制链接

扫一扫