【JavaScript】快速入门

最新推荐文章于 2024-08-04 16:33:59 发布

Listener-1379

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量132

点赞数 5

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45965358/article/details/120070717

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript的基础知识，包括其组成、特点、编写位置。讲解了数据类型、类型转换、对象、函数、作用域、数组、正则表达式等核心概念，并通过实例演示了如何使用这些概念。此外，还探讨了面向对象编程中的对象分类和操作，以及一些实用的数组方法和正则表达式用法。

摘要由CSDN通过智能技术生成

1.JavaScript的组成

在这里插入图片描述

2.JavaScript的特点

（1）解释性语言
（2）类似于C和Java的语法结构
（3）动态语言
（4）基于原型的面向对象

3.Js编写的位置

（1）可以写到标签当中

<body>
    <button onclick="alert('Hello Js!!!')"></button>
</body>

（2）可以写到头部使用<script></script>包裹起来。

<head>
    <meta charset="UTF-8">
    <title>Js的编写位置</title>
    <script type="text/javascript">
        alert("Hello Js")
    </script>
</head>

（3）引入外部文件

<head>
    <meta charset="UTF-8">
    <title>Js的编写位置</title>
    <script src="myJs.js"></script>
</head>

4.基础知识

4.1注释

单行： //
多行： /* */

4.2基本语法

Js区分大小写。
Js的每一条语句结束之后都要以分号结束。

4.3六种数据类型

String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
(以上五种为基本数据类型)

Object 对象

4.3.1 Number

Infinity 表示正无穷

-Infinity 表示负无穷

NaN 表示Not A Number

Number.MAX_VALUE Js可以表示的最大值

Number.MIN_VALUE Js可以表示的最小值

4.3.2 Boolean

Boolean类型有两个：true 和 false

4.3.3 Null和Undefined

Null类型只有一个值null,表示值为空。

Undefined类型只有一个值为undefined,表示未定义，也就是变量声明了但是没有赋值。

4.4类型转换

4.4.1转成String类型

方式一：调用String()函数。并且将转换的数据作为参数传递给函数。
对于Number和Boolean实际上该方法会调用toString()方法，但是对于null和undefined,就不会调用toString方法。
方法二：调用toString()函数。对于null和undefined,没有toString方法，调用会报错。

4.4.2转成Number类型

纯数字的字符串。
直接转成数字
字符串中有非数字的内容
转换成NaN
字符串是空串或者全部是空格
转换成0
布尔
true 装换成1， false转换成0
NULL
0
Undefined
NaN

注意两个函数 parseInt()和parseFloat()

4.4.3转换成Boolean类型

数字
除了0和NaN,其余的都是true
字符串
除了空串，其余的都是true
null和undefined都会转换为false
对象也会转换为true

4.5代码块

Js中使用{ }来分割代码，{ }中的代码要么全都执行，要么全都不执行。

5.面向对象

5.1对象

5.1.1对象的分类

对象	说明
内建对象	由ES标准中定义的对象在任何ES中的实现都可以使用（比如：Math,String, Number, Boolean, Function, Object）
宿主对象	由Js的运行环境提供的对象，目前来看是浏览器提供的对象
自定义对象	开发人员自定义的对象

5.1.2对象的基本操作

（1）创建对象 new
（2）
修改对象属性：对象.属性名 = 属性值
读取对象属性：对象.属性名
删除对象属性：delete 对象.属性名

注意：如果我们的属性名使用特殊字符，我们的对象属性用法如下：
对象[“属性名”] = 属性值

（3）检查一个对象是否由相对应的属性
对象名 in 对象

5.1.3对象的字面量

{属性名：属性值，属性名：属性值…}

例如：

var obj2 = {
	name="xiaoming",
	age:12,
	gender:"男"
};

5.2函数

5.2.1创建函数

使用函数声明来创建函数：

function 函数名（[形参1， 形参2， 形参3]) {
	语句...
}

使用函数表达式来创建函数：

var fun = function([形参1， 形参2， 形参3]) {
	语句...
}

5.2.2立即执行函数

函数定义完会立即被调用，并且只执行一次。

(function([形参1， 形参2， 形参3]){
	语句...
})()

实例：

	(function(param1, param2) {
          console.log("a= " + param1);
          console.log("b= " + param2);
	})(12, 23)

5.2.3 arguments

在调用函数时，浏览器每次会传递两个隐含的参数：

（1）函数的上下文对象this
（2）封装实参的对象 arguments
arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取数据的长度，在调用函数时，我们所传递的实参都会在arguments中保存，即使不定义形参，也可以通过arguments来使用形参。

<script type="text/javascript">
    function fun(){
        console.log(arguments[0], arguments[1]);
    }
    fun(12, "xiaoming");
</script>

在这里插入图片描述

5.3作用域

5.3.1全局作用域

在这里插入图片描述

5.3.2函数作用域

在这里插入图片描述

5.4数组

5.4.1四个方法

push():在数组的末尾添加一个元素
pop():删除数组的最后一个元素
shift():删除数组的第一个元素
unshift():添加一个元素在数组的头部

 <script type="text/javascript">
        var arr = ["xiaoli", "xiaoming", "daming", "xiaoming"];
        console.log(arr)
        arr.push("one");
        console.log(arr)
        arr.pop();
        console.log(arr)
        arr.shift();
        console.log(arr)
        arr.unshift("xiaoming");
        console.log(arr)
    </script>

在这里插入图片描述

5.4.2 forEach

 <script type="text/javascript">
        var arr = ["xiaoli", "xiaoming", "daming", "xiaoming"];
        arr.forEach(function(value, index, object){
            console.log("值为：" + value);
            console.log("下标为：" + index);
            console.log("正在遍历的数组为：" + object);
        })
</script>

在这里插入图片描述

5.4.3Array对象的其他方法

在这里插入图片描述

6.正则表达式

6.1基本使用

创建正则表达式对象：var 变量 = new RegExp("正则表达式" ，"匹配模式")；
匹配模式：i表示忽略大小写，g表示全局匹配模式

使用：test()方法

     <script type="text/javascript">
        var reg = new RegExp("a");
        var str = "a";
        var result = reg.test(str);
        console.log(result);
    </script>

在这里插入图片描述

6.2字符串和正则表达式相关方法

（1）split

    <script type="text/javascript">
        var reg = new RegExp("s");
         var str = "asdcszdcdvfedsgreddx";
        var result = str.split(reg);
        console.log(result);
    </script>

在这里插入图片描述
(2)search

    <script type="text/javascript">
        var reg = new RegExp("d");
        var str = "asdcszdcdvfedsgreddx";
        var result = str.search(reg)
        console.log(result);
    </script>

在这里插入图片描述
(3)replace
第一个参数是要替换的内容，第二个参数是新的内容，默认情况下只会替换第一个匹配到的。

    <script type="text/javascript">
        var str = "asdcszdcdvfedsgreddx";
        var result = str.replace("d", "$$");
        console.log(result);
    </script>

在这里插入图片描述
邮箱验证实例：

<script type="text/javascript">
        var emailReg = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
        var email = "1234567898@qq.com";
        console.log(emailReg.test(email));
</script>

在这里插入图片描述

作者：Beyong　　　　
出处：Beyong博客
github地址：https://github.com/beyong2019

本博客中未标明转载的文章归作者Beyong有，欢迎转载，但未经作者同意必须保留此段声明，且在文章明显位置给出原文连接，否则保留追究法律责任的权利。

Listener-1379

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】快速入门

文章目录1.JavaScript的组成2.JavaScript的特点3.Js编写的位置4.基础知识4.1注释4.2基本语法4.3六种数据类型4.3.1 Number4.3.2 Boolean4.3.3 Null和Undefined1.JavaScript的组成2.JavaScript的特点（1）解释性语言（2）类似于C和Java的语法结构（3）动态语言（4）基于原型的面向对象3.Js编写的位置（1）可以写到标签当中<body> <button onclick="
复制链接

扫一扫