【JavaScript：数据类型】

2. 数据类型

2.1 字符串

1. 正常字符串我们使用 ’ ’ 或 " " 包裹

2. 注意转移字符 \

3. 多行字符串编写（注意）

   Tab上面的~键

var msg =
    `helllo
world
你好`

4. 模板字符串

let name = "Jack";
let msg = `你好呀, ${name}`;

5. 字符串长度

let student = "student";
console.log(student.length)

6. 字符串的可变性：不可变

7. 大小写转换：

toUpperCase();
toLowerCase();

8. 获取指定下标

str.indexOf("")

9. 截取字符串

str.substring(1,3) // 从第一个字符截取到第三个字符
str.substring(1) // 从第一个字符截取到最后一个字符

左闭右开

2.2 数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6];//通过下标取值或赋值
arr[0]
arr[0] = 1

虽然都显示1,但字符串的“1”和数字 1 是不同的

1. 长度

arr.length

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

2. indexOf,通过元素获得下标索引

arr.indexOf(2)
1

3. slice() 截取Array的一部分，返回一个新的数组，类似于String中的substring
4. push()，pop() 尾部

push():    压入尾部
pop():    弹出尾部的一个元素

5. unshift() shift() 头部

unshift() :    压入头部
shift():    弹出头部的一个元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uONCDAdv-1652538636055)(D:\工作文件\学习笔记\前端\RLqT3CbGBDZvdn1.png)]

6. 排序 sort()

arr = ['B','C','A']
(3) ['B', 'C', 'A']
arr.sort()
(3) ['A', 'B', 'C']

7. 元素反转 reverse()

arr
(3) ['A', 'B', 'C']
arr.reverse()
(3) ['C', 'B', 'A']

8. concat()

arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]
arr
(3) ['C', 'B', 'A']

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

9. 连接符 join()

打印拼接数组 ，使用特定的字符串连接

arr
(3) ['C', 'B', 'A']
arr.join('-')
'C-B-A'

10. 多维数组

arr = [[1,2],[3,4],["5","6"]]
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) ['5', '6']
length: 3
[[Prototype]]: Array(0)

arr[1][1]
4

2.3 对象

若干个键值对

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

//
var person = {
    name : 'John',
    age : '23',
    email : 'john@example.com',
    score : 0;
}

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

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

1. 对象赋值

person.name = "Jack"
'Jack'
person.name
'Jack'

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

person.haha
undefined

3. 动态的删减属性：通过delete删除对象的属性

person
{name: 'Jack', age: '23', email: 'john@example.com', score: 0}
delete person.name
true
person
{age: '23', email: 'john@example.com', score: 0}

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

person
{age: '23', email: 'john@example.com', score: 0}
person.haha = "haha"
'haha'
person
{age: '23', email: 'john@example.com', score: 0, haha: 'haha'}

5. 判断属性值是否在对象中：xxx in xxxx

'age' in person
true

//继承
'toString' in person
true

6. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

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

2.4 流程控制

1. if判断，同java

var age = 4;
if (age > 3) {
    alert("haha");
} else {
    alert("cry");
}

2. 循环

while，同Java

while (age < 100) {
    age++;
}
alert(age);

do {
    age++;
} while (age < 100)
alert(age);

for，同Java

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

forEach循环

ES 5.1新特性

age.forEach(element => {
    console.log(element);
});

for in循环 key是下标

for (const key in age) {
    if (Object.hasOwnProperty.call(age, key)) {
        const element = age[key];
        console.log(element);
    }
}

for of循环 直接打印值

for (const iterator of object) {
   console.log(iterator);
}

2.5 Map和Set

ES6的新特性！

Map

//ES6 Map 

var map = new Map([['Tom', '1'], ['Jack', '2'], ['Peter', '3']]);
//通过key获得value
var name = map.get('Tom');
mat.set('admin', 123456); //新增或修改
map.delete("Tom");//删除

Set:无序不重复的集合

 //Set可以去重
var set = new Set([1, 1, 1, 1, 1, 1, 1, 3]);
set.add(2);	//添加
set.delete(1);	//删除
set.has(3); //是否包含某个元素

2.6 iterator

ES6新特性

• 遍历数组

var arr = [3, 4, 5];
for (const iterator of arr) {
    console.log(iterator);
}

• 便利Map

var map = new Map([["Jack", 10], ["Tom", 20], ["haha", 30]]);
for (const iterator of map) {
    console.log(iterator);
}

• 遍历Set

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