JavaScript基础学习总结（一）适合小白

最新推荐文章于 2024-07-18 11:48:33 发布

爱舔酸奶盖儿

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量286

点赞数 1

文章标签： javascript js 前端

本文链接：https://blog.csdn.net/weixin_45310445/article/details/103985681

版权

前端妹子一枚，此文用来记录自己学习前端知识的笔记，希望对自己有帮助的同时，对准备学习或者正在学习的人有所帮助，我也是花了不少时间来整理的，点个赞就是对我偌大的鼓励~若有好的建议或不足之处，请多多指教！会及时更新更正。（大佬求指教！）

基础篇

一、概念（何为JavaScript?）

JavaScript（以下简称JS），JS是一种轻量级的编程语言； 是可插入 HTML 页面的编程代码；插入 HTML 页面后，可由所有的现代浏览器执行。简单地来说，JavaScript是一种运行在浏览器中的解释型的编程语言。

二、内容

1.JS书写的位置

（1）位于script标签之间

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

注：那些老旧的实例可能会在 script标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

（2）引入一个js文件

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

注：script标签可以放在很多地方,但是我们一般规范些在body里面,放在 ‘html’ 下面; 使用 ‘src’ 引入的标签，不能再在标签内写js代码里。

2. 注释

注释代码仅起提示、解释、说明作用，并不会被执行。建议平常写代码的时候养成写注释的良好习惯，方便二次阅读，维护代码。

（1）单行注释【以 // 开头】

//  这是单行注释， 单行注释只能写一行代码
//  快捷键： ctrl + /

（2）多行注释【以 /* 开始，以 */ 结尾】

/*
	此处编写
/*

3.输出语句

（1）window.alert（）警告框

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>

window.alert(5 + 6);  //弹出警告框显示11

</script>
</body>
</html>

如下图：
在这里插入图片描述
注：直接用百度网页控制台进行编写的代码，所以弹框会有’www.baidu.com显示’标志，可忽略。

（2）window.confirm（）确认框

<!DOCTYPE html>
<html>
<body>
<script>

window.confirm(你喜欢JavaScript？);  //弹出确认框

</script>
</body>
</html>

如下图：
在这里插入图片描述
（3）window.prompt（text,defaultText）提示对话框参数可选

<!DOCTYPE html>
<html>
<body>
<script>

window.prompt("Please enter your name","");  //弹出提示对话框

</script>
</body>
</html>

如下图：
在这里插入图片描述
（4）document.write （exp1,exp2,exp3,…）仅向文档输出写内容，参数可一个或多个

<!DOCTYPE html>
<html>
<body>
<script>

document.write("hello world");		//直接在页面显示
document.write("<h1>hello world</h1>");

</script>
</body>
</html>

如下图：
在这里插入图片描述
（5）console.log（）控制台输出

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);		//控制台输出11
</script>

</body>
</html>

如下图：
在这里插入图片描述【如何打开控制台？】
浏览器中使用 F12 来启用调试模式（若热键有冲突可使用 fn+F12），在调试窗口中点击 “Console” 菜单。

小结

alert、comfirm、prompt 三个用户体验太差，一般只在学习的时候会用到。console.log经常用来打印日志，项目调试的时候非常有用。
程序中调试是测试，查找及减少bug(错误)的过程。

4.变量

变量是可以变化的量，用于存储信息的"容器"，用 var 来声明。

<!DOCTYPE html>
<html>
<body>
<script>

	var x=5;
	var y=6;
	var z=x+y;

</script>

</body>
</html>

【如何使用变量？】

直接声明变量

//  结构 : var + 变量名 ; 
 var name;		//var 来声明变量的，name: 变量名
 console.log（name）

先声明,后赋值

var year;  // 声明一个变量 year，该变量是空的（它没有值）
year= 'why'; // 一个等号= 是赋值，等号后面的值'why'赋值给前面的'year'
 console.log（year）

同时声明+赋值

var name = '小明' 
 console.log（name ）

同时声明多个变量并赋值

var age = 18,name= '小明'  //用逗号隔开
// 相当于
var age = 18;
var name = '小明';

//注：一条语句中声明的多个不可以赋同一个值:

var x,y,z=1;	//x,y 为 undefined， z 为 1。

不声明变量，直接赋值(不会报错，但是不推荐)

//  没有用 var 修饰的代码不管在哪都是全局的（涉及全局变量和局部变量，后面会有相关的文章专门介绍）
height=100;
console.log(height);

小结

在代码开始处，统一对需要的变量进行声明，养成良好的编写习惯；
javascript代码一旦报错了，后面的代码就不再执行了。

变量命名规则与规范(必须严格执行)

规则( 必须遵守,否则会报错 )

由字母、数字、下划线_、$符号组成 ;
不能以数字开头（我不推荐以 $ 和下划线_ 符号开头）
区分大小写（y 和 Y 是不同的变量）
不能是关键字和保留字 (不用死记 , 慢慢就见多了)

注：JavaScript 语句和 JavaScript 变量都对大小写敏感。

规范(不遵守不会报错，但建议遵守养成良好编写代码习惯)

变量名必须有意义
驼峰命名法。首字母小写,后面单词的首字母需要大写!
如：helloWorld, myFunction.

举个错误栗子：

7
age18
2b
&sex
theworld
a b
class
name
$name
_sex

5.数据类型

javascript中数据类型分为值类型(基本类型)和引用数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。
注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

值类型(基本类型)

字符串（String）存储字符的变量，使用单引号’ ’ 或双引号" "

//双引号和单引号必须成对出现
var str = 'hello world';
var str = "hello world";

//可以在字符串中使用引号，只要不匹配包围字符串的引号即可
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

数字(Number) 数字可以带小数点[浮点数]，也可以不带

浮点数就是小数，比如0.1
极大或极小的数字可以通过科学（指数）计数法来书写：
var y=123e5; // 12300000
var z=123e-5; // 0.00123

布尔(Boolean) 只能有两个值：true [表示真]或 false[表示假]

注：
1. 区分大小写，不要写成True或者是False了
2. ‘true’ 和 true , 前者是字符串类型

对空（Null）和未定义（Undefined）

Undefined 表示变量不含有值
null表示一个空的值，可以通过将变量的值设置为 null 来清空变量。

引用数据类型

对象(Object) 拥有属性和方法的数据
举个栗子：真实生活中，一辆汽车是一个对象。对象有它的属性，如重量和颜色等，方法有启动停止等。
----- 由花括号{}分隔，在花括号{}内部，对象的属性以键值对的形式 name : value (键与值以冒号分割)来定义，属性由逗号分隔

//对象 (person) 有三个属性：firstname、lastname 以及 id
var person={firstname:"John", lastname:"Doe", id:5566};

//空格和折行无关紧要，声明可横跨多行：
var person={
	firstname : "John",
	lastname  : "Doe",
	id        :  5566
};

对象属性有两种寻址方式（通俗来讲就是如何获取对象的属性）：
name=person.lastname;
name=person[“lastname”];

数组(Array) 用于在单个的变量中存储多个值

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推
创建数组Array 对象的语法：
new Array();
new Array(size); // size 是期望的数组元素个数
new Array(element0, element1, …, elementn); //element0 …, elementn 是参数列表

//创建名为 cars 的数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

//等同于

var cars=new Array("Saab","Volvo","BMW");

//等同于
var cars=["Saab","Volvo","BMW"];

函数(Function) 包裹在花括号{}中的代码块，前面使用了关键词 ‘function’

function 函数名()
{
// 执行代码
}
当调用该函数时，会执行函数内的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试实例</title>
<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
</head>
 
<body>
//点击按钮时，会直接调用函数myFunction，并执行花括号内的代码块
<button onclick="myFunction()">点我</button>

</body>
</html>

6.类型转换

why进行类型转换？
有时候服务器拿回来的数据,可能是字符串,比如age=‘18’, 并不符合要求，所以需要进行转换
var age = ‘18’;
console.log(age+1);

可分为显式类型转换和隐式类型转换

显式（强制）类型转换(大摇大摆的转换)

Number() 转换为数字

// 数值：转换后还是原来的值
Number(324) // 324

// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成0
Number(null) // 0

parseInt() 和 parseFloat()

parseInt() 把整数或者小数都转化为整数;
parseFloat() 把整数转化整数,把小数转化为小数
var num1 = parseInt(“12”); // 12
var num1 = parseInt(“12.3”); //12
var num1 = parseFloat(“12”); //12
var num1 = parseFloat(“12.3”);//12.3
var num1 = parseInt(“12.3abc”); // 返回12，如果第一个字符是数字会解析知道遇到非数字结束
var num2 = parseInt(“abc123”); // 返回NaN，如果第一个字符不是数字或者符号就返回NaN

String() 转换为字符串 toString() 也是有同样的效果

String(123) // "123"
String('abc') // "abc"
String(1e21) // '1e+21' 
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"

var num = 5;
console.log(num.toString());// 把数值5变成字符串5
//将来所有的数据都会有toString()方法，除了null和undefined

Boolean() 转化为布尔值

所有的值都可以转换成布尔类型，其中 0, “”, undefined，null， NaN，这几个值会转换成false，其他值都会转换成true

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

***** 在讲隐式类型转换前先把相关的操作符整理一下

[算术运算符 ]

//快速的说出以下的结果？
console.log(123 + 123);
console.log("123" + 123); //字符串拼接
console.log(123 - 123);
console.log(123 - "123");
console.log(12 * "12");
console.log(12 / 12);
console.log(10 % 2); //模运算，取余
// 整除 => 余数==0 例如: 能被7整除 : i%7==0

+号运算符用于把文本值或字符串变量加起来（连接起来）
txt1=“What a very”;
txt2=“nice day”;
txt3=txt1+txt2;
txt3 运算结果如下:
What a verynice day

[赋值运算符 ] = , +=, -=, *=, /=, %=

var num = 10;
num += 1;   //num = num + 1;
num -= 1;   //num = num - 1;
num *= 1;   //num = num * 1;
num /= 1;   //num = num / 1;
num % = 2;  //num = num % 2;

[ 一元运算符]
自增运算符：++
先自增： ++i
后自增：i++

异同点 :
1. 相同点 : 代码执行之后, 数值都会 + 1
2. 不同点 : 就是在自增的时候使用就会出现不同

//先自增++i：
var num = 1;
console.log(++num); //先自增：表示先加1，后返回值  结果为2

//后自增i++：
var num = 1;
console.log(num++);// 后自增：表示先返回值，后+1  结果为1

自减运算符：–
先自减：–i
后自减：i–

//1. 思考
var num = 5;
console.log(num++); //结果为5
console.log(++num); //结果为6

//2. 猜猜看
var a = 1; var b = ++a + ++a; console.log(b);  //结果为2+3=5 分析：先自增+1，++a值为2，再返回值给下一个a,所以++a为2+1=3
var a = 2; var b = a++ + ++a; console.log(b);  //结果为6  
var a = 3; var b = a++ + a++; console.log(b);  //结果为7  
var a = 4; var b = ++a + a++; console.log(b);  //结果为10

[逻辑运算符]
&&：与运算符，表示且，只有当两个操作数都为true的时候，结果才是true
||：或运算符，表示或，只要有其中一个操作数是true,结果就是true
!：非运算符，取反

console.log( true && true );	//true
console.log( false && true );	//false
console.log( true && false );	//false
console.log( false && false );	//false

console.log( true || true );	//true
console.log( false || true );	//true
console.log( true || false );	//true
console.log( false || false );	//false

console.log(!true);		//false
console.log(!false);	//true

小结 : 
&& : 一个为真,且另外一个也为真  => 才为真
1. 两者都为true,才为true
2. 前者为true,决定权在后者

|| : 一个为真,或另外一个为真 => 真
1. 两者有一个为true,结果就为true
2. 前者为false,决定权在后者

[比较运算符]

比较运算符也叫关系运算符， < > >= <= == != === !==，关系运算符的结果是布尔类型

var a = 5;
var b = 6;
console.log(a > b);	//大于
console.log(a < b);	//小于
console.log(a >= b);  //大于等于
console.log(a <= b);  //小于等于

console.log(a == b);   //相等，只比较值，不比较类型
console.log(a === b);  //全等，比较类型和值
console.log(a != b);   // 不等， 只判断值，不判断类型
console.log(a !== b);  // 不全等 判断值，且判断类型

注意 : 
 数字类型比较和字符串比较是有区别的 
 1. 数字比较 : 24>3;   比较数字大小
 2. 字符串比较 : '24' < '3'   比较首字母大小
 3. 字符串和数字混合比较 : 比较数字内容大小

隐式类型转换 (偷偷摸摸转换, 但还是调用的显式类型转换的方法)

isNaN() 检测数据是不是非数类型

NaN: not a number, 表示一个非数字，在js中，NaN用来表示一个非数字的特殊值，当发现无法进行运算时，js不会报错，而是会返回一个NaN

isNaN(NaN); // true
isNaN('abc'); // true  Number('abc')= NaN
isNaN('123'); // false
isNaN(null);//false    Number(null) = 0
isNaN(undefined);//true Number(undefined) =NaN

++, – , +,-(一元正负), -,*,/,%(二元)

运算之前,先把变量调用Number方法,转换为数字,再运算

var a = '124';
var b = a++;
console.log(typeof(b)+':'+b);//number:124
var a = +'abc';  //+或-
console.log(a); //NaN
var a= 'a' *1;  //NaN
var b = '123'*1; //123

+(二元操作符)当加号两侧有一个是字符串,就调用String方法,把两个都变成字符串

var a = '1'+ 1;
console.log(typeof(a)+':'+a);//string:11

&& ,|| ,! 运算之前,先把表达式调用Boolean方法,转换为布尔值,再运算

var a = 'abc';
console.log(!a); // false
var c='aa' && 22;
console.log(c);//22
//引用值也进行类型转换
[]+2//"2"
[]+''//""

<,>,<=,>= 有数字进行比较的(不论在操作符左边还是右边),就会隐式转换为数字

var a= 10 > '2';
console.log(typeof(a)+':'+a);//boolean:true
var a= '10' > 2;
console.log(typeof(a)+':'+a);//boolean:true
var a= '10'>'2';//没有类型转换,比的是ASCII码
console.log(typeof(a)+':'+a);//boolean:false

注意： NaN == NaN //false,NaN是唯一一个不等于自己null==undefined;//true
隐式类型转换工作中比较少用，一般面试中会见到

备注：文章若有与原创文章相同部分请告知。
[参考文档]菜鸟教程 [https://www.runoob.com/js/js-tutorial.html]

爱舔酸奶盖儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础学习总结（一）适合小白

此文用来记录自己学习前端知识的笔记，希望对自己有帮助的同时，对准备学习或者正在学习的人有所帮助，若有不足之处，请多多指教。会及时更新更正。基础篇一、概念（何为JavaScript?）JavaScript（以下简称JS），JS是一种轻量级的编程语言；是可插入 HTML 页面的编程代码；插入 HTML 页面后，可由所有的现代浏览器执行。简单地来说，JavaScript是一种运行在浏览器中...
复制链接

扫一扫