JS-数据类型

(一) 变量#

变量用于存储编程所使用的数据和方法。

变量必须先声明才可以使用。

声明一般变量关键字：var， let， const。其中let和const是es6的语法。

声明其他特殊变量关键字：function，class，import (先了解)等

01 声明变量#

变量用于存储数据，因此可以把变量当成是一个**'容器'**

存储在变量中的数据，叫做变量的值

//声明一个变量
var x;
//声明多个变量
var x,y;

02 变量赋值#

如何给变量存储数据？

给变量存储数据的过程，叫赋值，符号是 =

注意：这里的 = 不是数学上的 = 。

//声明一个变量并赋值
var x = 10;
//声明多个变量并赋值
var x = 10,
	y = 20;

// 意思是把10装进x里。或者理解为把x变成10;
// 不是x等于10的意思
x = 10;
// 数学上 a = b 和 b=a 是一个意思，但是在编程世界中不是这样。
var a = 3;
var b = a; // 意思是变量a里装了一个3, 我们让变量b也跟a一样装进去一个3 

变量必须声明后才可以使用，否则报错。

例如企图获取一个未声明的变量的值，或者给一个未声明的变量赋值，都会导致错误。

// 报错举例
console.log(f);

(二) 标识符命名规则#

标识符：编程中的各种名字，例如变量名，属性名，函数名，数组名，对象名等等。

编程中起名字（标识符命名）的规则：

1：由数字和英文组成，但是不能以数字开头

2：特殊字符只能包含_和$

3：不能和关键字保留字冲突

4：区分大小写。

标识符命名习惯：

1. 使用英文单词, 比如:

   var age = 100;
   var username = '张三';
   

2. 单词+数据类型。例如:

   var userCount = 100;
   // 或者
   var userNum = 100;
   

3. 驼峰命名。多个单词构成一个标识符，则第一个单词首字母小写，后续单词首字母大写。例如：

   var foodName = '番茄炒鸡蛋';
   var foodPrice = 100;
   

(三) 常量(先了解)#

常量，意即值不能修改的数据。

常量的值就是常量本身。

例如10就是一个数据，它的值就是10本身。它的值不能修改。不能把10变成11.

ES6使用const声明一个常量。

const声明常量时必须同时赋值，并且后续不可再修改。

(四) 数据类型#

数据类型相关概念

• 变量是没有类型(因为变量就是个容器, 它装什么都行), 但是装进去的数据是有类型的

• 顾名思义，数据类型就是数据的种类。不同数据拥有不同的作用。

• JavaScript常见数据类型：

  1：number（数字）

  2：string（字符串）

  3：boolean（布尔值）（用于表示对错）

  4：undefined （空的值）（用于表示空的值）

  5：null（不存在的对象）（用于描述一个不存在的对象）

  6：object（对象）（描述一组数据）（难）

  ​ 其中object细分，又分为数组（array），函数（function）和纯对象（plain object）3种。

​ 7: Symbol (先了解)

• 基本数据类型和引用数据类型

  1. number，string，boolean，undefined，null, Symbol为基本类型（简单类型）。（不是对象，理论不能添加属性）

  2. object（包括array，function，plain object以及其他对象）为引用类型（复杂类型）。（是对象，可添加属性）

数据类型详解

(1) 数字number#

1. 整数
2. 小数
3. 最大值和最小值 (了解)
4. NAN : 不是数字的数字

var num1 = 100;  // 也可以是-100;
var num2 = 100.58; 
var num3 = Infinity; // 或者-Infinity
var num4 = NAN;  

(2) 字符串string#

字符串用于在编程中描述文字。

1. 字符串三种表达方式

2. 字符串拼接

1. 字符串的三种表达#

1. 双引号
2. 单引号
3. 反引号

var str1 = 'hello';
var str2 = "hello";
var str3 = `hello`;  // es6新增

2. 字符串拼接#

1. es5使用+号进行拼接
2. es6直接拼接, 变量使用${xxx}进行引用

// es5字符串拼接
var str = 'hollo' + 'web';
// 也可以两个字符串变量拼接
var str1 = '胡';
var str2 = '儒清';
var name = str1 + str2;  // 胡儒清
var str3 = '我是' + name; // 我是胡儒清

// es6字符串拼接
var str1 = '胡儒清';
var str2 = '广西';
var str = `我叫${str1},我来自${str2}`; // 我叫胡儒清,我来自广西

(3) 布尔boolean#

表示真假的两种状态(情况), "是"和"否"的意思

// 声明一个变量, 描述门的开关状态
var isOpen = true;  // 门是开着的
isOpen = false;  // 门是关着的

// 声明一个变量, 描述用户的登录状态
var isLogin = true; // 用户已登录
isLogin= false;

(4) undefined#

表示没有值的默认值。

一个变量声明后没有赋值，这时候这个变量中的值是什么呢？

这时候这个变量没有值，那如何表示这个没有值的状态呢？使用undefined表示

let x;
// undefined
consosle.log(x);

很多时候，本该有值的地方没有值，都显示undefined。

(5) null#

null和undefined很像。一般我们都只用null来表示一个暂时还不存在的对象。

例如我们声明了一个变量, 打算将来用来存放对象, 但现在这个对象还不存在就可以使用null来代替

var obj = null;

(6) object之纯对象#

object又可以划分了多种情况, 常见的有纯对象, 数组和函数

01 声明对象, 用{}表示#

对象可以是一个人, 可以某一个东西, 我们想要声明一个变量来描述一个人或者一只猫, 就很难用上面的其中一种数据类型来实现, 而是同时使用几种简单的数据类型来表示, 所以对象是复杂的数据类型。例如我们想用一个变量来描述一个人， 可以这样做:

• 使用 {} 把人的各种特征都装进去
• 使用键值对的方式来描述人的每一个特征, 一个特征用一个键值对表示
• 键和值中间使用:隔开, 每一对键值对之间使用,隔开
• 最后一个键值对可以加逗号, 也可以不加(es6建议加)

// 有这样的一个人
名字: 张三,
年龄: 23,
籍贯: 广东深圳

// 声明一个对象来描述上面的这个人  
var person = {
  // name是属性(键), 张三(值)是属性对应的值
  name: '张三',
  age: 23,
  address: '广东深圳',
}  

02 操作对象#

读取, 修改和删除对象的属性

var person = {
  name: '张三',
  age: 23,
  address: '广东深圳',
} 
// 读取属性
console.log(person.name);
// 修改属性
person.name = '张三丰';
console.log(person);
// 删除对象属性
delete person.age;
console.log(person);

(7) object之数组#

数组用来表示一组数据, 对象的属性是无序的, 先写后写都一样, 数组是有序的, 数组内的数据可以是任意类型, 但是我们在一个数组内通常存放相同类型的数据

1. 声明数组

   var arr1 = [1,2,3,4];
   var arr2 = ['a','b','c'];
   var arr3 = [1,'a',2,'b'];
   

2. 获取(访问)数组成员

   • 数组名称.length 可以获取数组的长度
   • 下标从0开始, 第一个成员的下标为0;
   • 最后一个成员的下标为长度-1

   var students = ['张三','李四','王五','陈六'];
   console.log(students.length); 4
   console.log(students[0]);  // 张三 第一个
   console.log(students[1]);  // 李四 第二个
   console.log(students[4-1]); // 陈六 最后一个
   

(8) object之函数#

js代码是一句一句的执行, 我们也可以将很多句代码"打包"在一起进行运行, 函数的功能就是可以将很多行代码打包运行, 声明一个函数变量使用function 来进行声明, 声明之后使用()去运行打包后的代码

01 声明和调用函数#

比如做一顿饭,需要做的事情有:
1. 买菜
2. 洗菜
3. 做饭  
4. 炒菜
5. 端上桌子

// 声明函数  
function cooking() {
  console.log('去买菜和相关配料');
  console.log('把菜洗干净');
  console.log('做饭');
  console.log('炒菜');
  console.log('把饭和菜端上桌子');
  console.log('开吃');
}  
// 运行(调用)函数
cooking();

02 对象里的函数#

也可以把函数放进对象里, 这时候函数有了新的名称, 叫做对象的方法

var person = {
  name: '张三',
  age: 23,
  say: function() {
    console.log('他的名字叫张三,他的年龄是23岁');
  }
}
// 运行函数
person.say();

(五) 检测数据类型#

变量的数据类型，意即变量的值的类型。

如何检测变量的数据类型？使用typeof操作符。

注意，typeof检测数组，null和object等引用数据类型时不准确。所以检测引用数据类型我们会使用别的手段(后面再讲)

typeof检测一个函数，得到的结果是 function。

typeof检测一个数组，得到结果是 object。

typeof检测一个null，得到结果是 object。

typeof检测一个对象，得到结果是object。

(六) 用js操作网页#

js可以用来跟服务器交互(需要学习ajax)

js可以用来处理跟用户的交互 (其实就是在操作页面标签.)

1. 添加事件
2. 选择标签
3. 操作页面标签的样式 (行间样式)(无法操作内部,外部样式)
4. 操作页面标签的内容
5. 操作页面标签的属性

(1) 添加事件#

<!DOCTYPE html>
<html lang="en"> 
<body>  
    <button onclick="alert('hi')">按钮1</button>
    <button onclick="say()">按钮2</button>

    <script>
        function say() {
            alert('hello');
        }
    </script>
</body>
</html>

(2) 选择标签#

• 选择单个用 document.querySelector

• 选择多个用 document.querySelectorAll

  得到一个元素的列表, 可以像数组一样去访问列表里的每一个元素

<!DOCTYPE html>
<html lang="en"> 
<body>
    <div id="app">
        app
    </div>

    <ul>
        <li>xxx</li>
        <li>xxx</li>
        <li>xxx</li>
        <li>xxx</li>
        <li>xxx</li>
    </ul>

    <script>
        // 选择单个标签
        var $app = document.querySelector('#app');
        console.log($app);

        // var $list = document.querySelector('ul>li');
        // 选择多个标签
        var $list = document.querySelectorAll('ul>li');
        console.log($list);
      	console.log($list[0])
      	console.log($list[1]);
	      console.log($list[$list.length-1]);
    </script>
</body>
</html>

(3) 操作网页#

1. 操作页面标签的样式
   • 元素.style.样式名 = '样式值';
   • 带-的样式名,需要把-删掉,然后-后面的字母变大写;(驼峰命名)
2. 操作页面标签的内容
   • 元素.innerText 插入文本
   • 元素.innerHTML 插入标签
3. 操作页面标签的属性
   • 元素.属性名 = 属性值

<!-- 操作样式 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <div>天道酬勤</div>
</body>
<script>
    let $div = document.querySelector('div');
    $div.style.color = '#fff';
    $div.style.backgroundColor = 'gray';
    $div.style.width = '100px';
    $div.style.height = '100px';
    $div.style.border = '10px solid yellow';
    $div.style.margin = '100px';  
</script>
</html>

<!-- 操作网页内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid;
            width: 200px;
            height: 200px;
            margin: 50px;
        }
    </style>
</head>
<body>  
    <div></div>
    <div></div>
</body>
<script>
    var $div1 = document.querySelector('div:nth-child(1)');
    // 插入文字
    $div1.innerText = 'hello web';
  
		// 插入标签
    var $div2 = document.querySelector('div:nth-child(2)');
    // 使用innerHTML才能将标签变成标签
    $div2.innerHTML = '<button>hello</button>';
  
    // 使用innerText会把字符串里的标签当做文字看待
    // $div2.innerText = '<button>hello</button>';
</script>
</html>

<!-- 操作标签属性 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>  
    <p>hello</p>

    <input type="checkbox">
</body>
<script>
    var $p = document.querySelector('p');
    $p.className = 'red';
    $p.id = 'pp';

    var $inp = document.querySelector('input');
    // checked表示选中
    $inp.checked = true;
</script>
</html>

(七) 作业#

1. 简答题
   1. 变量是什么,有什么用?
   2. 变量有哪几种数据类型,其中简单(基本)数据类型有哪些,复杂(引用)数据类型又有哪些?
   3. undefined 和 null 有什么异同
2. 作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</body>
<script>

    //给最后一个li的内容设置一个任意的字符串内容.;
    //然后把第一个li的内容变成最后一个li的内容. 
</script>
</html>

1. 作业2

   • 声明一个对象, 存放你自己的个人信息
     • 需要真实信息
     • 内容包括: 姓名, 年龄, 籍贯, 爱好, 上一份工作(应届毕业生则填写学校和专业)
   • 声明一个数组, 存放你以及跟你距离最近的五个同学的信息
     • 需要真实信息
     • 在网页上打印出整个数组成员的名字

2. 作业3

   小学应用题1: 有甲乙丙3辆车,甲乙的速度是50km/h,丙的速度是甲乙速度之和,求丙车速度.
   (应用题,需要写解题步骤)
   
   // js代码
   

3. 作业4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            background-color: red;
        }
    </style>
</head>
<body>
    
    <button>点击我</button>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
        <li>555555</li>
    </ul>
</body>
<script>

    // 点击按钮后,把5个li的类变成active. 
</script>
</html>

1. 思考预习题1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  	<p>
    	显示一个弹框, 用户输入输入大于20或者小于10的数字就弹出'你猜对了', 否则弹出'你猜错了'  
  	</p>
  
    <script>
        
    </script>
</body>
</html>

1. 思考预习题2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="button" value='点击'>
        <p>我现在的点击次数是:<span>234923488</span></p> 
    </div>


<pre>
题目: 点击按钮,在span内显示点击的次数,例如第一次点击显示1,第二个显示2....(最开始的数字需要删掉)
如果点击次数是5,弹出span内最开始的数字.
// 加大难度:
如果要求点击次数是5的整数倍,怎么做
如果点击的次数要求在10-20之间才弹span内的数字,如何做
如果点击的次数要求小于10或者大于20,才弹span内的数字,怎么做.
// 超大难度:
以上例子只有一个div,这个div内的按钮被点击,div内的span就显示这个点击次数
想想,如果这样的div有10000个,每个div内的按钮被点击,相应的span都显示这个按钮的点击次数,怎么做?
</pre>  
</body>
<script>
    
</script>
</html>