《初探 JavaScript：从变量声明开启代码魔法之旅》

Camellia.71

已于 2025-04-12 22:16:24 修改

阅读量988

点赞数 32

文章标签： javascript 开发语言 ecmascript

于 2025-04-12 21:59:49 首次发布

本文链接：https://blog.csdn.net/2403_87955220/article/details/146963949

版权

在进入JavaScript的世界之前，我们先来了解一下JS帝国的三大巨头，分别是ECMAscript，BOM和DOM大人，本篇博客将采用案例讲述的方式，回顾基础内容，那我们

gogogo~出发喽~

1.输入输出

这是一个简单的输入输出案例，下面我们通过输入与输出两个部分来划分；首先是输入部分，代码如下：

  let price = +prompt('请输入商品价格：')
  let num = +prompt('请输入商品数量：')
  let address = prompt('请输入收货地址：')
  let total = price * num

接下来是输出部分代码：

 document.write(`
  <table>
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
    </tr>
    <tr>
        <td>小米手机青春plus</td>
        <td>${price}元</td>
        <td>${num}</td>
        <td>${total}元</td>
        <td>${address}</td>
    </tr>
  </table>
        `)

除了上方案例中用到的输入输出外，还有以下几种：

alert('页面弹出警示框')
console.log('控制台打印')

至于常量，数组的声明，下方做一个简单介绍：

const 常量名 = 值
let 数组名 = [数据1，数据2，数据3]

还有需要注意的一点是js的执行顺序：

1.按照html文档流的执行顺序

2.prompt和alert会跳过页面渲染直接执行

第一章节的最后是数据类型的转换，了解转换之前呢我们先来了解一下js当中的数据类型

首先就是值类型，也叫基本类型：

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol

另一种就是我们的引用数据类型，也叫做对象类型：

对象(Object)、数组(Array)、函数(Function)

还有两个特殊的对象：正则（RegExp）和日期（Date）

这就分为隐式类型转换和显式类型转换

隐式类型转换主要是指计算机内部自主转换，比如+两边有一个是字符串的话另一个会自主转化成为字符串；除了+以外，/，*，-都会把数据转化为数字类型；

显式类型转换

console.log(Number(数据))
转换成数字类型；如果字符串内容中有非数字，转换失败结果为NaN；NaN也是number类型的数据，代表非数字
parselnt(数据)
只保留整数

在这里需要注意的是布尔型的数据类型转换，只有空字符串，0，null，undefined，NaN，false是假，其余都为真。

2.运算符与语句

这是一个应用for循环来完成九九乘法表的案例，我们先来介绍他的js部分代码：

<script>
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`<span>${j} × ${i} = ${i * j}</span>`)
      }
    document.write('<br>')
    }
</script>

这里运用循环的嵌套来实现行和列的输出，然后是css代码部分：

<style>
    span {
       display: inline-block;
       width: 100px;
       padding: 5px 10px;
       border: 1px solid rgb(22, 185, 226);
       border-radius: 5px;
       margin: 5px;
       box-shadow: 2px 2px 2px rgba(20, 144, 197, 0.5);
       background-color: rgba(20, 144, 197, .1);
       text-align: center;
       color: rgb(12, 27, 190);
    }
</style>

案例展示完毕后我们看一下运算符部分，运算符包括一元运算符，赋值运算符，比较运算符和逻辑运算符几种，我们重点介绍一下比较运算符：

逻辑运算符就是与，或，非三种，这点我们会在函数部分涉及逻辑中断；

运算符优先级也是我们需要了解的部分：

运算符告一段落，接下来进入分支语句的学习，这里又分为单分支语句，多分支语句和循环语句，for循环在案例中已经演示，我们就只来介绍while循环；

单分支语句

if (条件-除了0，所有数字都为真；除了空字符串，所有字符串都为真) {
	console.log('###')
}

双分支语句

if (条件) {
}else {
}

多分支语句

switch (数值) {
	case 1:
	代码1
	break
	case 2:
	...
	default :
	代码
}

while循环

while(循环条件) {
	代码
	自增或自减
}

说到分支语句就要考虑break和continue的区别了，break是退出整个循环；continue是结束当前循环，继续下一次循环；

3.数组

首先来看一下js部分的代码：

<script>
    let arr = []
    for (let i = 1; i <= 4; i++) {
       arr.push(prompt(`请输入第${i}季度的数据：`))
    }
    document.write(`<div class="box">`)
    for (let i = 0; i < arr.length; i++) {
       document.write(`
          <div style="height: ${arr[i]}px;">
          <span>${arr[i]}</span>
          <h4>第${i + 1}季度</h4>
          </div> 
          `)
    }
    document.write(`</div>`)
</script>

这里运用for循环和数组结合来实现数据的输入，接下来是css部分：

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            flex-direction: column;
            justify-content: space-between;
        }

        .box div span {
            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>

案例展示完成后，我们从数组的声明，修改，增添和删除四个方面来认识一下数组；

声明有两种方式，分别是字面量声明和new Array构造函数声明：

let arr = ['111','222','333','444']
for(let i = 0; i <= arr.length - 1; i++) {
	console.log(arr[i])
}

let arr1 = new Array(1,2,3,4,'pink',true)

修改就非常简单：

let arr1 = ['pink', 'red', 'green']
  arr1[0] = 'hotpink'
  console.log(arr1)
for (let i = 0; i < arr1.length; i++) {
  // arr1[i] = arr1[i] + '老师'
  arr1[i]+='老师'
}

增添有两种方式，分别是在开头增添和结尾增添：

let arr = ['pink', 'red']
 // console.log(arr.unshift('deeppink'))//返回数组新的长度
 arr.unshift('deeppink')  //开头
 arr.push('deeppink')  //结尾
 console.log(arr)

删除则有三种：

let arr = [1,2,3,4]
arr.pop()//只能删除最后一个
arr.shift()//只能删除第一个元素
arr.splice(起始位置,删除几个元素)

4.函数

js部分代码如下：

<script>
    let second = +prompt('请输入总秒数：')
        function time(x) {
            let h = parseInt(x / 60 / 60 % 24)
            let m = parseInt(x / 60 % 60)
            let s = parseInt(x % 60)
            h = h < 10 ? '0' + h : h
            m = m < 10 ? '0' + m : m
            s = s < 10 ? '0' + s : s
            return `转换完毕之后是${h}时${m}分${s}秒`
        }
    let str = time(second)
    document.write(str)
</script>

函数其实就是执行特定任务的代码块，接下来我们通过函数的结构，作用域，返回值等方面进行认识；

函数的声明，调用与返回值：

//声明
fuction 函数名(参数：可以是变量) {
	函数内容
    return //作为函数的返回值
}
//调用
函数名()
let num = 函数名() //可以直接使用返回值

在这里需要注意的一点是，return后面的函数不会被执行；

关于作用域，作用域就是限定名字的可用性的代码范围，函数内部的形参是局部变量，但如果函数内部变量没有声明而是直接赋值，那可以当作全局变量来看；

关于函数的使用位置，具名函数可以在任意位置使用；但函数表达式必须先声明再使用

最后是我们的立即执行函数，特殊的一点是多个立即执行函数之间必须加分号，不然会报错：

(function(x,y){
     console.log(x+y)
})(1,2)

让我们回忆一下在博客的开始我们介绍了运算符，现在终于到达逻辑中断部分，其实逻辑中断就是逻辑与，逻辑或在执行过程中的顺序问题导致的：

console.log(11&&22) //输出22
console.log(11||22) //输出11

5.对象

这个案例也是只有js代码部分：

<script>
        function GetColor(flag = true) {
            if (flag) {
                let str = '#'
                let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
                for (let i = 1; i <= 6; i++) {
                    let ran = arr[Math.floor(Math.random() * arr.length)]
                    str += ran
                }
                return str
            }
            else {
                let r = Math.floor(Math.random() * 256)
                let g = Math.floor(Math.random() * 256)
                let b = Math.floor(Math.random() * 256)
                return `rgb(${r},${g},${b})`
            }
        }
        console.log(GetColor(false))
        console.log(GetColor(true))

    </script>

对象是js中的一种数据类型，他是无序的，下面我们了解一下它的使用、

声明：

let 对象名 = {}
或者
let 对象名 = new Object{}

增删改查：

这里需要注意的是查有另一种形式，这种形式在遍历对象中会用到；

//查的另一种格式
let goods = {
	name:'pink',
	age:'18',
	address:'中国大陆',
	weight:'0.55kg',
	'obj-type':'phone',
} 
console.log(goods['obj-type'])
console.log(goods['age'])

紧接着就是遍历对象的代码展示，这里需要知道在遍历对象中，获得对象是k；获得对象的值是obj[k]; ：

let arr = {
    name:'pink',
    age:18,
    address:'中国大陆',
    weight:'0.66kg'
 }
for(let k in arr) {
    console.log(arr[k])
 }
//这样写的原因是数组中表示为字符串模式，如果用console.log(arr.k),则是用
//console.log(arr.'name'),不符合使用要求

最后就是我们在案例中用到的内置对象：

<script>
    null 类似于let obj = {}
    console.log(Math.PI)
	console.log(Math.ceil(3.2))
	console.log(Math.floor(3.9))
</script>

在这里需要格外了解的就是随机数的使用；

console.log(Math.floor(Math.random() * (M - N + 1)) + N)
//生成N-M之间的随机数

6.补充

系统的知识我们已经顺过一遍，最后就是一些小补充：

栈：由操作系统自动分配释放存放函数的参数值，局部变量的值等，其操作方式类似于数据结构中的栈

简单数据类型存放到栈里面

堆：储存复杂数据类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收

引用数据类型存放到堆里面

到这里，我们的js初始就告一段落了，下一次见面就是APIs的站点，那就

期待重逢 ~

左手的泥呀右手的泥呀

知己的花衣裳

世界本该是你醒来的摸样

左眼的悲伤右眼的倔强

看起来都一样

原来你就是我自负的胆量

小小copy一下hyyyyy大人的风格