复习-JS

最新推荐文章于 2024-06-24 23:21:12 发布

fina_

最新推荐文章于 2024-06-24 23:21:12 发布

阅读量123

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/fxinn/article/details/110307203

版权

JS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

基础规则

命名规则

小驼峰：变量、方法

大驼峰：类、构造函数

全大写：常量

全小写：css样式类

JS基础

js组成：

DOM+BOM+ECMAScript。(DOM+BOM主要在api阶段学)

输入输出

prompt 输入语句，返回值是字符串

变量

变量声明特殊情况：

不声明不赋值直接使用报错如下图：xxx is not defined

命名规范

重点：驼峰命名法、区分大小写、字母数字下划线美元

数据类型

数字

数字类型

范围：

isNAN

数据类型转换

转换为字符串：

转换为数字：

如果遇到字符开头，parceInt()/parceFloat 会出现NAN

如果但凡遇到字符，Number() 结果都会变成 NAN

运算符

浮点运算问题（浮点运算结果不准确问题）

浮点数判断相等 解决办法：

运算符优先级

流程运算符

判断闰年案例：

switch 与 if-else if-else 的区别：前者效率高

打断点

打断点之后记得刷新一下

循环

while do...while：可以做复杂判断

continue break

数组

创建数组

JS中数组的数组项的类型，数组元素类型没有限制

遍历数组

数组去除指定元素：

反转数组

冒泡排序：

利用sort排序

快速排序：

return:

如果 return 两个值，那么最终返回的是两个中的哪一个呢？返回第二个数。

函数

⭐arguments

arguments作为函数的内置对象，存储函数参数，以伪数组的形式存储

伪数组：

①以索引的方式存储

②具有数组的length属性

③不具有数组的 pop push 等方法

伪数组→数组

①[...伪数组] （ES6）

②Array.from(伪数组) (ES6)

定义函数的方法

① function fn( ) { }

② var fn = function ( ) { } (匿名函数)

③ var fn = ( ) => { } (ES6)

函数调用

①：obj.fn()

②：obj.fn.call({ name: "Tom" })

对象

构造函数

①构造函数要使用new来调用

②构造函数首字母得是大写

③构造函数没有 return ，但是仍然有返回值

new关键字

内置对象

Math对象

ps:中括号参数，表示参数可有可无

Math.PI

Math.max( ) （遇到非数字的会报NAN、如果不传参数就是-infinity）

Date对象

①Date():

如果不传参数，则返回当前时间。如果传参则返回目标时间。注意，传参的时候，前面的new关键字不能丢

②Date.prototype.xxx

getMonth：返回的月份小一个月

getDay：周一对应1，周六对应6，周日对应0

③时间戳

1、时间戳单位毫秒，时间戳除以1000得到秒

2、时间戳可以传参，传递参数的话，返回当时的时间戳
3、

数组对象

判断数组类型：instanceOf instanceof
添加删除数组元素：push unshift pop shift

数组，根据索引查找元素

3. 数组去重

①算法：遍历旧数组，拿旧数组元素查询新数组，如果新数组内没有该元素则添加，否则不添加，

②：我们怎么知道有没有该元素存在？利用新数组 . indexOf(元素) 。如果返回值是-1，则表示新数组内没有该元素。

字符串对象

字符串操作方法：substr (重点)

字符串变数组：split ( 分隔符)
字符串的不可变性：因此尽量不要用字符串拼接

字符串案例

字符串根据索引查找元素：

某个字符出现的位置以及次数

根据位置返回字符

案例：求出现次数最多的字符

核心算法：把每个字符都给到对象的属性，每遇到一次就将属性的值加1

怎么判断对象有没有那个属性？

预解析

预解析之前预解析之后

JS高级

类和对象

创建类

构造函数

constructor 方法是类的构造函数，用于传递参数，返回实例对象，通过new命令生成对象实例时，自动调用该方法。如果没有定义该方法，我们会自动创建一个constructor()

super

super ( ) 调用父类的构造函数，可以传参
super. sing() 调用父类中的普通函数
super必须得在子类this之前调用

调用父类构造函数，这样子构造函数的x,y就指向夫构造函数了，然后子类就可以调用父类的方法了

子类调用父类的普通函数

super必须写在构造函数的最前面

this指向问题

谁调用指向谁，button调用指向button

案例：tab栏切换

思路：1、准备结构 2、将tab抽象成类，将tab栏的操作（曾、删、改、查）抽象成类的方法 3、通过new实例化目标DOM标签 3、在构造函数内获取到目标DOM元素，这样就可以在类里面对DOM元素进行操作了

4、实现tab栏切换功能： ① 在init方法中，给所有导航栏 / 内容页 / 按钮绑定上事件（toggleTabbar函数）、编辑事件...；

② 其次在toggleTabbar函数书写事件

③ 最后在构造函数中调用 init

5、实现添加功能：① 在init方法中，给所有按钮绑定上事件添加事件（addTab函数）...；

② 其次在addTab函数创建元素，添加进DOM元素（注意，添加元素后需要重新获取DOM元素，将重新获取到的DOM元素放到类上）

③ 最后在构造函数中调用 init

注意事项：原生JS必须注意script的书写位置。① 在结构准备好之后引入script标签，② 或者在js文件最开始用入口函数入口函数
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/tab.css">
    <link rel="stylesheet" href="./styles/style.css">
    <script src="./js/tab3.js"></script>
</head>

<body>
    <div class="tabsbox" id="tab">
        <nav class="firstnav">
            <ul>
                <li class="liactive">新闻</li>
                <li>发现</li>
                <li>主页</li>
            </ul>
            <div class="tabadd">
                <button>+1</button>
            </div>
        </nav>
        <div class="tabscon">
            <section class="conactive">新闻页</section>
            <section>发现页</section>
            <section>主页</section>
        </div>
    </div>
</body>

</html>
window.onload = function () {
    var that;
    class Tabbar {
        constructor(id) {
            that = this
            this.main = document.querySelector(id);
            this.lis = this.main.querySelectorAll('li');
            this.sections = this.main.querySelectorAll('section');
            this.addtab=this.main.querySelector('.tabadd')
            this.ul=this.main.querySelector('.firstnav ul')
            this.tabscon=this.main.querySelector('.tabscon')
            this.init()
        }
        init() {
            // 给DOM元素绑定方法
            // console.log(this.lis)
            for (let i = 0; i < this.lis.length; i++) {
                this.lis[i].index = i;
                this.lis[i].onclick = this.toggleTab //区分函数绑定 于 函数调用
            }
            this.addtab.onclick=this.addTab


        }
        toggleTab() {
            // 第i个小li调用的toggleTab，那么this指向第i个小li
            // console.log(that.lis)
            that.clearClass()
            this.className = "liactive"
            that.sections[this.index].className="conactive"
        }
        addTab() {
            that.clearClass()
            let li ='<li class="liactive">新闻</li>'
            let section ='<section class="conactive">'+Math.floor((Math.random())*100)+'</section>'
            that.ul.insertAdjacentHTML('beforeend',li)
            that.tabscon.insertAdjacentHTML('beforeend',section)

            that.lis = that.main.querySelectorAll('li');
            that.sections = that.main.querySelectorAll('section');
            // console.log(that.lis)
            that.init()
         }
        editTab() { }
        clearClass(){
            // console.log(this.lis)
            for (let i = 0; i < this.lis.length; i++) {
                this.lis[i].className=''
                this.sections[i].className=''
            }
        }
    }
    new Tabbar('#tab')
}
new的作用

实例成员静态成员

实例成员：

静态成员：⭐静态成员只能通过过构造函数访问

Prototype

prototype：① 原型是一个对象 ② 原型的作用是共享方法

Constructor构造函数

对象原型、原型对象里面的constructor都是指回自己的构造函数

this指向问题

无论构造函数的this还是原型对象的this都是指向实例化对象

Web-api

fina_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复习-JS

JS基础js组成：DOM+BOM+ECMAScript。(DOM+BOM主要在api阶段学)输入输出prompt 输入语句，返回值是字符串变量变量声明特殊情况：不声明不赋值直接使用报错如下图：xxx is not defined命名规范重点：驼峰命名法、区分大小写、字母数字下划线美元数据类型数字数字类型范围：isNAN数据类型转换转换为字符串：转换为数字：如果遇到字符开头，parceInt()/parce..
复制链接

扫一扫