JavaScript学习笔记——数据类型详解

目录

三、数据类型详解

3.1 字符串

3.2 数组

3.3 对象

3.4 流程控制

3.5 Map Set

3.6 iterator

---

往期内容：

 JavaScript学习笔记—— 快速入门(基本语法/数据类型快速浏览)

三、数据类型详解

3.1 字符串

1.正常字符串使用单引号，双引号包裹

console.log('a\'');
console.log("a");

2.注意转义字符

        \'  
        \n      //换行
        \t      //table
        \u####  //unicode字符  \u4e2d 中
        \x41    //ASCII字符    A

3.多行字符串编写

编写多行字符串用 ` `（键盘 Tab 上方 Esc 下方）

var msg=`hello
        world
        你好`;
console.log(msg);

多行字符串浏览器控制台打印效果

4.模板字符串

EL表达式 ${...} 

模板字面量提供了一种将变量和表达式插入字符串的简单方法。该方法称为字符串插值

        let name = "zhangsan";
        let msg =`hello,${name}`
        console.log(msg);

浏览器控制台打印效果

5.字符串长度

• str.length

使用字符串的 length 属性，可以读取字符串的长度 

var stu="student"
console.log(stu.length)

 stu.length 浏览器控制台打印效果

6.字符串的可变性

var stu="student"            //定义字符串stu
console.log(stu[0])          //控制台打印，查看stu[0]的值
stu[0]=1                     //赋值，尝试改变stu[0]
console.log(stu[0])          //查看stu[0]的值是否发生变化

在浏览器控制台进行测试，发现字符串不可变

7.大小写转换

注意：这里是方法，不是属性

• toUpperCase()        字符串转换为大写
• toLowerCase()        字符串转换为小写

var stu="student"
stu.toUpperCase()    //字符串转换为大写

var abc="ABCDE"
abc.toLowerCase()    //字符串转换为小写

8.获取指定字符下标

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置

var stu="student"
stu.indexOf('t')     //获取指定字符下标

9.截取字符串

substring() 方法用于提取字符串中介于两个指定下标之间的字符

var stu="student"
stu.substring(1)         //从第一个字符串截取到最后一个
stu.substring(1,3)       //截取字符串 包含前面不包含后面 [ )

3.2 数组

• Array可以包含任意的数据类型
• 通过下标取值和赋值

1.长度

length属性 设置或返回数组中元素的数量        arr.length

var arr=[1,2,3,4,5,6]
arr.length

注意：给arr.length赋值，数组大小会发生变化

• 扩大长度: undefined
• 赋值过小: 元素丢失

arr.length=10        //将arr的长度修改成10
arr                  //打印arr
arr[7]               //打印查看arr[7]的值

arr.length=3           //将arr的长度修改成3
arr                    //打印arr

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

indexOf() 在数组中搜索元素并返回其位置

arr=[1,2,3,'1',5]
arr.indexOf(1)
arr.indexOf('1')

字符串“1”和数字1是不同的

3.截取数组的一部分

slice()  选择Array的一部分，并返回新数组，类似于String中的substring

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var a = fruits.slice(1, 3);
typeof(a)    //查看数据类型
a            //控制台打印a

4.push()、pop()

• push()         压入到尾部                 

• pop()           弹出尾部的一个元素   

• 这两个方法会改变数组的长度

var arr=[1,2,3]
arr.push('a')
arr

push() 将新元素添加到数组的末尾，并返回新的长度

var arr=[1,2,3,4,5]
arr.pop()
arr

pop() 删除数组的最后一个元素，并返回该元素

5.unshift()、shift()

• unshift()           压入到头部

• shift()              弹出头部的一个元素

• 这两个方法会改变数组的长度

var arr=[1,2,3]
arr.unshift('A')
arr

unshift() 将新项添加到数组的开头，并返回新的长度

var arr=['S',1,2,3]
arr.shift()
arr

shift()  删除数组的第一个元素，并返回该元素

6.排序

默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序

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

7.元素反转

 reverse() 方法反转数组中元素的顺序

var arr=['1','A',3]
arr.reverse()

8.连接数组

concat() 连接两个或多个数组，并返回已连接数组的副本

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

concat() 方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。

9.连接符

join() 将数组的所有元素连接成一个字符串

var arr=['1','A',3]
arr.join('-')

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

10.多维数组

var arr=[[1,2,3],["4","5","6"]];
arr[1][2]

3.3 对象

• JavaScript中，{......}表示一个对象
• 键值对描述属性
• JavaScript中的所有键都是字符串，值是任意对象
• 多个属性用逗号隔开，最后一个属性不加逗号

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

定义person对象，它有4个属性

        //定义person对象，它有4个属性
        var person={
            name:"hua",
            age:3,
            email:"123456@qq.com",
            score:100
        }

1.对象赋值

        person.name="xiaohua"
        person.name

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

2.动态删减属性

通过delete删除对象的某个属性

delete person.age        //删除对象person的age属性

3.动态添加属性

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

person.phone=123456789       //给对象person动态添加phone属性并赋值

4.判断属性值是否在这个对象中

in 运算符用来判断对象是否拥有给定属性   xxx in xxx

'age' in person

5.判断一个属性是否是这个对象自身拥有的

hasOwnProperty()方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性

person对象中拥有的 toString() 是继承来的，不是自身拥有

所以 ’toString‘ in person 返回 true ,person.hasOwnProperty('toString') 返回 false

而age属性是person自身拥有的，所以 person.hasOwnProperty('age') 就会返回 true

3.4 流程控制

1.if判断

var age=9;
if(age<3){              //第一个判断
    alert("haha");
}else if(age<5){        //第二个判断
    alert("kuwa~");
}else{                  //否则...
    alert("ku~~")
}
//运行结果浏览器弹窗，内容：ku~~

运行结果浏览器弹窗，内容：ku~~

2.while循环

注意：避免程序死循环

        while (true){
            alert(123)
        }
//结果：浏览器一直弹窗

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

3.do...while循环

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

4.for循环

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

5.forEach循环

ES5.1引入， forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

var age=[1,2,3,4];
        age.forEach(function (value){
            console.log(value)
        })

​

6.for…in循环

• for in 语句循环遍历对象的属性
• for(var index in object){ } 显示数组下标

var arr=['A','B','C'];
       for(var char in arr){
           console.log(char)
       }

​

7.for…of循环

在ES6中,增加了一个for of循环，得到的是元素

for of 语句循环遍历可迭代对象的值

var arr=['A','B','C'];
        for(var char of arr){
            console.log(char)
        }

​

3.5 Map Set

Map

• ES6的新特性
• Map 对象存有键值对，其中的键可以是任何数据类型
• Map 对象记得键的原始插入顺序
• Map 对象具有表示映射大小的属性

        //学生的成绩、学生的名字
        var map=new Map([['tom',100],['jerry',99],['haha',88]]);
        var name = map.get('tom');                //通过key获得value
        map.set('jerry',90);                      //修改
        map.set('zhangsan',66)                    //新增
        map.delete('tom')                         //删除

​

Set

• Set 是唯一值的集合 
• 每个值在 Set 中只能出现一次
• 一个 Set 可以容纳任何数据类型的任何值
• 无序不重复的集合  

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

3.6 iterator

ES6 新特性，通过for of 实现         for in 不建议使用

1.遍历数组

 // 遍历数组
       var arr=[3,4,5];
        for(let x of arr){
            console.log(x);
        }

2.遍历Map

        var map=new Map([['tom',100],['jerry',99],['haha',88]]);
        for (let x of map){
            console.log(x);
        }

3.遍历Set

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

后续内容：

四、JavaScript 学习笔记——函数

五、JavaScript 学习笔记——内部对象/面向对象编程​