诗与远方、醉梦黄粱

终究让与了陈米于糟糠

——Lungcen

JS变量定义和赋值

var关键字（全局变量）

let （局部变量）和 const （常量）

JS数据类型

typeof 操作符

JS 基本数据类型

String类型

Number 类型

Boolean 类型

Null 类型

Undefined 类型

Symbol 类型

各个类型的隐式转换

JS 引用数据类型

Object 类型

Array 类型

Function 类型

JS输出

alert() 函数

confirm() 函数

console.log()

document.write()

innerHTML

JS变量定义和赋值

在 JavaScript 中，变量名称并不能随便定义，需要遵循标识符的命名规则：

变量名中可以包含数字、字母、下划线_、美元符号$；

变量名中不能出现汉字；

变量名中不能包含空格；

变量名不能是 JavaScript 中的关键字、保留字；

变量名不能以数字开头，即第一个字符不能为数字。

当变量名中包含多个英文单词时，推荐使用驼峰命名法：

大驼峰：每个单词首字母大写，例如 FileType、DataArr

小驼峰：第一个单词首字母小写后面的单词首字母大写，例如 fileType、dataArr

var关键字（全局变量）

var num = 1;
var变量可以发生变量提升，就是声明的变量都会被提升到代码的头部
    <script>document.write(str); //显示undefinedvar str = "hhh";document.write(str); //显示 hhh</script>
在上面这个例子中，str的定义在第一行的后面，按理来说，第一行应该报错显示没有定义变量，但是由于var可以出现变量提升，所以第一行显示是未定义（可以理解为未赋值）。

let （局部变量）和 const （常量）

2015 年以前，JavaScript 只能通过 var 关键字来声明变量，在 ECMAScript6（ES6）发布之后，新增了 let 和 const 两个关键字来声明变量

使用 let 关键字声明的变量只在其所在的代码块中有效（类似于局部变量），并且在这个代码块中，同名的变量不能重复声明；

const 关键字的功能和 let 相同，但使用 const 关键字声明的变量还具备另外一个特点，那就是 const 关键字定义的变量，一旦定义，就不能修改（即使用 const 关键字定义的为常量）

JS数据类型

JavaScript 是一种动态类型的弱语言，在定义变量时不需要提前指定变量的类型，变量的类型是在程序运行过程中由 JavaScript 引擎动态决定的，所以可以使用同一个变量来存储不同类型的数据

JavaScript 中的数据类型可以分为两种类型：

基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol(新增的)；

引用数据类型：对象（Object）、数组（Array）、函数（Function）。

typeof 操作符

当你不知道数据的类型，你可以使用 typeof 来返回变量的数据类型，typeof 操作符有带括号和不带括号两种用法
typeof x;       // 获取变量 x 的数据类型
typeof(x);      // 获取变量 x 的数据类型

JS 基本数据类型

String类型

字符串（String）类型是一段以单引号''或双引号""包裹起来的文本
var str1 = "Hello"
var str2 = new String("Hello")
字符串转换为数值，由于数值类型有两个，所以字符串转换数值也有两个方法，需要注意的是，只有是纯数值的字符串才可以进行转换，不然会报错

parseInt可以转换为int，如果参数是小数，就直接省略小数部分。

parseFloat可以转换为float
var str1 = "110.011"var str2 = parseInt(str1)var str3 = parseFloat(str1)console.log(str2)console.log(str3)
字符串中有些方法是可以转换大小写：

大写的转成小写：str1.toLowerCase()

小写的转成大写：str1.toUpperCase()
var str1 = "abcABC"console.log(str1.toUpperCase())console.log(str1.toLowerCase())
获取所需目标的字符串出现的位置，方法的参数可以是一个字符，也可以是一个字符串：

获取字符串出现第一次的位置：str1.indexOf("a")

获取字符串最后一次出现的位置：str1.lastIndexOf("a")
var str1 = "abcABCabcABCabcABC"console.log(str1.indexOf("a"))console.log(str1.lastIndexOf("a"))
拆分字符串，split（），里面的参数是分隔符，方法可以根据你的分隔符来拆分字符串
    var str1 = "abc_ABC_abc_ABC_abc_ABC"var str2 = str1.split("_")console.log(str2)

Number 类型

数值（Number）类型用来定义数值，JavaScript 中不区分整数和小数（浮点数），统一使用 Number 类型表示，但是Number能定义的值也不是无限的。

JavaScript的底层全是浮点数，在使用的过程中会之自动转换为小数或整数

Number 类型中还有一些比较特殊的值，分别为 Infinity、-Infinity 和 NaN，其中

Infinity：用来表示正无穷大的数值，一般指大于 1.7976931348623157e+308 的数；

-Infinity：用来表示负无穷大的数值，一般指小于 5e-324 的数；

NaN：即非数值（Not a Number 的缩写），用来表示无效或未定义的数学运算结构，例如 0 除以 0。

isNaN(x)，意思是判断是不是一个非数值。返回值是true或者false

Boolean 类型

布尔（Boolean）类型只有两个值，true（真）或者 false（假），还可以通过一些表达式来得到布尔类型的值

Null 类型

Null 是一个只有一个值的特殊数据类型，表示一个“空”值，即不存在任何值，什么都没有，用来定义空对象指针。

使用 typeof 操作符可以查看 Null 的类型，会发现 Null 的类型为 Object，说明 Null 其实使用属于 Object（对象）的一个特殊值。因此通过将变量赋值为 Null 我们可以创建一个空的对象。

Undefined 类型

Undefined 也是一个只有一个值的特殊数据类型，表示未定义。当我们声明一个变量但未给变量赋值时，这个变量的默认值就是 Undefined

使用 typeof 操作符查看未赋值的变量类型时，会发现它们的类型也是 undefined

对于未声明的变量，使用 typeof 操作符查看其类型会发现，未声明的变量也是 undefined

Symbol 类型

Symbol 是 ECMAScript6 中引入的一种新的数据类型，表示独一无二的值，Symbol 类型的值需要使用 Symbol() 函数来生成

各个类型的隐式转换

1、数值类型

转字符串：直接转。例如：var s = "abc" + 18，输入s是："abc18"

转布尔值：0和NaN转false，其他转true

2、布尔值类型

转字符串：直接转。类似数值转字符串

转数值：true为1，false为0

3、字符串类型

转数值：能转就转，不能就转NaN。任何数值和NaN进行的运算结果都是NaN

转布尔值：空字符串为false，其他都是true

4、为定义类型

转字符串：直接转

转布尔值：false

转数值：NaN

5、null

转字符串：直接转

转布尔值：false

转数值：0

JS 引用数据类型

Object 类型

JavaScript 中的对象（Object）类型是一组由键、值组成的无序集合，定义对象类型需要使用花括号{ }

var date = new Date Date是内置的方法

var obj = new Object

object.name = "张三" 不一定要是name，可以是其他的

{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}
var datas = [{name: '贾静雯', subject: 'JavaScript', score: 100}, {name: '赵敏', subject: 'HTML', score: 98}, {name: '贾静雯', subject: 'CSS', score: 99}];
获取某一行：datas[i]
获取某一个：datas[i]["value"]  value 对应就是 name 或者 subject 或者 score
var person = {name: 'Bob', age: 20, tags: ['js', 'web', 'mobile'],city: 'Beijing', hasCar: true, zipcode: null };console.log(person.name);       // 输出 Bob
console.log(person.age);        // 输出 20
对象类型的键都是字符串类型的，值则可以是任意数据类型。要获取对象中的某个值，可以使用 对象名.键 的形式

Array 类型

数组（Array）是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号[ ]，数组中的每个元素使用逗号进行分隔
[1, 2, 3, 'hello', true, null]
var arr = new Array(1, 2, 3, 4);
数组中的元素可以通过索引来访问。数组中的索引从 0 开始，并依次递增，也就是说数组第一个元素的索引为 0，第二个元素的索引为 1，第三个元素的索引为 2，以此类推

Function 类型

函数（Function）是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行
function sayHello(name){return "Hello, " + name;
}
var res = sayHello("Peter");

JS输出

使用 alert() 函数来弹出提示框；

使用 confirm() 函数来弹出一个对话框；

使用 document.write() 方法将内容写入到 HTML 文档中；

使用 innerHTML 将内容写入到 HTML 标签中；

使用 console.log() 在浏览器的控制台输出内容。

alert() 函数

alert() 函数可以在浏览器中弹出一个提示框，在提示框中我们可以定义要输出的内容，t() 中只能输出文本内容。

alert() 函数是 window 对象下的一个函数，所以有时为了代码更严谨，我们也可以使用 window.alert() 的形式来调用 alert() 函数。

confirm() 函数

confirm() 函数也是 window 对象下的函数，同样可以在浏览器窗口弹出一个提示框，不同的是，使用 confirm() 函数创建的提示框中，除了包含一个“确定”按钮外，还有一个“取消”按钮。如果点击“确定”按钮，那么 confirm() 函数会返回一个布尔值 true，如果点击“取消”按钮，那么 confirm() 函数会返回一个布尔值 false。

console.log()

console.log() 可以在浏览器的控制台输出信息，要看到 console.log() 的输出内容需要先打开浏览器的控制台

document.write()

document.write() 可以向 HTML 文档中写入 HTML 或者 JavaScript 代码

innerHTML

innerHTML 是一个属性而不是一个函数，通过它可以设置或者获取指定 HTML 标签中的内容
<body><div id="demo"> JavaScript 输出</div>
</body>
<script>var demo = document.getElementById("demo");console.log(demo.innerHTML);demo.innerHTML = "<h2>innerHTML</h2>";
</script>

诗与远方、醉梦黄粱

终究让与了陈米于糟糠

——Lungcen

前端开发——JavaScript的数据类型和引用类型相关推荐

前端开发：转换数据类型
前言在前端开发过程中,关于数据的处理是非常重要的技能,不管是从后台获取到的数据还是需要提交给后台的数据,都要根据实际业务需求来进行二次处理,然后再进行使用.前端实际开发总关于数据类型的转换使用也是必 ...
第二章前端开发——JavaScript
第二章前端开发学习--JavaScript 一.初识JavaScript 二.JavaScript基础三.JavaScript数据类型四.JavaScript运算符五.JavaScript流程 ...
五、前端开发-JavaScript基础
五.前端开发语言体系-JavaScript基础文章目录五.前端开发语言体系-JavaScript基础 JavaScript基础变量.值和类型运算符和表达式语句数组函数和对象严格模式类 ...
八、前端开发-JavaScript 客户端存储
八.前端开发语言体系-JavaScript 客户端存储文章目录八.前端开发语言体系-JavaScript 客户端存储 JavaScript 客户端存储客户端存储简介 Cookie LocalSt ...
七、前端开发-JavaScript HTTP
七.前端开发语言体系-JavaScript HTTP 文章目录七.前端开发语言体系-JavaScript HTTP JavaScript AJAX AJAX简介 AJAX-XMLHttp AJAX请 ...
六、前端开发-JavaScript DOM
六.前端开发语言体系-JavaScript DOM 文章目录六.前端开发语言体系-JavaScript DOM JavaScript DOM DOM简介 DOM方法 DOM事件 DOM事件监听器 D ...
前端之 JavaScript 常用数据类型和操作
JavaScript 常用数据类型有:数字.字符串.布尔.Null.Undefined.对象 JavaScript 拥有动态类型 JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型 ...
广州蓝景分享—前端开发JavaScript中的Array对象与其他数组
各位小伙伴好,今天我们广州蓝景与大家分享一些前端技术知识. JavaScript中的Array对象与其他编程语言中的数组一样,可以将多个项目的集合存储在单个变量名下,并具有用于执行常见数组操作的成员. ...
购物网站前台后台思维导图_【思维导图】前端开发JavaScript巩固你的JavaScript知识体系(网站同步更新)...
JavaScript基础语法网站同步更新:http://www.dadaqianduan.cn/#/%E5%89%8D%E7%AB%AF%E5%A4%8D%E7%9B%98%E8%AF%BE/Jav ...

前端开发——JavaScript的数据类型和引用类型

JS变量定义和赋值

var关键字（全局变量）

let （局部变量）和 const （常量）

JS数据类型

typeof 操作符

JS 基本数据类型

String类型

Number 类型

Boolean 类型

Null 类型

Undefined 类型

Symbol 类型

各个类型的隐式转换

JS 引用数据类型

Object 类型

Array 类型

Function 类型

JS输出

alert() 函数

confirm() 函数

console.log()

document.write()

innerHTML

前端开发——JavaScript的数据类型和引用类型相关推荐

最新文章

热门文章