JavaScript学习整理第一篇

最新推荐文章于 2023-02-22 20:17:20 发布

海424

最新推荐文章于 2023-02-22 20:17:20 发布

阅读量278

点赞数 1

分类专栏： JavaScript学习整理第一篇函数介绍文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_64747231/article/details/126931976

版权

JavaScript学习整理第一篇函数介绍专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一.快速体验JavaScript

一.快速体验JavaScript

1-0 javascript 的特点

名称(变量名,函数名)-区别 大小写
命名规则:

2.1 满足驼峰命名法(首字母小写,中间单词首字母大写) 
 ----  myLuckyDay
2.2 避免使用关键字,保留字,
----- var, function, Object, for, if....
2.3 无意义的命名(自己都搞懵了)
---- io, w, kk, op...

javascript 动态弱类型 语言,
变量使用过程中,数据类型未知,只有使用后才知道.

```
例如: 先赋值字符串,后修改为数值型.
```

4.关于分号

1.一行建议保持一个 分号 结束;
2.大部分时候为了规范,还是比较少用 分号

5.注释 单行/多行 注释

 //  这是单行注释
 /*
 我是多行注释
*/

1-1 JavaScript 的变量

变量是存储信息的容器.
在使用 js 中,总是要使用变量来进行值的存储和传递
变量类型灵活多变
var关键字声明变量(es6中提供了let关键字,和const常量)
变量声明(不推荐直接使用等号进行全局声明,早期使用var声明,let声明符合语法规范)
变量初始化(变量声明并赋值)

// 使用 var 声明变量
var name;
// 为变量赋值
name = "Jack";
//使用 let 定义变量
let age = 18;

1-2 不同数据类型之间的运算

简单数据类型分为五种:

Number(数值型),
String(字符串型),
undefined(未定义型),
null(空类型),
Boolean(布尔型)

复杂数据类型分为二种:

Object(对象型),
Array(数组型)

简单数据类型运算

数值和数值 (数值Number)
数值和字符串 (拼接字符串String)
数值和 null (数值Number)
数值和 undefined (NAN非数字)
undefined 和 null (NAN非数字)
布尔型和数字/null

var a = 5;
var b = 1;
var c = 4;
var Str = 'hello';
// 1.数值 + 数组
var one = a + b;   			//  6 	  数值型

// 2.数值 + 字符串
var two = a + b + c + Str; // 10hello 数值前面运算不受影响,只会碰到字符串的时候才会拼接

// 3.数值 + null(空)
var third = a + null 	   // 5       任何类型(null除外) 与 null 相加都等于 前一个数
var hello = 3 * null + 3;  // 3  null类似空值(0),数值 与 null 即为 零

// 4.数值 + undefined 
var four = b + undefined   //NAN      任何类型(包括它自己) 与 undefined (相加)运算 都会得到 NAN (非数字)
// 5. undefined + null (NAN非数字)
var five = undefined + null; // NAN  也不例外

// 6. Boolean(布尔型) + 数值
var six1 = b + false; // 1 Boolean运算时,true当成1,false当成0
var six2 = b + true; // 2

1-3 分支语句

对于编程语言,函数是最小的功能单元,语句是最小的处理单元.
语句决定了程序执行的结构,分支语句是编程中十分重要的一种结构,如果没有分支语句,那么程序将无智能性可言.

JavaScript中常见的分支语句有:

if
if-else
switch

// if-else 多分支语句
let a = 1;
let b = 2;
if ( a > b ) {
	console.log("big");
}else if( a < b) {
	console.log("small");
}else{
	console.log("same");
}
// 打印结果 : small

// switch 多分支语句
// case 值 = 为 全等类型, a 对应全等,不能是 字符串 '1'
switch (a) {
	case 0:{
		console.log('星期日')
	}
	case 1:{
		console.log('星期一')
	}
	break;
	case 2:{
		console.log('星期二')
	}
	break;
	case 3:{
		console.log('星期三')
	}
	break;
	case 4:{
		console.log('星期四')
	}
	break;
	case 5:{
		console.log('星期五')
	}
	break;
	case 6:{
		console.log('星期六')
	}
	break;
	default:{
		console.log('哥,哪里来的星期'+ a)
	}
}
// 打印结果 : 星期一

1-4 循环语句

我们对于一些需要大量重复的计算,就有必要使用for循环,例如给女朋友发一百条我爱你 ,统计公司总员工人数的薪资等等.
JavaScript中有以下几种简单的循环语句:

for 循环语句 (常用)
while 循环语句
do-while循环语句


var a = 0; // var 声明的变量没有块级作用域,可以访问 循环语句{} 里面的变量; let 有块级的作用域的限制,无法访问

// 1.for 循环
for(let i = 0; i < 10; i++){  // (i=0起始 条件;i<10 执行 条件;循环条件i++(每次自加1))
	a = a + 1;   // 循环体
}  
console.log(a)// 打印结果 a = 10

// 2.while 循环

while( a > 0 ) { // 执行条件
	a = a - 1; // 循环体
}
console.log(a)// 打印结果 a = 0

// 3.do-while 循环
do{
	a = a + 1;
}while(a<10);
console.log(a); // 10

1-5 函数

1.5.0 函数相关概念

1.5.0.1 函数 `内部命名的变量` 执行完毕,变量自动销毁

1.5.0.2 函数之间可以嵌套使用

1.5.0.3 return 关键字可以`强行停止函数的运行`,如果`未写`,默认返回 `undefined`

1.5.0.4(函数)`链式访问机制`,(从里到外访问)

链式访问原理:

子函数son 执行变量a语句时,就会查找当前函数内 a的值(是否被定义),

找不到就会访问上级(父函数father)中查找 a变量,
注意: 但是父函数不可以访问子函数的变量

情况1: 父函数 father 找到 a,
情况1.1:父函数 father 找到 a,全局找不到

function father(){
	var a = 10;
	function son(){
		return console.log(-a); 
	}
	son();
}
father();  // 打印结果 -10

情况1.1:父函数 father 找到 a,全局也找到 a

var a = 100;  // a 的值没有被访问 
function father(){
	var a = 10;  // 优先访问 上级函数
	function son(){
		return console.log(-a); 
	}
	son();
}
father();  // 打印结果 -10 
console.log(a);  // 打印结果 100

情况2:
父函数找不到 a,
但是在当前js文件(或内嵌式 script 标签之间)
查找 a变量,
情况2-1: 在当前全局中找到

var a = 100;
function father(){
	function son(){
		return console.log( a );
	}
	son();
}
father(); // 打印结果 100

情况 2-2: 在当前全局中找不到 a变量(报错)

// 全都找不到,就会被javascript 定义为 undefined,
function father(){
	function son(){
		return console.log( a ); /
	}
	son();
}
father(); // 打印结果  a is not defined

大白话总结: 链式访问

外部不能直接访问函数内部 声明的变量, 但是函数内部 可以访问 函数外部的变量,就近原则,自己有,就用自己的,没有就找最近的上级…

1.5.0.5(函数)闭包(外部需要访问到函数内部的变量)

父函数里用到 return 关键字,
返回子函数里又 return 父函数的变量,最后调用父函数即可访问修改父函数的变量.

function father(){
	var age = 18 
	return function son(){
		return age=age+1
	}
}
var nowAge = father() // 调用父函数,retrun 返回son函数
	nowAge(); // age=19
	nowAge(); // age=20
	nowAge(); // age=21
	nowAge()  // age=22
// 这段代码的特点:
//1. son 嵌套在 father 内部,并且 `函数son`  返回  `函数father` 内部声明的变量 。
//2.第一个return 返回 son函数,第二个 return 返回 father函数 的变量

闭包总结

最终, nowAge 变量指向了 son函数,而利用 son函数可以访问上一级变量的机制。 father函数外的变量 ·nowAge ·引用了 ·father·函数内的 ·son·函数,就产生了闭包…
总结一句话:
当 函数father 的 内部函数son 被 函数father 外的一个变量引用的时候，就创建了一个闭包

(销毁)回收机制

在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。
比如上面代码: 因为函数father被 函数son 引用，函数son 又被函数father外的变量 nowAge引用，这就是为什么函数father执行后不会被回收的原因。

1.5.1 命名函数的封装

函数以 function 关键字定义,函数是实现某种功能的代码单元…
通过给函数命名,以函数名() 方式调用

function add(a,b){
	return a+b;
}
// 通过 add()
console.log(add(1,2)); // 3

1.5.2 匿名函数的封装(赋值给变量)

将函数通过给 变量赋值 方式,进行调用,这种方式称为 匿名函数

let addFn = function add(a,b){
	return a+b;
}
console.log(addFn(99,1)); // 100 变量名调用
console.log(add(1,5)); // 报错 add is not defined

1.5.3 箭头函数的封装(省略function关键字)

箭头函数 写法:
只有一个参数时,可以省略小括号,
内部代码 只有一行时可以省略 return 关键字,省略 {大括号 } , 而且功能不变

// 完整写法
let addFn = (a,b) => { 
	return a+b;
}
console.log(addFn(1,8)); // 打印结果: 9

// 单行写法-----极简写法
let myFn = a =>  a + 99
myFn(1) // 打印结果: 100

1-6 对象

1.6.1 概念:

javascript是一种面向对象语言,对象是 javascript 的核心.可以简单的理解为对象键值配对 key 和 value,类似于地铁公交的闸门,可以有多种方式进入,例如实体卡,手机虚拟卡,实体票等等…
javascript中内置了许多对象,例如 Number 数值对象,String 字符串对象, Array 数组对象等.

1.6.1 命名规范:

属性命名: 名词
方法命名: 动词

1.6.2 自定义对象

	var people = {
		// 定义属性
		name: 'anni',
		age: 25,
		sex: '女',
		// 定义方法	
		sayHi:() =>{
			console.log('hello world');
		}
	}

访问对象属性和调用对象方法,在 javascript 中都可以使用点语法,例如:

console.log(people.name);
people.sayHi();

访问对象属性的第二种方法,例如:

console.log(people['name']);

1-7 数组对象

1.7.1数组的创建访问

javascript 中对象存放的类型十分自由,数组在 javascript 中也是一种对象,其在 javascript 中内置的 Array 对象.

var arr = [ 1, 'one', '1' ];
console.log( arr(0) );  // 1
console.log( arr(1) );  //  one

1.7.2 数组的长度方法追加/删除

push 尾部追加 元素, (带参数,返回新数组的长度)
pop 尾部删除元素 (没有参数,返回删除的元素);
unshift 头部添加 , (带参数,返回新数组的长度)
shift 删除第一个元素 (没有参数,返回删除的元素) ;

口诀 :
unshift 字母多,就是添加元素;
shift 字母少,就是删除元素;

arr.pop();  // 1  返回删除的元素
arr.push(2);  //  [ 1, 'one', '1', 2 ] 返回

1-8 案例 - 判断闰年

闰年判断条件: 可以被 4 整除但是不能被 100 整除,
或者可以直接被 400 整除的年份.

控制台打印

function check() {
	// 1.存储用户输入的年份
	var inputValue = prompt('请你输入正确的年份!');
		console.log(inputValue);
	// 2.定义 错误规则,
	// 通过Number() 方法 转换字符串型整数,只允许出现字符串型数字,不允许出现其他字符串.....否则转换失败返回 false
	// 把结果取反, !false => true 进入分支
	if( !Number(inputValue)  ){	
			alert( '请你输入正确的年份!' );
			return check() //输入非数字,重新调用check()
	// 3.定义 正确匹配规则
	}else if( inputValue % 4 === 0 && inputValue % 10 !==0 || inputValue % 400 ===0 ) {  	
		alert(`${inputValue}是闰年!`);	
	}else{
		alert(inputValue + "是平年!");
	}
};
check(); // 调用函数