JS 基础

最新推荐文章于 2024-07-26 11:41:15 发布

NoFear1015

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量55

点赞数

分类专栏：前端文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44697506/article/details/132083946

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

JS基础

一、JS的引入方式

**内部：**写在的上面

<body>
    <script>
        alert('你好，欢迎来到js世界~')
    </script>
</body>

**外部：**将.js文件写到js文件夹中，然后再引入

<body>
    <script src="./js/my.js"></script>  //外部js不要写代码，写了也不会被执行
</body>

**内联：**写在标签内部

<body>
    <button onclick="alert('逗你玩~')">点我月薪过万</button>
</body>

二、JS注释

//  这是js单行注释 快捷键：Ctrl+/

/* 这是js多行注释
这是js多行注释
这是js多行注释 */    快捷键：shift+Alt+a

三、JS输入输出语法

<!--输出语法-->
<body
    <script>
        // 输出语句
        alert('逗你玩~')
        document.write('js输出语法')
        console.log('日志')
        // 输入语句
        prompt('请输入您的年龄:')
    </script>

**注意：**alert()、prompt()会有限执行

四、变量

<body>
    <script>
				//变量声明用let
        let age = 20,name='ahong'
        alert(age)
      	//用户输入变量的值
      	let uname
        uname=prompt('请输入姓名')
        document.write(uname)
    </script>
</body>

**本质：**程序在内存中申请一块用来存放数据的小空间

变量命名规范：

不能用关键字作为变量名，如let、var、if等
变量名中只能出现字母、数字、下划线、$，且数字不能在开头
严格区分大小写

var声明变量的不合理点：

可以先使用、后声明
var声明的变量可以重复声明

常量：用关键字const声明。如 const PI = 3.14

五、数据类型

基本数据类型：

number 数字型——>所有的数字，正数、负数、浮点数等等
string 字符串型——>用单引号、双引号、反引号括起来
boolean 布尔型——>只有true、false两种值
undefined 未定义型——>只定义、不赋值的变量为未定义型
null 空类型——> 定义格式：let age = null

引用数据类型

object对象

<script>
  			// 字符串拼接
        let age = prompt('请输入年龄：')
        document.write('我今年' + age + '岁了')

        // 模板字符串
        document.write(`我今年${age}岁了`) // 必须使用反引号
    </script>

检测数据类型格式：typeof 变量名 eg：typeof age

六、类型转换

隐式转换：

+号两边只要有一个字符串，都会把另一个转成字符串
除了+号外的运算符，如- * /都会把数字类型转换成数字类型
+号作为正号解析时，可以将字符串转化为数字型(单用时)

显示转换：

转换为数字类型

Number(数据) 若字符串内容为非数字时，转换失败为NaN
parseInt(数据) 只保留整数——>向下取整
parseFloat(数据) 可以保留小数

转换为Boolean类型：

0、undefined、null、NaN转换为布尔类型都为false，其余都为true

七、运算符

赋值运算符： = += -= /= *=

一元运算符：正负号 ++ –

比较运算符：> < >= <= == === != !==(不全等)

：只判断值是否相等，如2’2’ 返回true
=：判断值和数据类型是否相等，如2’2’ 返回false**（常用）**
!=和 !==与上述两个类似

逻辑运算符：&&(与) ||(或) !(非)

运算符优先级：

优先级	运算符	顺序
1	小括号	()
2	一元运算符	++ – !
3	算数运算符	先* / % 后 + -
4	关系运算符	> >= < <=
5	相等运算符	== != === !==
6	逻辑运算符	先&& 后\|\|
7	赋值运算符	=
8	逗号运算符	,

八、分支语句和循环语句

**程序三大流程控制语句：**顺序结构、分支结构和循环结构

分支语句：

if分支

<body>
    <script>
        if(条件){
            alert('')
        }
        else if(条件){
						alert('')
        }
        else(条件){
            alert('')
        }
    </script>
</body>

三元运算符

// 条件?满足条件执行这里:不满足条件执行这里
<script>
        let num1 = +prompt('请输入第一个数')
        let num2 = +prompt('请输入第二个数')
        max = num1>=num2 ? num1 : num2
        alert(max)
    </script>

switch分支

<body>
    <script>
        let choice = +prompt('请输入您的选择')
        switch (choice){
            case 1:
                document.write('您选择的是1分支')
                break
            case 2:
                document.write('您选择的是2分支')
                break
            case 3:
                document.write('您选择的是3分支')
                break
            default:
                document.write('无符合条件的')
        }
    </script>
</body>

**总结：**分支语句少时，if…else语句执行效率高；分支语句多时，switch语句执行效率高，且结构清晰。

循环语句：

while循环

<script>
        let num = 0
        while (num<100){
            console.log(`这是第${num}次执行`);
            num++
        }
    </script>

for循环

//语法 for(遍历起始值;终止条件;变量变化量){
//				循环体
//}

循环结束：

break：退出循环
continue：结束本次循环，继续下次循环

计算数组长度：数组名.length

循环嵌套

//语法 for(外部遍历起始值;终止条件;变量变化量){
//					for(内部遍历起始值;终止条件;变量变化量){
//				循环体
//					}
//}
 <script>
        // for循环打印乘法表
        for (i = 1; i <= 9; i++){
            for(j = 1; j <= i; j++){
                document.write(`${i}*${j}=${i*j}&nbsp&nbsp&nbsp`)
                if(i === j){
                    document.write('<br>')
                }
            }
        }
    </script>

九、数组

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

数组操作：

// 增
// arr.push(数据1, 数据2, 数据3)  在数组arr末尾添加数据，返回添加元素后数组长度
// arr.unshift(数据1, 数据2, 数据3)  在数组arr开头添加数据，返回添加元素后数组长度

// 删
// arr.pop() 删除数组末尾的元素，并返回删除元素的值
// arr.shift() 删除数组开头的元素，并返回删除元素的值
// arr.splice(起始位置, 删除几个元素)

// 数组排序
//arr.sort(function(a,b){    
//            return a - b        //升序用a-b，降序用b-a
//       })

十、函数

**函数：**执行特定任务的代码块

**作用：**精简代码、方便复用

// 函数声明
function 函数名(){
		函数体
}

// 函数调用
函数名()

函数传递参数：提高函数的灵活性

// 函数声明
function 函数名(参数1, 参数2, 参数3,...){
		函数体
}

return：

将函数内部的执行结果交给外部使用
return后面的语句不会被执行
return语句不能换行写

作用域：

全局作用域：作用于所有代码执行的环境
局部作用域：作用于函数内的代码环境

匿名函数：

使用方式

// 匿名函数函数表达式
// 定义
let num = function(参数1, 参数2){
  
}
// 调用
num(参数1, 参数2)

匿名函数与具名函数区别：

具名函数可以写到任意位置

函数表达式必须先写表达式，后调用

// 匿名函数之立即执行————>防止变量污染
// 方式一
(function(形参){
  
})(实参);
// 方式二
(function(形参){
  
}(实参));

十一、对象

**对象(object)：**一种数据类型，是无序的数据集合——>用于描述某个具体的事物。

对象由属性和方法组成

// 对象声明
let person = {}

let 对象名 = {
  属性:属性值,        // 属性和属性值之间用:隔开；多个属性之间用,隔开
  方法:函数,
}

对象的操作：属性的增删改查

let goods = {
            uname : '小米',
            num : '100457',
            weight : '0.4kg',
            address : '中国大陆'

        }
// 查      对象名.属性   对象名['属性']
goods.uname
goods['属性']
// 改      对象名.属性 = 其他值
goods.weight = '0.7kg'
// 增      对象名.新属性 = 值
goods.price = 4999
// 删       delete 对象名.属性
delete goods.num

对象的方法

let goods = {
            uname : '小米',
            num : '100457',
            weight : '0.4kg',
            address : '中国大陆',

            // 方法
            Print : function(){
                document.write('num')
            }
        }

遍历对象：

// 对象的遍历
       for (let k in goods){        // k为字符串类型
        console.log(k)
        console.log(goods[k])
       }

内置对象：

1、Math对象

Math.random() 生成0-1之间的随机数，包括0和不包括1
Math.ceil() 向上取整
Math.floor() 向下取整
Math.max() 取最大值
Math.min() 取最小值
Math.pow() 幂运算
Math.abs() 取绝对值
Math.round() 四舍五入

null是空对象

**生成N-M之间的随机数：**let r = Math.floor(Math.random()*(N-M+1)+N)

十二、拓展

1、术语解释

术语	解释	例子
关键字	在JS中有特殊意义的词	let、var、function、if、else、break等
保留字	未来可能有特殊含义的词	int、strong、long、char
标识符	变量名、函数名的另一种叫法	无
表达式	能产生值的语句，一般和运算符一起出现	10+3
语句	一段可执行的代码	if()、for()