JS基础（上）开始到数组-CSDN博客

本文链接：https://blog.csdn.net/2303_79590957/article/details/136767924

书写位置：

1.外部JS文件

2.script标签内（<body>上面或</body>上面）

注释：

//：单行注释

/**/：多行注释

输入：

prompt('请输入您的姓名：')//prompt:提示，鼓励

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

输出：

语法1：document.write('要出的内容')//document:文件，记录：向body输出内容，

如果输出的内容写的是标签，，会解析为网页元素: document.write('<h1>标题</h1>')

语法2：alert('内容')，页面弹出警示对话框

语法3：console.log('控制台打印')//console:控制台，log：正式记录，日志

控制台输出语法，程序员调试用

格式化输出：

``(反引号)

 document.write(`我叫${name},今年${age}岁了`)

变量：

定义：let 变量名（局部）

var 变量名(全局)不推荐使用

var可以先使用，再声明（不合理）

var声明过的变量可以重复声明（不合理）

比如变量提升，全局变量，没有块级作用域等等有bug

命名：只能使用数字，下划线，$，字母，且数字不能开头

数组：

定义：let 数组名 = [数据1，数据2]// let arr = ['aaa', 'bbb', 'ccc',5]

使用：数组名[0]// document.write(arr[0])

长度：arr.length

常量：

const G = 3.14

数据类型：

//js是一弱数据类型的语言，只有赋值后才知道数据类型

number：数字类型

string：字符类型

boolean：布尔类型

underfind：未定义类型

null：空类型

引用数据类型：object对象

NaN:not a number；NaN和什么一起操作，都会返回NaN（本质属于number）

字符串：单引号，双引号，反引号包起来的都是字符串

未定义类型：undefined，只有一个值:undefined

只声明变量，未赋值时，默认值undefined（没有赋值）

空类型：null，表示无，空，值未知（赋值了，但内容为空）一个值

如果一个变量里面确定存的是对象，但对象未准备好，可以用null代存

（undefined + 1 ==> Nan）(null + 1 ==> 1)

检测数据类型+类型转换：

      typeof x （常用写法/运算符写法）
      typeof(x) （函数写法）
      let num = prompt('input')
      console.log(typeof num);

num类型为string(表单取过来的值都为字符串型)

隐式转换：某些运算符被执行时，系统自动转换

+号两边只要有一个是字符串，都会把另一个转换为字符串

除+号以外的算术运算符，会把数据转换为数字型(但是非数字时会Nan)

+号作为正号解析时可以转换为数字型(但+'uig'不显示数字)

任何数据和字符串相加为字符串

显示转换：Number('87')，如果内容有非数字，转化失败NaN，但类型是数字

parseInt(数据) 只保留整数 console.log(parseInt('12px'));

parseFloat(数据) 可保留小数 console.log(parseFloat('12.1px'));//.0时无小数

console.log(parseFloat('ghu12.1px'));//此时为NaN

运算符：

赋值运算符：+=，-=，/=，*=，%=
一元运算符：++，--，！
比较运算符：>，<，>=，<=，==，===左右两边是否值和类型都相等，!=，!==左右两边是否不全等（可以比较ASCLL码）（涉及到NaN都是false）
== : 只比较内容是否相同根本不比较数据类型
===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

+：字符拼接，数字相加

逻辑运算符：&& || !
优先级：括号》一元》算数》关系》相等》逻辑》赋值》逗号

if语句：

if(a==b)
    {
      prompt(a)
    }

三目运算符：

a?b:c

switch语句：

 <script>
    let key = 0
    switch (key) {
      case 1:
        alert(key)
        break;
      default:
        alert(1)
        break;
    }
  </script>

while语句：

    while (n--) {
      document.write(x++ + ' ')
    }

for语句：

普通for循环：
for(let 初始化语句; 条件表达式; 条件控制语句){
循环体;
}
增强for循环：
for(let 变量名 of 对象){
需要执行的代码;
}
索引for循环：
for(let 变量 in 对象){
需要执行的代码;
}
forof 与 forin之间的区别：
1. forin可以遍历对象,forof不能遍历对象
2. forin遍历出数组中的索引,forof遍历出数组中的元素

<!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>


  <script>
    let arr = ["zhangsan", "lishi", "wangwu"];
    console.log("================普通for循环============");
    //普通for循环
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i]);
    }

    console.log("================for of循环=============");
    //for of 循环
    for (let i of arr) {
      console.log(i);
    }

    console.log("=================for in循环============");
    //for in循环
    for (let i in arr) {
      console.log(arr[i]);
    }
  </script>
</body>

</html>

do_while语句：

     <script>
        let i = 1
        do {
            console.log(i)
            i++
        } while (i < 10)
    </script>

数组：

基本使用：
声明：let arr=["sh","aheg",hfs,gsif]
let arr=new Array(1,2,3,4)
取用：arr[3]
改：arr[3]=new
增：arr.push(新的内容)///arr.unshift(新的内容)
arr.push("李四")//在末尾插入一个或多个，并返回数组新长度
arr.unshift(6)//在头部插入，并返回数组新长度
删：arr.pop()///arr.shift()///arr.splice(操作的下标，删除的个数)
arr.pop()//删末尾
arr.shift()//删头部
arr.splice(1, 3)//从1开始删3个数，无删除个数时往后全删

<script>
    let arr = ["lisi", 1, 2, 3, '王五']

    for (let e of arr) {
      console.log(e)
    }

    //增
    console.log("============增==========")
    arr.push("李四", "橘子")//在末尾插入
    arr.unshift(6)//在头部插入
    for (let e of arr) {
      console.log(e)
    }

    //删
    console.log("============删==========")
    arr.pop()//删末尾
    arr.shift()//删头部
    arr.splice(1, 3)//从1开始删3个数
    for (let e of arr) console.log(e)//console.log(arr)
  </script>

综合使用案例：

设计一个四季收入柱形图

相关代码：

<!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>
<style>
  .box {
    display: flex;
    justify-content: space-between;
    width: 500px;
    height: 400px;
    margin: 0 auto;
    /* background-color: orange; */
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    /* 侧轴底部对齐 */
    align-items: flex-end;
    /* 文本居中 */
    text-align: center;
  }

  .box>div {
    display: flex;
    /* 改主轴：row行，clumn列 */
    flex-direction: column;
    justify-content: space-between;
    width: 80px;
    /* height: 150px; */
    background-color: orange;
  }

  .num {
    /* 移出div */
    margin-top: -20px;
  }

  .time {
    /* 移出box */
    margin-bottom: -25px;
    font-weight: 700;
  }
</style>

<body>

  <script>
    let t = []
    for (let i = 1; i <= 4; i++) {
      t[i] = +prompt(`输入第${i}个季度的盈利`)
    }
    document.write(`
    <div class="box">
    <div>
      <span class="num">${t[1]}</span>
      <div class="zhu" style="height:${t[1]}px"></div>
      <span class="time">第一季度</span>
    </div>
    <div>
      <span class="num">${t[2]}</span>
      <div class="zhu" style="height:${t[2]}px"></div>
      <span class="time">第二季度</span>
    </div>
    <div>
      <span class="num">${t[3]}</span>
      <div class="zhu" style="height:${t[3]}px"></div>
      <span class="time">第三季度</span>
    </div>
    <div>
      <span class="num">${t[4]}</span>
      <div class="zhu" style="height:${t[4]}px"></div>
      <span class="time">第四季度</span>
    </div>
  </div>
    `)
  </script>
</body>

</html>

实现效果：

图1：