03.JavaScript基础总结前端开发JavaScript基础总结，主要目录包括了js基础介绍、变量使用、数据类型、

1.基础介绍

1-1.JS是什么

JavaScript是一门编程语言，可以实现很多的网页交互效果

1-2.JS的作用

网页特效 (监听用户的一些行为让网页作出对应的反馈)
表单验证 (针对表单数据的合法性进行判断)
数据交互 (获取后台的数据, 渲染到前端)
服务端编程 (node.js)

1-3. JS的组成

ECMAScript:
- 规定了js基础语法核心知识
- p比如：变量、分支语句、循环语句、对象等等
Web APIs :
- DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等
- p注意 DOM属于BOM
权威网站：MDN

1-4.JS书写位置

内联式JavaScript
内嵌式JavaScript写在标签上方
外链式-JavaScript-通过src引入html页面中，但是

1-5.JS的注释

单行注释 // 快捷键ctrl+/
多行注释/* */ 快捷键shift+alt+a

1-6.JS的结束符

分号：可以加也可以不加，可以按照团队约定
注意换行默认为结束

1-7.JS输入输出语句

输入：prompt()
输出：
- alert() 页面弹出警告框，不运行页面代码
- document.write() 向body标签书写内容，占页面位置
  - 可以把一个标签的字符串重新插入到body标签里面
  - 写标签字符串的时候如果要换行只能使用反引号
  - 没有换行用哪一种方式都可以
  - 只要是写标签字符串都可以使用反引号模板字符串
  - 不要直接在字符串里面一个一个字母写，可以在body标签中使用快捷键先生成标签然后复制回去
- console.log() 控制台输出语法，程序员调试使用，运行页面代码，不占页面位置

2.变量

作用：是计算机存储数据的容器

2-1.变量申明

let name;

2-2.变量赋值

let name;

name='张三'；
let name='张三'；
let a,b;

a=10,b=20;

2-3.变量交换

     // 先声明两个变量num1=10，num2=20，然后再声明一个空值
      let num1 = 10,
        num2 = 20,
        temp;
      // 先让空值temp存储num1的值10，num1再等于num2值20，num2等于num1以前的值temp的10
      temp = num1;
      num1 = num2;
      num2 = temp;
      console.log(num1, num2); // 20 10

2-4.变量命名

字母大小写,符号$，数字，下划线_，不能以数字开头
不能以关键字命名（let,var,if,for等）
字母区分大小写（age和Age是不同变量）
驼峰式命名（第二个单词首字母为大写，例：userNmae）

3.数据类型

3-1.基本数据类型

number 数字
string 字符串
- 字符串拼接

        let name = prompt('请输入姓名');
        let age = prompt('请输入年龄');
        document.write(`大家好，我叫${name}，今年${age}岁了`);
		//反引号包括着输出内容${num}

Boolean 布尔
- true 真
- false 假
null 空类型，表示赋值了，但是内容为空
undefined 未定义型，表示没有赋值

3-2.引用数据类型

object 对象
function 函数
array 数组

3-3.检测数据类型

typeof

        let num = 10;
        let name = '刘德华';
        let isRain = true;
        let  foods;
        let money = null;
        console.log(typeof num);  //number 输出  num变量的类型
        console.log(typeof name);  //string 
        console.log(typeof isRain);  //boolean
        console.log(typeof foods);   //undefined
        console.log(typeof money);   //object   对象类型

4.类型转换

4-1.为什么要类型转换

JavaScript是弱数据类型：JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算

        let num1 = 10;
        let num2 = 20;
        console.log(num1+num2); //10+20=1020

4-2.隐式转换

某些运算符被执行时，系统内部自动数据类型进行转换
Ø+ 号两边只要有一个是字符串，都会把另外一个转成字符串
Ø除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

        //工作中  比较常用的隐式转换写法
        let num2 = '2';
        let num3 = num2-0;//num3是一个数字类型
        console.log(typeof num3);
        //最简洁的写法  //没有为什么 js内部就有这样的技术技巧
        let num4 = +num2;  //也是可以的
        console.log(typeof num4);

4-3.显示转换

number（）
- 转成数字类型
- 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
- NaN也是number类型的数据，代表非数字

        let num1 = '123';
        let num3 = 'abc';
        //显示转换  转换成数字类型
        let num2 = Number(num1);
        //显示转换  转换成数字类型
        let num4 = Number(num3);
        console.log(num2);//转换成功，输出123
        console.log(num4);//转换失败，输出NaN （not a number）

parseInt（）

转换成整型

	let num5 = '1234.11'
    //显示转换  转换成整型
    let num6 = parseInt(num5);
    console.log(num6);   // 输出1234

parseFloat ()

转换成浮点型

     let num7 = '1234.11';
     //显示转换   转换成浮点型
     console.log(parseFloat(num7));  //输出1234.11

string（）

转换

.tostring()

        let num8 = 123+'';
        console.log(num8);//隐式转换  输出string

        let num9 = 123;
        let str = string (num9);
        console.log(str);  //显示转换  输出string

        let  num10 = 123;
        console.log(num10.tostring()); //显示转换  输出string

Boolean（）
- 空字符串,0,NaN,undefined 转换成布尔类型值为false，其他的为true

5.订单案例

5-1.页面效果

1648206930615

5-2.代码片段

<script>
        let name = prompt('请输入商品名称')
        let price = prompt('请输入商品价格')
        let count = prompt('请输入商品数量')
        let total = price * count
        let address = prompt('请输入地址')
        document.write (`
        <table>
            <caption><h1>订单付款确认页面</h1></caption>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>商品数量</th>
                    <th>总价</th>
                    <th>地址</th>
                </tr>
            	<tr>
                	<td>${name}</td>
                	<td>${price}</td>
                	<td>${count}</td>
                	<td>${total}</td>
                	<td>${address}</td>
            	</tr>
        </table>
        `)
</script>

6.运算符

6-1.算术运算符

数学运算符也叫算术运算符，主要包括加减乘除取余（求模）

+：求和
-：就差
*：求积
/：求余

%：取余

<script>
        let num1 = 10;
        let num2 = 2;
        // 加法
        console.log(num1+num2);//12
        // 减法
        console.log(num1-num2);//8
        // 乘法
        console.log(num1*num2);//20
        // 除法
        console.log(num1/num2);//5
        // 先乘除，后加减，如算式里面有括号就先算括号里面的算式
        console.log((1+2)*(3+4)-5+(6/2));//
</script>

6-2.赋值运算符

-=：减 +=加 *=乘 /=除 %=取余计算方式与算术运算一致

    <script>
        let num1 = 10;
        // num1 +=2;  //加2
        // num1 -=2;  //减2
        // num1 *=2;  //乘2
        // num1 /=2;  //除2
        num1 %=2; //取余2
        console.log(num1);
    </script>

6-3.一元运算符

i++：后自增先运算，再打印输出，后自增
++i：先自增先自增，后运算，再打印输出

1648347626950

<script>
        let i = 2;
        // 先自增，再运算
        // console.log(++i + 2);  //5

        // 先运算，再打印，后自增
        console.log(i++ + 2);  //4
        console.log(i);        //3
        console.log(i++ + 2);  //5
        console.log(i++ + 2);  //6
</script>

6-4.比较运算符

Ø> ：左边是否大于右边

Ø<：左边是否小于右边

Ø>=：左边是否大于或等于右边

Ø<=：左边是否小于或等于右边

Ø==：左右两边是否相等,将两边的数据进行转换为数值

Ø===：左右两边是否类型和值都相等

Ø!==：左右两边是否不全等

Ø比较结果为boolean类型，即只会得到true或false

<script>
        console.log(3>2);    //true   判断是否大于
        console.log(3>4);    //false  判断是否大于
        console.log(13<2);   //false  判断是否小于
        console.log(3<=3);   // true  判断是否小于等于，只要满足其中一个要求就成立
        console.log(3>=4);   //false
        console.log(3!=5);   //true   //判断3 不等于5
        console.log(13=='13');  //true  判断是否相等，只判断数值，不会判断类型        
        console.log(3==='3');   //false  既判断类型，也要判断数值
</script>

6-5.逻辑运算符

1648355232611

    <script>
        //逻辑与 &&
        console.log(1<3 && 3<5);  //true  一假则假   全部真才真
        console.log (1>3  &&  3<5);  //false

        //逻辑或  ||
        console.log(1>3 || 3<5);  //true  一真则真   全部假才假
        console.log(1>3 || 3>5);  //false

        //逻辑非  !
        let rain = true;
        console.log(!(rain));  //false  真变假  假变真
    </script>

逻辑运算符里的短路

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
原因：通过左边能得到整个式子的结果，因此没必要再判断右边
运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值
空字符串,0,NaN,undefined 转换成布尔类型值为false

案例：判断一个数是4的倍数，且不是100的倍数

<script>
        let num = +prompt('请输入一个数');
        //需求：判断一个数是4的倍数，且不是100的倍数
      console.log(num%4===0 && num%100!==0);
</script>

6-6.运算符优先级

一元运算符里面的逻辑非优先级最高
逻辑与比逻辑或优先级高

1648361821379

7.语句

7-1.表达式和语句

表达式：是一组代码的集合，JavaScript解释器会将其计算出一个结果
语句：js 整句或命令，js 语句是以分号结束（可以省略）
区别：表达式计算出一个值，但语句用来自行以使某件事发生(做什么事)

7-2.分支语句

有的时候要根据条件选择执行代码，这种就叫分支结构

单分支

if（条件） {

如果条件成立，则执行这行代码，否则不执行

}

        let score = +prompt('请输入高考成绩');
        if(score>700) {
            alert('恭喜你考入了黑马程序员');
        }

注意:如果if语句里面只有一行代码可以省列{}

双分支

if（条件） {

如果条件成立，则执行这行代码

}else {

否则执行这一行代码

}

        let score = +prompt('请输入高考成绩');
        if (score>700){
            alert('蓝翔欢迎你');
        }else {
            alert ('怀恨去北大');
        }

多分支

 		let day = +prompt('请输入今天是星期几');
        if (day===1) {
            alert('吃猪脚饭');
        }else if (day===2) {
            alert('吃煲仔饭');
        }else if (day===3) {
            alert('吃烤全羊');
        }else if (day===4) {
            alert('吃牢饭');
        }else if (day===5) {
            alert('吃软饭');
        }else {
            alert('吃白饭');
        }

Switch-case语句：

1648955609835

7-3.三元表达式：

条件？满足条件执行的代码：不满足条件执行的代码

需求：输入两个数值，比较哪一个数值大，然后就输入那个大的数值

let num1 = +prompt('请输入第一个数');
        let num2 = +prompt('请输入第二个数');
        //判断哪个数值比较大  三元表达式：条件？满足条件执行的代码 ：不满足条件执行的代码
        let max = num1>num2?num1:num2;
        console.log(max);

7-4.综合案例

案例1-数字补0

需求：用户输入1个数，如果小于10，则前面补0，比如09 03 等

	let num = +prompt('请输入一个数字');
        num = num < 10 ? '0' + num : num;
        console.log(num);

案例2-简单计算器

需求：用户输入2个数字，然后输入+ - * / 任何一个，可以计算结果

	  let num1 = +prompt('请输入第一个数字'),
        num2 = +prompt('请输入第二个数字'),
        symbol = prompt('请输入操作符: + - * /中的任意一个') ;
      let result ;

      if (symbol === '+') {
        result = num1 + num2;
      } else if (symbol === '-') {
        result = num1 - num2;
      } else if (symbol === '*') {
        result = num1 * num2;
      } else if (symbol === '/') {
        result = num1 / num2;
      } else {
        alert('出错了');
      }
      alert('本次的计算结果是：' + num1 + symbol + num2 + '=' + result);

7-5.断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug
使用：浏览器打开调试界面
- 1.按F12打开开发者工具或鼠标右键点检查
- 2.点到sources（源代码）一栏
- 3.选择代码文件
断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

7-6.循环语句

1.while循环

1.变量起始值
2.终止条件（没有终止条件，循环会一直执行，变成死循环）

3.变量变化量（用自增或者自减）

let i = 1;			//变量起始值
while(i<=3) { 		//终止条件
	document.write('我会循环三次');
	i++ 		 	//变量变化量
}

案例：简易ATM取款机

        let choice;
        let money=10000;          
        while(choice !== 4) {
            choice = +prompt(`请输入你的操作:
                1.取款
                2.存款
                3.查看余额
                4.退出
        `);
            if(choice === 1) {
                let withdrawal = +prompt('请输入取款金额');
                if(withdrawal<=money && withdrawal>=0) {
                    money-=withdrawal;
                    alert('取款成功，当前余额为：'+money);
                }else {
                    alert('输入错误，请重新输入');
                }
            }else if(choice === 2) {
                let deposit = +prompt('请输入存款金额');
                if(deposit>0) {
                    money +=deposit;
                    alert('存款成功，当前余额为：'+money);
                }else {
                    alert('输入错误，请重新输入');
                }
            }else if(choice === 3) {
                alert('你的余额为：'+ money);
            }else if(choice === 4) {
                console.log('退出');
            }else {
                alert('输入有误，请重新输入');
            }
        }

2.for循环

也是重复执行代码
l好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

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

案例：第n天背第个单词

        let day = +prompt("请输入天数");
        let num = +prompt("请输入每天的个数");
        for (let day1 = 1 ;  day1<= day; day1++) {
            document.write(`第${day1}天<br/>`);

            for (let num1 = 1 ;  num1<= num; num1++) {
            document.write(`记住第${num1}个单词<br/>`);       
            }       
        }

do-while循环

3.循环退出

continue：结束本次循环，继续下次循环
break：跳出所在的循环

4.循环嵌套

九九乘法表案例

for(i=1;i<=9;i++){   //一共有九行
	for(j=1;j<=i;j++){   //每行逐渐递增
        document.write(`${j}*${i}=${j*i} &nbsp&nbsp&nbsp&nbsp`)
    }
    document.write(`<br>`)
}

8.数组 array

8-1.数组是什么

数组(Array)是一种可以按顺序保存数据的数据类型

8-2.基本使用

语法：

let 数组名 = [数据1，数据2，.......,数据n]

let names = ['小明','小刚','小红','小丽'，'n']

规则：

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组也可以存储任意的类型的数据

术语：
元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得

遍历数组

用循环把数组中每个元素都访问到，一般会用for循环遍历

案例：求数组总和、平均数、最大值、最小值

        let arr = [11,22,33,44,55];  	  //定义数组
		let sum = 0;					  //定义总和
        let max = arr[0];				  //定义最大值
        let min = arr[0] ;				  //定义最小值
        for(let i = 0;i<arr.length;i++) { //遍历数组
            sum+=arr[i];
            if(max<arr[i]) {  //判断最大值
                max=arr[i]
            }else if(min>arr[i]) {//判断最小值
                min = arr[i];
            }
        }
        console.log(`总和为：${sum},平均值为：${sum/arr.length},最大值为：${max},最小值为：${min}`);  //总和为165，平均数为33，最大值为55，最小值为11

8-3.操作数组

查询数组
- for 数组 [下标]
重新赋值
- 数组 [下标] = 新值

添加数组

.push 在数组最后一个添加
.unshift 在数组第一个添加

splice(指定位置, 删除个数，'添加数据')在指定的位置添加

        let arr1 = [10,20,4,5,22,55,66,22,33,7];  //定义数组
        let arr2 = [];              //定义一个空数组接收数据
        for (let index = 0; index < arr1.length; index++) { //遍历数组
           if(arr1[index]>=10) {    //判断数组1的值是否大于等于10
                arr2.push(arr1[index])  //成立就添加到数组2 中
           }
        }
        console.log(arr2);  //打印输出

删除数组
- pop() 删除最后一个数组
- shift() 删除第一个
- splice(start, deleteCount) 删除某一段
  - start:开始位置，指定修改的开始位置（从0计数）
  - deleteCount: 表示要移除的数组元素的个数，可选的。如果省略则默认从指定的起始位置删除到最后
清空数组
- arr.lenght()
- arr=[]

8-4.数组案例

实现步骤：

1.先写静态布局

2.给

代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul {
            list-style: none;
            width: 800px;
            height: 400px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 100px auto;
            display: flex;
            justify-content: space-evenly;
            align-items: flex-end;
        }
        li {
            width: 50px;
            background-color: pink;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }
        span {
            margin-top: -20px;
        }
        h4 {
            margin-bottom: -20px;
            width: 70px;
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        let liHeight = [];  //定义一个空数组接收输入的数据
        for (let index = 0; index < 4; index++) {
            let height = +prompt(`请输入第${index+1}季度数据`);  //接收四次输入
            liHeight.push(height);        
        }      
        let liHtml = `<ul>`;   
        	for (let index = 0; index < 4; index++) {                        
                liHtml+=`<li style="height: ${liHeight[index]}px;">
                    <span>${liHeight[index]}</span><h4>第${index+1}季度</h4>
                    </li>`;
            }
            liHtml+=`</ul>`;
            document.write(liHtml);
    </script>
</body>
</html>

9.函数function

9-1为什么要用函数

1.概念：

function，是被设计为执行特定任务的代码块

2.说明：

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用

9-2函数使用

1.声明：

function 函数名() {
	函数体
}
函数名(); //调用函数

2.命名规范：

和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议：常用动词约定

3.缺点：

封装的函数不够灵活无法复用

9-3函数传参

1.优点：

可以极大的提高了函数的灵活性

2.声明和调用：

声明语法：

function 函数名（参数列表）{

函数体

}

3.类型：

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数写在函数名右边小括号里的叫实参（实际上的参数）

9-4函数返回值

1.概念

提问：是什么是函数？

函数是被设计为执行特定任务的代码块
提问：执行完特定任务之后，然后呢？

把任务的结果给我们
缺点：把计算后的结果处理方式写死了，内部处理了
优点：对执行结果的扩展性更高,可以让其他的程序使用这个结果
解决：把处理结果返回给调用者
有返回值函数的概念：
- 当调用某个函数，这个函数会返回一个结果出来
- 这就是有返回值的函数

1648722725218

2.使用：

1648722845595

3.注意：

return后面不接数据或者函数内不写return，函数的返回值是undefined
return能立即结束当前函数, 所以 return 后面的数据不要换行写

9-5作用域

1.概念：

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2.全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件

3.局部作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域

4.块级作用域

块作用域由 { } 包括,if语句和for语句里面的{ }等

5.变量的作用域

如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
函数内部的形参可以看做是局部变量，所以形参相当于函数内部定义的局部变量，只有在函数内部可以使用

9-6匿名函数

1.具名函数

语法：function fn() {}
调用：fn()

2.匿名函数

概念：将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式
语法：let btn=function() {}
调用：()()

<script>
      // 在script标签下直接声明的变量，就是全局变量
      //   let num = 10 // 全局变量
      // function test() {
      //   // 在函数内部声明的变量只有在函数内部才能使用
      //   let age = 20
      //   console.log('里面的打印', age)
      // }
      //   test()
      //   console.log(age)
      //   if (true) {
      //     // var age = 20
      //     // 块 就是指  ｛｝
      //     // 块级作用域：一个变量从定义开始，到它所在的｛｝结构的 ｝结束
      //     let age = 20
      //     console.log(age)
      //   }
      //   console.log(age) // age is not defined
      //   console.log(num)

      //   function test() {
      //     // 在函数内部声明的变量只有在函数内部才能使用

      //     // 这是真正意义的全局变量，它会挂载到全局window
      //     age = 20
      //   }
      //   test()
      //   console.log(window)

      console.log(length)
</script>

3.立即执行函数

<script>
	  let btn = document.querySelector('button') // 取按钮元素
      // 为按钮绑定一个事件
      // let fn =
      // btn.addEventListener('click',单击之后如何处理)
      btn.addEventListener('click', function() {
        console.log('fn')
      })
      // 通过function声明的函数是全局函数，全局不要释放，造成全局污染
      // function fn() {
      //   console.log('fn')
      // }

      // 将函数做为一个变量进行定义，它不会全局的，也就没有全局污染
      // 匿名不能单独的存在，它一般
      // 1.做为变量的值--函数表达式
      // 2.做为参数传递--回调函数
      // let fn = function() {
      //   console.log('fn')
      // }
      // fn()

      // 我要写一个函数，根据  数据渲染出动态结构，但是，我没有数据
      // 1.如果有数据，我知道如何渲染，但是我没有数据
      // 2.我知道谁有数据，但是他不知道数据应该如何渲染

      //data:就是一个用户名称--具体的渲染处理函数：可以根据数据进行渲染
      // let render = function(data) {
      //   let htmlStr = `<h1>${data}</h1>`
      //   document.write(htmlStr)
      // }
      // 我不能直接调用这个函数，因为我没有数据
      // render(data)

      // fn就是当前数据的处理方式
      // function handler(fn) {
      //   let data = 'admin'
      //   // 调用函数时传递了data实参
      //   fn(data)
      // }

      // handler(function(data) {
      //   let htmlStr = `<h1>${data}</h1>`
      //   document.write(htmlStr)
      // })
</script>

10.对象 object

10-1对象概念

对象（object）：JavaScript里的一种数据类型
可以理解为是一种无序的数据集合
用来描述某个事物，例如描述一个人
- 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
- 如果用多个变量保存则比较散，用对象比较统一
比如描述班主任信息：
- 静态特征 (姓名, 年龄, 身高, 性别, 爱好) => 可以使用数字, 字符串, 数组, 布尔类型等表示
- 动态行为 (点名, 唱, 跳, rap) => 使用函数表示

10-2对象使用

语法： let 对象名 = {}
属性：数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
- 属性都是成对出现的，包括属性名和值，它们之间使用英文：分隔
- 多个属性之间使用英文,分隔
- 属性就是依附在对象上的变量（外面是变量，对象内就是属性）
- 属性名可以使用''或"",一般情况下省列，除非名称遇到特殊符号如空格、中横线等
方法：功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…

10-3操作对象

查询对象
- 对象.属性或者对象[‘属性’]
- 对象.方法()
重新赋值
- 对象.属性 = 值
- 对象.方法 = function() {}
添加属性
- 对象名.新属性名 = 新值
删除属性
- delete 对象名.属性名

        let person = {
            name : '张三',
            sayHi : function(){  //匿名函数
                return '大家好'
            }
        }
        person.sayHi();//调用方法
        // 查看对象属性
        console.log(person.name);
        // 增加一个新的属性
        person.age=30;
        // 修改一个属性
        person.sayHi='你好'
        // 删除对象属性
        delete person.sayHi
        // 增加属性和修改属性都是同样的写法
        // 如果改属性对象中没有则为增加
        // 如果该属性对象中已经存在则为重新赋值
        console.log(person);

10-4遍历对象

10-5内置对象

  		// Math js内置的数学对象 里面会包含有关于数学操作的相对 方法或者属性
        // 常用
  
        // random() 返回一个随机数   包含0 不包含1
        // console.log(Math.random());
  
        //  Math.ceil(0.1) = 1  Math.ceil(0.001) = 1
        // console.log(Math.ceil(0.1)); //  我能吃西瓜  一次就1个半西瓜  去外面商品买西瓜   = 2
  
        // 下取整
        // console.log(Math.floor(1.9)); // 0
  
        // 四舍五入
        // console.log(Math.round(0.4));
  
        // 求最大值  数学对象内置有方法 算出来 最大值和最小值
        // console.log(Math.max(1,2,3,4,5,6,77,4));
  
        // 最小值
        // console.log(Math.min(1,2,3,4,5,6,77,4));
  
        // 幂运算  对某个数字  平方 或者 立方。。。
        // 2 平方  =  2 * 2
        // 2 立方  = 2 * 2 * 2
        // console.log(Math.pow(2, 3)); // 2立方 3个2相乘
        // console.log(Math.pow(2, 2)); // 2平方
        // console.log(Math.pow(3, 2)); // 3 的平方 
  
  
        // 绝对值  -1 =  1  -2 = 2 
        // console.log(Math.abs(-2));
        // console.log(Math.abs(-3));

随机数公式

		//第一种方法：Math.random()*(最大值-最小值+1)+最小值
		console.log(Math.random()*(M-N+1)+N);
		//第二种方法：Math.round(Math.random()*(最大值-最小值)+最小值)
		console.log(Math.round(Math.random()*(M-N)+N);

03.JavaScript基础总结

1.基础介绍

1-1.JS是什么

1-2.JS的作用

1-3. JS的组成

1-4.JS书写位置

1-5.JS的注释

1-6.JS的结束符

1-7.JS输入输出语句

2.变 量

2-1.变量申明

2-2.变量赋值

2-3.变量交换

2-4.变量命名

3.数据类型

3-1.基本数据类型

3-2.引用数据类型

3-3.检测数据类型

4.类型转换

4-1.为什么要类型转换

4-2.隐式转换

4-3.显示转换

5.订单案例

5-1.页面效果

5-2.代码片段

6.运算符

6-1.算术运算符

6-2.赋值运算符

6-3.一元运算符

6-4.比较运算符

6-5.逻辑运算符

6-6.运算符优先级

7.语 句

7-1.表达式和语句

7-2.分支语句

单分支

双分支

多分支

Switch-case语句：

7-3.三元表达式：

7-4.综合案例

7-5.断点调试

7-6.循环语句

1.while循环

2.for循环

do-while循环

3.循环退出

4.循环嵌套

8.数组 array

8-1.数组是什么

8-2.基本使用

语法：

规则：

术语：

遍历数组

8-3.操作数组

8-4.数组案例

实现步骤：

代码片段：

9.函数function

9-1为什么要用函数

1.概念：

2.说明：

9-2函数使用

1.声明：

2.命名规范：

3.缺点：

9-3函数传参

1.优点：

2.声明和调用：

3.类型：

9-4函数返回值

1.概念

2.使用：

3.注意：

9-5作用域

1.概念：

2.全局作用域

3.局部作用域

4.块级作用域

2.变量

7.语句