JavaScript基础知识小总结

最新推荐文章于 2024-09-25 18:15:20 发布

哦SuY

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量127

点赞数

文章标签： javascript java js 字符串

本文链接：https://blog.csdn.net/weixin_43755857/article/details/107311508

版权

JavaScript

1. 概述

1.1 特点

安全性（不允许直接访问本地硬盘），它可以做的就是信息的动态交互；
跨平台性（只要是可以解释js的浏览器都可以执行，和平台无关）。

1.2 与Java的不同

JS是Netscape公司的产品，Java是Sun公司的产品；
JS是基于对象，Java是面向对象；
JS只需解释就可以执行，Java需要先编译成字节码文件，再执行；
JS是弱类型，Java是强类型。
- 弱类型语言：你想把这个变量当做什么类型来用，就当做什么类型来用，语言的解析器会自动（隐式）转换；
- 强类型语言：当你定义一个变量是某个类型，如果不经过代码显式转换（强制转化）过，它就永远都是这个类型，如果把它当做其他类型来用，就会报错。

1.3 与HTML、CSS的不同

JavaScript是web开发者必学的三种语言之一：

HTML：负责了一个网页的结构、内容；
CSS：负责了一个页网页的布局、样式；
JavaScript：负责对网页行为进行编程，与用户进行交互。

2. JS的初识

2.1 JS位置及引入方式

2.1.1 位置

使用script标签时，可以放在任意位置（head内部、body下方、body内部、html外部），都能成立，但是建议写在头标签head内部。

2.1.2 引入方式

1.直接写在事件中

    <button type="button" onclick="alert('点我...')">点我</button>

2.可以使用script标签体内进行编写。

    <script type="text/javascript">
    	//type="text/javascript"  可省略
        ...
    </script>

3.引入外部的JavaScript文件。

    <script type="text/javascript" src="1.js"></script>
    //type="text/javascript"  可省略
    //如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了

2.2 弹框

    alert("...");	//弹出框
    confirm("确认删除吗？");		//点击确定返回true，否则返回false
    prompt("请输入你的名字");	//点击确定返回输入的内容，否则返回null
    document.write("数据");	//向页面输出数据

2.3 页面注释

    html:	<!-- 注释的内容 -->
    css:	/* 注释内容 */
    javascript:		//单行注释		/* 多行注释 */

2.4 声明变量

在javascript中声明变量是使用var关键字声明的，javascript中的变量可以存储任意的数据类型数据。

. javascript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型。

. 定义了多个同名的变量是，后定义的同名变量是覆盖前面定义的同名变量。

. 声明变量的时候可以省略var关键字，但是不建议省略。

3. JS的基本数据类型

JavaScript中变量名字的要求：

1.严格区分大小写；

2.能够使用的字符，英文字符，数字；

3.不能以数字开头。

3.1 基本类型

number 数据类型：小数与整数
string 字符串，注意：javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中
boolean 布尔数据类型
undefined undefined代表该变量没有定义

3.2 typeof 查看变量的数据类型

    var num1 = 10;
    console.log(num1);
    // typeof + 变量名    查看变量类型
    console.log(typeof num1);  //输出类型为number

3.3 concat 字符串拼接

    var str3 = str + "，陈姐太好看了";
    var str4 = "陈".concat("卓璇");

3.4 trim 去空格

    var str6 = str5.trim(str5);// 去空格
    var str7 = str5.trimLeft(str5);//去左空格
    var str8 = str5.trimRight(str5);//去右空格

3.5 把字符串数据解析为number类型的数据

parseInt 可以把一个字符串转换为整数

    var i = parseInt("chen");//Error  NaN  not a number  不是一个数字
    var i2 = parseInt("1");//parseInt() 参数必须是一个数字型的字符串

parseFloat 可以把一个字符串转换为小数

    var f = parseFloat("5.20");
    console.log(f + typeof f);

3.6 length 打印长度

    console.log("字符串长度".length);

3.7 split 切割

    var arr = "长叹息以掩涕兮，哀民生之多艰，余虽".split("，");
    console.log(arr);
    console.log(arr[0]);

3.8 object 数组

    var student = {"name":"陈卓璇","age":23};//比较简单的json格式的数据
    console.log(student);
    console.log(typeof student);//object
    
    console.log(student.name);
    console.log(student.age);
    console.log(student["name"]);//一般不用  等同于student.name

3.9 Array数组

3.9.1 创建方式

    //方式1：
    var arr = new Array();
    // arr虽然是一个数组，但是是一个数组对象，本质依旧是一个object
    console.log(arr);
    console.log(typeof arr);//object

//方式2：
var arr2 = [1,2,3,4,5];
console.log(arr2);
console.log(typeof arr2);//Object

##### 3.9.2 取值

console.log(arr2[0]);

##### 3.9.3 push 放值 

push(): 添加元素到数组中

arr.push(11,22,33,"哇哦");

##### 3.9.4 pop 弹值 

pop(): 删除并返回数组中的最后一个元素

console.log(arr.pop());

##### 3.9.5 splice 截取

 splice(索引 , 截取长度)       截取数组中的数据

console.log(arr.splice(1,2));

### 4. 循环
>1.while
>2.do while
>3.for（两种方式）

<script>
		console.log("--------while---------");
		var a = 3;
		while(a-- > 0){
			console.log(a);
		}
		
		console.log("--------do while---------");
		var a1 = 3;
		do{
			console.log(a1);
			a1--;
		}while(a1 > 0);
		
		console.log("--------for 第一种---------");
		for(var i = 0;i<5;i++){
			console.log("哇哦"+i);
		}
		
		console.log("--------for 第二种---------");
		var student = {"name":"陈卓璇","age":23};
		for(var studentKey in student){
			console.log(student[studentKey]);
			//不能使用student.studentKey
			//只能使用[]，通过key取value
		}
	</script>



### 5. 分支操作
> 1.if
> 2.if else
> 3.switch

### 6. JS函数

函数定义方式：

function 函数名(形参列表){
	函数体 ;	
}

**注意：**

	1. 在 javascript中函数定义形参时是不需要使用var关键字声明变量；

	2. 在javascript中的函数是没有返回值类型的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回；

	3. 在 javascript中是没有函数重载的概念的，后定义的同名函数会直接覆盖前面定义同名函数。

<body>
		<button type="button" onclick="alertInfo()">点击</button>
	</body>
	<script>
		/* 
			函数语法格式：
				function 函数名(形参列表){
					函数体;
				}
		 */
		function alertInfo(){
			alert("Hello 小武");
		}
		// alertInfo();
		function alertInfo(){
			alert("哇哦");
		}//方法重名时，直接覆盖
		
		//函数带参，参数不需要声明数据类型
		function add(a,b){
			return a + b;
		}
		console.log(add(1,2));
		console.log(add("1","2"));//也可以用作字符串拼接
		console.log("waou"+12);//字符串拼接
		
		//减法
		function sub(a,b){
			return a - b;
		}
		console.log(sub(2,5));
		console.log(sub("wao","w"));//NAN  not a number
		//注意：字符串拼接时，只有加法可用，减法NAN	

		//匿名函数（常用）
		var func = function(a,b){
			return a + b;
		}
		console.log(func(2,3));
	</script>