初识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的历史

年份名称描述
1997ECMAScript 1第一个版本
1998ECMAScript 2版本变更
1999ECMAScript 3添加正则表达式添加try/catch
ECMAScript 4没有发布
2009ECMAScript 5添加"strict mode"严格模式添加JSON支持
2011ECMAScript 5.1版本变更
2015ECMAScript 6添加类和模块
2016ECMAScript 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

在这里插入图片描述

变量的命名规范

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

在这里插入图片描述


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

在这里插入图片描述


常量

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

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

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

在这里插入图片描述

五、JavaScript数据类型

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

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

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

在这里插入图片描述

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 // 报错不是一个数字

在这里插入图片描述

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方法'

在这里插入图片描述


常见内置方法

方法说明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

在这里插入图片描述

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变量为空

在这里插入图片描述

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

在这里插入图片描述

5.自定义对象

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

在这里插入图片描述

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()返回一个数组元素调用函数处理后的值的新数组

在这里插入图片描述

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)})

在这里插入图片描述


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]

在这里插入图片描述


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]

在这里插入图片描述

六、运算符

算术运算符

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

比较运算符

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

逻辑运算符

	&&()	||()  !()

赋值运算符

	= += -= *= /=

在这里插入图片描述

七、流程控制

分支结构

	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语法'

在这里插入图片描述

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('...');
    }

在这里插入图片描述

循环结构

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]);
	      };

在这里插入图片描述

while循环

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

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

在这里插入图片描述

三元表达式

	'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函数

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

函数的语法

	语法:
		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函数只能返回一个值,如果要返回多个值,那么就先将它们放入到数组或者对象内,然后再进行返回。

匿名函数

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

在这里插入图片描述

箭头函数

	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只能返回一个值,如果想返回多个值需要自己手动给他们包一个数组或对象中
	    }

在这里插入图片描述

函数中的arguments参数

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

在这里插入图片描述

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中的内置对象

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

Date对象

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

在这里插入图片描述

		获取当前时间练习 按照年月日时分星期几格式输出
		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)
		};		

在这里插入图片描述

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);

在这里插入图片描述

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')

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/112227.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android广播BroadcastReceiver

BroadcastReceiver组件 BroadcastReceiver是Android中的一个组件&#xff0c;用于接收和处理系统广播或应用内广播。它可以监听系统事件或应用内自定义的广播&#xff0c;并在接收到广播时执行相应的操作。 广播是一种用于在应用组件之间传递消息的机制。通过发送广播&#x…

RT-DERT:在实时目标检测上,DETRs打败了yolo

文章目录 摘要1、简介2. 相关研究2.1、实时目标检测器2.2、端到端目标检测器2.3、用于目标检测的多尺度特征 3、检测器的端到端速度3.1、 NMS分析3.2、端到端速度基准测试 4、实时DETR4.1、模型概述4.2、高效的混合编码器4.3、IoU-aware查询选择4.4、RT-DETR的缩放 5、实验5.1、…

Microsoft SQL Server 缓冲区错误漏洞(CVE-2018-8273)解决方法

前言&#xff1a; 在一次漏洞扫描中&#xff0c;扫描出紧急漏洞Microsoft SQL Server 缓冲区错误漏洞(CVE-2018-8273) 根据修复建议找补丁。 一、漏洞详情 二、寻找补丁 根据漏洞修复建议去下载补丁 目前厂商已发布升级补丁以修复漏洞&#xff0c;补丁获取链接&#xff1a;h…

k8s中kubectl命令式对象、命令式对象配置、声明式对象配置管理资源介绍

目录 一.kubernetes资源管理简介 二.三种资源管理方式优缺点比较 三.命令式对象管理介绍 1.kubectl命令语法格式 2.资源类型 &#xff08;1&#xff09;通过“kubectl api-resources”来查看所有的资源 &#xff08;2&#xff09;每列含义 &#xff08;3&#xff09;常…

【Docker】十分钟完成mysql8安装,你也可以的!!!

十分钟完成mysql8安装&#xff0c;你也可以的 前言安装步骤1.创建安装目录2.创建docker-compose.yml3.启动容器4.mysql开启远程连接5.连接mysql 总结 前言 本文基于Docker安装mysql:8.0.29&#xff0c;首先确保系统安装了docker和docker-compose。 没有使用过docker朋友可以去…

leetcode-哈希表

1. 理论 从哈希表的概念、哈希碰撞、哈希表的三种实现方式进行学习 哈希表&#xff1a;用来快速判断一个元素是否出现集合里。也就是查值就能快速判断&#xff0c;O&#xff08;1&#xff09;复杂度&#xff1b; 哈希碰撞&#xff1a;拉链法&#xff0c;线性探测法等。只是一种…

【年终特惠】基于最新导则下生态环评报告编制技术暨报告篇、制图篇、指数篇、综合应用篇系统性实践技能提升

根据生态环评内容庞杂、综合性强的特点&#xff0c;依据生态环评最新导则&#xff0c;将内容分为4大篇章(报告篇、制图篇、指数篇、综合篇)、10大专题(生态环评报告编制、土地利用图的制作、植被类型及植被覆盖度图的制作、物种适宜生境分布图的制作、生物多样性测定、生物量及…

高压放大器在电火花加工中的作用是什么

高压放大器在电火花加工中扮演着至关重要的角色。下面安泰电子将详细介绍高压放大器在电火花加工中的作用。 电火花加工是一种精密加工技术&#xff0c;广泛应用于制造业的模具制造、航空航天、汽车零部件等领域。它通过在工件表面产生高频电火花放电的方式&#xff0c;实现对材…

uniapp实现路线规划

UniApp是一个基于Vue.js框架开发的跨平台应用开发框架&#xff0c;可以同时构建iOS、Android、H5等多个平台的应用。它使用了基于前端技术栈的Web开发方式&#xff0c;通过编写一套代码&#xff0c;即可在不同平台上运行和发布应用。 UniApp具有以下特点&#xff1a; 跨平台开…

Unity内打开网页的两种方式(自带浏览器、内嵌浏览器)

1.自带浏览器 这个比较简单&#xff0c;直接调用unity官方的API即可&#xff0c;会直接使用默认浏览器打开网页&#xff0c;这里就不多做解释了。 代码 public InputField input;private void OpenUrlByUnity(){string inputStr input.text;if (!string.IsNullOrEmpty(input…

单链表练习

单链表练习 相关内容&#xff1a; 1.再理解&#xff1a;LNode、*LinkList 2.单链表的整表创建&#xff08;头插法和尾插法&#xff09; 3.单链表的读取、插入、删除 4.单链表的整表删除 //单链表的初始化、创建、插入、删除、查找 //结点的结构体&#xff1a;数据域、指针域 …

开放式耳机能保护听力吗,开放式耳机跟骨传导耳机哪个更好?

如果从严格意义上来讲的话&#xff0c;开放式耳机中的骨传导耳机是能保护听力&#xff0c;现如今的开放式耳机是一个统称&#xff0c;将所有不入耳的类目全部规划到一块。因此在开放式耳机中存在着一些耳机是只能够保持周边环境音&#xff0c;而不是保护听力的。 下面让我来给…

linux下的程序环境和预处理(gcc演示)

1. 程序的翻译环境和执行环境 在ANSI C的任何一种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执行的机器指令。 第2种是执行环境&#xff0c;它用于实际执行代码。 2. 详解编译链接 2.1 翻译环境 组成一个程序的…

MySQL连接的原理⭐️4种优化连接的手段性能提升240%

MySQL连接的原理⭐️4种优化连接的手段性能提升240%&#x1f680; 前言 上两篇文章我们说到MySQL优化回表的三种方式&#xff1a;索引条件下推ICP、多范围读取MRR与覆盖索引 MySQL的优化利器⭐️索引条件下推&#xff0c;千万数据下性能提升273%&#x1f680; MySQL的优化…

函数式接口详解(Java)

函数式接口详解&#xff08;Java&#xff09;_函数式接口作为参数_凯凯凯凯.的博客-CSDN博客 函数式接口&#xff1a;有且仅有一个抽象方法的接口 Java中函数式编程体现就是Lambda表达式&#xff0c;所以函数式接口就是可以适用于Lambda使用的接口 只有确保接口中仅有一个抽…

【设计模式】第7节:创建型模式之“建造者模式”

Builder模式&#xff0c;中文翻译为建造者模式或者构建者模式&#xff0c;也有人叫它生成器模式。 在创建对象时&#xff0c;一般可以通过构造函数、set()方法等设置初始化参数&#xff0c;但当参数比较多&#xff0c;或者参数之间有依赖关系&#xff0c;需要进行复杂校验时&a…

Springboot 集成 Seata

Seata 是一款开源的分布式事务解决方案&#xff0c;致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式&#xff0c;为用户打造一站式的分布式解决方案。Seata官网 1.找到适合的Seata版本 参考&#xff1a;SpringCloudAlibaba S…

Linux学习之进程二

目录 进程状态 R (running)运行状态与s休眠状态&#xff1a; disk sleep&#xff08;深度睡眠状态&#xff09; T (stopped)&#xff08;暂停状态&#xff09; t----tracing stop(追踪状态) X死亡状态&#xff08;dead&#xff09; Z(zombie)-僵尸进程 孤儿进程 进程优…

python捕获异常和scapy模块的利用

Python捕获异常 ​ 当程序运行时&#xff0c;因为遇到未知的错误而导致中止运行&#xff0c;便会出现Traceback 消息&#xff0c;打印异常。异常即是一个事件&#xff0c;该事件会在程序执行过程中发生&#xff0c;影响程序的正常执行。一般情况下&#xff0c;在Python 无法正…

2023年Q3户外装备市场行业分析报告(京东数据分析):同比增长7%,品牌化发展是核心

近年来&#xff0c;户外运动在我国不少地方蓬勃兴起&#xff0c;发展至今&#xff0c;户外运动早已不是聚焦专业领域的小众群体活动&#xff0c;现已发展成为当下热门的大众休闲活动&#xff0c;参与人群愈发广泛&#xff0c;而这股热潮也带动着相关产业的发展。 今年Q3&#x…