JavaScript基本使用

JS

let const var

var是ES5变量声明方式

1. 在变量未赋值时，变量为undefined(为使用声明变量时也为nudefined)
2. 作用域—var的作用域为方法作用域，只要在方法内定义了，整个方法内的定义变量后的代码都可以使用

let是ES6变量方式

1. 在变量为声明前直接使用会所报错
2. 作用域—let为块作用域—通常let比var范围小
3. let禁止重复声明变量，否则会报错，var可以重复声明

const是ES6变量声明方式

1. const常用声明方式，声明变量时，必须初始化，后面不能再对该常量值进行修改
2. 保存变量指向地址不得改动

数据类型

基本数据类型：

Number String Boole null undefined symbol bigint(后两个为ES6新增)

注意是：null值返回是Object值

引用数据类型：

object function

遍历方式

方式一：map和forEack区别

相同点：都是循环遍历数据中每一项

不同点：

• map会分配内存空间存储新数组并返回，forEach()不会返回数据
• forEach()允许callback更改原始数据元素，map返回新的数组

方式二：for..of是ES6新增遍历方法：只限迭代器（iterator）所以普通对象用for..of遍历是会报错的

可迭代的对象：包括Array Map Set String TypedArray arguments对象

索引

语法：str.indexOf(searchValue,[fromIndex])

参考：searchValue：要被查找的字符串值

注意是：fromIndex是可选的，如果找到则返回指定的索引值，如果找不到返回-1

如果fromIndex的值小于0，或者大于str.length，那么查找分别从0和str.length开始（注：fromIndex的值小于0，等同于为空情况，fromIndex的值大于或者str.length，那么结果返回-1）

例如：hello world IndexOf('o',-5)返回4，因为它是从位置0处开始查找，然后o在位置4处被找到，另一面hello world.IndexOf('o',11)(或者fromIndex填入任何大于11的值)将会返回-1，因为开始查找的位置是11处，已经是这个字符串的结尾了

强制类型转换

1.转换成String

转换成字符串的有三种方式：toString() String() 拼串

注意是：null和undefined这两个值没有toString方法，如果调用它们的方法，会报错的

2.转换成Number

有三个函数可以把非数值转换为数值：Number() 【可以用来转换任意类型的数据】 parseInt() 【只会将字符串转换成整数】parseFloat()【可以将字符串转换成浮点数】

方式一：使用Number()函数

字符串 --> 数字

• 如果是纯数字的字符串，则直接将其转换为数字
• 如果字符串中有非数字的内容，则转换为NaN如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
• 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

布尔 --> 数字

• true 转成 1
• false 转成 0

null --> 数字

• null 转成 0

undefined --> 数字

• undefined 转成 NaN

3.转换Boolena类型

将其它数据类型转换成Boolena，只能使用Boolena函数

• 使用Boolena()函数
  • 数字 --> 布尔
    • 除了0和NaN，其余的都是true
  • 字符串 --> 布尔
    • 除了空串，其余都是true
  • null和undefined都会转换为false
    • 对象也会转换成true

运算符【重点】

运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果

比如：typeOf就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串形式返回(number string boolen undefined 【返回的都是小写字母的】)

比较运算符

==或!=：如果比较的类型不同，先进行类型的转换，再进行比较

===：做全等运算

• 用来判断两个值是否全等，它和相等类似，不同的是它不会自动类型转换，如果两个值的类型不同，直接返回false

对象基础相关操作

    <script>
        // 创建对象方式一：
        var person = new Object();
        person.name="海康";
        person.age=20;
        console.log(person);

        // 创建对象方式二：
        var per = {
            name:"湛江",
            age:21
        };
        console.log(per);


        //  方式一：获取对象的属性：对象名.属性名
        console.log(per.age);

        // 方式二：对象名['属性名']
        console.log(person['name']);

        // 删除属性：
        delete per.age;
    </script>

RegExp对象

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取将字符串中符合规则的内容

注意是：使用typeo检查正则对象，会返回object

方式一：使用对象创建:

语法格式：

var 变量名 = new RegExp("正则表达式","匹配模式");

匹配模式：

• i：忽略大小写
• g：全局匹配模式
• ig：忽略大小写全局匹配模式

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = new RegExp("ab", "i");
var str = "Abc";
var result = reg.test(str);
console.log(result);
// 返回true

方式二：使用字面量创建

语法：

var 变量名 = /正则表达式/匹配模式;

匹配模式：

• i：忽略大小写
• g：全局匹配模式
• m：执行多行匹配

注意是：可以为一个正则表达式设置多个匹配模式，且顺序无所谓

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a/i;
var str = "Abc";
var result = reg.test(str);
console.log(result);

// 返回true

正则方法：

split()方法：该方法可以将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数

match()方法：该方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下我们的match()只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓，match()会将匹配到的内容装到到一个数组中返回，即使只查询到一个结果

replace()方法：该方法可以将字符串中指定内容替换成新的内容，默认只会替换第一个，但是可以设置全局替换全部

• 第一个参数：被替换的内容，可以接受一个正则表达式作为参数
• 第二个参数：新的内容

var str = "1a2a3a4a5e6f7A8B9C";
var result = str.replace(/[a-z]/gi, "@_@");
console.log(result);

DOM概述【重点】

当网页被加载时，浏览器会创建页面的文档对象模型，HTML DOM模型被结构化为对象树

说明HTML DOM是关于如何获取，更改，添加或删除HTML元素的标准

节点概述：

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为一个节点

比如：HTML标签，属性，文本，注释，整个文档等都是一个节点

都是节点，但是实际上它们的具体类型是不同的

比如：标签我们称为元素节点，属性称为属性节点，文本称为文本节点，文档称为文档节点，节点类型不同，属性和方法也都不尽相同

节点：Node是构成HTML文档最基本的单元

常用节点分类为四类：

• 文档节点：整个HTML文档
• 元素节点：HTML文档中的HTML标签
• 属性节点：元素的属性
• 文本节点：HTML标签中的文本内容

**1.文档节点：**文档节点Document代表的是整个HTML文档，网页中的所有节点都是它的子节点

**2.元素节点：**HTML中的各种标签都是元素节点Element，也是最常用的节点

浏览器会将页面中所有的标签都转换为一个元素节点，我们可以通过document方法来获取元素节点

例如：docment.getElementById(); 根据ID属性值获取一个元素节点对象

**3.属性节点：**属性节点Attribute表示的是标签中的一个一个属性，这里注意是节点并非是元素节点的子节点，而是元素节点的一部分，可以通过元素节点来获取指定的属性节点。

例如：元素节点.getAttributeNode("属性名"); 根据元素节点属性名获取一个属性节点对象

**4.文本节点：**文本节点Text表示是HMTL标签以外的文本内容，任意非HTML的文本都文本节点，它包括可以字面解释纯文本内容，文本节点一般作为元素节点的子节点存在，获取文本节点时，一般先要取元素节点，在通过元素节点获取文本节点

例如：元素节点.firstchild;获取元素节点的第一个子节点，一般为文本节点

查找 HTML元素

方法介绍：

方法	作用
document.getElementById(id)	通过元素ID获取元素
document.getElementByName()	获取指定名称的标签元素，返回数组
document.getElementsByTagName(name)	通过标签名来获取元素，返回是数组
document.getElementsByClassName(name)	通过类名来获取元素，返回是数组
document.querySelector(CSS选择器)	通过CSS选择器一个元素
document.querySelectAll(CSS选择器)	通过CSS选择器选择多个元素

获取HTML的值

方法介绍：

方法	作用
元素节点.innerText	获取HTML元素的InnerText【如：<button id="but">我是按钮</buton>返回是：我是按钮】
元素节点.innerHTML	获取HTML元素的innerHMTL【如：<div><p>我是湛江</p></div>返回是：<p>我是湛江</p>】
元素节点.属性	获取HTML元素的属性值【如：<a href="htps://www.baidu.com>百度</a>" a.href返回htps://www.baidu.com 】
元素节点.getAttibut(attibut)	获取HTML元素的属性值【如：<a href="htps://www.baidu.com>百度</a>" getAttibut(attibut)返回htps://www.baidu.com 】
元素节点.style.样式	获取HTML元素的行内样式值

返回：100px

改变HTML的值

方法介绍：

方法	作用
元素节点.innerText=new text content	改变元素的innerText
元素节点.innerHTML = new html content	改变元素的innerHTML
元素节点.属性=new value	改变HTML元素的属性值
元素节点.setAttribut(attribut,value)	改变HTML元素的属性值
元素节点.style.样式=new style	改变HTML元素的行内样式值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">我是按钮</button>
    <script>
        var btn = document.getElementById("btn");
        btn.innerText = "我是Javascript的按钮";
        alert(btn);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">我是一个DIV</div>

    <script>
        var box = document.getElementById("box");
        box.innerHTML = "<h1>我是BOX中的最大标题</h1>"
    </script>
</body>
</html>

方式一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="" id="a">打开百度翻译</a>

    <script>
        // 给 href属性添加值
        var aHref = document.getElementById("a");
        aHref.href = "https://fanyi.baidu.com/";
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="" id="a">打开百度翻译</a>

    <script>
        // 给 href属性添加值
        var aHref = document.getElementById("a");
        aHref.setAttribute("href","https://fanyi.baidu.com/");
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box" style="width:100px; height:200px; background:red" >我是湛江</div>
    <script>
        var box = document.getElementById("box");
        box.style.background = "green";
    </script>
</body>
</html>

修改HTML元素

方法介绍：

方法	作用
document.createElement(element)	创建HTML元素节点
document.createAttribut(attribute)	创建HTML属性节点
document.createTextNode(text)	创建HTML文本节点
元素节点.removeChild(element)	删除HTML元素
元素节点.appendChild(element)	添加HTML元素
元素节点.replaceChild(element)	替换HTML元素
元素节点.insertBefore(element)	在指定的子节点前面插入新的子节点

查找HTML父子

方法介绍：：

方法	作用
元素节点.parentNode	返回元素的父节点
元素节点.parentElement	返回元素的父元素
元素节点.childNodes	返回元素的一个子节的数组（包含空白文本Text节点）
元素节点.children	返回元素的一个子元素的集合（不包含空白文本Text节点）
元素节点.firstChild	返回元素的第一个子节点（包含空白文本Text节点）
元素节点.firstElementChild	返回元素的第一个子元素（不包含空白文本Test节点）
元素节点.lastChild	返回元素的最后一个子节点（包含空白文本Text节点）
元素节点.lastElementChild	返回元素的最后一个子元素（不包含空白文本Text节点）
元素节点.previousSibling	返回某个元素紧接之前节点（包含空白文本Text节点）
元素节点.previousElementSibling	返回指定元素的前一个兄弟（相同节点树层中的前一个元素节点）