JavaScript——数据类型详解

1.1、字符串

1.1.1、字符串语法

1、正常字符串我们使用用''或""括起来的字符表示。

如果如果'本身也是一个字符，那就可以用""括起来

测试代码：

var a = "I"+"'"+"m"+" "+"Ok"

效果：

如果字符串内部既包含'又包含"怎么办？可以用转义字符\来标识，比如：I'm "OK"!，我们可以用转义字符

测试代码：

var a ='I\'m \"OK\"!';

效果：

2、注意转义字符（）

\'  表示它是一个字符串
\n  换行
\t  空格
\u4e2d  \u#### Unicode字符
\x41          Ascll字符
\\      表示字符就是\

3、多行字符串编写（``）

由于多行字符串用\n写起来比较费事，所以最新的ES6标准新增了一种多行字符串的表示方法，用反引号 ** ... ** 表示：

测试代码：

var msg = 
    `hello
world
你好呀
`

效果：

注意：反引号在键盘的ESC下方，数字键1的左边：

4、模板字符串（$）

要把多个字符串连接起来，可以用+号连接：

测试代码：

var name = '小明';
var age = 20;
var message = '你好, ' + name + ', 你今年' + age + '岁了!';
alert(message);

效果：

如果有很多变量需要连接，用+号就比较麻烦。ES6新增了一种模板字符串，表示方法和上面的多行字符串一样，但是它会自动替换字符串中的变量.

测试代码：

var name = '姜嘉航';
    var age = 18;
    var message = `你好, ${name}, 你今年${age}岁了!`;
    alert(message);

效果：

1.1.2、操作字符串

1、获取字符串长度

测试代码：

var s = 'Hello, world!';
s.length; // 13

2、获取子串某个指定位置的字符

测试代码：

//使用类似Array的下标操作，索引号从0开始
var s = 'Hello, world!';
s[0]; // 'H'
s[6]; // ' '
s[7]; // 'w'
s[12]; // '!'
s[13]; // undefined 超出范围的索引不会报错，但一律返回undefined

3、字符串的可变性（不可变）

如果对字符串的某个索引赋值，不会有任何错误，但是，也没有任何效果

测试代码：

var s = 'Test';
s[0] = 'X';//给'T'赋值为'X'
alert(s); // s仍然为'Test'

效果：

4、大小写转换

测试代码：

var student = 'jjh'
console.log(student.toUpperCase())  //JJH
console.log(student.toLowerCase())  //jjh

5、获取指定字符的下标

测试代码：

var student = 'jjh'
console.log(student.indexOf('h'))   //2

6、截取字符串（含头不含尾）

测试代码：

var s = 'hello, world'
s.substring(0, 5); // 从索引0开始到5（不包括5），返回'hello'
s.substring(7); // 从索引7开始到结束，返回'world'

效果：

1.2、数组

1.2.1、Array的特性

1.Array可以包含任意的数据类型，并通过索引来访问每个元素。

测试代码：

var arr = [1, 2, 3.14, 'Hello', null, true];//通过下标取值和赋值
arr[0] = 1

2.Array可以通过索引把对应的元素修改为新的值

测试代码：

var arr = ['A', 'B', 'C'];
arr[1] = 99;
arr; // arr现在变为['A', 99, 'C']

注意：如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化。大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript的Array却不会有任何错误。编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。

测试代码：

var arr = [1, 2, 3];
arr[5] = 'x';
arr;   // arr变为[1, 2, 3, empty × 2, "x"]

1.2.2、操作数组

1、长度

测试代码：

var arr = [1, 2, 3.14, 'Hello', null, true];
arr.length; // 6

注意：加入给 arr.length 赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

测试代码：

var arr = [1, 2, 3];
arr.length; // 3
arr.length = 6;
arr; // arr变为[1, 2, 3, empty × 3]
arr.length = 2;
arr; // arr变为[1, 2]

效果：

2、indexOf（）：通过元素获得下标索引

测试代码：

var arr = [10, 20, '30', 'xyz'];
arr.indexOf(10); // 元素10的索引为0
arr.indexOf(20); // 元素20的索引为1
arr.indexOf(30); // 元素30没有找到，返回-1
arr.indexOf('30'); // 元素'30'的索引为2

效果：

注意：字符串的 “30” 和数字 30 是不同的

3、slice（）截取Array的一部分，返回一个新数组，类似于String中的 substring（）

测试代码：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']
//也是含头不含尾

3.1、如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array
测试代码：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; //  复制的新数组和原数组不相等范围值是false

4、push()，pop()

push()向Array的末尾添加若干元素，pop()则是把Array的最后一个元素删除掉

测试代码：

var arr = [10, 20];
arr.push(3, 4); // 返回Array新的长度: 4
arr; // [10, 20, 3, 4]
arr.pop(); // pop()返回4
arr; // [10, 20, 3]
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次  返回10
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []

效果图：

5、unshift() , shift()

如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉

测试代码：

var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []

效果：

6、排序 sort()

测试代码：

var arr = ["B", "C", "A"]
arr.sort()
arr;  //["A", "B", "C"]

7、元素反转 reverse()

测试代码：

var arr =  ["A", "B", "C"]
arr.reverse()
arr;  //["C", "B", "A"]

8、concat（）

concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array

测试代码：

var arr = ['A', 'B', 'C'];
var added = arr.concat([1, 2, 3]);
added; // ['A', 'B', 'C', 1, 2, 3]
arr; // ['A', 'B', 'C']

注意： concat（）并没有修改数组，只是会返回一个新的数组

9、 join（）

把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串

测试代码：

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

10、多维数组

如果数组的某个元素又是一个Array，则可以形成多维数组

测试代码：

arr = [[1,2],[3,4],["5","6"]];
//取出多维数组的元素
arr[1][1];  //4

练习：在新生欢迎会上，你已经拿到了新同学的名单，请排序后显示：欢迎XXX，XXX，XXX和XXX同学！

测试代码：

var arr = ['小明', '小红', '大军', '阿黄'];
arr.sort() // ["大军", "小明", "小红", "阿黄"]
var msg = `欢迎${arr[0]},${arr[1]},${arr[2]},和${arr[3]}同学！`
alert(msg)

效果：

1.3、对象

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。

1.3.1、语法

var 对象名 = {
属性名：属性值,
属性名：属性值,
属性名：属性值
}

测试代码：

//定义了一个person对象，它有四个属性！
var person = {
    name: "jjh",
    age: 3,
    email: "[email protected]",
    score: 100
}

Js中对象， {…..} 表示一个对象，键值对描述属性 xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

注意：JavaScript中的所有的键都是字符串，值是任意对象！

1.3.2、对象的操作

1、对象赋值

person.name = "Godles"
"Godles"
person.name
"Godles"

2、使用一个不存在的对象属性，不会报错！ undefined

person.haha
undefined

3、动态的删减属性，通过 delete 删除对象的属性

delete person.name  //返回true
person   //{age: 3, email: "[email protected]", score: 100}

4、动态的添加，直接给新的属性添加值即可

person.haha = "haha"   //"haha"
person        //{age: 3, email: "[email protected]", score: 100, haha: "haha"}

5、判断属性值是否在这个对象中？ (xxx in xxx)

'age' in person    //返回true
//继承
'toString' in person   //返回true

6、判断一个属性是否是这个对象自身拥有的方法（hasOwnProperty()）

person.hasOwnProperty('toString')  //false
person.hasOwnProperty('age')       //true

1.4、流程控制

1.4.1、条件判断

if判断

测试代码：

var age = 3;
if (age>3){ //第一个判断
    alert("haha");
}else if(age<5) {  //第二个判断
   alert("heihei");
}else { //否则,,
    alert("heihei");
}

1.4.2、循环

1、while循环

测试代码：

var age = 3;
while(age<100){
    age = age + 1;
    console.log(age)
}

do{
    age = age + 1;
    console.log(age)
}while(age<100)

2、do... while循环

测试代码：

do{
    age = age + 1;
    console.log(age)
}while(age<100);

3、for循环

测试代码：

for (let i = 0; i < 100 ; i++) {
    console.log(i)
}

4、forEach 循环

5.1 引入

测试代码：

var age = [12,3,12,3,12,3,12,31,23,123];

//函数
age.forEach(function (value) {
    console.log(value)
})

5、for…in 循环

测试代码：

//  语法：for(var index in object){}
for(var num in age){
    if (age.hasOwnProperty(num)){
        console.log("存在")
        console.log(age[num])
    }
}

1.5、Map 和 Set

ES6 标准新增的数据类型，可以根据浏览器的支持情况决定是否要使用。

1.5.1、Map

Map是一组键值对的结构，具有极快的查找速度。

//ES6  Map
//学生的成绩，学生的名字
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom'); //通过key获得value=100！
map.set('admin',123456);  //新增或修改！  Map(4) {"tom" => 100, "jack" => 90, "haha" => 80, "admin" => 123456}
map.delete("tom"); //true
map   //Map(3) {"jack" => 90, "haha" => 80, "admin" => 123456}

由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉

测试代码：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

1.5.2、set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

测试代码：

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

1、重复元素在Set中自动被过滤：

测试代码：

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

注意：数字3和字符串‘3’是不同的元素

2、通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果

测试代码：

s.add(4);
s; // Set {1, 2, 3, 4}
s.add(4);
s; // 仍然是 Set {1, 2, 3, 4}

3、通过delete(key)方法可以删除元素：

测试代码：

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

1.6、iterable

es6 新特性

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

具有iterable类型的集合可以通过新的for ... of循环来遍历

1、遍历数组

//通过for of /  for  in 下标
var arr = [3,4,5]
for (var x of arr){
    console.log(x)
}

2、遍历map

var map = new Map([["tom",100],["jack",90],["haha",80]]);
for (let x of map){
    console.log(x)
}

3、遍历set

var set = new Set([5,6,7]);
for (let x of set) {
    console.log(x)
}