2、Javascript基础2-CSDN博客

本文链接：https://blog.csdn.net/zqk6442/article/details/130247640

本文详细介绍了JavaScript的基础知识，包括函数的定义与使用，数组的操作，字符串处理，日期对象的创建和方法，对象的概念与创建，以及定时器的应用。特别讨论了函数的参数、返回值、闭包、箭头函数等重要概念，还涉及到ES6的新特性。

摘要由CSDN通过智能技术生成

## JavaScript基础

1、JavaScript函数

1.1 JavaScript函数介绍

JS函数的概念：

函数就是把特定功能的代码抽取出来，使之成为程序中的一个独立实体。
函数的作用：

正如函数的概念, 我们可以根据需要, 将特定的功能用函数来包裹
使用函数的好处：
- 函数可以在同一个程序或其他程序中多次重复使用（通过函数名调用）
- 使程序变得更简短而清晰，提高可读性
- 有利于程序维护

1.2 函数的定义

定义函数的语法格式:

function 函数名(参数1，参数2，……) {            
	执行语句;           
	return 返回值;     
}

// JS函数
// 函数定义
function fn() {
	console.log("fn");
}
// 函数调用
fn();

// 函数的特点：
//    不调用不执行，调用才执行，可以重复调用

// 函数的参数
//	形参和实参的参数数量可以不一致
function fn2(a, b) {
	console.log(a, b);
	//  arguments: 存在于函数内，用来接收所有实参的数组。
	console.log("arguments:", arguments); // 接收所有实参
	console.log(arguments[0], arguments[1], arguments[2])
}
fn2(10, 20);
fn2(10);
fn2(10, 20, 30);

// 默认参数
function fn3(a, b=20) {
	console.log(a, b)
}
fn3(2, 3)

// 函数的返回值
function fn4(a, b) {
	return a + b;
}
console.log(fn4(2, 3))


// 前面是函数的基本使用

// JS变量的提前声明(了解)
console.log('a2 =', a2);  // a2 = undefined
var a2 = 10;

// JS函数的提前声明（了解）
fn5();
function fn5() {
	console.log('fn5'); // fn5
}


// Python匿名函数: lambda
// JS 匿名函数： 没有名字的函数

// 匿名函数不会提前声明
var fn6 = function() {
	console.log('fn6');
}
fn6()

// 函数嵌套
// 闭包
function A() {
	console.log('A');

	return function B() {
		console.log('B');
	}
	return B;
}
// A();
b = A();
b();  // b() 等价于  B()

function A2() {
	console.log('A2');

	return function() {
		console.log('B2');
	}
}

A2()();

// 闭包
function C() {
	var n = 10;
	return function() {
		console.log(++n);
	}
}
var d = C();
d(); // n=11
d(); // n=12
d(); // n=13

// JS箭头函数，ES6新语法
// 作用：简化匿名函数
// 			和Python的lambda匿名函数写法比较接近
// 匿名函数f1
var f1 = function(n) {
	return n+1;
}
// => 箭头函数
var f2 = n => n + 1;

console.log(f1(100));
console.log(f2(100));

var f3 = () => 100
var f4 = (a, b) => a + b;

var f5 = (a, b) => { 
	var c = a + b; 
	return c 
};
console.log( f5(3, 4) )  // 7

var f6 = (name, age) => ({"name": name, "age": age});
console.log(f6('胡歌', 40));

// 箭头函数总结：
// 1. 语法: 参数 => 函数代码
// 2. 只有一个参数的情况，可以不写括号()，比如： n => n+1;
// 3. 没有参数或2个及以上的参数的情况，参数需要加括号()，如：(n,m)=>n+m
// 4. 如果函数体中写多行代码，可以使用{}包裹。
//       如果返回值是一个对象{}, 则需要在外层加上()

// 回调函数
function F(f) { // f = callback
	f(100); // 等价于: callback(10);
}

function callback(n) { 
	console.log('callback:', n)
}

F(callback)


// sorted(): 
 function sorted(arr, key) {
// 冒泡排序
 	for(var i = 0; i < arr.length - 1; i++) {
 		for(var j = 0; j < arr.length - 1 - i; j++) {
			if(key(arr[j]) > key(arr[j + 1])) {
				var t = arr[j];
				arr[j] = arr[j + 1];
 				arr[j + 1] = t;
 			}
 		}
 	}
 	return arr;
 }

 var arr1 = [1,5,3,2,11,34,7,6]
 var arr1 = [
 	{ name: "思聪", age: 32 },
	{ name: "健林", age: 55 },
 	{ name: "马云", age: 56 },
 	{ name: "马化腾", age: 46 },
	{ name: "马斯克", age: 40 },
 	{ name: "马明哲", age: 60 }
 ]
var arr2 = sorted(arr1, key = function(obj) { return obj.age });
		var arr2 = sorted(arr1, key=obj=>obj.age);
console.log(arr2)

// JS生成器函数
function *fn9(){
	yield "11"
 }

// JS自运行函数(扩展)
;
(function() {
	console.log(100);
})();

var f2 = (function(a) {
	console.log("a =", a); 

	return function(b) {
		console.log("b =", b); 
	}
})(6);
f2(8);

// 函数作用域: 函数具有作用域
//	局部变量
//	全局变量
function fn8() {
	var hello = 100;
	// 如果没有var，则hello2是全局变量，不推荐
	hello2 = 200;
	let hello3 = 300;
}
fn8()

// console.log(hello)
console.log(hello2)
// console.log(hello3)

// if和for，代码块的地方let具有作用域
if (1) {
	var c1 = 10;

	// c2 只能在if内部使用
	let c2 = 20;
}
console.log(c1);
// console.log(c2);   // 报错


for (var i=0; i<1; i++) {
	var d1 = 10;
	let d2 = 20;
}
console.log(d1);
// console.log(d2);

注意:
- 函数名后圆括号()中的参数数量不定, 也可以没有; (根据功能需要)
- return关键字的作用是将某个值返回, 如果没有返回值则默认返回undefined;

2、JavaScript数组的运用

2.1 数组的定义

方式一:

new Array(参数1，参数2,...)  //只有一个数字参数时是数组的长度（new可以省略,但一般尽量写上）

例如:

var arr = new Array();   //定义一个空数组      
var arr = new Array(10);  //创建一个包含 10 个元素的数组，没有赋值     
var arr = new Array("芙蓉姐姐", 30);  //创建一个数组有两个元素

方式二:

var arr = [1,2,3,4,5,"abc"];  //字面量定义方式2

2.2 数组元素的获取(访问)

arr[0]: 表示数组的第一个元素，0是下标，也叫索引
arr[1]: 表示数组的第二个元素，1是下标

2.3 数组的遍历

一般使用普通for循环

2.4 数组的属性：

length : 数组长度

2.5 数组的常用方法:

push(): 接收任意数量的参数，把它们逐个添加到数组的末尾，并返回修改后数组的长度;

pop(): 从数组末尾移除最后一个元素，减少数组的 length 值，然后返回移除的元素;

sort() : 从小到大排序 , 原数组也被升序排序了

reverse() : 逆向排序, 原数组也被逆向排序了

slice( ) : 切片，不修改原数组, 将原数组中的指定区域数据提取出来并返回一个新数组

splice( ) : 截取原数组中指定的数据, 会改变原数组

indexOf( ) : 获取数组中第一个出现指定元素的下标，如果不存在则返回-1

join() : 将数组中的元素用指定字符连接，连接成为一个字符串

3、JavaScript字符串操作

3.1 字符串的定义

var str = “亲”；
var str = '亲'

3.2 下标

console.log( str[0] );

3.3 字符串的属性

length : 字符串长度

3.4 字符串的方法

String.fromCharCode(97): 将ASCII码转换成字符

str.indexOf(“abc”): 查找字符串第一次出现的位置, 如果没找到则返回-1

str.replace(): 替换字符串

str.substring(start,end); 截取字符串范围是[start, end)

str.split(separator, howmany); 根据分隔符、拆分成数组

str.toLowerCase(); 把字符串转换成小写

str.toUpperCase(); 把字符串转换成大写

4、 JavaScript日期的使用

4.1 Date对象

Date类型使用自UTC(Coordinated Universal Time,国际协调时间) 1970年1月1日午夜(零时)开始经过的毫秒数来保存日期。Date类型保存的日期能够精确到1970年1月1日之前或之后的 285616年
时间戳：从1970年到指定时间的毫秒数

4.2 Date对象的创建

创建一个日期对象，

使用new运算符和 Date构造函数即可.

// 在调用Date构造方法而不传递参数的情况下，新建的对象自动获取当前的时间和日期    
var d = new Date();

创建日期对象并指定时间

var d = new Date("2030/08/22");      
var d = new Date(2030, 04, 13, 14, 34);     
// 注: 日期的格式可以是“2030/08/22”，“2030-08-22”，或1970年当前日期的毫秒数1963453475234

4.3 日期Date的常用方法

setDate() / getDate(); 从Date对象中返回一个月中的某一天(1~31)
getDay(); 从Date对象返回一周中的某一天(0~6)
set / getMonth(); 从Date对象中返回月份(0~11)
set / getFullYear(); 从Date对象以四位数返回年份
set / getHours(); 返回Date对象的小时(0~23)
set / getMinutes(); 返回Date对象的分钟(0~59)
set / getSeconds(); 返回Date对象的秒数(0~59)
set / getMilliseconds(); 返回Date对象的毫秒
set / getTime(); 返回1970年1月1日至今的毫秒数

5、 JavaScript对象

5.1 对象的概念:

对象Object 是一种引用数据类型。

在 ECMAScript 中对象可以存储变量和函数(数据和功能)

5.2 创建对象

方式一: 使用new

var obj = new Object();    //new方式        
obj.name = '张三';   //创建属性字段          
obj.age = 18;	 //创建属性字段

方式二: 字面量方式

var obj = {                          
  name :'张三',   //创建属性字段,最后加逗号            
  age : 18,           
  run : function() {   //对象中添加方法	    
  	 retrun "正在跑步..";            
  }      
};

5.3 属性字段也可以使用字符串形式

var box = {       
	"name": "张三",  //也可以用字符串形式        
	"age" : 28     
};

5.4 两种属性输出方式

alert(box.age);    //点表示法输出    
alert(box["age"]);   //中括号表示法输出，注意引号

5.5 使用 delete 删除对象属性或方法

delete obj.name;     //删除属性     
delete obj.run;     //删除方法

6、 JavaScript定时器的应用

6.1 定时器

开启定时器setInterval

var timer = setInterval(function(){
	console.log("每隔1秒执行一次");
}, 1000);

关闭定时器clearInterval

clearInterval(timer);

6.2 延时器setTimeout

开启延时器setTimeout

var timer = setTimeout( function(){
	console.log("1秒后执行一次");
},1000);

关闭延时器clearTimeout
```
clearTimeout(timer); 
```