JS--数据类型

一、number

常见的Number类型都有哪些？

• 整数（整型）
  • 如：1，-1
  • 怎么判断一个值是否为整型？
    • Number.isInteger(1) // true
    • Number.isInteger(1.1) // false
  • 其他类型怎么转整型？
    • parseInt('1') // 1
    • parseInt('1.1') // 1
    • parseInt('1.9') // 1
    • parseInt('1a') // 1
    • parseInt('a1') // NaN
    • parseInt('.9') // NaN
    • parseInt('0.9') // 0
  • 真假倾向：只有0为false其他均为true
    • !!0 // false
    • !!1 // true
    • !!0.1 // true
    • !!-1 // true
• 小数（浮点数）
  • 如：0.1，1.1，.1 如果小于1，小数点前的0可以省略
  • 其他类型转浮点数
    • parseFloat('1') // 1
    • parseFloat('1.0') // 1
    • parseFloat('1.1') // 1.1
    • parseFloat('1.1a') // 1.1
    • parseFloat('a1.1') // NaN
    • parseFloat('.1') // 0.1
• NaN
  • 一枚奇葩的'Number'类型
  • NaN 不是一个数（Not a Number）
  • 对，它不是一个数，然后它还是种数字类型。(O_o)???
  • 一般在出错或不可预料的结果中出现，如：'a' * 'b'，0 / 0
  • NaN === NaN // false 永不相等
  • 判断是否为NaN可以使用isNaN()函数
    • isNaN(1) // false
    • isNaN(0 / 0) // true

Tips

• 在其他类型前加+可以快速将其转换为数字类型

  +'1' // 1
  
  +'' // 0
  
  +'1.1' // 1.1
  
  +true // 1
  
  +false // 0

二、String

如何定义一段字符串？

很简单，用引号包起来就好

• "yo" 双引号
• 'yo' 单引号
• 在JS中单双引号没有任何区别 "yo" === 'yo' // true
• `我是个模板字符串，我叫 ${name} ` 使用`（反引号）定义模板字符串，可以传入变量，还可以直接断行

常用方法

获得字符串中的某一个字符

'yo'.charAt(0); // "y" 程序员是从0开始数的
'yo'.charAt(1); // "o"
'yo'[0]; // "y"

检查一段字符是否包含另一段字符

'花花你好'.includes('花花'); // true
'花花你好'.includes('拴蛋'); // false

用字符串将字符串分割为数组

'花花→_→拴蛋→_→背背'.split('→_→'); // ["花花", "拴蛋", "背背"]

连接字符串

'y'.concat('ooo', 'oo', 'o'); // "yoooooo"，依次连接传入的字符，传参数量不限

截取字符串

var str = '王花花和小熊跳舞跳呀跳呀一二一'; 
str.slice(3, 8); // "和小熊跳舞"，第一个传参为开始索引，第二个传参为结束索引-1
str.slice(3); // "和小熊跳舞跳呀跳呀一二一"，若省略第二个传参将会截取至最后一个字符

.trim 移除两头的空格

'  yo  '.trim(); // "yo"
'  yo'.trim(); // "yo"

注意

• 不加引号的字符会被JS认为是变量，所以字符串一定是加引号的

  var greet = yo;  // ReferenceError（引用错误） 变量yo没有定义

• 单双引号定义的字符串不可直接断行，断行可以需使用加号连接

  '他好
  我也好' // SyntaxError（语法错误）
  // -----------------------
  '他好' +
  '我也好' // '他好我也好'

• 字符串与数字运算时需要格外小心

  '1' + 1 // "11" 坑
  1 + "1" // 11
  1 + "1" // 11
  2 * "2" // 4 
  "2" * 2  // 4 

 三、 Object

为什么会有这种类型？

因为好组织。

举个栗子：

// 第一种写法
var 人名 = '王花花';
var 狗的年龄 = 3;
var 人的年龄 = 20;
var 狗的职业 = '保卫员';
var 人的部门 = '序员鼓励部';
var 狗名 = '李拴蛋';
var 人的职业 = '序员鼓励师';
var 狗的部门 = '序员保卫处';

// 第二种写法
var 花花 = {
  姓名: '王花花',
  年龄: 20,
  职业: '序员鼓励师',
  部门: '序员鼓励部',
};
var 拴蛋 = {
  姓名: '李拴蛋',
  年龄: 3,
  职业: '保卫员',
  部门: '序员保卫处',
};

哪一种更清楚？

一目了然。

而且对象中还可以嵌套对象，这就更强大了

var 花花 = {
  姓名: '王花花',
  年龄: 20,
  职业: '序员鼓励师',
  部门: '序员鼓励部',
  服务于: {
    姓名: '程续缘',
    技术: 'PHP'
  }
};

语法

定义对象

首先是花括号

var 对象 = {

}

左边是键(key，或者叫属性名)右边是值(value)，每一组用英文逗号隔开

var 对象 = {
  键1: '值1',
  键2: '值2'
}

键名一般使用英文和数字，其实使用任何字符都可以，只不过当键名中有空格和特殊字符是外部需要加引号包住

{
  'yo yo yo': 'Mu Ha Ha'
}

获取对象中的属性

可以使用.来获取属性

var obj = {
  a: 1
}

obj.a // 1

嵌套的对象也没问题

var obj = {
  a: 1,
  b: 2,
    c: {
      c1: 666
    }
}

obj.c.c1 // 666

那如果有奇葩的键名怎么办？

var obj = {
  'a b 

四、Array

语法

定义数组

首先是中括号（方括号）

[]

里面的每一项叫元素 (element)

[2, 4, 6]

元素类型不限

[
  2, 
  true,
  'a', 
  {}, 
  function() {}
]

还能嵌套

[ 1, ['a', 'b', 'c']]
[[[[[[[[['yo']]]]]]]]] // 就是有这种操作

获取元素

每一个元素都有一个用于定位的索引 (index；也就是元素的身份证号，从0开始)

var 排排坐 = [
  'a', // 0 程序员是从0开始数的
  'b', // 1
  'c', // 2
  'd', // 3
  // ...
];

知道索引就能获取元素

// 一维数组
var 排排坐 = ['a', 'b', 'c'];
排排坐[0] // 'a'
排排坐[1] // 'b'
排排坐[2] // 'c'

// 多维数组
var 各种排排坐 = [['a1', 'a2'], ['b1', 'b2'], ['c1', ['c2']]];
各种排排坐[0][0] // 'a1'
各种排排坐[1][0] // 'b1'
各种排排坐[2][0] // 'c1'

各种排排坐[0][1] // 'a2'
各种排排坐[1][1] // 'b2'
各种排排坐[2][1][0] // 'c2'

通过.length获取数组的长度（里面有几个元素）

[5, 10, 15].length // 3

常用方法

.push(新元素) 从末尾添加

var arr = [3, 4, 5];
arr.push(6); // 4 返回修改后的长度
console.log(arr); // [3, 4, 5, 6]

.unshift(新元素) 从开头添加

var arr = [3, 4, 5];
arr.unshift(2); // 4 返回修改后的长度
console.log(arr); // [2, 3, 4, 5]

.pop() 从末尾删

var arr = [3, 4, 5, 6];
arr.pop(); // 6 返回被删除的数
console.log(arr); // [3, 4, 5]

.shift() 从开头删

var arr = [2, 3, 4, 5];
arr.shift(); // 2 返回被删除的数
console.log(arr); // [3, 4, 5]

.reverse() 颠倒顺序

[1, 2, 3].reverse(); // [3, 2, 1]

.splice(从哪剪, 剪多长, 替换元素1, 替换元素2) 剪接

var 片儿 = ['a', 'b', '辣鸡1', '辣鸡2', 'c'];
// 从第3格开始剪，剪2格
片儿.splice(2, 2); // ["辣鸡1", "辣鸡2"] 返回减掉的东西
console.log(片儿); // ["a", "b", "c"]

// 注意，现在片儿已经剪成了['a', 'b', 'c']
// 从第2格开始剪，剪1格，进两个广告
片儿.splice(1, 1, '广告1', '广告2');
console.log(片儿); // ["a", "广告1", "广告2", "c"]

.slice(从哪剪，在哪停) 剪裁

返回剪裁的新数组，不影响原数组。

var 片儿 = ['a', 'b', '辣鸡1', '辣鸡2', 'c'];
// 从第3格开始剪，剪2格
var 垃圾堆 = 片儿.slice(2, 4); // ["辣鸡1", "辣鸡2"] 返回减掉的东西
console.log(垃圾堆); // ["辣鸡1", "辣鸡2"]

.forEach(回调函数) 迭代

['a', 'b', 'c'].forEach(function(每一条, 索引) { 
  console.log('第' + 索引 + '条：' + 每一条);
});

//------Console------
// 第0条：a
// 第1条：b
// 第2条：c

.filter(回调函数) 过滤器

通过你给他的条件返回一个新数组

var 旧数组 = [1, 2, 3, 4];
var 新数组 = 旧数组.filter(
  // 传入一个函数，每迭代一个元素就执行一次
  function(元素, 索引, 原始数组) {
    // 只要大于2的元素
    var 条件 = 元素 > 2;
    return 条件;
  }
);

console.log(新数组); // [3, 4]

.every(回调函数) 每一条

每一条都满足你给的条件

var 满足 = [1, 2, 3].every(
  // 传入一个函数，每迭代一个元素就执行一次
  function(元素, 索引, 原始数组) {
    // 是否小于10
    var 条件 = 元素 < 10;
    return 条件;
  }
);
/*只有当所有条件都满足时才返回true*/
console.log(满足); // t

五、null

使用

• null只有在需要明确指定（或清空）一个量时才使用，如删除用户介绍：user.intro = null。
• null只能手动设置，JS本身不会将任何量的默认值设为null。

注意

typeof null 会返回 "object"

为什么会这样？

JS设计者的锅，工作没做好，仅此而已。

那为什么一直都不改？

Web生态中已经有太多代码依赖着这个bug，不敢修，只能错下去。

null是个"假值"

if(null) {
  // 这里永远都不会执行
}

六、undefined

"undefined"这个词的字面意思是"未定义"，好的，那我声明一个变量

var a; 
console.log(a); // undefined

a为什么是undefined？？？

"因为你那叫声明不叫定义，你还没赋值呢，如果你没赋值，那它肯定是未定义呀"

OK，我来赋值

var a = undefined; // 这里竟然成功赋值了！
console.log(a); // undefined

也就是说我可以把它定义为未定义

注意

undefined == null 返回 true

undefined是个"假值"

if(undefined) {
  // 这里永远都不会执行
}