Javascript简介(全部是基础)

js初识

js是一种解释性语言,不需要编译,直接由浏览器解析执行

组成

  • ECMAScript是一种开放的,被国际上广为接收的,标准的脚本语言规范,主要描述:语法,变量,数据类型,运算符,逻辑控控制语句,关键字保留字,对象,是js的核心以及标准库
  • DOM(Document Object Model):文档对象模型,处理网页内容的方法和接口,用来访问和操作HTML文档
  • BOM(Browser Object Model):浏览器对象模型,规定了操作浏览器的标准,提供了内容与浏览器窗口进行交互的对象,与浏览器进行交互

作用

js的出现使得页面有了交互功能,js的出现才使得网页真正意义上实现了网络的互联和交互。例如淘宝购物,h5小游戏以及一些3D大屏的动态展示,这些都是js在现实网络中的生动体现

引入方式

  • 内部引入:<script>...js代码</script>
  • 外部引入:<script src="./名称.js"></script>
  • 行内直接写
js由上往下,由左往右,由浏览器解析执行
js可以写在html文档的任何地方,一个文档可以写多个script标签
内部引入建议写在body结束标签之前,外部引入写在head标签里面
内部引入和外部引入不能共用一个script标签

常用的三种输出方式

  • 输出到控制台 console.log()
  • 输出到网页 document.write()
  • 弹出警告框 window.alert() 简写为alert(),alert会阻止程序的执行

语法规范

  • 大小写敏感,区分大小写
  • 以换行或者分号分隔语句,建议一行只写一条语句,并以分号结尾
  • 会忽略多余的空格
  • js代码中一定不要出现中文符号

注释

//单行注释

/**
 * 多行注释
 * 多行注释
 */

变量

可以改变的量叫做变量,存储信息的容器,实质就是申请内存。并将该块内存赋值

命名规则

  • 变量名明确区分大小写
  • 变量名可以包含数字、字母、下划线(_)和美元符$
  • 变量名不可以用数字作为开头
  • 变量名不能使用系统关键字和保留字

命名规范

  • 定义变量见名知意
  • 多个单词组成时,驼峰式命名或者-分割

使用

  • 变量声明:var/let/const 变量名称
  • 变量赋值:变量名称 = 值
  • 变量声明并赋值:var/let/const 变量名称 = 值
声明一个变量没有赋值,默认为undefined(未定义),没有声明变量直接输出,则报错
一条语句可以声明多个变量,用逗号,隔开
js中重新赋值,后面的值会替换掉前面的值
var/let/const 三者声明变量的不同在es6专栏介绍

数据类型

分类

  • 基本数据类型
  • 复杂数据类型(引用数据类型)

基本数据类型

Number

包含所有数字(整数,小数,正数,负数,极大极小数,),NaN,Infinity

let intNum = 55 // 10进制的55
let num1 = 070 // 8进制的56
let hexNum1 = 0xA //16进制的10

let floatNum1 = 1.1;
let floatNum2 = 0.1;
let floatNum3 = .1; // 有效,但不推荐
let floatNum = 3.125e7; // 等于 31250000

console.log(0/0); // NaN
console.log(-0/+0); // NaN

 console.log(Number.MAX_VALUE); //1.7976931348623157e+308
 console.log(Number.MAX_SAFE_INTEGER); //9007199254740991
 console.log(Number.EPSILON); //2.220446049250313e-16
 console.log(Number.MIN_SAFE_INTEGER); //-9007199254740991
 console.log(Number.MIN_VALUE); //5e-324
数值最常见的整数类型格式则为十进制,还可以设置八进制(零开头或0O开头)、十六进制(0x开头)
浮点类型则在数值汇总必须包含小数点,还可通过科学计数法表示
在数值类型中,存在一个特殊数值NaN,意为“不是数值”,用于表示本来要返回数值的操作失败了(而不是抛出错误)

String

let firstName = "猿起";
let lastName = '猿落';
let lastName = `猿起猿落`

let lang = "Java";
lang = lang + "Script";  // 先销毁再创建
字符串可以使用双引号(")、单引号(')或反引号(`)标示
字符串是 不可变的,意思是一旦创建,它们的值就不能变了

Boolean

只包含两个值:truefalse

通过Boolean可以将其他类型的数据转化成布尔值,规则如下:

数据类型      				转换为 true 的值      				转换为 false 的值
 String        				 非空字符串          				"" 
 Number 				非零数值(包括无穷值)				0 、 NaN 
 Object 			         任意对象 					null
Undefined 				N/A (不存在) 					undefined

参与数学运算时:true转换为1,false转换为0

Undefined

该类型只有一个值,就是特殊值undefined。当使用varlet声明了变量但没有赋值时,就相当于给变量赋予了undefined

let message;
console.log(message == undefined); // true

包含undefined值的变量跟未定义变量是有区别的

let message; // 这个变量被声明了,只是值为 undefined

console.log(message); // "undefined"
console.log(age); // 没有声明过这个变量,报错

Null

该类型同样只有一个值,即特殊值null

逻辑上讲, null 值表示一个空对象指针,这也是给typeof传一个null会返回"object"的原因

let car = null;
console.log(typeof car); // "object"

undefined值是由null值派生而来

console.log(null == undefined); // true

只要变量要保存对象,而当时又没有那个对象可保存,就可用null来填充该变量,undefined和null表现效果一样,但undefined用于变量(基本)类型,null用于对象类型

null一般用来释放对象的,给对象初始化

Symbol

Symbol (符号)是原始值,且符号实例是唯一、不可变的。符号的用途是确保对象属性使用唯一标识符,不会发生属性冲突的危险,具体见es6专栏

let genericSymbol = Symbol();
let otherGenericSymbol = Symbol();
console.log(genericSymbol == otherGenericSymbol); // false

let fooSymbol = Symbol('foo');
let otherFooSymbol = Symbol('foo');
console.log(fooSymbol == otherFooSymbol); // false

引用类型

复杂类型统称为Object,我们这里主要讲述下面三种

Object

创建Object常用方式为对象字面量表示法,属性名可以是字符串或数值

let person = {
    name: "Nicholas",
    "age": 29,
    5: true
};

console.log(person['5']); //true
键名是数字时,访问用方括号访问

Array

数组是一组有序的数据,但跟其他语言不同的是,数组中每个槽位可以存储任意类型的数据。并且,数组也是动态大小的,会随着数据添加而自动增长

let colors = ["red", 2, {age: 20 }]
colors.push(2)

Function

函数实际上是对象,每个函数都是Function类型的实例,而Function也有属性和方法,跟其他引用类型一样

函数存在三种常见的表达方式:

// 函数声明
function sum (num1, num2) {
    return num1 + num2;
}
//函数表达式
let sum = function(num1, num2) {
    return num1 + num2;
};
//箭头函数
let sum = (num1, num2) => {
    return num1 + num2;
};

除了上述说的三种之外,还包括DateRegExpMapSet等......

类型检测

typeof

返回一个字符串,表示未经计算的操作数的类型

typeof 1 // 'number'
typeof '1' // 'string'
typeof undefined // 'undefined'
typeof true // 'boolean'
typeof Symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} // 'object'
typeof console // 'object'
typeof console.log // 'function'

由以上可知:typeof一般用来判断基本数据类型,虽然typeof nullobject,但这只是JavaScript存在的一个悠久Bug,不代表null就是引用数据类型,并且null本身也不是对象,同时,可以发现引用类型数据,用typeof来判断的话,除了function会被识别出来之外,其余的都输出object

instanceof

运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

构造函数通过new可以实例对象,instanceof能判断这个对象是否是之前那个构造函数生成的对象

// 定义构建函数
let Car = function() {}
let benz = new Car()
benz instanceof Car // true
let car = new String('xxx')
car instanceof String // true
let str = 'xxx'
str instanceof String // false

以上可知:instanceof返回的是一个布尔值,可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型

通用检测数据类型

Object.prototype.toString,调用该方法,统一返回格式“[object Xxx]”的字符串

Object.prototype.toString({})       // "[object Object]"
Object.prototype.toString.call({})  // 同上结果,加上call也ok
Object.prototype.toString.call(1)    // "[object Number]"
Object.prototype.toString.call('1')  // "[object String]"
Object.prototype.toString.call(true)  // "[object Boolean]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call(null)   //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
Object.prototype.toString.call(/123/g)    //"[object RegExp]"
Object.prototype.toString.call(new Date()) //"[object Date]"
Object.prototype.toString.call([])       //"[object Array]"
Object.prototype.toString.call(document)  //"[object HTMLDocument]"
Object.prototype.toString.call(window)   //"[object Window]"

实现一个全局通用的数据类型判断方法

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") {    // 先进行typeof判断,如果是基础数据类型,直接返回
    return type;
  }
  // 对于typeof返回结果是object的,再进行如下的判断,正则返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

使用如下

getType([])     // "Array" typeof []是object,因此toString返回
getType('123')  // "string" typeof 直接返回
getType(window) // "Window" toString返回
getType(null)   // "Null"首字母大写,typeof null是object,需toString来判断
getType(undefined)   // "undefined" typeof 直接返回
getType()            // "undefined" typeof 直接返回
getType(function(){}) // "function" typeof能判断,因此首字母小写
getType(/123/g)      //"RegExp" toString返回

存储区别

声明变量时不同的内存地址分配

  • 基本数据类型存储在
  • 引用类型的对象存储于

不同的类型数据导致赋值变量时的不同

  • 简单类型赋值,是生成相同的值,两个对象对应不同的地址
  • 复杂类型赋值,是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

引用类型数据存放在堆中,每个堆内存对象都有对应的引用地址指向它,引用地址存放在栈中。

var obj1 = {}
var obj2 = obj1;
obj2.name = "Xxx";
console.log(obj1.name); // xxx

下图演示这个引用类型赋值过程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/336487.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

什么是DOM?(JavaScript DOM是什么?)

1、DOM简洁 DOM是js中最重要的一部分&#xff0c;没有DOM就不会通过js实现和用户之间的交互。 window是最大的浏览器对象&#xff0c;在它的下面还有很多子对象&#xff0c;我们要学习的DOM就是window对象下面的document对象 DOM&#xff08;Document Object Model&#xff09…

C++ 学习系列 -- std::function 与 std::bind

一 std::function 与 std::bind 的介绍 1. std::function std::function 是 c 11 的新特性 &#xff0c;包含在头文件<functional>中&#xff0c;为了更方便的调用函数而引入。 std::function 是一个函数包装器&#xff08;function wrapper&#xff09;&#xff0c;…

Cmake(1)——Cmake的基本介绍和原理、Cmake的安装、如何使用Cmake构建项目

Cmake的基本介绍和原理、Cmake的安装、如何使用Cmake构建项目 插播&#xff01;插播&#xff01;插播&#xff01;亲爱的朋友们&#xff0c;我们的Cmake课程上线啦&#xff01;感兴趣的小伙伴可以去下面的链接学习哦~ https://edu.csdn.net/course/detail/39261 1、Cmake的基…

在微信公众号中加入ChatGPT聊天的方法

1 介绍 开源项目 "chatgpt-on-wechat" 支持通过微信公众号进行调用&#xff0c;这意味着用户可以在与公众号的交互中体验 ChatGPT。由于服务是部署在远端服务器上的&#xff0c;因此用户只需拥有一部手机&#xff0c;就可以在任何环境下与 ChatGPT 进行交流。例如&am…

fabric.js 组件 图片上传裁剪并进行自定义区域标记

目录 0. 前言 1. 安装fabric与引入 2. fabric组件的使用 3. 属性相关设置 4. 初始化加载 4. 方法 5. 全代码 0. 前言 利用fabric组件&#xff0c;实现图片上传、图片”裁剪“、自定义的区域标记一系列操作 先放一张效果图吧&#x1f447; 1. 安装fabric与引入 npm i …

Flink(十三)【Flink SQL(上)SqlClient、DDL、查询】

前言 最近在假期实训&#xff0c;但是实在水的不行&#xff0c;三天要学完SSM&#xff0c;实在一言难尽&#xff0c;浪费那时间干什么呢。SSM 之前学了一半&#xff0c;等后面忙完了&#xff0c;再去好好重学一遍&#xff0c;毕竟这玩意真是面试必会的东西。 今天开始学习 Flin…

“GPC爬虫池有用吗?

作为光算科技的独有技术&#xff0c;在深入研究谷歌爬虫推出的一种吸引谷歌爬虫的手段 要知道GPC爬虫池是否有用&#xff0c;就要知道谷歌爬虫这一概念&#xff0c;谷歌作为一个搜索引擎&#xff0c;里面有成百上千亿个网站&#xff0c;对于里面的网站内容&#xff0c;自然不可…

虚拟机安装宝塔的坑

问题&#xff1a; 在虚拟机中centos7和centos8中安装宝塔之后&#xff0c;无法访问面板。 解决&#xff1a; 1.先关闭防火墙&#xff08;如果本机能够ping通相关端口&#xff0c;则不用关闭防火墙&#xff09; 2.最新的宝塔会自动开启ssl协议&#xff0c;需要手动关闭。…

PostgreSQL 是不是大小写敏感

如果你踩过 MySQL 的大坑的话就知道&#xff1a;MySQL 在 Windows 下不区分大小写&#xff0c;但在 Linux 下默认是区分大小写。 如果你稍加不注意就会出现在本机开发的程序运行一切正常&#xff0c;发布到服务器行就出现表名找不到的问题。 这是我们前一个项目遇到的巨大问题…

【力扣4行代码解题】572另一棵树的子树 | C++

总结&#xff1a;本题可以使用递归和迭代法&#xff0c;但平时还是建议两种方法都掌握&#xff0c;感兴趣的同学可以看看原题。 文章目录 1 题目2 知识点3 代码及解释 1 题目 力扣链接 > 572.另一棵树的子树 给你两棵二叉树 root 和 subRoot 。检验 root 中是否包含和 sub…

探索图像检索:从理论到实战的应用

目录 一、引言二、图像检索技术概述图像检索的基本概念图像检索与文本检索的区别特征提取技术相似度计算索引技术 三、图像检索技术代码示例图像特征提取示例相似度计算索引技术 四、图像搜索流程架构数据采集与预处理特征提取相似度计算与排名结果呈现与优化 五、实际应用图像…

基于Java+SSM志愿者服务管理系统详细设计和实现【附源码】

基于JavaSSM志愿者服务管理系统详细设计和实现【附源码】 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系…

线上SQL超时场景分析-MySQL超时之间隙锁

前言 之前遇到过一个由MySQL间隙锁引发线上sql执行超时的场景&#xff0c;记录一下。 背景说明 分布式事务消息表&#xff1a;业务上使用消息表的方式&#xff0c;依赖本地事务&#xff0c;实现了一套分布式事务方案 消息表名&#xff1a;mq_messages 数据量&#xff1a;3000多…

[java基础揉碎]基本数据类型转换

介绍 当java程序在进行赋值或者运算时&#xff0c;精度小的类型自动转换为精度大的数据类型&#xff0c; 这个就是自动类型转换。 数据类型按精度&#xff08;容量&#xff09;大小排序为: 自动类型转换注意和细节 1.有多种类型的数据混合运算时&#xff0c;系统首先自动…

【Linux的权限命令详解】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 shell命令以及运行原理 Linux权限的概念 Linux权限管理 一、什么是权限&#xff1f; 二、权限的本质 三、Linux中的用户 四、linux中文件的权限 4.1、文件访问…

【成本价特惠】招募证书代理:工信部、PMP、阿里云、华为等认证,机会难得!

扫码和我联系 亲爱的读者朋友们&#xff0c; 今天&#xff0c;我想和大家分享一个难得的机会。我们目前正在积极招募各类证书的代理&#xff0c;包括工信部的证书、PMP&#xff08;项目管理专业人士&#xff09;证书、阿里云证书、华为证书、OCP 证书、CFA 证书等。这些证书在…

C++入门学习(七)整型

整型就是整数类型的数据&#xff08;-1&#xff0c;0&#xff0c;1等等&#xff09; 数据类型占用空间取值范围short(短整型)2字节 (-2^15 ~ 2^15-1) 32768~32767 int(整型)4字节(-2^31 ~ 2^31-1)long(长整形) Windows为4字节, Linux为4字节(32位), 8字节(64位) (-2^31 ~ 2^31…

LiteAD对接FusionCompute

2、FA发放云桌面并与FC对接 &#xff08;1&#xff09;创建虚拟机模板 &#xff08;2&#xff09;创建虚拟机命名规则 &#xff08;3&#xff09;创建虚拟机组 &#xff08;4&#xff09;创建桌面组 &#xff08;5&#xff09;创建域用户和组&#xff08;就相当于在Microsoft …

基于SpringBoot Vue家政服务预约平台系统

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…

【linux驱动】详细剖析第一个hello word驱动程序

文章目录 驱动程序的框架驱动程序的使用示例 驱动程序的框架 Linux 驱动的基本框架主要由模块加载函数&#xff0c;模块卸载函数&#xff0c;模块许可证声明&#xff0c;模块参数&#xff0c;模块导出符号&#xff0c;模块作者信息等几部分组成&#xff0c;其中模块参数&#…