js核心基本语法（全面）

1.NaN

isNaN()：非数（not number），可确定值是否为非数字，是非数字（不是数字）输出true，不是非数（是数字）输出fluse

NaN

表示 “不是一个数字”，但是 NaN 的 typeof 结果却是

number

2.replace方法

x.replace（原文本需要更改的部分，被更改为）

3.外部文件：可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<script src="myScript.js"></script>
注释：myFunction 保存在名为 "myScript.js" 的外部文件中。

4.对象也是一个变量，但对象可以包含多个变量，每个值以 name:value 对呈现。

var car = {name:"Fiat", model:500, color:"white"};

5.对象方法作为一个函数定义存储在对象属性中。对象也是变量，但是对象包含多个变量属性

对象方法是一个函数定义,并作为一个属性值存储。

var person = {
    firstName: "John",
    lastName : "Doe",
    fullName : function() //对象方法（作为函数定义储存在对象属性中）
    {
       return this.firstName + " " + this.lastName;
    }

对象方法通过添加 () 调用 (作为一个函数)。

接上：
document.getElementById("demo").innerHTML = person.fullName();

6.作用域是可访问变量的集合。

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

function myFunction() {
    carName = "Volvo";//没有使用给关键字var，为全局变量
}

7.Math.random()

是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值

8.for/in 语句循环遍历对象的属性

function myFunction(){
    var x;
    var txt;
    var person={fname:"Bill",lname:"Gates",age:56}; 
    for (x in person){
        txt=txt + person[x];//结果：BillGates56
    }

9.do/while 循环：

该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：

do
{
    需要执行的代码
}
while (条件);

10.break和continue的区别：

break：break 语句可用于跳出循环。

continue：continue 语句中断当前的循环中的迭代，然后继续循环下一个迭代

11.typeof(数据类型）和indexOf（返回指定字符串在字符串中首次出现的位置）

typeof 操作符来检测变量的数据类型

数组是一种特殊的对象类型。因此 typeof [1,2,3,4] 返回 object。

使用typeof检测：对象{ }和数组[ ]的数据类型都是object(对象)

null 值为空，但是数据类型是object。 undefined值为 undefined, 类型为 undefined。

typeof 一个没有值的变量会返回 undefined

null 和 undefined 的值相等，但类型不等：

typeof undefined // undefined

typeof null // object

null === undefined // false

null == undefined // true

12.js的 6 种不同的数据类型：

string
number
boolean
object
function
symbol

13.js三种对象类型：

Object
Date：数据类型为object
Array：数据类型为object

2 个不包含任何值的数据类型：

null：数据类型为object
undefined：数据类型为undefined

NaN：数据类型为number

14。强转为数字

：字符串包含数字(如 "3.14") 转换为数字 (如 3.14)。空字符串转换为 0。其他的字符串会转换为 NaN (不是个数字)。

Number("3.14") // 返回 3.14 Number(" ")   // 返回 0 Number("")   // 返回 0 Number("99 88") // 返回 NaN

15.变量后跟一个+：变量的数据类型会转换为数字型

将布尔值转换为数字

全局方法 Number() 可将布尔值转换为数字：

Number(false)   // 返回 0 Number(true)   // 返回 1

日期方法 getTime()和Number() 都可将日期转换为数字：d = new Date(); Number(d) d.getTime()

16.正则基础

正则表达式可以匹配某些特定的数据，可以从庞大的文字信息中提取出一小段你需要的数据

（1）字符组（

[]

）允许匹配一组可能出现的字符。匹配

Java

和

java

：[Jj]ava

（2）**连字符

(-)

代表区间.**

匹配数据所有的数字、小写字母和大写字母:[0-9a-zA-Z]

（3）在正则中使用

就可以进行对特殊符号进行转义匹配-：-

（4）[]字符组中可以放多个条件例如，想要匹配数字和小写字母可以这样写：[0-9a-z]

（5）字符串开头使用^实现取反

在字符数组开头使用

字符实现取反操作 n【^e】的意思就是

后面的字母不能为 e

（6）\w:任意字符

\w:与任意单词字符匹配：即【0-9】，【a-z】，【A-Z】，_(下划线)

（7）\d:与任意数字匹配

（8）\s:匹配空格

\s

快捷方式可以匹配空白字符，比如空格，tab、换行等。

（9）\s【^D】：空白字符后面不跟D

（10）

\b

匹配的是单词的边界

（11）快捷方法取反：小写改大写

快捷方式也可以取反，例如对于

\w

的取反为

\W

，将小写改写成大写即可，其他快捷方式也遵循这个规则。

（12）^区间内取反，^区间外表字符串开始

^在区间里面是取反，在区间外边表示一个字符串的开始 ^字符串

（13）$表示字符串结尾

在区间外部后边写$,表示一个字符串的结尾字符串$

（14）.为任意字符

.是任意字符，只能出现在方括号之外，

字符只有一个不能匹配的字符，也就是换行符（

\n

）

（15）？是可选字符

，字符后加？，表示该字符可出现可不出现，即？用于匹配它之前的字符

次或

次

（16）{M，N}：重复区间

不知道具体要匹配字符组要重复的次数时使用重复区间，语法：

{M,N}

，

是下界而

是上界

\d{3,4}

既可以匹配

个数字也可以匹配

个数字，不过当有

个数字的时候，优先匹配的是

个数字，这是因为正则表达式默认是贪婪模式，即尽可能的匹配更多字符，而要使用非贪婪模式，我们要在**表达式后面加上

号**。

（17）开区间：\d{n,} 闭区间不写即可表示匹配一个或无数个。

匹配

个到无数个，使用

代表

个到无数个

等价于

{1,}

，

等价于

{0,}

。

正则总结：
实例描述

[Pp]ython

匹配 “Python” 或 “python”。

rub[ye]

匹配 “ruby” 或 “rube”。

[abcdef]

匹配中括号内的任意一个字母。

[0-9]

匹配任何数字。类似于 [0123456789]。

[a-z]

匹配任何小写字母。

[A-Z]

匹配任何大写字母。

[a-zA-Z0-9]

匹配任何字母及数字。

[^au]

除了au字母以外的所有字符。

[^0-9]

匹配除了数字外的字符。实例描述.匹配除 “\n” 之外的任何单个字符。要匹配包括 ‘\n’ 在内的任何字符，请使用象 ‘[.\n]’ 的模式。？匹配一个字符零次或一次，另一个作用是非贪婪模式+匹配1次或多次*匹配0次或多次\b匹配单词的边界\d匹配一个数字字符。等价于 [0-9]。匹配多个数字字符：\d{n}\D匹配一个非数字字符，等价于 0-9。\s匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。\S匹配任何非空白字符。等价于 \f\n\r\t\v。\w匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’。\W匹配任何非单词字符。等价于 ‘A-Za-z0-9_‘。
17.正则进阶：

（1）使用（）提取分组：

提取分组使用

()

即可，分组的功能——

捕获数据

（2）|是或者

或者：使用分组的同时还可以使用或者，即|

例如：正则表达式提取所有的视频文件的后缀 \w{0,8}(.mp4|.avi|.wmv|.rmvb)

（3）非捕获分组(?:表达式)，可使用可不用

当并不需要捕获某个分组的内容，但是又想使用分组的特性的时候就可以使用非捕获组

(?:表达式)

，从而不捕获数据，还能使用分组的功能。此时也可以使用|

（4）分组使用技巧：

(\d{4})[-./\s]?(\d{1,2})[-./\s]?(\d{1,2})

就可以从文本中将年月日分别提取出来了。

[-./\s]

表示匹配三个可能出现的分隔符

-./

和

空白

，

表示匹配它们

次或者

次，其他年月日的数据使用

\d{N}

与分组结合就可以提取到目标数据。

（5）分组的回溯引用：

代码0123< font >提示< /font >abcd 的正则表达式为：<\w+> .*? </\w+>

他的回溯引用为：<\w+> (.*?) </\1>

分组的回溯引用，使用**

\N

**可以引用编号为

的分组

18.抛出（throw）错误（err）

错误：当错误发生时，js会生成一个错误消息，即JavaScript 将抛出（throw）一个错误。

try 语句测试代码块的错误。

catch 语句处理错误。 try 和 catch 是成对出现的

throw 语句创建自定义错误，结束处理。

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

（1）err/error：错误。

err对象属性（是固定属性）：err.name(设置或返回一个错误名）和err.message（设置或返回一个错误信息）

var txt=""; 
function message() 
{ 
    try { //测试错误
        adddlert("Welcome guest!"); 
    } catch(err) { //处理显示错误，抛出错误
        txt="本页有一个错误。\n\n"; 
        txt+="错误描述：" + err.message + "\n\n"; 
        txt+="点击确定继续。\n\n"; 
        alert(txt); 
    } 
}

<button type="button" onclick="myFunction()">点我</button>
<p id="p01"></p>
<script>
function myFunction() {
  var message, x;
  message = document.getElementById("p01");
  message.innerHTML = "";
  x = document.getElementById("demo").value;
  try { 
    if(x == "") throw "值是空的";
    if(isNaN(x)) throw "值不是一个数字";
    x = Number(x);
    if(x > 10) throw "太大";
    if(x < 5) throw "太小";
  }
  catch(err) {
    message.innerHTML = "错误: " + err + ".";
  }
}
</script>

18.变量提升：只有声明的变量可以提升，初始化过的变量无法提升

19.switch case 语句

switch case 语句：判断一个变量与一系列值中某个值是否相等，每个值称为一个分支

switch(expression){
    case value :
       //语句
       break; //可选
    case value :
       //语句
       break; //可选
    //你可以有任意数量的case语句
    default : //可选
       //语句
}

switch case 执行时，一定会先进行匹配，匹配成功返回当前 case 的值，再根据是否有 break，判断是否继续输出，或是跳出判断。

switch 语句会使用恒等计算符(===)进行比较，如果进行比较的两字符数据类型不相等，返回false

20.加法与连接：数字1+数字2输出加法，数字1+字符1=两字符连接。

1+2=3，1+“2”=12

21.出现return，自动默认结束语句，返回值

22.数组不支持使用名字作为索引，只支持使用数字进行索引，对象使用名字进行索引

定义数组元素时，数组最后不能添加逗号。var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。

23.表单验证：

<script>
function validateForm() {//表单验证的方法函数
//document.forms，获取页面表单
    var x = document.forms["myForm"]["fname"].value;//获取表单输入的值，处理input输入的值
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;//阻止表单提交
    }
}
</script>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>

注释：form name="myForm":name值为“myForm”的表单
    action="demo_form.php":发送表单数据到文件中,连接外部文件（处理输入）
    οnsubmit="return validateForm()":onsubmit会在表单中的确认按钮被点击时发生（手动验证表单）
    表单自动验证：required="required"：点击提交按钮，如果输入框是空的，浏览器会提示错误信息。 如果表单字段 (fname) 的值为空, required 属性会阻止表单提交
    method="post"表示表单中的数据以post方法传递。Form提供了两种数据传输的方式——get和post。

indexOf() 和lastIndexOf() 方法：

indexOf() 方法：可返回某个指定的字符串值在字符串中首次出现的位置，如果要检索的字符串值没有出现，则该方法返回 -1。

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。如果要检索的字符串值没有出现，则该方法返回 -1。

24.API约束验证：约束验证 API用于在将值提交到服务器之前检查用户已输入到表单控件中的值。

<input id="id1" type="number" min="100" max="300" required>
var demo = document.getElementById("id1");
if (demo.checkValidity() == false) {//checkValidity()如果 input 元素中的数据是合法的返回 true，否则返回 false。
   document.getElementById("demo").innerHTML = demo.validationMessage;//validationMessage:浏览器提示错误信息
        }

25.let和const

let：let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

const：const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后的值不可再修改，const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象属性或者数组是可变的

const不能对常量对象/数组重新赋值，但是可以对常量数组进行修改

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

const 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用。

26.id定位：

< a href="#pos">点我定位到指定位置!

< p id="pos">尾部定位点

27.异步编程

：setTimeout(第一个参数是个回调函数(箭头函数），第二个参数是毫秒数)

回调函数：
setTimeout(function () {
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
箭头函数：
setTimeout(()=> {
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);

28.函数自调用

：表达式后面紧跟 () ，则会自动调用

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

29.函数显式参数在函数定义时列出。函数隐式参数在函数调用时传递给函数真正的值。

函数可以自带参数

<script>
function myFunction(x, y = 10) {
    // 如果不传入参数 y ，则其默认值为 10
    return x + y;
}
// 输出 2
document.getElementById("demo1").innerHTML = myFunction(0, 2) ;
// 输出 15, y 参数的默认值
document.getElementById("demo2").innerHTML = myFunction(5);
</script>

30.arguments:通过索引引用参数的类数组对象

arguments：类似于数组，arguments对象是所有函数中可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。当我们不确定有多少个参数传递的时候，可以用 arguments 来获取。在 JavaScript 中，arguments 实际上它是当前函数的一个内置对象。

所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参。

arguments展示形式是一个伪数组，具有 length 属性，可以进行遍历。

如果一个函数传递了三个参数，你可以以如下方式引用他们：

arguments[0]
arguments[1]
arguments[2]

31.闭包：

在一个函数内部定义另外一个函数，并且返回内部函数或者立即执行内部函数。

内部函数可以读取外部函数定义的局部变量

如果我们在js中写的方法都是全局的方法，在需要嵌入到别人的界面中的时候，这些全局的东西很可能会和别人的东西重名从而引发错误，所以说需要用js闭包包起来。

我的理解是，闭包就是能够读取其他函数内部变量的函数。

32.constructor()：类的构造函数

类：类是用于创建对象的模板。使用 class 关键字来创建类，类体在一对大括号 {} 中， {} 中定义类成员的位置，如方法或构造函数。

每个类中包含了一个特殊的方法 **constructor()**，即类的构造器，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。使用前没有声明会报错

<script>

  class Runoob {
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}//创建了一个名为Runoob的类，初始化了name和url两个属性
let site = new Runoob("菜鸟教程",  "http://www.runoob.com");//定义好类之后使用new创建对象
document.getElementById("demo").innerHTML =
site.name + "：" + site.url;//对象可以使用类中初始化的属性
</script>

构造方法是一种特殊的方法：

构造方法名为 constructor()。

构造方法在创建新对象时会自动执行。

构造方法用于初始化对象属性。

如果不定义构造方法，JavaScript 会自动添加一个空的构造方法。

类声明和类表达式的主体都执行在严格模式下，不能使用没有声明的变量

33.super类继承

类继承：类继承使用extends关键字，super（）方法调用父类的构造函数，

// 基类
class Animal {
    // eat() 函数
    // sleep() 函数
};
 
 
//派生类
class Dog extends Animal {
    // bark() 函数
};
super() 方法引用父类的构造方法。
通过在构造方法中调用 super() 方法，我们调用了父类的构造方法，这样就可以访问父类的属性和方法
class Runoob extends Site {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

setter和getter

setter和getter：getter是获取属性的方法，setter是设置属性的方法。

class Runoob {
  constructor(name) {
    this.sitename = name;
  }
  get s_name() {
    return this.sitename;
  }
  set s_name(x) {
    this.sitename = x;
  }
}
 
let noob = new Runoob("菜鸟教程");
 
document.getElementById("demo").innerHTML = noob.s_name;

静态方法

静态方法：静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，但不属于对象，在实例化对象之前可以通过 类名.方法名 调用静态方法。静态方法不能在对象上调用，只能在类中调用。实例对象调用静态方法会报错，如果你想在实例对象中使用静态方法，可以将实例对象作为一个参数传递给静态方法

标签： javascript 前端开发语言

本文转载自: https://blog.csdn.net/weixin_60941411/article/details/130038711
版权归原作者 czy陈泽宇 所有，如有侵权，请联系我们删除。

js核心基本语法（全面）

发表评论

“js核心基本语法（全面）”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航