【JavaScript学习笔记】基础知识，基础语法，流程控制，数组，函数

已于 2024-08-08 19:58:27 修改
阅读量286 收藏
点赞数
文章标签： javascript 前端 html
于 2022-05-07 13:45:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lbl_1999_mx/article/details/122567801
版权

1、JS基础知识

JavaScript是什么

运行在客户端的脚本语言
不需要编译，运行过程中由解释器逐行解释并执行
也可以基于Node.js进行服务端编程

JavaScript作用

表单动态校验（密码强度检测）
网页特效
服务端开发（Node.js)
桌面程序（Electron）
App（Cordova）
控制硬件-物联网（Ruff）
游戏开发（cocos2d-js）

浏览器组成

渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink。
JS引擎：俗称JS解释器，用来读取网页中的JavaScript代码，将高级语言转化为机器语言，如chrome浏览器的V8。

JavaScript组成

ECMAScript——JS基础
DOM——文档对象模型
BOM——浏览器对象模型

JavaScript位置

行内

<input type="button" value="李秉林" onclick="alert('大学生')"/>

内嵌

<script>
	alert('Hello World!');
</script>

外部

<script src="my.js"></script>

JavaScript注释

//单行注释
/*多行注释*/

JS三种输出

//浏览器弹出输入框，用户可以输入
prompt(information);
//浏览器控制台打印输出信息
console.log(message);
//浏览器弹出警示框
alert(message);

2、JavaScript基础语法

变量

变量声明

//声明一个变量，赋值
var age;
age = 10;
//声明多个变量
var age = 10,myname = 'libinglin',gender = '男'；
//变量的初始化
var age = 10；
var myNmae = 'libinglin';
//未定义变量
var age；
console.log(age);//undefined
//不声明直接赋值使用
age = 100;
console.log(age);//100
console.log(typeof(age));//number

变量名命名规范

  • 由字母、下划线、数字和美元符号组成
  • 严格区分大小写
  • 不能以数字开头
  • 不能是关键字、保留字
  • 变量名必须有意义
  • 遵守小驼峰原则
//区分大小写
var age = 10;
var Age = 100;
console.log(age);//10
console.log(Age);//100

实例2.1：输入名字，并弹出

var myname=prompt('请输入名字：');//李秉林
alert(myname);//李秉林

实例2.2：交换两个变量值

var apple1 = 'red';
var apple2 = 'green';
console.log(apple1,apple2);
var apple;//temporary variable;
apple = apple1;
apple1 = apple2;
apple2 = apple;
console.log(apple1,apple2);

数据类型

JS的数据类型只有在程序运行时才能确定
JavaScript拥有动态类型，相同的变量可以赋予不同数据类型

简单数据类型

简单数据类型说明默认值
Number数字型，包含整数型和浮点型，如21、0.210
Boolean布尔值类型，true或false，等价于1或0false
String字符串类型，如"张三"，字符串都带引号“”
Undefinedvar a; 声明了变量未赋值，a==undefinedundefined
Nullvar a=null; 声明了a为空值null

Number

二进制
八进制 0-7，数字前面加0表示八进制
十进制
十六进制 0-9，A-F，数字的前面加0x表示十六进制

//数字型最大值：Number.MAX_VALUE
console.log(Number.MAX_VALUE);//1.7976931348623157e+308
//数字型最小值：Number.MAX_VALUE
console.log(Number.MIN_VALUE);//5e-324
//无穷大：infinity
console.log(Number.MAX_VALUE*2);//Infinity
//无穷小：-infinity
console.log(-Number.MAX_VALUE*2);//-Infinity
//非数值：NaN,Not a Number
console.log(100-'李秉林');//NaN
//isNaN()用来判断是否数字

String

JS可以用单引号套双引号，或者双引号套单引号
字符串转义符，用反斜杠开头

  • \n——换行符
  • \\——斜杠
  • \’——单引号
  • \"——双引号
  • \t——tab缩进
  • \b——空格，b是blank’

案例2.3：弹出网页指示框

/*警告框弹出爷爷闪亮登场,
我日你大爷，
喊："收破烂了"*/
alert('爷爷闪亮登场\n,我日你大爷\n,喊："收破烂了"');
/*页面显示爷爷闪亮登场,
我日你大爷，
喊："收破烂了"*/
document.write('爷爷闪亮登场"<br/>",我日你大爷"<br/>",喊："收破烂了"');

字符串长度——length();//参数值字符串
字符串拼接——可使用**+**链接

  • 字符串+任何类型=拼接后的新字符串
  • 数值相加，字符相连
  • 引引加加

undefined

和字符相加——undefined字符
和数字相加——NaN

null

null加字符——null字符
null加数值——该数值

基础方法

获取数据类型

  • typeof 数据——alert(typeof null); //输出——Object
  • console.log(数据)——console.log(null); //输出——null

数据类型转换

转字符串

  • toString()
var num = 1; str = num.toString();//str=='1'
  • String(变量)
var num = 1; str = String(num);//str=='1'
  • +号拼接字符串
var num = 1; str = num + '哈哈';//1哈哈

转数字型

  • parseInt(string)——得到整数，向下取整
parseInt('3.14');//3
parseInt('3.999');//3
parseeInt('100px');//100
parseInt('rem120');//NaN
  • parseFloat(string)——得到浮点数
parseFloat('3.14');//3.14
parseFloat('120px');//120
parseFloat('rem100');//NaN
  • Number()
Number('120');//120
Number('abc');//NaN
Number('100px');//NaN
  • js隐式转换——减号(-)、乘号(*)、除号(/)
'10' - 0;//10
'100' - '12';//88
'123' * 1;//123

案例2.4：用户输入出生年份，计算年纪

var bornYear = prompt("请输入你的出生年份：");
var age = 2021 - bornYear;
alert('您今年'+age+'岁了');

案例2.5：简单加法器，依次弹出两个输入框，输入数字并相加，显示

var num1 = prompt('请输入第一个数：');
var num2 = prompt('请输入第二个数：');
var sum_ = Number(num1) + Number(num2);
alert(sum_);

转布尔型

  • Boolean()
//以下五个值均为false
Boolean('');
Boolean(NaN);
Boolean(null);
Boolean(undefined);
Boolean(0);

标识符、关键字、保留字

综合案例2.6：写一个算法，交换两个变量

function exchangeVar(var,var){
    console.log(var1,var2);
    var temp;
    temp = var1;
    var1 = var2;
    var2 = temp;
    console.log(var1,var2);
}
var var1 = prompt("请输入一个变量：");
var var2 = prompt("请输入一个变量：");
exchangeVar(var1,var2);

综合案例2.7：分别询问姓名、年龄、性别，并打印

function displayInfo(a,b,c){
    document.write("您的姓名是："+name_+"<br/>");
    document.write("您的性别是："+gender+"<br/>");
    document.write("您的年龄是："+age+"<br/>");
}
var name_ = prompt("请输入姓名：");
var gender = prompt('请输入性别：');
var age = prompt("请输入年纪：");
displayInfo(name_,gender,age);

运算符

算数运算符

  • 加(+)、减(-)、乘(*)、除(/)、取余(%)

逻辑运算符

  • 逻辑与——&&——有假为假
//逻辑与短路（中断）
console.log(123 && 345);//345
console.log(0 && 123);//0
console.log('' && 1 + 2 && 100);//空字符串，''
  • 逻辑或——||——有真为真
//逻辑或短路（中断）
console.log(123 || 345);//123
console.log(123 || 345 || 456);//123
console.log(0 || 234 || 345);//234
//特殊情况
var  num = 0;
conslole.log(123 || num++);//123为真，num++不执行
console.log(num);//num等于0
  • 逻辑非——!——取反

递增或递减运算符

  • 先加/减1，再返回——++num、–num
  • 先返回，后加/减1——num++、num–

比较运算符

  • 大于(>)、小于(<)、大于等于(>=)、小于等于(<=)、不等于(!=)、不全等(!==)
  • 等于(==)——会包含隐式转换，要求值一致
  • 全等(===)——数据类型和值都相同

赋值运算符

  • =、+=、-=、*=、/=、%=

运算符优先级

  • 一 小括号 ()
  • 二 一元 ++、–、！
  • 三 算数 先*、%、/后+、-
  • 四 关系 >、>=、<、<=
  • 五 相等 、！=、=、！==
  • 六 逻辑 先&&后||
  • 七 赋值 =
  • 八 逗号 ，

3、流程控制

顺序

从前往后依次运行

分支

if…else…结构——单、双、多分支

案例3.1：判断用户年纪

var age = prompt('请输入年龄：');
if(age >= 18){
alert("你可以进网吧");
}else{
alert("年纪太小啦");
}

案例3.2：判断闰年

var years = prompt("请输入年份：");
Year = parseInt(years);
if(Year % 400 == 0 || Year % 100 != 0 && Year % 4 == 0){
alert(Year+"是闰年");
}else{
alert(Year+"不是闰年");
}

案例3.3：判断成绩等级

var score = parseInt(prompt("请输入你的成绩："));
if(score >= 90){
alert("A");
}else if(score >= 80){
alert("B");
}else if(score >= 70){
alert("C");
}else if(score >= 60){
alert("D");
}else{
alert("E");
}

三元运算符

  • 条件表达式 ？ 表达式1 ： 表达式2

案例3.4：数字补0

var num = prompt("请输入一个0-59的数：");
var num2 = num < 10 ? "0"+num : num;
alert(num2);

switch…case…——主要针对变量

匹配时是要满足全等才能匹配

switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2:
break;
……
default:
执行最后默认语句;
}

案例3.5：查询水果价格

var fruit = prompt("请输入要查询的水果：");
switch(fruit){
    case '苹果':
        alert(fruit+"10员/斤");
        break;
    case '香蕉':
        alert(fruit+"15员/斤");
        break;
    case '梨子':
        alert(fruit+"5员/斤");
        break;
    default:
        alert("没有找到这种水果！");
        break;
}

switch…case…和if…else…区别

  • 分支少时，if…else…效率更高
  • 分支多时，switch…case…效率更高
  • if…else…使用更加灵活，判断范围更大
  • switch…case…适用于确定值的判断

循环

可以重复执行某些代码

for循环

初始化变量用作计数器使用
条件表达式指定终止条件
操作表达式对计数器更新
for(初始化变量; 条件表达式; 操作表达式){
循环体
}

for (var i = 1; i <= 100; i ++) {
    console.log("你好吗");
}
/*首先执行var i= 1；只执行一次
判断 i <= 100; 满足条件执行循环体
执行i ++；判断i <= 100; 满足条件执行循环体
……
执行i ++；判断i <= 100; 不满足，退出循环*/

案例3.6：1-100累加

var sum = 0;
for(var i = 1; i <= 100; i ++){
    sum += i;
}
console.log("1-100累加之和为"+sum);

案例3.7：1-100偶数和和奇数和

var sumOdd = 0;
var sumEven = 0;
for (var i = 1; i <=100; i ++) {
    if(!(i % 2){//i % 2 == 0
        sumEven += i;
    }else{
        sumOdd += i;
    }
}
console.log("奇数和："+sumOdd);
console.log("偶数和："+sumEven);

案例3.8：1-100能被三整除的数字的和

var sumThree = 0;
for (var i = 1; i <=100; i ++) {
    if(!(i % 3)){//i % 3 == 0
        sumThree += i;
    }
}
alert(sumThree);

案例3.9：求班级平均成绩

var scoreSum = 0;
var peoNum = prompt("请输入班级人数：");
for (var i = 1; i <= peoNum; i ++) {
    scoreSum += parseInt(prompt('请输入第'+i+'人成绩'));
}
var scoreMean = scoreSum / peoNum;
alert('班级共'+peoNum+'人,\n平均成绩是'+scoreMean+'分！');

案例3.10：一行打印n个@

var num_ = parseInt(prompt("请输入一个数："));
var str = '';
for (var i = 1; i <= num_; i ++) {
    str += '@';
}
console.log(str);

案例3.11：双重循环

//打印下三角@
for (var i = 1; i <= 10; i ++) {
    for (var j = i; j <= 10 ; j ++) {
        document.write('@');
    }
    document.write('<br/>');
}
//打印倒三角@
for (var i = 1; i <= 10; i ++) {
    for (var j = 1; j <= i ; j ++) {
        document.write('@');
    }
    document.write('<br/>');
}
//打印五行五列@
var str = '';
for (var i = 0; i < 5; i ++) {
    for (var j = 0; j < 5; j++) {
        str += '@';
    }
    //一行打印完毕后另起一行
    str += '\n';//添加换行符
}
console.log(str);

案例3.12：九九乘法表

var str = '';
for (var i =1; i < 10; i ++) {
    for (var j = 1; j <= i; j ++) {
        str += j+'*'+i+'='+i*j+'\t';
    }
    str += '\n';
}
console.log(str);

while循环

while(条件表达式){
//循环体
}

//1-100求和
var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i ++；
}
console.log(sum);

案例3.13：非“我爱你”一直循环

//方法一
while (true) {
    var a = prompt("你爱我吗？");
    if(a == '我爱你'){
        break;
    }
}
//方法二
var message = prompt("你爱我吗？");
while (message !== '我爱你') {
    message = prompt("你爱我吗？");
}

do…while…循环

至少执行一次循环体
do{
//循环体
}while(条件表达式)

continue和break

  • continue——跳出本次循环，继续下一次循环
  • break——跳出整个循环

案例3.14：简易ATM

//初始存款100
//输入1存款，然后显示余额
//输入2取款，判断金额大小，符合然后显示余额
//输入3显示余额
//输入4退出
var money = 100;
while(true){
    var num = parseInt(prompt('请选择你想要的功能：\n' +
	'1、存钱\n' +
	'2、取钱\n' +
	'3、显示余额\n' +
	'4、退出'));
    if(num == 1){
        money1 = parseInt(prompt('存钱：'));
        money =money + money1;
        alert('您的余额为：' + money);
    }else if(num == 2){
        money2 = parseInt(prompt('取钱：'));
        if(money2 < money){
            money =money - money2;
            alert('您的余额为：' + money);
        }
    }else if(num == 3){
        alert('您的余额为：' + money);
    }else{
        break;
    }
}

4、数组

概念：一组数据的集合，可以存放任何类型元素

创建数组

  • 利用new创建数组
var arr = new Array();//创建一个空数组
//数组赋值
arr[0] = 1;//Number
arr[1] = 'love';//String
arr[2] = true;//Boolean
  • 利用数组字面量
var arr = [];//创建一个空数组
var arr1 = [1, '李秉林'，true];//数组初始化

访问数组

利用数组下标，从0开始，例：数组名[索引号]

数组中没有元素时输出undefined

遍历数组

利用循环从头到尾访问

获取数组长度——数组名.length

var arr = ['red', 'blue', 'yellow', 'pink'];
for(var i = 0; i < arr.length; i ++){
console.log(arr[i]);
}

重要案例

案例4.1：数组求和和平均值

var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i ++) {
sum += arr[i];
}
average = sum / arr.length;
console.log(sum);
console.log(average);

案例4.2：求数组中最大值

var arr = [2, 6, 1, 77, 52, 25, 7];
var arrMax = arr[0];
for (var i = 0; i < arr.length; i ++) {
if(arr[i] > arrMax){
   arrMax = arr[i];
}
}
console.log(arrMax);

哪里4.3：把数组转化为字符串

var arr = ['red', 'blue', 'yello'];
var str = '';
var step = "|";
for (var i = 0; i < arr.length; i ++) {
str += arr[i] + step;
}
console.log(str);

数组中新增元素

  • 修改length长度，未赋值元素为undefined
  • 修改索引号，增加或替换
注意 不要直接给数组名赋值，数组值被替换

案例4.4：新建数组，存放1-n

var num = prompt("请输入数组长度：");
var arr = [];
for (var i = 1; i <= num; i ++) {
   arr[i-1] = i;
}
console.log(arr);

案例4.5：将数组中大于10的元素选出来，放入新数组

var arr = [2, 0, 6, 1 ,77,0, 52, 0,25, 7];
var newArr = [];//创建一个新空数组
var j = 0;
for (var i = 0; i <arr.length; i ++){
   if (arr[i] >= 10) {//挑选元素
       newArr[j ++] = arr[i];
       //刚开始
       //newArr[newArr.length ++] = arr[i];
   }
}
for(var n = 0; n < arr.length; n ++){
console.log(arr[n]);//输出arr
}
for(var t = 0; t < newArr.length; t ++){
console.log(newArr[t]);//输出newArr
}

案例4.6：数组去0（保存在原数组）

var arr = [2, 0, 6, 1 ,77 ,0, 52, 0,25, 7];
var a = arr.length,j = 0;
for (var i = 0; i < a; i ++){
   if (arr[i] == 0){
       continue;
   }else {
       arr[j] = arr[i];
       j ++;
   }
}
for (var n = 0; n < j; n ++) {
console.log(arr[n]);//输出arr
}

案例4.7：数组反转

var arr = ['red', 'blue', 'yellow', 'green', 'pink', 'brown'];
for (var i = 0 ;i < arr.length / 2; i ++){
   var temp = arr[i];//中间变量
	arr[i] = arr[arr.length - i - 1];
	arr[arr.length - i - 1] = temp;
}
console.log(arr);

案例4.8：数组冒泡排序

var arr = [8,4,6,5,2,7,3,9];
for (let i = 0; i < arr.length - 1; i++) {
   for (let j = arr.length - 1; j >= i; j --) {//最小的放前面
       if (arr[j] < arr[j - 1]){
           let temp = arr[j];
           arr[j] = arr [j - 1];
           arr[j - 1] = temp;
           flag = false;
       }
   }
}
for (var n = 0; n < arr.length; n ++) {
console.log(arr[n]);//输出arr
}//2,3,4,5,6,7,8,9

5、函数(function)

函数

封装了一段可以被重复执行的代码块，实现代码复用问题

函数使用

函数不调用，自己不执行

声明函数

function 函数名 （） {
//函数体
}

调用函数

函数名（）

函数参数

函数形参实参使用

函数的参数可以有也可以没有

//函数声明
function 函数名(形参1，形参2，…){
 //函数体
}
//函数调用
函数名(实参1，实参2，……);

案例5.1：利用函数求两数之间和

function getSum(num1,num2){
    var sum = 0;
    for (var i = num1; i <=num2; i ++) {
        sum += i;
    }
    console.log(sum);
}
getSum(20,30);

函数参数个数匹配

  • 如果实参个数和形参个数一致，正常输出
  • 如果实参个数多于形参个数，会取到形参个数
  • 如果实参个数少于形参个数，多余形参定义为undefined，结果为NaN

函数的返回值

函数内部不应该有输出语句

函数返回值格式

/*
function 函数名(){
    return 需要返回的结果
}
函数名() = return后面的结果
*/
//求和函数
function getSum(a, b){
    return a + b;
}
getSum(1,3);//getSum(1,4) = 4
var sum = getSum(6,7);
console.log(sum);//13

实例5.2：函数求3个数最大值

function getMax(a, b, c){
    let max1 = a > b ? a : b;
    let max = max1 > c ? max1 : c;
    return max;
}
getMax(5,7,4);

实例5.3：利用函数求数组最大值

var arr = [2, 6, 1, 7, 4];
function getArrMax(arr){
    let max = arr[0];
    for (var i = 1; i < arr.length; i ++){
        if(arr[i] > max){
            max = arr[i];
        }
    }
    return max;
}
console.log(getArrMax(arr));

return注意

  • 没有return的函数返回的是undefined

  • 有终止函数的功能

  • return只返回一个值，返回的是最后一个

  • 若要返回多个，可以采用数组

实例5.4：判断素数

//方法一，直接除2到n-1
function primeNum(num){
    if(num <= 0){
        return -1;
    }else{
        for(var i = 2; i < num; i ++){
        if(num % i == 0){
            return 0;
        }
    }
    }
    return 1;
}var num = parseInt(prompt('请输入一个数'));
if(primeNum(num) == 1){
    alert('是素数');
}else if(primeNum(num) == 0){
    alert('不是素数');
}else if(primeNum(num) == -1){
    alert('输入不合法');
}
//方法二，除开平方

arguments对象

arguments——是一个内置对象(伪数组)，只有函数才有，存储了传递的所有实参

  • 具有数组的length属性
  • 按照索引方式进行存储
  • 它没有真正数组的一些方法 pop() 、push() 等
function fn(){
    console.log(arguments);
}
fn(1,2,3,4);
//Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

实例5.5：求任意个数数最大值

function getMax(){
    var max = arguments[0];
    for(var i = 1;i < arguments.length; i ++){
        if(arguments[i] > max){
            max = arguments[i];
        }
    }
    return max;
}
console.log(getMax(5,3,9,7,4,2));
编译运行
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值