JavaScript入门学习(ECMAScript)

本文详细讲解了JavaScript中行内式、内嵌式和外部脚本的书写,涵盖了单行和多行注释的使用,以及变量声明、数据类型转换、字符串操作、运算符、数组和函数的基础知识。重点讨论了字符串处理、数字类型、数组方法、函数定义及对象操作,适合初学者和进阶开发者阅读。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.JS书写位置

1.行内式的
只有特殊情况使用

    <input type="button" value="弹出弹框" onclick="alert('行内式的')" />

2.内嵌式的
在HTML头部书写

    <script>
        alert("弹框")
    </script>

3.外部的
创建一个.JS文件,在HTML的头部添加以下代码

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

2.注释

1.单行注释
加 //
快捷键Ctrl + /
2.多行注释
/* 注释内容 */
快捷键 Shift + Alt + A

3.输入输出语句

在这里插入图片描述
console.log显示在以下位置。
prompt取过来的值是字符串类型的,不能用于算术运算。
在这里插入图片描述

4.变量

1.可以保存用户输入
2.声明变量
var+变量名

var age;
age = 10;
alert(age);
或者
var age = 10;
alert(age);

3.弹出输入的内容

var name1 = prompt('请输入您的姓名');
alert(name1);

4.变量可以不声明就使用
5.变量命名规范
在这里插入图片描述
6.变量可以给变量赋值

5.数据类型

1.js用var声明变量是动态类型,赋值时确定类型
2.变量赋值后可以赋值其他类型的值
例如var age = 21; age = '21';是合法的
在这里插入图片描述
3.数字前面加0表示八进制数
var age = 010,alert显示为8。
加0x表示十六进制
4.数字型的最大最小值
在这里插入图片描述
5.数字型的特殊值
在这里插入图片描述
6.isNaN()方法,是数字返回false否则返回true
alert(isNaN('杰哥'))
不加引号不弹出
数字加引号仍是数字
引号嵌套:外双内单,内单外双
7.转义字符,以‘\’开头,要写到引号里面
在这里插入图片描述
8.bool类型与数字型进行算术运算false为0,true为1.
9.typeof方法

var age = 18;
alert(typeof age);

在这里插入图片描述
在这里插入图片描述
10.类型转换
toString
在这里插入图片描述
parseInt
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6.字符串

1.字符串长度
.length方法

var str = 'my name is jiege';
alert(str.length);

2.字符串拼接
什么类型都可以拼接

alert('jiege' + 21 + true);//输出字符串“jiege21true ”
alert(12+12);//输出数字
alert('12'+12);//输出字符串
var age = 18;
alert('jiege'+age+'岁');//输出字符串

3.字符串不可变性
在这里插入图片描述
4.返回字符在字符串中的索引
在这里插入图片描述
案例
在这里插入图片描述
5.根据位置返回字符,遍历字符串
在这里插入图片描述
6.统计字符串中字符个数
在这里插入图片描述
7.一些方法
在这里插入图片描述
8.替换字符串中的字符
在这里插入图片描述
9.字符串转数组
在这里插入图片描述

字符串中添加字符
var d1 = a.slice(0,4) + "第4位插入的字符串" + a.slice(4)
var d2 = a.slice(0,5).concat("第5位插入的字符串",a.slice(5))
字符串翻转

先将字符串转换为数组,在使用数组reverse方法翻转数组,然后数组转换为字符串。

function reverseString(str) {
    var arr = str.split("");//分割字符串为数组
     str = arr.reverse();//颠倒数组中元素顺序
     str = str.join("");//数组转换为字符串
     return str
}

知识点:
split() 方法:用于把一个字符串分割成字符串数组.
语法:string.split(separator,limit)。limit可指定返回的数组的最大长度。
空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割.
split() 方法不改变原始字符串.
reverse()方法:reverse() 方法用于颠倒数组中元素的顺序.
语法:array.reverse()
join()方法
join() 方法用于把数组中的所有元素转换一个字符串。
语法:array.join(separator)
separator,可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

字符串方法

添加链接描述

7.运算符

8.数组

1.创建数组

var arr = new Array();
var arr1 = [];
var arr2 = [1,'jiege',21,true];//后面新增元素可以直接加
arr2[4] = '第五个元素';
arr2 = '杰哥';//直接给数组名赋值数组内容清空,变为所赋的值,数组类型变为其他类型

在这里插入图片描述
检查是否为数组:
1.下面代码结果为true和false
在这里插入图片描述
Array.isArray(数组名),返回一个bool变量。
遍历:通过下标遍历
2.数组长度
数组名.length
数组长度可以手动增加

arr.length = 5;//后面两个元素显示如下

在这里插入图片描述
3.数组转换为字符串,直接加''
4.添加、删除数组元素
(1)push 方法,将元素添加到数组末尾
push返回数组长度

var arr=[1,2,3]; 
var length = arr.push(4, 'pink');//length = 5

(2)unshift 方法,在数组开头添加元素,和push方法类似

var arr=[1,2,3]; 
var length = arr.push(4, 'pink');//length = 5
//数组变为[4,'pink',1,2,3]

(3)pop 方法,弹出数组最后一个元素,无参数,一次弹出一个,弹出后在原数组中删除。返回值是弹出的元素。
(4)shift 方法,弹出数组第一个元素。
5.翻转数组

数组名.reverse();

6.数组排序

数组名.sort(function(a,b){
	return a-b;
});//冒泡,升序
数组名.sort(function(a,b){
	return b-a;
});//冒泡,降序

sort()无参数是按照字典序排序。

7.获取元素索引
在这里插入图片描述

数组名.indexOf(元素);

8.数组去重
在这里插入图片描述
9.数组转字符串
在这里插入图片描述

数组方法

添加链接描述

9.函数

函数提升和变量提升

添加链接描述
1.函数定义
函数定义可以在函数调用之后且无需声明,匿名函数调用必须在定义之后,否则会报错,原理见第10点。

function 函数名(参数1,参数2...){
	函数体
}
function cook(x,y,z){
	alert(x);
}
cook('氨基酸',1,2);
//带返回值的函数
function cook(x,y,z){
	return x;
}
var meal = cook('氨基酸',1,2);

2.函数返回值
return只能返回一个值,如果有多个值并由逗号隔开,返回最后一个值。
要返回多个值可以返回一个数组。

return [num1,num2,num3,...];

3.arguments
arguments 是一个伪数组,存储了所有实参。可以用arguments.length得到数组长度,可以用下标引用,

function func(){
	alert(arguments);
	alert(arguments[2]);
}
func(1,2,3);

4.匿名函数

var func = function (){
	alert(1);
}
func();

10.预解析

1.在这里插入图片描述
2.变量声明

var a = b = c = 9;
//相当于
var a = 9;
b = 9;//b,c没有var声明,是全局变量
c = 9;

var a=9,b=9,c=9;
//相当于
var a=9;
var b=9;
var c=9;

f1();
console.log(c) ;
console.log(b) ;
console.log(a) ;
function f1() {
	var a=b=c=9;
	console.log(a) ;
	console.log(b) ;
	console.log(C) ;
}
//预解析如下
function f1() {
	var a=9;
	b=9;//b,c为全局变量,所以f1之后的b,c能输出来,而a是局部变量
	c=9;
	console.log(a) ;//9
	console.log(b) ;//9
	console.log(C) ;//9
}
f1();
console.log(c) ;//9
console.log(b) ;//9
console.log(a) ;//报错

11.对象

1.创建对象
在这里插入图片描述
2.调用对象
(1)调用对象的属性,调用对象的函数
在这里插入图片描述
3.用new Object创建对象
在这里插入图片描述
4.用构造函数创建对象
在这里插入图片描述

5.for … in 遍历对象

for(var k in obj){
	alert(k);//输出属性名
	alert(obj[k]);//输出属性值
}

6.判断对象中有无某属性
在这里插入图片描述

6.内置对象

相当于库函数
在这里插入图片描述

取整

在这里插入图片描述

随机数

在这里插入图片描述
返回随机整数,包含两端
在这里插入图片描述

日期格式化

格式化日期
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

总的毫秒数

在这里插入图片描述

倒计时

在这里插入图片描述
在这里插入图片描述

12基本包装类型

字符串
在这里插入图片描述

13.简单类型与复杂类型

在这里插入图片描述
案例
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值