初识JavaScript(一)

文章目录

  • 一、JavaScript介绍
  • 二、JavaScript简介
    • 1.ECMAScript和JavaScript的关系
    • 2.ECMAScript的历史
    • 3.什么是Javascript?
    • 4.JavaScript的作用?
    • 5.JavaScript的特点
  • 三、JavaScript基础
    • 1.注释语法
    • 2.JavaScript的使用
  • 四、JavaScript变量与常量
    • 变量
    • 关键字var和let的区别
    • 常量
  • 五、JavaScript数据类型
    • 1.数值类型(Number)
    • 2.字符类型(String)
      • 常见内置方法
    • 3.布尔值(Boolean)
    • 4.对象(Object)
    • 5.自定义对象
    • 6.数组
      • 数组常用内置方法
  • 六、运算符
    • 算术运算符
    • 比较运算符
    • 逻辑运算符
    • 赋值运算符
  • 七、流程控制
    • 分支结构
    • switch分支
    • 循环结构
      • for循环
      • while循环
      • 三元表达式
  • 八、JavaScript函数
    • 函数的语法
    • 函数的参数传递
    • 匿名函数
    • 箭头函数
    • 函数中的arguments参数
    • JavaScript函数的特点
    • JavaScript函数的全局变量和局部变量
    • 补充知识
  • 九、JavaScript中的内置对象
    • Date对象
    • Json对象
    • RegExp正则对象

一、JavaScript介绍

JavaScript也可以简称为JS,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果,用户交互及前后端的数据传输等。

JavaScript实际与Java在使用上没有任何关系,但是起源却有些联系,感兴趣可以看看:https://blog.csdn.net/kese7952/article/details/79357868

JS主要负责网页的各式各样的动态功能,因此可以为用户提供更流畅美观的页面浏览效果,以及添加页面交互行为,给用户更好的视觉和使用体验

二、JavaScript简介

1.ECMAScript和JavaScript的关系

​1996年11月,JavaScript的创造者–Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望这门语言能够成为国际标准。次年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为ECMAScript,这个版本就是1.0版。

​该标准一开始就是针对JavaScript语言制定的,但是没有称其为JavaScript,有两个方面的原因。一是商标,JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA,而不是Netscape,这样有利于保证这门语言的开发性和中立性。

​因此ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。

2.ECMAScript的历史

年份 名称 描述
1997 ECMAScript 1 第一个版本
1998 ECMAScript 2 版本变更
1999 ECMAScript 3 添加正则表达式添加try/catch
ECMAScript 4 没有发布
2009 ECMAScript 5 添加"strict mode"严格模式添加JSON支持
2011 ECMAScript 5.1 版本变更
2015 ECMAScript 6 添加类和模块
2016 ECMAScript 7 增加指数运算符(**)增加Array.prototype.includes

3.什么是Javascript?

尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

  • 核心(ECMAScript)(ES5-ES6)规范了JavaScript的基本语法
  • 文档对象模型(DOM) Document object model (整合js,css,html)(提供了一系列操作的文档的方法)
  • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)(提供了一系列操作浏览器的方法)

一、ECMA Script

  1. ECMAScript是一个标准,JS只是它的一个实现,其他实现包括ActionScript。
  2. “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力…”,即ECMAScript不与具体的宿主环境相绑定,如JS的宿主环境是浏览器,AS的宿主环境是Flash。
  3. ECMAScript描述了以下内容:语法、类型、语句、关键字、保留字、运算符、对象。

因此ECMAScript和JavaScript的关系是,前者是后者的标准,后者是前者的一种实现。ECMAScript也可以称为ES

二、DOM

  1. DOM 全称是:Document Object Model,也就是文档对象模型。
  2. DOM 是 W3C 的标准; [所有浏览器公共遵守的标准]
  3. DOM的主要中就是为了操作 HTML 中的元素

三、BOM

  1. BOM 全称是:Browser Object Model,浏览器对象模型。
  2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
  3. window 是 BOM 对象,而非 JS 对象;JS是通过访问BOM对象来访问、控制、修改浏览器
  4. 主要作用:可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而JS可以操作浏览器以及浏览器读取到的文档

简单地说,ECMAScript 描述了JavaScript语言本身的相关内容。
JavaScript一般用来编写页面脚本,来为html页面添加交互行为,是前台语言,而不是后端语言。

  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

4.JavaScript的作用?

​如今,JavaScript 不仅可以在浏览器中执行,也可以在服务端执行,甚至可以在任意搭载了 JavaScript 引擎 的设备中执行。JavaScript 是一种脚本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层,其中 HTML 和 CSS 我们已经在学习中心的其他部分进行了详细的讲解。

三者之间的作用:

  • HTML是一种标记语言,用来结构化我们的网页内容并赋予内容含义,例如定义段落、标题和数据表,或在页面中嵌入图片和视频。
  • CSS 是一种样式规则语言,可将样式应用于 HTML 内容, 例如设置背景颜色和字体,在多个列中布局内容。
  • JavaScript 是一种脚本语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画,还有很多。(好吧,虽然它不是万能的,但可以通过简短的代码来实现神奇的功能。)

5.JavaScript的特点

  • 解释执行(浏览器就是解释器):事先不编译、逐行执行、无需进行严格的变量声明。
  • 简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序。
  • 基于对象:内置大量现成对象,编写少量程序可以完成目标

三、JavaScript基础

1.注释语法

	// 单行注释
	/**/ 多行注释

2.JavaScript的使用

在HTML中有几种引入的方式:

	1.head内script标签内编写
		<script>
			// 在这里写你的JS代码
		</script>

	2.head内script标签src属性引入外部js资源
		<script src="my.js"></script>
		
	3.body内最底部通过script标签src属性引入外部js资源(最常用)


'ps:注意页面的下载是从上往下的 所以操作标签js代码一定要等待标签加载完毕再执行才可以正常运行'

JS的语法规范

JS对换行、缩进、空格并不敏感。
一段JS代码写完记得在末尾加上分号; (当然不写也没问题) ,但是避免日后JS文件压缩导致无法执行的问题所以最好还是写


四、JavaScript变量与常量

​ pycharm创建js文件或者html文件(适合编写较为复杂的js代码),浏览器提供编写js代码的环境

变量

由于JS是一门弱类型、动态语言,所以在定义变量时并不需要提前说明变量类型。

	首先说说可以编写JS代码的地方
		1.浏览器右键检查>>>Console
		2.专门的代码软件

	在JS中声明变量和常量都需要使用关键字来使用
		var(全局有效)					var x = "JavaScript";
		let(如果在局部名称空间中使用 那么仅在局部名称空间中有效) let x = "JavaScript";
	'''
	注意:let关键字是ECMA6推出的新语法,如果你的编辑器支持的版本是5.1那么将无法使用let关键字,
	如果是6.0则向下兼容var、let都可以使用,
	'''
		const(定义常量)					const P = 3.1415
		'真正意义上的常量,不能更改'

	JS也是动态类型:变量名绑定的数据值类型不固定
		var name = "jack";	
		console.log(name) //打印结果为:jack
		name = 'tom';
		console.log(name) // 打印结果为:tom

初识JavaScript(一)_第1张图片

变量的命名规范

1、由字母、数字、下划线、$ 组成,但是不能数字开头,也不能纯数字

2、严格区分大小写

3、不能包含关键字和保留字(以后升级版本要用的关键字)。
如:abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、
goto、implements、importint、interface、long、native、package、private、protected、public、
short、static、super、synchronized、throws、transient、volatile

4、推荐驼峰命名法:有多个有意义的单词组成名称的时候,第一个单词的首字母小写,其余的单词首字母写

5、匈牙利命名:就是根据数据类型单词的的首字符作为前缀

关键字var和let的区别

var 在for循环里面定义也会影响到全局,let 在局部定义只会在局部生效

	'关键字var'
	var i = 66;
	for (var i = 0; i < 10; i++){
		console.log(i);
	}
	console.log(i); //运行完毕循环后执行打印结果为10

初识JavaScript(一)_第2张图片


	'关键字let'
	let n = 88;
	for(let n=0; n < 10; n++){
		console.log(n);
	}
	console.log(n); // 运行完毕循环后执行打印结果为88

初识JavaScript(一)_第3张图片


常量

​ python中没有真正意义上的常量 默认全大写就是表示常量。而JS中是有真正意义上的常量。需要关键字声明 : const

	const P = 3.1415;
	P = 3.15; //报错

声明一个常量,声明之后就不能改了

初识JavaScript(一)_第4张图片

五、JavaScript数据类型

JS是动态语言:变量里面能够存储数字、字符串等。变量会自动的根据存储内容的类型不同,来决定自己的类型。

变量值刚声明时,如果未赋值,那么默认会存一个值:

	var x; // x的值为undefined:表示未赋值
	
	'声明一个变量名后可以指向任意的数据类型,但是有一些语言中,变量名之间指向一种后续不能更改'
	var x;
	x = 'hello';
	x = 66;
	x = [1,2,3,4];

初识JavaScript(一)_第5张图片

1.数值类型(Number)

JavaScript 不区分整型与浮点型,只有一种数字类型,即:number类型。

	var z = 10;
	var y = 12.3;
	var c = 12e5;
	var n = NaN; // Nan表示:not a number 作用与某个值不是数字,但它也是数字类型

	数值类型的一些方法:
		parseint('')	// 转换为整数
		parsefloat('')  // 转换为小数
		typeof 变量名	// 查询数据类型
		NaN:Not a number // 报错不是一个数字

初识JavaScript(一)_第6张图片

2.字符类型(String)

字符串是存储字符的变量,即:String类型。
字符串可以是引号中的任意文本。你可以使用单引号或双引号:

	var name1 = 'jack'; //单引号
	var name2 = "tom"; //双引号
	'不可以使用下面这种方式,必须配对使用'
	var name3 = 'oscar";

	typeof name1; // String

	'需要注意的是引号内不能包含外部已经使用的引号'
	var x = 'My name is 'jack''; //报错,引号里面的字符不能包含外部引号
	var x = 'this it's'; //错误写法! 报错

	'不支持三单/双引号'
	var s = '''hello'''; //报错 Uncaught SyntaxError: Unexpected string

1.字符串拼接推荐使用加号

	方法一:字符的拼接 ‘+’
		var a = 'hello';
		var b = 'world';
		var c = a + b;
		console.log(c); //结果为helloworld

	方法二:支持格式化输出
		var name = 'jack';
		var age = 19;
		var user = `my name is ${name} my age is ${age}`;
		console.log(user);
	
	'注意:python 不推荐用加号去拼接,而是join方法'

初识JavaScript(一)_第7张图片


常见内置方法

方法 说明 Python中对应的方法
.length 返回长度 len()
.trim() 移除空白 strip()
.trimLeft() 移除左边的空白 lstrip()
.trimRight() 移除右边的空白 rstrip()
.charAt(n) 返回第n个字符
.concat(value, …) 拼接 join()
.indexOf(substring, start) 子序列位置
.substring(from, to) 根据索引获取子序列 []索引取值
.slice(start, end) 切片
.toLowerCase() 小写 lower()
.toUpperCase() 大写 upper()
.split(delimiter, limit) 分割 split()

3.布尔值(Boolean)

布尔只有两个值:true、false。即:Boolean类型.
布尔常用在条件判断中。

	JS里面的布尔值类型为boolean(区别于Python中true和false都是小写)
	var x = true;
	var y = false; // (空字符串)0、null、undefined、nan都是false

	typeof x; // boolean

初识JavaScript(一)_第8张图片

null与undefined区别

  • null表示值是空的,一般在需要指定或清空一个变量时才会使用,如name=null;
  • Undefined表示当声明一个变量但未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
    注意:null表示变量的值是空(null可以手动清空一个变量的值,使得该变量变为object类型,值为null),undefined则表示只声明了变量,但还没有赋值。
	var s; // undefined
	
	var name = 'jack';
	name = null; // null 清空了name的值,再次显示出来就是null了表示name变量为空

初识JavaScript(一)_第9张图片

4.对象(Object)

对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性之间由逗号分隔,ps:它与Python内的字典相同:

	var obj = {'name':'jack','age':19};
	typeof obj; // object

对象有两种取值方式

	obj.name; // jack
	obj['name']  // jack

对象的属性值可以存放任意数据类型

	var obj = {'name':'jack','age':19,'hobby':['music','jump','rap']};

此时获取hobby属性的值

	obj.hobby[0]; // music
	JS里面中的所有事物都是对象。(Python也是一切皆对象)
	所有事物都是对象:字符串、数值、数组、函数....,且允许自定义对象。
	JavaScript提供多个内建对象,比如String、Date、Array。对象只是带有属性和方法的特殊数据类型
	
	var a = [12,21,21,333,15];
	typeof a; // object
	console.log(a[1]); // 打印结果为 21

初识JavaScript(一)_第10张图片

5.自定义对象

	自定义对象相当于Python中的字典快速的操作数据值
	定义方式1:
		let user = {'name':'jack','password':123}
	定义方式2:
		let d2 = new object()
	自定义对象操作数据值的方式很简单 直接使用句点符就可以直接获取value

初识JavaScript(一)_第11张图片

6.数组

​ 数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表。

	var a=[123,'jack'];
	console.log(a[1]);  //  jack

数组常用内置方法

方法 说明
.length 数组的大小
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift 头部移除元素
.slice(start,end) 切片操作
.reverse() 数据反转
.join(seq) 将数组元素连接成字符串
.concat(val,…) 链接数组
.sort() 排序
.forEach() 将数组的每个元素传递给回调函数
.splice() 删除元素 并向数组添加新元素
.map() 返回一个数组元素调用函数处理后的值的新数组

初识JavaScript(一)_第12张图片

1. forEach(function(currentValue, index, arr), thisValue)

参数 描述
function(currentValue, index, arr) 必需。 数组中每个元素需要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。
thisValue 可选。传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值
	forEach
		语法:forEach(function(currentValue, index, arr), thisValue)
	
	ll=[111, 222, 333, 444, 555, 666];
	'一个参数就是数组里面每一个元素对象'
	ll.forEach(function(value){console.log(value)},11)
	'两个参数就是元素+元素索引'
	ll.forEach(function(value,index){console.log(value,index)},11)
	'元素+元素索引+元素的数据来源'
	ll.forEach(function(value,index,arr){console.log(value,index,Array)})

初识JavaScript(一)_第13张图片


2.splice()

参数 描述
index 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字,但可以是 “0”。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX 可选。要添加到数组的新元素
	splice
		语法 splice(index,howmany,item1,.....,itemX)
	
	l1=[111, 222, 333, 444, 555, 666];
	'两个参数,第一个起始位置 第二个是删除的个数'
	l1.splice(0,3); // [111, 222, 333]
	'三个参数 先删除前面指定的参数 在添加后面指定的参数(先删除后添加)'
	l1.splice(0,1,888); // a=[888, 555, 666]
	'先删除指定前面的参数, 在将数组添加到Array内 Array=数组'
	l1.splice(0,1,[111,222,333,444]); // [Array(4), 555, 666]  Array(4)=[111, 222, 333, 444]

初识JavaScript(一)_第14张图片


3.map()

参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当期元素的索引值arr可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,“this” 的值为 “undefined”
	map
		语法:map(function(currentValue,index,arr), thisValue)

	var l2=[11,22,33,44,55];
	l2.map(function(value){console.log(value)},l2);
	11
	VM4761:1 22
	VM4761:1 33
	VM4761:1 44
	VM4761:1 55
	
	l2.map(function(value,index){
	    return value*2},l2);
	(5) [22, 44, 66, 88, 110]
	
	l2.map(function(value,index,arr){
	    return value*2},l2);
	(5) [22, 44, 66, 88, 110]

初识JavaScript(一)_第15张图片

六、运算符

算术运算符

	+ - * / % ++(自增1) --(自减1)
    var x=10;
    var res1=x++;  加号在后面	先赋值后自增
    var res2=++x;	加号在前面	 先自增后赋值

比较运算符

	!=(值不等 弱) ==(值相等 弱) ===(值相等 强) !==(值不等 强)
	ps:会不会自动转换类型
	
	1 == '1' // true  弱等于
	1 === '1'  // false 强等于
	//上面这张情况出现的原因在于JS是一门弱类型语言(会自动转换数据类型),
	所以当你用两个等号进行比较时,JS内部会自动先将
	
	//数值类型的1转换成字符串类型的1再进行比较,
	所以我们以后写JS涉及到比较时尽量用三等号来强制限制类型,防止判断错误

逻辑运算符

	&&()	||()  !()

赋值运算符

	= += -= *= /=

初识JavaScript(一)_第16张图片

七、流程控制

分支结构

	1.if分支
		if(条件){条件成立之后执行的代码}
		
	2.if...else分支
		if(条件){
			条件成立之后执行的代码
		}else{
			条件不成立执行的代码
		}
		
	3.if...else if ....else分支
		if(条件1){
			条件1成立之后执行的代码
		}else if(条件2){
			条件1不成立条件2成立执行的代码
		}else{
			条件1,2不成立之后执行的代码
		}



	var x=10;
    if(x>5){console.log('yes')}

    //分支结构之双分支
    if(x>5){
        console.log('yes');
    }else{
        console.log('no');
    }

    //分支结构之多分支
    if(x>5){
        console.log('x>5');
    }else if(x<5){
        console.log('x<5');
    }else{
        console.log('x=5');
    }

	'如果分支结构中else if很多还可以考虑使用switch语法'

初识JavaScript(一)_第17张图片

switch分支

	switch(){
		case 条件1:
		    条件1成立执行的代码;
			break;  # 如果没有break,就会基于某个case条件一直往下执行
		    case 条件2:
		    	条件2成立执行的代码;
		    	break
		case 条件3:
			条件3成立执行的代码;
		      	 break;
		case 条件4:
			条件4成立执行的代码;
		        break;
		   defualt:
		      条件都不满足执行的代码
	}


	var day = new Date().getDay();
    switch(day){
        case 0:
            console.log('Sunday');
            break;
        case 1:
            console.log('Monday');
            break;
        default:
            console.log('...');
    }

初识JavaScript(一)_第18张图片

循环结构

for循环

	for(起始条件;循环条件;条件处理){
		循环体代码
	}
	
	1.for 循环列表
	for(let i=0;i<10;i++){
		console.log(i);
	}
	
	2.for 循环字典
	let dd = {'name':'jason','age':18}
	      for(let k in dd){
	      	console.log(k);
	      }
	
	      for(let k in dd){
	      	console.log(dd[k]);
	      };

初识JavaScript(一)_第19张图片

while循环

	while循环
		while(循环条件){
	        循环体代码
	    }

	eg:
	    var i = 0;
	    while (i < 10) {
	      console.log(i);
	      i++;
	    }

初识JavaScript(一)_第20张图片

三元表达式

	'Python中的三元运算'1 if 条件 else2
	res = 1 if 1>2 else 3
	
	条件成立取	 1
	条件不成立取	3

	'JavaScript中的三元运算'
	JS中: 条件?值1:2

	eg1:
		res = 1>2?1:3
		条件成立	取问号后面的1
		不成立		 取冒号后面的3
	    
	eg2:
	var a = 1;
	var b = 2;
	var c = a > b ? a : b;
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算可以嵌套使用;
	var a=10,b=20;
	var x=a>b ?a:(b=="20")?a:b;
	x=10

初识JavaScript(一)_第21张图片

八、JavaScript函数

函数就是将代码存储在一个容器内,当我们需要时就可以直接调用,然后执行里面的代码块。

函数的语法

	语法:
		function 函数名(形参){
			函数体代码;
			return 返回值
		}
	
	function index(){
        console.log('helloworld');
    }

    index(); //调用这个函数

函数的参数传递

我们可以让函数接收外部调用时传递参数,然后函数可以拿着传递进来的参数执行。

	function func(a,b){
        if(a>b){
            return a; // 返回值给这个函数的调用者
        }else{
            return b;
        }
    }

    var res = func(10,20); // 定义一个变量,接收调用函数时函数的返回值
    console.log(res);

	参数的个数不需要一一对应 如果想限制参数个数需要使用内置关键字arguments
	'并且JavaScript函数中只有形参和默认参数,没有关键字参数'
	function func(a, b){
		if(arguments.length===2){
			console.log(a, b) 
    	}else{
      		console.log('需要传对应的个数参数!!!')
	   }
	}

初识JavaScript(一)_第22张图片

注意:JavaScript函数只能返回一个值,如果要返回多个值,那么就先将它们放入到数组或者对象内,然后再进行返回。

匿名函数

	Js里面的匿名函数
		定义格式:
			var sum = function(a,b){
				return a+b
			}	
			sum(1,2);
			
	除了匿名函数还有立即执行函数 书写立即执行的函数,首先先写两个括号()()这样防止书写混乱
			(function(a, b){
			  return a + b;
			})(1, 2);

初识JavaScript(一)_第23张图片

箭头函数

	var f = v => v;
	var f = fuction(v){
		return v
	}

	eg1:
	    var f = () => 5; //箭头函数不需要参数
	    var f = function(){return 5};
	
	eg2:
	    var sum = (num1, num2) => num1 + num2; //需要多个参数
	    var sum = function(num1, num2){
	      return num1 + num2;  
	      ////这里的return只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
	    }

初识JavaScript(一)_第24张图片

函数中的arguments参数

		函数中的arguments参数
		function add(a,b){
		  console.log(a+b);
		  console.log(arguments.length);
		 console.log(arguments[0]);//arguments相当于将出传入的参数全部包含,这里取得就是第一个元素1
		}

初识JavaScript(一)_第25张图片

JavaScript函数的特点

  1. JS中函数的形参与实参个数可以不对应,传少了缺少的那个变量就是undefined,传多了多余的不用接收
  2. 函数体代码中有一个关键字arguments用来接收所有的实参
  3. 函数的返回值如果有多个需要自己处理成一个整体

JavaScript函数的全局变量和局部变量

局部变量:

在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

全局变量:

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

变量生存周期:

JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。与python作用域关系查找一模一样

例子

	var city = 'shanghai';
    function func(){
        var city = 'beij';
        function inner(){
            var city = 'shenzhen';
            console.log(city);
        }
        inner();

    }

    func();


    //
    var city1 = 'beij';
    function bar(){
        console.log(city1);
    }
    function func1(){
        var city='shanghai';
        return bar;
    }
    var ret = func1();
    ret();


    //
    var city2 = 'beij';
    function func3(){
        var city2 = 'shanghai';
        function inner(){
            console.log(city2);
        }
        inner();
    }

    var res1 = func3();
    res1();

补充知识

词法分析:JavaScript中在调用函数的那一瞬间,会先进行词法分析

词法分析的过程:

当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:

1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找。

	eg:
    var age = 18;
    function foo(){
      console.log(age);
      var age = 22;
      console.log(age);
    }
    foo();  // 问:执行foo()之后的结果是? 22


	eg:
	    var age = 18;
	    function foo(){
	      console.log(age);
	      var age = 22;
	      console.log(age);
	      function age(){
	        console.log("呵呵");
	      }
	      console.log(age);
	    }
	    foo();  // 执行后的结果是?

初识JavaScript(一)_第26张图片

九、JavaScript中的内置对象

		类似于python中的内置函数或者内置模块
		固定语法
			var 变量名 = new 内置对象名();

Date对象

		Date对象方法
		var d = new Date(); 
		//getDate()                 获取日
		//getDay ()                 获取星期
		//getMonth ()               获取月(0-11//getFullYear ()            获取完整年份
		//getYear ()                获取年
		//getHours ()               获取小时
		//getMinutes ()             获取分钟
		//getSeconds ()             获取秒
		//getMilliseconds ()        获取毫秒
		//getTime ()                返回累计毫秒数(1970/1/1午夜)

初识JavaScript(一)_第27张图片

		获取当前时间练习 按照年月日时分星期几格式输出
		const WEEKMAP = {  
			  0:"星期天",
			  1:"星期一",
			  2:"星期二",
			  3:"星期三",
			  4:"星期四",
			  5:"星期五",
			  6:"星期六"
			};  //定义一个数字与星期的对应关系对象
		
		function showTime() {
		    var d1 = new Date();
		    var year = d1.getFullYear();
		    var month = d1.getMonth() + 1;  //注意月份是从0~11
		    var day = d1.getDate();
		    var hour = d1.getHours();
		    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();  //三元运算
		
		    var week = WEEKMAP[d1.getDay()];  //星期是从0~6
		
		    var strTime = `
		    ${year}-${month}-${day} ${hour}:${minute} ${week}
		    `;
		    console.log(strTime)
		};		

初识JavaScript(一)_第28张图片

Json对象

		Json对象
		Js里面Json序列化关键词
			Json.stringify()
			Json.parse()
		var str1 = '{"name": "Alex", "age": 18}';
		var obj1 = {"name": "Alex", "age": 18};
		// JSON字符串转换成对象
		var obj = JSON.parse(str1); 
		// 对象转换成JSON字符串
		var str = JSON.stringify(obj1);

初识JavaScript(一)_第29张图片

RegExp正则对象

	RegExp正则对象
		语法方式1:
			var reg1 = new RegExp("正则表达式");
		语法方式2:
			var reg1 = new RegExp("正则表达式");
		var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
		var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

		reg1.test('Lebron666')
		reg2.test('Lebron666')

		var s1 = 'meijinisdashuaige';
		var s2= /^[a-zA-Z][a-zA-Z0-9]{5,9}$/g
	
		s2.test('meijin')
		s2.test('mjdashuaige')

初识JavaScript(一)_第30张图片

你可能感兴趣的:(前端,javascript,开发语言)