基础概念小结(1)

202 阅读8分钟

数组的概念

    数组是一种数据类型,可以存储多个变量。

内置基本类型和引用类型在内存中存储的区别

    内置类型在内存中只有一块栈空间,存储的是就是数值
    引用类型在内存中有两块空间,一块是栈空间,存储的是堆空间的地址
    一块是new出来的堆空间,存储的是真正的数值

数组的定义

    a.构造方法
        所有的引用类型对象在创建时,必须开辟空间(也就是必须new)
            new是在堆上开辟空间的关键字
            Array代表开辟的空间类
             var arr = new Array(11, 22, 33, 44);
             console.log(arr);
    b.字面量
         var arr = [1, 2, 3, 4]; //系统帮你new
         console.log(arr);

数组元素的访问

    数组名[下标]
    下标是元素的索引
    注意事项:1.从零开始
            2.下标必须为自然数
            3.每两个索引之间相差1
            4.下标可以为变量
            5.下标千万不要越界  0~数组长度长度-1
    数组对象.length:数组的长度

数组的遍历

    对数组的所有元素做相同的操作.依赖于循环实现

多维数组

     一个数组中的元素,依然是一个数组
     多维数组是由一维数组嵌套实现的

冒泡排序-- - 对于数组元素的一种排序方法

    核心思想:两两比较
    外层循环决定趟数:N-1
    内层循环决定每趟的次数:N-i(趟)-1

数组常见的API和属性

    push 尾插  返回值:新数组的长度
    pop 尾删  返回值:被删除的元素
    shift 头删 返回值:被删除的元素;
    unshift 头插 返回值:新数组的长度;
    reverse 倒序 返回值:无(逆序,直接改变原数组)
    splice 返回值:被删除的元素;
        功能:删除数组的某个区间,且用新数组代替,并返回删除的数据
        改变原数组;
    splice(起始位置,偏移量)偏移量指一共几个元素
    slice 返回值:被截取的元素
        功能:数组区间的截取,返回被截取的字符串,元素数组不变
        参数:slice(起始位置,结束位置)左闭右开[2,5)
    concat 返回值:新数组;
        功能:数组的拼接,不会改变原数组
        参数:concat(数组)
    join 返回值:被转换的字符串;
        功能:将数组转为字符串;
        参数:join([分隔符])默认是逗号;

字符串常见的API和属性

    length: 字符串的长度
    charAt(索引):返回索引对应的字符
    charCodeAt(索引):返回索引对应的字符的asc码值
    fromCharCode
        功能:返回asc码对应的字符
        参数:fromCharCode(asc1,asc2...)
        返回值:asc码对应的字符
        注意事项:该方法直接通过类名String调用
    indexOf("字符串"):查找字符串出现的位置,找到返回下标,找不到返回-1
                    只能返回第一次的字符串下标
    lastIndexOf("abc")    查找字符串最后一次出现的位置  如果没找到  返回-1
    replace
        功能:替换,用参数2替换参数1
        参数:replace(被替换字符串,替换的字符串)
        返回值:被替换的字符串
        只能替换一次

截取字符串

    slice
    substring
        参数:[起始位置,结束为止) 左闭右开
    split
        功能:将字符串按分隔符转为数组
        参数:split(分隔符)
        返回值:一个字符串数组

字符串转大写

    console.log("HeiHei".toUpperCase());

字符串转小写

    console.log("HeiHei".toLowerCase());

json对象

    描述数据的一种格式, 将若干繁杂的属性封装为一个整体
    可以直接通过json对象,操作各个属性
    1.定义,由{}括起来的键值对,每两个键值对用逗号分开
        key:value
        注意事项:所有的key请用双引号括起来
    2.属性的访问  常用
        a.通过点运算符访问
            对象名.属性名
        b.下标法
            对象名[key]
        c.为json对象添加新的自定义属性
            对象名.新属性名 = 属性值
        d.json对象的遍历
            每次循环式=时变量代表索引
             for(var 变量 in json对象){
                 循环体
             }
        e.在一个成员方法中使用其他的成员,需要添加前缀this

严格模式-- - 你必须使用定义过的变量

"use strict"修饰的作用域,所有变量必须定义才能使用
    数组的函数indexOf
        功能:查找目标元素
        参数:indexOf(目标元素)
        返回值:找到返回下标,找不到返回-1

回调函数

    回调函数: 一个被当做参数的函数
    为什么需要回调函数
        场景:
            需要使用别人提供的功能模块,但别人的功能模块不能完全实现自己的需求
            需要在别人的模块中调用自己的函数
            但是我们无法打开第三行模块的函数体,不能直接修改第三方的代码
            字符串的定义和创建
            a.字面量
                var str = "hello";
                console.log(str);
                console.log(typeof str);

            b.构造方法
                var str1 = new String("world");
                console.log(str1);
                console.log(typeof str1);

Ascll码表

    65 'A'
    97 'a'
    48 '0'
    32 空格
    13 回车

Math

    Math.floor(参数):向下取整
    Math.ceil(参数):向上取整
    Math.round(参数):四舍五入取整
    Math.sqrt(number) 开平方根
    Math.pow(m,n)  返回m的n次方
    Math.min(1,-2,3,4) 返回N个数最小值
    Math.max(1,-2,3,4) 返回N个数最大值
    Math.abs(number) 返回绝对值
    Math.random():返回0~1的随机数,左闭右开

日期对象

    如何获取年月日时分秒星期几
        getFullYear:获取年
        getMonth 月 0~11
        getDate 日
        getHours 时
        getMinutes 分
        getSeconds 秒
        getDay 星期几 0~6
        toLocaleString按照本地格式打印日期

时间戳

    new Date(时间戳);
        时间戳:距离197011日相差的毫秒数
    Date.parse(日期字符串): 返回时间戳

修改日期对象

    setDate()      //改变Date对象的日期
    setHours()   //改变小时数
    setMinutes()   //改变分钟数
    setMonth()   //改变月份,从0开始
    setSeconds()   //改变秒数
    setFullYear()   //改变年份

三个弹出框

    所有弹出框都具备阻塞行为  弹出框必须下载body体内
        alert("我是一个弹出框");
        prompt([提示信息],[默认值]):返回字符串
        confirm([提示信息]):返回布尔值

两个定时器

    循环定时器:周期性执行回调函数的功能
        setInterval(回调函数,时间间隔):返回值为关闭定时器的钥匙
        clearInterval(钥匙)
    延时定时器
        setTimeout(回调函数,时间间隔):返回值为关闭定时器的钥匙
        clearTimeout(钥匙)

onload延迟加载

    onload延迟加载,整个页面全部执行完后,再去执行事件体的代码

location: 地址对象

    herf:对于地址的读写
    读
        console.log(location.href);
    写:通过js的方式跳转页面
        location.href = "http://www.baidu.com";

window.document

    1.write
        a.拥有HTML字符串解析(如果该字符串打印至页面的时候,可以被当做HTML元素,则该字符串以HTML元素的形式展现)
        b.出现在事件体中,会覆盖原页面
    2.找html元素,转换成js对象
        找单个元素(返回一个元素)
            document.getElementById("ID名"):返回ID对应的元素
            document.querySelector("选择器"):返回ID,类,标签对应的单个元素
        找批量元素(返回数组)
            document.getElementsByTagName("标签名"):批量返回标签名对应的HTML元素,存放在数组中
            document.getElementsByClassName("类名"):批量返回类名对应的HTML元素,存放在数组中
            document.getElementsByName("name名"):批量返回name名对应的HTML元素,存放在数组中
            document.querySelectorAll("选择器");批量返回类或标签对应的元素,存在数组中

Dom节点的遍历: 已知任意dom元素, 可以根据节点遍历的属性访问dom树中的任意节点

    获取dom节点和文本节点(不常用,正常人一般不太关注文本节点)
    firstChild 返回节点的第一个子节点,
                最普遍的用法是访问该元素的文本节点
    lastChild  返回节点的最后一个子节点
    nextSibling 下一个节点
    previousSibling 上一个节点
    ---------------------------------------------------

节点遍历属性总结-- - 元素节点

    父找子
        firstElementChild: 返回节点的第一个子节点, 最普遍的用法是访问该元素的文本节点
        lastElementChild: 返回节点的最后一个子节点
        childNodes: 批量获取父元素的子元素, 存放在数组中, 获取文本和元素节点
        children: 批量获取父元素的子元素, 存放在数组中, 获取元素节点
    兄弟
        nextElementSibling: 下一个节点
        previousElementSibling: 上一个节点
    子找父
        parent: 找父元素
        nodeType: 判断该节点是元素还是文本节点
                1.代表元素节点
                3.代表文本节点

节点的操作

a.创建
            document.createElement("标签名"):返回创建好的dom对象
        b.追加
            父节点.appendChild(子节点)
            document.body.appendChild(oH1);
    删
        被删除元素
        dom.remove()

表格动态创建

    事件头部
    事件体:在页面渲染的时候,并不执行只有当用户触发该事件时,才会去执行事件体的代码
        parentNode:找当前元素的父元素 
    解决方案:
        this:是函数体的内置对象(只能出现在函数体内部),在与事件体连用时,
        this代表触发该事件的对象本身。

各种文本内容

    innerText:将元素的内容获取出来不包括HTML标签
    outerHTML:将自身以及子元素所有的内容都获取出来 包括HTML标签 包括自身标签
    innerHTML:除了自身标签的所有内容,最常用

dom普通属性的读写

    a. 通过点运算符
        读
        console.log(oBox.id);
        写
        oBox.id = "heihei";
    b. 通过getAttribute/setAttribute
        读
        console.log(oBox.getAttribute("id"));
        写
        oBox.setAttribute("id", "haha");
    添加自定义属性
         oBox.aaa = 666;
         console.log(oBox.aaa);

domstyle属性的读写

    写
    dom对象.style.属性名 = 属性值
    读
    只有行内样式可以dom.style.属性名的方式读取数据,非行内样式不行
    非行内样式
        getComputedStyle(dom对象, false)["属性名"];

offset属性的读写

    offset相关属性的读必须用offset读
    读
    读出来的数据都是数字
    写
    加px的字符串