数据类型

计算机世界中的万事成物都是数据。

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型。JavaScript的数据类型，共有六种（Number，String，Boolean，Undefined，Null，Object）。（ES6又新增了第七种Symbol类型的值和第八种Biglnt类型）

注：通过 typeof 关键字检测数据类型

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1)
  </script>
</body>
</html>

数值类型

即我们数学中学习到的数字，可以是整数、小数、正数、负数

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let score = 100 // 正整数
    let price = 12.345 // 小数
    let temperature = -40 // 负数

    document.write(typeof score) // 结果为 number
    document.write(typeof price) // 结果为 number
    document.write(typeof temperature) // 结果为 number
  </script>
</body>
</html>

JavaScript 中的数值类型与数学中的数字是一样的，分为正数、负数、小数等。

字符串类型

通过单引号（ ''）、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

注意事项：

无论单引号或是双引号必须成对使用
单引号/双引号可以互相嵌套，但是不以自已嵌套自已
必要时可以使用转义符 \，输出单引号或双引号
字符串默认只能写在一行内，分成多行将会报错。如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠\。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let user_name = '小明' // 使用单引号
    let gender = "男" // 使用双引号
    let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
    let str1 = '' // 这种情况叫空字符串
		
    documeent.write(typeof user_name) // 结果为 string
    documeent.write(typeof gender) // 结果为 string
    documeent.write(typeof str) // 结果为 string
  </script>
</body>
</html>

length属性

length属性返回字符串的长度，该属性也是无法改变的。

let name = "yage";
console.log(name.length)   // 4

常用方法

charAt()

charAt方法返回指定位置的位置，参数是从0开始编号的。

javascript

var name = "yage";
console.log(name.charAt(1));   // a
console.log(name.charAt(name.length - 1));   // e

如果参数为负数，或大于等于字符串的长度，charAt返回空字符串

concat()

concat方法用于连接两个字符串返回一个新字符串不改变原字符串。

javascript

var str1 = 'Hello';
var str2 = 'World';
var result = str1.concat(str2);
console.log(result)   //HelloWorld

var result2 = str1 + str2;
console.log(result2)  //HelloWorld

做字符串相加，可以不需要使用concat的，可以使用+连接字符串。

concat和加号还是有区别的：

concat不管什么类型直接合并成字符串。
加号是遇到数字类型直接做运算，遇到字符串和字符串相连接。

substring()

substring方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）

javascript

'HelloWorld'.substring(0,2)   // He

// 如果省略第二个参数，则表示子字符串一直到原字符串的结束
'HelloWorld'.substring(2)     // lloWorld

// 如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置
'HelloWorld'.substring(9,2)     // lloWorl

// 如果参数是负数，substring方法会自动将负数转为0
'HelloWorld'.substring(2,-3)     // He

substr()(已弃用)

substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟substring方法的作用相同。

substr方法的第一个参数是子字符串的开始位置(从0开始计算)，第二个参数是子字符串的长度。

const aString = "Mozilla";

console.log(aString.substr(0, 1)); // 'M'
console.log(aString.substr(1, 0)); // ''
console.log(aString.substr(-1, 1)); // 'a'
console.log(aString.substr(1, -1)); // ''
console.log(aString.substr(-3)); // 'lla'
console.log(aString.substr(1)); // 'ozilla'
console.log(aString.substr(-20, 2)); // 'Mo'
console.log(aString.substr(20, 2)); // ''

slice(）

slice() 方法用于提取字符串的子串。它有两个参数，分别表示子串的开始位置和结束位置。参数都是包含的。如果省略了任何一个参数，默认值为0和字符串的长度。

let str = "Hello, World!";  
console.log(str.slice(0))   // "Hello, World!"  
console.log(str.slice(2))   // "llo, World!"  
console.log(str.slice(2, 5));= // "llo"

indexOf()

indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配。

javascript

'hello world'.indexOf('o')     // 4
'hello world'.indexOf('str')   // -1

// indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配
'hello world'.indexOf('o', 6)  // 7

trim()

trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。

javascript

'  hello world  '.trim()        // 'hello world'
'\r\nhello world \t'.trim()     // 'hello world'

该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）

ES6扩展方法，trimStart()和trimEnd()方法，分别去掉起始和结尾的空格。

split()

split方法按照给定规侧分割字符串，返回一个由分割出来的子字符串组成的数组.

javascript

'he|llo|world'.split('|')     // ['he','llo','world']

// 如果分割规侧为空字符串，则返回数组的成员是原字符串的每一个字符。
'a|b|c'.split('')     // ['a','|','b','|','c']

// 如果省略参数，则返回数组的唯一成员就是原字符串
'he|llo|world'.split('|')     // [he|llo|world]

split方法还可以接受第二个参数，限定返回数组的最大成员数。

javascript

'he|llo|world'.split('|', 0)     // []
'he|llo|world'.split('|', 1)     // ['he']
'he|llo|world'.split('|', 2)     // ['he','llo']
'he|llo|world'.split('|', 3)     // ['he','llo','world']
'he|llo|world'.split('|', 4)     // ['he','llo','world']

布尔类型

表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否定的数据用 false。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    //  pink老师帅不帅？回答 是 或 否
    let isCool = true // 是的，摔死了！
    isCool = false // 不，套马杆的汉子！

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>
</html>

undefined

未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>
</html>

注：JavaScript 中变量的值决定了变量的数据类型。

null

null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object。

遍历对象

javascript

let obj = {
    uname: 'pink'
}
for(let k in obj) {
    // k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'
    // obj[k]  属性值    obj['uname']   obj[k]
}

for in 不提倡遍历数组因为 k 是字符串

对象

对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。

语法

声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象语法</title>
</head>
<body>

  <script>
    // 声明字符串类型变量
    let str = 'hello world!'
    
    // 声明数值类型变量
    let num = 199

    // 声明对象类型变量，使用一对花括号
    // user 便是一个对象了，目前它是一个空对象
    let user = {}
  </script>
</body>
</html>

属性和访问

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象语法</title>
</head>
<body>

  <script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象，它包含了一个属性 name
    // 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔
    let person = {
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    }
  </script>
</body>
</html>

声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象语法</title>
</head>
<body>

  <script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象，它包含了一个属性 name
    // 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔
    let person = {
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    };
    
    // 访问人的名字
    console.log(person.name) // 结果为 小明
    // 访问人性别
    console.log(person.gender) // 结果为 男
    // 访问人的身高
    console.log(person['stature']) // 结果为 185
   // 或者
    console.log(person.stature) // 结果同为 185
  </script>
</body>
</html>

扩展：也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象语法</title>
</head>
<body>

  <script>
    // 声明一个空的对象（没有任何属性）
	let user = {}
    // 动态追加属性
    user.name = '小明'
    user['age'] = 18
    
    // 动态添加与直接定义是一样的，只是语法上更灵活
  </script>
</body>
</html>

方法和调用

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象方法</title>
</head>
<body>

  <script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
      singing: function () {
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
  </script>
</body>
</html>

声明对象，并添加了若干方法后，可以使用 . 或 [] 调用对象中函数，我称之为方法调用。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象方法</title>
</head>
<body>

  <script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
      singing: function () {
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
    
    // 调用对象中 singing 方法
    person.singing()
    // 调用对象中的 run 方法
    person.run()

  </script>
</body>
</html>

扩展：也可以动态为对象添加方法，动态添加与直接定义是一样的，只是语法上更灵活。

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象方法</title>
</head>
<body>

  <script>
    // 声明一个空的对象（没有任何属性，也没有任何方法）
	let user = {}
    // 动态追加属性
    user.name = '小明'
    user.['age'] = 18
    
    // 动态添加方法
    user.move = function () {
      console.log('移动一点距离...')
    }
    
  </script>
</body>
</html>

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

内置对象

回想一下我们曾经使用过的 console.log，console其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 log，然后调用 log 这个方法，即 console.log()。

除了 console 对象外，JavaScritp 还有其它的内置的对象

Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

属性

Math.PI，获取圆周率

javascript

// 圆周率
console.log(Math.PI);

方法

Math.random，生成 0 到 1 间的随机数

javascript

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

Math.ceil，数字向上取整

javascript

// 舍弃小数部分，整数部分加1
Math.ceil(3.4)

Math.floor，数字向下取整

javascript

// 舍弃小数部分，整数部分不变
Math.floor(4.68)

Math.round，四舍五入取整

javascript

// 取整，四舍五入原则
Math.round(5.46539)
Math.round(4.849)

Math.max，在一组数中找出最大的

javascript

// 找出最大值
Math.max(10, 21, 7, 24, 13)

Math.min，在一组数中找出最小的

javascript

// 找出最小值
Math.min(24, 18, 6, 19, 21)

Math.pow，幂方法

javascript

// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方

Math.sqrt，平方根

javascript

// 求某数的平方根
Math.sqrt(16)

数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。

数据类型 ​

数值类型 ​

字符串类型 ​

length属性 ​

常用方法 ​

charAt() ​

concat() ​

substring() ​

substr()(已弃用) ​

slice(） ​

indexOf() ​

trim() ​

split() ​

布尔类型 ​

undefined ​

null ​

遍历对象 ​

对象 ​

语法 ​

属性和访问 ​

方法和调用 ​

内置对象 ​

Math ​

属性 ​

方法 ​

数据类型

数值类型

字符串类型

length属性

常用方法

charAt()

concat()

substring()

substr()(已弃用)

slice(）

indexOf()

trim()

split()

布尔类型

undefined

null

遍历对象

对象

语法

属性和访问

方法和调用

内置对象

Math

属性

方法