JavaScript基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        const person={fname:"Bill",lname:"Gate",age:25};
        let text="";
        for(let x in person){
            text+=person[x]+" ";
        }
        document.getElementById("demo").innerHTML=text;
        </script>
</body>
</html>

运行结果：

对于数组

对索引顺序重要时不使用，最好使用for循环、for of 循环或者Array.forEach()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        let number=[2,56,29,63,23];
        let text="";
        for(let x in number){
            text+=number[x]+" ";
        }
        document.getElementById("demo").innerHTML=text;
        </script>
</body>
</html>

运行结果：

Array.forEach()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        let number=[2,56,29,63,23];
        let text="";
         number.forEach(myfunction);
        document.getElementById("demo").innerHTML=text;
        function myfunction(value){
            text += value+"<br>";
        }
        </script>
</body>
</html>

运行结果：

3.For Of循环

循环遍历可迭代对象的值，例如数组、字符串、映射、节点列表等。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
       const cars = ["BMW", "Volvo", "Mini"];
        let text="";
          for(let x of cars){
            text+=x+"<br>";
          }
        document.getElementById("demo").innerHTML=text;
       
        </script>
</body>
</html>

运行结果：

4. typeof

目的：用来确认数据类型

注：属于运算符不是变量但是会返回字符串

5种不同的可以包含值的数据类型

string、number、boolean、object、function

3种对象类型

Object、Date、Array

2种不能包含值的数据类型

null、undefined

注意：

NaN 的数据类型是数字
数组、日期、null 的数据类型是对象
未定义变量的数据类型为 undefined *
未赋值的变量的数据类型也是 undefined *

三类型转换

1.数值转换为字符串

String()	把数字、布尔、日期转为字符串
toString()	把数字、布尔、日期转为字符串
toExponential()	把数字转为字符串，对数字进行舍入，并用指数计数法来写
toFixed()	把数字转为字符串，对数字进行舍入，并用指定位数的小数来写
toPrecision()	把数字转为字符串，把数字写为指定的长度

2.把字符串转为数值

包含数字的字符串转化为数字，空的字符串转化为0，其他字符串转化为NaN

1.全局方法Number()

2.一元+运算符

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var y="23";
        var x=+y;
        document.getElementById("demo").innerHTML=typeof x+"<br>"+typeof y;
        </script>
</body>
</html>

运行结果：

3.自动类型转换

四.正则表达式

正则表达式是构成搜索模式（search pattern）的字符序列。

语法：/pattern/modifiers;

常用的字符串方法：

search()方法使用表达式来搜索匹配，然后返回匹配的位置。只返回第一个匹配项的索引。

replace()方法返回模式被替换处修改后的字符串。

match()方法返回一个数组，返回所有匹配的结果。

i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

五 Hoisting

提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为。

注：

用 let 或 const 声明的变量和常量不会被提升！

声明会提前，初始化不会

六函数

1.函数声明

function 函数名（）{}

在代码解析阶段被提升到作用域顶部

2.函数表达式

类型函数名 = function（）{}

运行时创建的。

3.箭头函数

语法：函数名 = （参数）=>{函数体}

注：

1.参数为一个可以省略括号，函数体为一句可以省略大括号

2.this 关键字始终表示定义箭头函数的对象。

七类及 JSON

1.类

1.语法

请使用关键字 class 创建类。

请始终添加名为 constructor() 的方法。

2.`constructor()` 方法（构造方法）

它必须拥有确切名称的“构造函数”
创建新对象时自动执行
用于初始化对象属性
如果未定义构造函数方法，JavaScript 会添加空的构造函数方法。

3. 继承

1.用extends 关键字。

2.super() 方法引用父类。

3.getter/setter 方法的名称不能与属性名称相同

4.设置setter属性时不能用（）用对象.函数名=值；

注意：类声明不会提升

4.static方法

static 类方法是在类本身上定义的。

您不能在对象上调用 static 方法，只能在对象类上调用。

3.模板

仅适用于 HTTP(s) 协议

1.意义

模块允许您将代码分解成单独的文件。

2.使用

模块是使用 import 语句从外部文件导入的。

模块还依赖于 <script> 标签中的 type="module"。

3.导出

1）命名导出

创建一个.js的文件

1 逐个内联创建

export const 变量名=值；

2 一次性全部创建

const 变量名=值；

export {变量名}；

2）默认导出

一个文件里只能有一个默认导出

创建.js的文件

4.导出

1.命名导入

import {变量名} from "文件名";

2.默认导入

import 文件 from "文件名";

4.JSON

1.用途：

JSON 是存储和传输数据的格式。

JSON 经常在数据从服务器发送到网页时使用。

2.介绍

JSON 是轻量级的数据交换格式
JSON 独立于语言 *
格式是纯文本，可以在任何编程语言编写的。
格式评估为js对象

3.语法

数据是名称/值对 -------------"名称"：值
数据由逗号分隔
花括号保存对象
方括号保存数组--------------数组可以包含对象

4.把JSON转换为js对象

1.创建包含 JSON 语法的 JavaScript 字符串：

var text = '{ "employees" : [' +
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';

2.用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

3.在页面中使用这个新的 JavaScript 对象：

<!DOCTYPE html>
<html>
<body> 
<p id="demo"></p>

<script>
var text = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"Steve","lastName":"Jobs" },' +
'{"firstName":"Elon","lastName":"Musk" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>