六、最通俗易懂的JavaScript进阶教程（二）
@Author：Runsen
@Date:2020/5/26
学习任东西，先去菜鸟教程
文章目录
- 变量
- 先声明再赋值
- 声明变量的同时赋值
- 同时声明多个变量
- 输出
- 弹出框
- HTML
- 控制台
- 数据类型
- 数字
- 字符串
- 布尔值
- 空
- null：空值
- undefined：未定义
- 符号
- 对象
变量
在JavaScript中，变量是通过var关键字来声明的，声明变量的语法格式如下：
var 变量名=变量值；
其中var是声明变量所用的关键字，通过“=”将值赋值给变量
先声明再赋值
var number； //声明变量number
number=10； //为变量number赋值10
声明变量的同时赋值
var number=10；
同时声明多个变量
var a=1,b=2,c=3;
输出
在JS中我们要怎样把写出的脚本输出在浏览器上面呢？
弹出框
alert（）这是一种弹出框的形式
<script>alert("这是弹出框")
</script>
HTML
document.write() 这是直接把内容输出在html里面，这里是不会覆盖已有的html标签的。
<script>document.write("Runsen")
</script>
document.getElementById(“id”).innerHTML=”xxxx”这是直接把内容输出在标签元素内部，当然在输出之前我们必须要有一个标签(div)。
<div id="text">这是初始Runsen</div>
<script>document.getElementById("text").innerHTML="这是通过JS改变的Runsen"
</script>
控制台
console.log(“xxxx”) 这是前端工程师用的最多的一种输出，我们编写的脚本可以通过这种输出调试。
<script>console.log("这是输出在控制台的Runsen")
</script>
数据类型
JS中数据类型主要为7种，分别为：数字（number），字符串（string），布尔（bool），符号（symbol），空（undefined、null）和对象（object）
简单概括为：四基两空一对象，
数字
Number 类型表示我们通常意义上的“数字”。这个数字大致对应数学中的有理数，当然，在计算机中，我们有一定的精度限制。
常用数据转换方法
- 转数值：parseInt()和parseFloat()。
- 转字符串：.toString()
- 强制转换：访问数据内部内容，并将符合格式的内容进行转换
- Boolean(value) -把给定的值转换成Boolean型，除了0和NaN，其余的都是true。
- Number(value) -把给定的值转换成数字（可以是整数或浮点数）；
- String(value) -把给定的值转换成字符串；
自动带有截断小数的功能：取整，不四舍五入。
例1：
var a = parseInt(5.8) + parseInt(4.7);console.log(a);
控制台输出：
9
例2：
var a = parseInt(5.8 + 4.7);console.log(a);
控制台输出：
10
字符串
var a = "Runsen";
var b = "";
console.log(typeof a);
console.log(typeof b);
控制台输出：
string
string
typeof表示“获取变量的类型”，返回的是小写，语法为：
typeof 变量
布尔值
Boolean 类型有两个值， true 和 false，它用于表示逻辑意义上的真和假，同样有关键字 true 和 false 来表示两个值。这个类型很简单，我就不做过多介绍了。
空
null：空值
专门用来表示一个为空的对象（例如：var a = null）。注意，专门用来表示空对象。
Null类型的值只有一个，就是null。比如：
var a = null。使用 typeof 检查一个null值时，会返回object。
undefined：未定义
声明了一个变量，但是没有赋值（例如：var a;），此时它的值就是undefined。
Undefined类型的值只有一个，就是undefind
使用 type of 检查一个undefined时，会返回undefined。
null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。
但是null === undefined的结果(false)。它们虽然相似，但还是有区别的，其中一个区别是：和数字运算时，10 + null结果为：10；10 + undefined结果为：NaN。
任何数据类型和undefined运算都是NaN;
任何值和null运算，null可看做0运算。
符号
Symbol 是 ES6 中引入的新类型，它是一切非字符串的对象 key 的集合，在 ES6 规范中，整个对象系统被用 Symbol 重塑。Symbol 可以具有字符串类型的描述，但是即使描述相同，Symbol 也不相等。我们创建 Symbol 的方式是使用全局的 Symbol 函数。例如：
var mySymbol = Symbol("my symbol");typeof mySymbol // "symbol"
mySymbol.toString() // "my symbol"
Symbol不能与其他类型的值进行运算，会报错
var sym = Symbol('My symbol');
console.log("your symbol is " + sym) // TypeError: can't convert symbol to string
console.log(`your symbol is ${sym}`) // TypeError: can't convert symbol to string
console.log(2 + sym) // TypeError: can't convert symbol to number
== : 只进行值的比较,会进行数据类型的转换。
=== : 不仅进行值得比较，还要进行数据类型的比较。
let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');
s1 === s2 // true
// 上面代码中，s1和s2都是Symbol值，但是它们都是由同样参数的Symbol.for方法生成的，所以实际上是同一个值。
let s3 = Symbol('foo');
let s4 = Symbol('foo');
s3 === s4 // false
// 由于Symbol()写法没有登记机制，所以每次调用都会返回一个不同的值。
对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行：
var person={firstname : "John",
lastname : "Doe",
id : 5566
};
对象属性有两种寻址方式：
实例
name=person.lastname;
name=person["lastname"];
六、最通俗易懂的JavaScript进阶教程（二）相关推荐
- 最通俗易懂的JavaScript进阶教程
前言:"当你停止尝试时,就是失败的时候."你好!我是梦阳辰.快和我一起继续学习起来吧! 如果你对JavaScript了解甚少,也许下面一篇文章对你有用! 最通俗易懂的JavaScr ...
- javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了"删除& ...
- javascript进阶教程第二章对象案例实战
javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...
- html菜单wodpress,wordpress进阶教程(二十二):初步了解菜单
这篇教程放到本站的进阶教程中来,其实有点不合适,但是我发现很多人对菜单使用不熟,更别提应用了.所以我觉得在写菜单的高级应用之前有必要重新写个基础篇. wordpress 3.5版本中,取消了友情链接项 ...
- JavaScript进阶(十二)JS 模块化编程规范-CommonJS、AMD、CMD、ES6
文章目录 一.前言 二.AMD-异步模块定义 三.CMD-同步模块定义 四.CommonJS 规范 五.ES6 六.拓展阅读 一.前言 AMD.CMD.CommonJs是ES5中提供的模块化编程方案, ...
- JavaScript进阶教程(6)—硬核动图让你轻松弄懂递归与深浅拷贝
目录 一.递归 1.1 概念 1.2 出口 1.3 递归经典问题:递归求斐波那契数列 1.4 递归经典问题:递归求阶乘 1.5 递归求一个数字各个位数上的数字的和 1.6 递归遍历DOM树 二 深浅拷 ...
- JavaScript进阶（二）：BOM对象详解
文章目录 前言 一.Window 对象 1.使用(调用)方式 2.Window 对象的方法 2.1 三个带弹出框的方法 2.2 与打开和关闭有关的方法 2.3 与定时器有关的方法 3.Window 对 ...
- JavaScript进阶（二）-- DOM基础
目录 1. DOM简介 1.1 什么是 DOM 1.2 DOM 树 2. 获取元素 2.1 如何获取页面元素 2.2 根据 ID 获取 2.3 根据标签名获取 2.4 通过 HTML5 新增的方法获取 ...
- 【JavaScript 进阶教程】“原型“与“原型链“【上篇】
文章目录: 一:构造函数 1.1 构造函数使用方法 1.2 构造函数new的执行过程 new 执行过程 1.3 实例成员与静态成员 二: 原型对象 prototype 2.1 为什么有原型对象 2.2 ...
最新文章
- 新的ipad,用xcode编译报错 dyld_shared_cache_extract_dylibs
- python学习笔记(四)、条件、循环及其他语句
- bootstrap获取表格中选中行的值_这才是No.1的Excel表格核对技巧
- QuickStart系列：docker部署之MariaDB
- The 4+1 view model
- 线性独立路径_设计一个线性电源电路，需要准备哪些元器件呢？
- 用html编写你好,02 - HTML5第一个项目：HelloWorld！（收藏）
- python显示时间且更新_python显示当前时间
- minetest Window编译运行
- Spring-cloud Config Server 3种配置方式
- Knowledge Distillation（知识蒸馏）Review--20篇paper回顾
- 论文笔记_S2D.08-2019-ICRA-使用非对称标注实时联合语义分割和深度估计
- Qt 简单的视频播放器
- 阿里云文字转语音接口
- 华为云文字识别服务关键技术、能力和产品落地需要注意的事宜（OCR系列二）
- QT之Button插入图片
- apache2添加网站配置
- 冠层分析法（VCP）提取叶面积指数
- echarts 使用zoom属性的影响
- Mac 安装homebrew