JavaScript--day02学习(简单数据类型/复杂数据类型)

数据类型

为什么需要数据类型

不同的数据占用的内存是不一样的，为了节省内存，需要给数据分配不同的数据类型，可以占用不同的内存

注意：js是一种动态分配的动态语言

数据类型的分类

• 简单的数据类型
  • number 数值类型 String 字符串类型 Boolean 布尔值 null空值 undefined未定义
• 复杂的数据类型 --object
  • Array数组 Object对象 Function函数

检测数据类型

使用typeof 检测数据类型

typeof 变量   //返回值就是数据的类型

简单的数据类型

Number 数据类型

• 整数

        var num = 10
        console.log(typeof num);

• 小数

				var num1 = 10.2
        console.log(typeof num1);
        // 注意：小数是有精度缺失的  -- 不要使用小数当做判断条件
        console.log(0.1+0.2);
        console.log(0.3);

• 无穷大 无穷小
• NaN

计算错误一定会出现NaN

console.log(typeof NaN);

• 进制 2进制10 8 16

        var num = 0101010; //二进制
        var num1 = 01324567 //八进制
        var num1 = 132456789 //十进制
        var num1 = 0xaf //十六进制

String字符串类型

使用单引号或者双引号的都是字符串，因为样式中使用的是双引号，字符串推荐使用单引号

        // String 字符串类型
        var str = '10' //纯数字字符串
        console.log(typeof str)

字符串拼接

        console.log(10 + 10); //20 
        console.log(10 + '10');//1020
        console.log('10' + '10');//1020

字符串的方法

字符串是有长度（就是字符串中字符的个数）和下标（从0开始的，每个字符的下标，是字符的位置数 -1）的

字符串是可读不可写的（也就是说字符串通过）

        var str = "hello word"
        console.log(str.length); //10
        //字符串名称加[] 取下标
        console.log(str[0]); //取字符
        str[0] = 'k' //可读不可写
        console.log(str);

        // 使用的小括号， 参数是下标值  --返回值是字符
        console.log(str.charAt(0)); 
        // 使用的小括号， 参数是下标值  -- 是码值，常用来字符串的去重和分类
        console.log(str.charCodeAt(0));

        var box =document.getElementById('box');

        var num =30
        var num1 =185
        var num2 =150
        var num3 =80

        // box.innerHTML = '<h1>我今年'+num+'岁</h1><h1>身高'+num1+'</h1><h1>体重'+num2+'</h1><h1>腰围'+num3+'</h1>'
        // box.innerHTML = '<h1>我今年'+num+'岁</h1>'+
        // '<h1>身高'+num1+'</h1>'+
        // '<h1>体重'+num2+'</h1>'+
        // '<h1>腰围'+num3+'</h1>'
        
        //es6 模板语法
        box.innerHTML = `<h1>我今年${num}岁</h1><h1>身高'+num1+'</h1><h1>体重'+num2+'</h1><h1>腰围'+num3+'</h1>`
    

Boolean布尔值

有俩个值 true （真–1）false（假 --0）

常用于判断条件的返回值

        //Boolean 布尔值
        console.log(true + false);
        console.log(10 > 90);

null 空值 和 undefined 未定义

undefined: 变量声明了但是没有赋值

null ： 空值，但是占用内存，提前分配一块内存，用来存放一个对象

console.log(typeof null);

复杂数据类型 --object

Array 数组

数组是一组无序的数据集合

声明数组

• 字变量

var arr = [1,'str',true,false,null,undefined,function,[],{}] 

        var arr = [1,2,3,4,5]
        console.log(arr.length); // 数组中元素的个数
        console.log(arr[0]); //取值 -- 数组中必须通过下标存储值或者取值
        arr[5] = 6
        console.log(arr);

• 使用关键字 new

var arr = new Array() //实例化一个数组对象

        // 有一个值是长度，也就是这个数组中，只能存储四个值
        // var arr = new Array(4);
        var arr = new Array();
        console.log(arr);
        arr[0] = 1
        arr[1] = 1
        arr[2] = 1
        arr[3] = 1
        console.log(arr);
        arr[100] = 1
        console.log(arr);

        var arr1 = ['./img/1.png','./img/2.png','./img/3.png','./img/4.png']
        document.body.innerHTML = arr1[0]

        var img = document.getElementById('img')
        img.scr = arr1[0]

Object对象

万物皆对象

对象是有属性和方法的

对象：名称

属性：形容词

方法：动词

• 关键字

var obj =new Object()  //实例化一个对象

• 字变量

var obj = {} //对象

        // 对象  -- 是键值(有属性名，属性值，并且：隔开)对的集合
        //属性名对于程序员是没用的，需要的属性值，但是必须通过属性名才可以取到属性值
        var obj = {
            name: '张三',
            age: 30,
            eat:function(){
                console.log('我很能吃');
            }
        }
        console.log(obj.name);
        obj.eat()
        var obj1 = new Object();
        obj1.name = '李四'
        var a = 'name'
        console.log(obj1);
        console.log(obj1[a]);

Function函数

函数就是一段可以重复执行的代码块

• 字变量

var fn = function(){
	//代码块
}

• 关键字 function

function add(){
//代码块
}

        // Function 函数
        function add(){
            console.log('代码块');
        }
        // 函数必须调用，否则不会执行 -- 函数名+()  也就是add()
        add()

        var num = function(){
            console.log('代码块');
        }
        num()
        console.log(typeof num);

数据类型转换

为了防止计算错误

• Number()

把其他的数据类型转换成Number类型，但是，只能转换成纯数字的字符串

        // 只能转换纯数字的字符串
        console.log(Number('1') + 1);
        // 如果遇到不能转换的，直接返回NaN
        console.log(Number('1a') + 1);

• parseInt

把其他的数据类型转换成整数的Number类型，也就是保留整数

遇到转换就直接转化，如果遇到不能转换的

        console.log(parseInt('1') + 1); //2
        console.log(parseInt('1.5') + 1); //2
        console.log(perseInt('100px') + 10); //110

• parseFloat

把其他的数据类型转换成小数的Number类型，保留整体

遇到转换，遇到不能转换的，返回转换完成的

        console.log(parseFloat('1') + 1); //2
        console.log(parseFloat('1.5') + 1); //2
        console.log(parseFloat('100px') + 10); //110

• Boolean

把其他数据类型转换成布尔类型

        console.log(Boolean(null));
        console.log(Boolean(undefined));
        console.log('');
        console.log(false);
        console.log(NaN);
        console.log(0);

• String()

把其他数据类型转换成字符串类型

console.log(typeof (1).toString);

运算符

• 算数运算符

+-*/ 加减乘除     %取余
// 代码
+： 加法 如果是字符串 就是连接符

• 自增自减

++  --
如果自增或者自减 是在变量的后面，就是后置自增或后置自减 先参与计算 再自增自减
如果自增或者自减 是在变量的前面，

• 比较运算符 --结构的返回值是布尔值

 >  <  >=  <=  ==等于  ===全等于（类型与值都比较）
        var a = 1
        var b = ++a   //加完赋值
        console.log(a,b);

• 逻辑运算符

&& 与 ||     !

        console.log(10 > 1 && 1 > 0); //true
        console.log(10 > 1 && 1 > 2); //false
        console.log(!true);

• 赋值运算符

=  +=  -=  *= /= %=
a+=1  ===  a=a+1