一,导论
1.1 计算机基础
1编程语言
1.计算机可以帮助人类解决某些问题
2.程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
3.编程语言有机器语言,汇编语言,高级语言
4.高级语言需要一个编译器转换为计算机识别
5.编程语言是主动的有很强逻辑性
编程语言与标记语言的区别
编程语言有很强的逻辑和行为能力,在编程语言中,你会看到很多if else,for,while等具有逻辑性和行为能力的指令,这是主动的。
标记语言不用于向技术按及发出指令,常用于格式化和链接。标记语言的存在是用来被读取的,他是被动的。
2.计算机基础
1.计算机的组成
2.计算机内部使用0和1来表示数据。
3.数据存储单位
bite<byte<kb<MB<GB<TB
4.程序运行
打开某个程序,先从硬盘中把程序的代码加载到内存中
CPU执行内存中的代码
注意:之所以要内存的一个重要原因,是因为cpu运行太快了,如果只从硬盘中读数据,会浪费cpu性能,所有才使用存储速度更快的内存条来保存运行时的数据。(内存时电,硬盘是机械)
1.2 JavaScript初识导读
JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)
脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行。
现在也可以基于Node.js技术进行服务器编程。
1.javascript的作用
表单动态校验(密码强度检测)(JS参数最初的目的)
网页特效
服务端开发(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件–物联网(Ruff)
游戏开发(cocos2d-js)
2.HTML/CSS/JS的关系
HTML/CSS标记语言–秒速类语言
- HTML决定网页结构和内容(决定看到什么),相当于人的身体。
- CSS决定网页呈现给用户的模样(决定好不好看),相当于给人穿衣服,化妆。
- JS脚本语言–编程类语言
实现业务逻辑和页面控制(决定功能),相当于人的各种动作。
3.浏览器执行JS简介
渲染器分为两部分 渲染引擎和JS引擎
- 渲染引擎:用来解析HTML与CSS,俗称内核,比如chorme浏览器的blink,老版本的webkit
- JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对齐处理后运行,比如chrome浏览器的V8.
浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以Javascript语言归为脚本语言,会逐行解释执行。
4.JS的组成及引入
ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标注化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,但实际上后两种是ECMAScript语言的实现和扩展。
<!-- 1.行内式的js直接写到元素的内部 -->
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
<!-- 2.内嵌式的js -->
<script>
// alert('沙漠骆驼')
</script>
<!-- 3.外部的js script 双标签 -->
<script src="my.js"></script>
行内式 JS
可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如:onclick
注意单引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号
可读性差,在html中编写JS大量代码时,不方便阅读;
引号易错,引号多层嵌套匹配时,非常容易弄混;
特殊情况下使用
外部JS文件
利用HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
利用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况
5.JS注释
单行注释 // ctrl+/
多行注释 /*123*/ shift+alt+a
6.JS输入输出语句
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
promot(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
二,变量
用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。
本质:是程序在内存中申请的一块用来存放数据的空间。
2.1 变量的使用
1.声明变量
var age;
var是一个JS关键字,用来声明变量(variable变量的意思)。使用该关键字声明变量后,计算机会自动为其变量分配内存空间,不需要程序员管。
2.赋值
age=10;
3.变量的初始化
var age=18;
2.2变量语法扩展
-
更新变量
一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。 -
声明多个变量
只需要写一个var,多个变量名之间使用英文逗号隔开。var age = 18, address = '火影村', gz = 2000;
-
声明变量特殊情况
情况 说明 结果 var age;console.log(age) 只声明 不赋值 undefined console.log(age) 不声明 不赋值 直接使用 报错 age=10;console.log(age) 不声明 只赋值 10
2.3 变量命名规范
- 由字母(大小写),数字(0-9),下划线(_),美元符号($)组成
- 严格区分大小写。var app;和var App;是两个变量。
- 不能以数字开头。18age是错误的。
(只能以 $ ,_, 字母 开头) - 不能是关键字,保留字。例如:var,for,while
- 变量名必须有意义。MMD BBD nl–>age
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。myFirstName
- 推荐翻译网站:有道 爱词霸
三,数据类型
不同数据所需暂用的存储空间不同。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。
(根据等号右边的值来确定的)
JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型。
3.1数据类型的两大类
简单数据类型(Number(数字型,默认0),String(默认""),Boolean(默认false),Undefined(默认undefined),Null(默认null))
复杂数据类型(object)
1.数字型
八进制就在前加0
十六进制就在前加0x
数字型范围
//数字型的最大值
console.log(Number.MAX_VALUE);//1.797691348623157e+308
//数字型的最小值
console.log(Number.MIN_VALUE);//5e-324
数字型三个特殊值
Infinity,代表无穷大,大于任何数值
-Infinity,代表无穷小,小于任何数值
NaN,Not a number,代表一个非数值
console.log(Number.MAX_VALUE*2);//Infinity
console.log(Number.MIN_VALUE*2);//-Infinity
console.log('123'-100)//NaN
//isNaN()这个方法用来判断非数字 并且返回一个值 如果是数字返回的是false 如果不是数字返回的是true
console.log(isNaN(12))
2.字符串型
推荐单引号
如果嵌套引号,外单内双或外双内单
字符串转义符(写在引号里)
转义符 | 解释说明 |
---|---|
\n | 换行符 |
\\ | 斜杠\ |
\' | ’ 单引号 |
\" | " 双引号 |
\t | tab 缩进 |
\b | 空格 |
字符串长度
通过字符串的length属性获取
字符串拼接
多个字符串之间可以使用+进行拼接,其拼接方式为字符串+任何类型=拼接之后的新字符串
数值相加,字符相连
我们变量不要写到字符串里面,是通过和字符串相连的方式实现的。
3.布尔值 Boolean
布尔类型有两个值:true和false
参与加法运算分别当1和0来看待
4.undefined
注意该类型相加结果
var variable =undefined;
console.log(variable+'pink'); //undefinedpink
console.log(variable+1);//NAN
5.null
注意该类型相加结果
var variable =null;
console.log(variable+'pink'); //nullpink
console.log(variable+1);//1
3.2 typeof-检测类型
注意 typeof(null) 和 typeof(undefined) 的巨大区别
var num = 10;
console.log(typeof num);//number
var num = null;
console.log(typeof num);//object
var a = undefined;
console.log(typeof(a))//undefined
//prompt 取过来的值是 字符型的
var age = prompt('请输入您的年龄');
console.log(age);
console.log(typeof age);
控制台显示:
蓝色偏亮—数值型
黑色–字符串型
蓝色偏暗—布尔型
浅灰—undefined,null
3.3 字变量
字面量是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值
数字字面量:8,9,10
字符串字面量:‘前端’,‘开发’
布尔字面量:true,false
3.4 数据类型转换
1.转换为字符串
方式 | 案例 |
---|---|
toString() | var num=1;alert(num.toString()) |
String()强制转换 | var num=1;alert(String(num)) |
加号拼接字符串,隐式转换 | var num=1;alert(num+‘’) |
2.转换为数字型(重点)
方式 | 案例 |
---|---|
parseInt(string)函数 | pareInt(‘78’) |
paseFloat(string)函数 | parseFloat(‘78.21’) |
Number()强制转换函数 | Number(‘12’) |
js隐式转换(- * /) | ‘12’-0 |
注意 Number() 和 parseInt() 的巨大区别
console.log(paseInt('120px'));//120 会去掉px单位
console.log(parseInt('rem120pxabs'));//NaN
console.log(Number('12px'));//NaN
console.log(Number('123'));
console.log('12' - 0);//12
console.log('123'-'120');//3
console.log('123'*1);//123
console.log(parseFloat(1.1))//1.1
console.log(parseFloat(1))//1
console.log(parseInt('a12345'))//NaN
console.log(Number('12345a'))//NaN
3.转换为布尔型
方式 | 案例 |
---|---|
Boolean()函数 | Boolean(“true”) |
代表空,否定的值会被转换为false,如 ‘’,0,NaN.null,undefined ,
其余全部转换为true
3.5 翻译器的两种翻译方式
程序语言翻译成机器语言的工具,被称为翻译器。
翻译器翻译的方式有两种:一种是翻译,另外一种是解释。两种方式之间的区别在于翻译的时间点不同。
编译器是在代码执行之前进行编译,生成中间代码文件
解释器是在运行时进行及时解释,并立即执行(当编译器以解释方式运行的时候,也称为解释器)
3.6 标识符,关键字,保留字
标识符:开发人员为变量,属性,函数,参数取的名字。
标识符不能是关键字或保留字。
关键字:JS本身已经使用了的字,不能再用他们充当变量名,方法名。
包括:break,case,catch,continue,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with等。
保留字:预留的关键字。
包括:boolean,byte,char,class,const,debugger,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,mative,package,private,protected,public,short,static,short,static,super,synchronized,throws,transient,volatile等。
四,运算符
运算符也被称为操作符,是用于实现赋值,比较和执行算术运算等功能的符号。
4.1算术运算符
+,-,*,/,%
浮点数 算数运算会有问题。
浮点数的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。
所以不要直接判断两个浮点数是否相等。
4.2表达式和返回值
表达式:由数字,运算符,变量等以能求的数值(返回值)的有意义排列方法所得的组合。
4.3递增和递减运算符
++,–
在JavaScript中,递增(++)和递减(–)既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量时,我们可以称为后置递增(递减)运算符。
注意:递增和递减运算符必需和变量配合使用。
var age = 10;
++age;
console.log(age);
//先加1,后返回值
var p = 10;
console.log(++p + 10);//21
前置自增和后置自增如果单独使用 效果是一样的。
前置自增:先加1,后返回值
后置自增:先返回原值,后加1
var e = 10;
var f = e++ + ++e;//e++ = 10 e = 11 2.e = 12 ++e=12
console.log(f);//22
4.4比较运算符概述
会返回一个布尔值,(true/false)座位比较运算的结果。
<,>,>=,<=,!=,==
(判等号(会转型)),
===,!==
(全都 要求值和数据类型都一致)
注意 undefined 和 null 之间的比较:
console.log(''== undefined)//false
console.log(''==null)//false
console.log(null==undefined)//true
console.log(0=='')//true
console.log(false=='')//true
console.log(false== 0)//true
4.5逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。开发中经常用于多个条件的判断。
逻辑运算符 | 说明 | 案例 |
---|---|---|
&& | “逻辑与”,简称"与",and | true&&false |
II | “逻辑或”,简称"或" or | trueIIfalse |
! | “逻辑非”,简称"非",not | !true |
4.6短路运算的原理
当有多个表达式(值)时,左边的表达式值可以确定结束时,就不再继续运算右边的表达式的值。
逻辑与:
语法:表达式1&&表达式2
如果第一个表达式的值为真,则返回表达式2
如果第一个表达式的值为假,则返回表达式1
console.log(123&&456);//456
console.log(0&&456);//0
console.log(0&&1+2&&456+5678);//0
console.log(''&&1+2&&456+5678);//''
参考上面和下面代码,如果有空的或者否定的为假,其余是真的。
否定:
0 ‘’ null undefined NaN
逻辑或:
语法:表达式1||表达式2
如果第一个表达式的值为真,则返回表达式1
如果第一个表达式的值为假,则返回表达式2
console.log(123||456);//123
console.log(0||456||456+123);//456
console.log(123||456||456+5678);//123
var num=0;
console.log(123||num++);//123
console.log(num);//0
4.7赋值运算符
=,
+=,-=,
*=,/=,%=,
4.8运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ! 最大,再++ 和- - |
3 | 算数运算符 | 先* / % 后+ - |
4 | 关系运算符 | > ,>= ,< ,<= |
5 | 相等运算符 | == ,!= ,=== ,!== |
6 | 逻辑运算符 | 先&& 后 II |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
一元运算符里面的逻辑非优先级更高
逻辑与比逻辑或优先级高
五,流程控制分支结构
流程控制主要有三种结构,分别是顺序
结构,分支
结构和循环
结构,则三种结构代表三种代码执行的顺序。
5.1顺序流程控制
按照代码的先后顺序,依次执行。
5.2分支流程控制if语句
由上到下执行代码的过程中,根据不同的条件,执行不同的路劲代码,从而得到不同的结果。
//if的语句结构 如果if
if (条件表达式){
//执行语句
}
if (条件表达式){
//[如果]条件成果执行的代码
}else{
//[否则]执行的代码
}
5.2 if else if 语句(多分支语句)
if (条件表达式1) {
//语句1
} else if (语句表达式2) {
//语句2
} else if (语句表达式3) {
//语句3
}else {
//最后的语句
}
5.3 三元表达式
? :
条件表达式?表达式1:表达式2
如果条件表达式结果为真 则 返回 表达式1的值,
如果条件表达式结果为假 则 返回 表达式2的值。
var num = 10;
var result = num > 5 ? '是的' : '不是的';
console.log(result);
5.4 分支流程控制switch语句中
switch语句也是多分支语句 也可以实现多选。
语法结构 switch 转换,开关,case效力子或者选项的意思。
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
}
我们num的值和case里面的值相匹配的时候是全等,必须是值和数据类型一致才可以
注意下面代码:
for(var j=1;j<=4;j++){
switch(j){
default:
console.log("d");
case 1:
console.log(j);
break;
case 2:
console.log(j);
break;
}
}
//1 2 d 3 d 4
5.5 switch语句和 if else if 区别
- 一般情况下,他们两个语句可以相互替换。
- switch…case语句通常处理case比较确定值的情况,二if…else…语句更加灵活,常用于范围判断(大于,等于某个范围)
- switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else语句有有几种条件,就得判断多少次。
- 当分支比较少时,if…else语句的执行效率比switch语句高。
- 当分支比较多时,switch语句的执行效率比较高,而且结构更清晰。
六,循环
循环的目的:可以重复执行某些代码。
- for循环
- while循环
- do…while循环
6.1 for循环
for(初始化变量;条件表达式;操作表达式){
//循环体
}
初始化变量 就是用var声明的一个普通变量,通常用于作为计数器使用
条件表达式 就是用来决定每一次循环是否继续执行,就是终止的条件
操作表达式 是每次循环最后执行的代码,经常用于我们计数器变量进行更新(递增或递减)
for(var i = 1; i <= 100; i++){
console.log('你好');
}
6.2 while 循环
while (条件表达式) {
//循环体代码
}
6.3 do while 循环
该循环会先执行依次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环。
该循环至少执行一次。
do{
//循环体
}
while (条件表达式)
6.4 continue break
continue 关键字用于立即跳出本次循环,继续下一次循环。
break 关键字用于立即跳出整个循环(循环结束)。
6.5 书写规范
1.标识符命名规范
- 变量,函数的命名必须要有意义。
- 变量的名称一般用名词。
- 函数的名词一般用动词。
2.操作符规范
操作符的作用两次各保留一个空格。
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += j + '*' + i + '=' + i * j + '\t'; // 注释
}
str += '\n';
}
console.log(str);
3.单行注释规范
单行注释前面主要有个空格
七,数组
数组是指一组数据的集合,其中的每个数据被称为元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存放在单个变量名下的优雅方式。
7.1 数组的两种创建方式
- 利用 new 创建数组
- 利用数组字面量( [] )创建数组
//1.利用new创建数组
var arr = new Array();
//2.利用数组字面量创建数组[]
var arr = [];
var arr1 = [1, 2, 'pink', true];
//3.数组里面的数据一定要用逗号分隔
//4.数组里面的数据 比如1,2 我们称为数组元素
7.2 获取数组元素
索引(下标):用来访问数组元素的序号(数组下表从0开始)。
获取数组元素 格式 : 数组名[索引号]
如果没有某个数组元素,输出结果是 undefined
7.3 遍历数组
var arr1 = [1, 2, 'pink', true];
for (var i = 0; i < 4; i++) {
console.log(arr1[i]);
}
7.4 数组的长度
使用“数组名.length”可以访问数组元素的数量(数组长度)
想要输出多个变量,用逗号分隔即可。
console.log(sum, average);
7.5 新增数组元素
(1) 新增数组元素 修改length长度
(2) 新增数组元素,修改索引号
(3) 不要直接给数组名赋值,否则里面的数组元素都没有了。
//1.新增数组元素 修改length长度
var arr = ['red', 'green', 'blue'];
console.log(arr.length);
arr.length = 5;
console.log(arr);
console.log(arr[3]); //undefined
console.log(arr[4]); //undefined
//2.新增数组元素,修改索引号
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'pink';
console.log(arr1);
arr1[4] = 'hotpink';
console.log(arr1);
arr1[0] = 'yellow'; //这是替换原来的数组元素
console.log(arr1);
arr1 = '123';
console.log(arr1); //不要直接给数组名赋值,否则里面的数组元素都没有了。
7.6 冒泡排序
// 1.一共需要的趟数,我们用外层for循环
// 长度是arr.length-1
// 2.每一趟交换次数,我们用里层for循环
// 长度就是数组的长度 减去 次数
// arr.lenth-i-1
// 3.交换2个变量
var arr = [5, 4, 3, 2, 1];
for (var i = 0; i <= arr.length - 1; i++) {
for (var j = 0; j <= arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
八,函数
函数就是封装量一段可被重复调用执行的代码块。通过这些代码快可以实现大量代码的重复使用。
8.1 函数的使用
函数的使用分为两步:声明函数和调用函数。
1.声明函数
function 函数名() {
//函数体
}
- function 是声明函数的关键字,必须小写
- 由于函数一般是为了实现某个功能才定义的,所以通常我们将函数名命名为动词,比如getSum。
function sayHi() {
console.log('hi~~');
}
function doSome(){
return 'doSome';
}
function saySome(){
console.log('saySome')
}
console.log(typeof doSome())//string
console.log(typeof saySome())//undefine
2.调用函数
函数名();
- 调用的时候千万不要忘记添加小括号
- 声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。
sayHi();
3.函数的封装
函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一共简单的函数接口
-
在声明函数的小括号里面是形参(形式上的参数)
-
在函数调用的小括号里面是实参(实际的参数)
-
形参是接受实参的 aru = ‘酸辣土豆丝’ 形参类似于一个变量
-
多个函数之间用逗号隔开
-
形参可以看作是不用声明的变量(可参考下方代码)
-
如果实参的个数多于形参的个数 会取到形参的个数
-
如果实参的个数小于形参的个数 多于的形参定义为undefined,最终的结果是NaN。
参数的作用:在函数内部某些值不能确定,我们可以通过函数在调用函数是传递不同的值进去。
function doSome(a,b){
console.log(a);//undefined
return a;
}
console.log(typeof doSome())//undefined
8.2 函数的返回值
我们函数知识实现某种功能,最总的结果需要返回给函数的调用者函数名() 通过return实现的。
只要函数遇到return 就后把面的结果 返回给函数的调用者。函数名()=return后面的结果。
function 函数名() {
return 需要返回的结果;
}
函数名();
- return 只能返回一个值。如果用逗号隔开多个值,以最后一个为准。
- return [] 返回一个数组
- 函数没有 return 返回 undefined
break,continue,return的区别
break:结束当前的循环体(如for,while)
continue:跳出本次循环,继续执行下次循环(如for,while)
return:不仅可以退出循环,还可以返回return语句中的值,同时还可以结束当前的函数体内的代码。
8.3 arguments的使用
当我们不确定有多少个参数传递的时候,可以用arguments来获取。在JavaScript中,arguments实际上是当前函数的一个内置对象。所以函数都内置了一共arguments对象,arguments对象中存储了传递的所有实参。
//arguments 的使用
function fn() {
console.log(arguments);
//里面存储了传递过来的实参
}
fn(1, 2, 3);
arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
- 具有length属性
- 按索引方式存储数据
- 不具有数组的push,pop等方法
function doSome(){
console.log(arguments.length)//3
console.log(arguments[1])//2
console.log(typeof arguments)//object
}
doSome(1,2,3)//undefined
8.4 函数的两种声明方式
// 1.利用函数关键字自定义函数(命名函数)
function fn() {}
fn();
// 2.函数表达式
// var 变量名 = function() {}
var fun = function () {
console.log('我是函数表达式');
};
fun();
(1)fun是变量名 不是函数名
(2)函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值 而 函数表达式里面存的是函数。
(3)函数表达式也可以进行传递参数
九,作用域
9.1 全局变量与局部变量
通常来说,一段程序代码中用到的名字并不总是有效和可用的。而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增加了程序的可靠性,减少了名字冲突。
- 全局作用域:整个script标签 或者是一个单独的js文件
- 局部作用域(函数作用域)在函数内部就是局部作用域 这个代码的名字只在函数内部起效果或作用。
变量的作用域:根据作用域的不同我们变量分为全局变量和局部变量
全局变量:在全局作用域下的变量 在全局下都可以使用
局部变量:在局部作用域下的变量 后者在函数内部的变量就是 局部变量
注意:如果在函数内部 没有声明直接赋值的变量也属于全局变量
注意:函数的形参也可以看做是局部变量
从执行效率来看全局变量和局部变量
(1)全局变量 只要浏览器关闭的时候才会消失,比较占内存资源。
(2)局部变量 当我们程序执行完毕就会销毁,比较节约内存资源
9.2 javaScript没有块级作用域
现阶段我们js没有块级作用域
我们js也是在es6的时候新增的块级作用域
什么是块级作用域:
if {} for {} 外界是不可以访问的
//java
//if(xx){
// int num = 10;
//}
9.3 作用域链
只要是代码,就至少有一个作用域。
写在函数内部的局部作用域。
如果函数中还有函数,那么在这个作用域就又可以诞生一个作用域。
根据在内部函数可以访问外部函数变量的这种机制,用链条查找决定哪些数据能被内部函数访问,就称作用域链
// 作用域链:内部函数访问外部函数的变量,采用的是链式查找的方式来决定取哪一个值,这种结果我们称为作用域链
var num = 10;
function fn() {//外部函数
var num = 20;
function fun() {//内部函数
console.log(num);
}
fun();
}
fun();//20
十,预解析
函数表达式调用 必须写在 函数表达式 的下面。
1.我们js引擎运行js分为两步:预解析 代码执行
(1)预解析js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面。
(2)代码执行 按照代码书写的顺序从上往下执行
2.预解析分为 变量预解析(变量提升)和函数预解析(函数提升)
(1)变量提升 就是把所有的变量提升到当前作用域最前面 不提升赋值操作
(2)函数提升 就是把所有的函数声明提升到当前作用域最前面 不调用函数
函数内部:
var a=b=c=9;
相当于 var a=9;b=9;c=9;b和c直接赋值 没有var 声明 ,当全局变量看
十一,JavaScript 对象(object)
在JavaScript中,对象是一组无序的相关书写和方法的集合,所有的事物都是对象,例如字符串,数值,数值,函数等。
构造函数泛指某一大类,比如苹果。
对象实例特指一个事物,比如这个苹果。
- 属性:事物的特征,在对象中用属性来表示(常用名词)
- 方法:事物的行为,在对象中用方法来表示(常用动词)
11.1 创建对象的三种方式
- 利用字面量创建对象
- 利用new Object创建对象
- 利用构造函数创建对象
1. 利用字面量创建对象
对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。
var obj = {
uname: '张三',
age: 18,
sex: '男',
sayHi: function () {
console.log('Hi~');
},
};
//(1)里面的属性或者方法我们采取键值对的形式 键 属性名:值 属性值
//(2)多个属性或者方法中间用逗号隔开
//(3)方法冒号后面跟的是一共匿名函数
//2.使用对象
//(1)调用对象的属性 我们采用 对象名.属性名
console.log(obj.uname);
//(2)调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
//(3)调用对象的方法 sayHi 对象名.方法名()
obj.sayHi();
1.不同点
变量 单独声明并赋值 使用的时候直接写变量名 单独存在
属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
函数是单独声明 并且调用的 函数名()单独存在的
方法 在对象里面 调用的时候 对象.方法
2.相同点 都是实现某种功能 做某件事
2. 利用new Object创建对象
跟我们前面学的 new Array() 原理一致
//利用new Object创建对象
var obj = new Object();
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function () {
console.log('Hi~');
};
//(1)我们是利用等号=赋值的方法 添加对象的属性和方法
//(2)每个属性和方法之间用 分好结束
console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();
3.利用构造函数创建对象
我们利用构造函数创建对象的过程我们也称为对象的实例化。
语法格式:
function 构造函数名(){
this.属性=值;
this.方法=function(){}
}
new 构造函数名();
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function (sang) {
console.log(sang);
};
}
var ldh = new Star('刘德华', 18, '男'); //返回一个对象
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
var zxy = new Star('张学友', 19, '男');
console.log(zxy.name);
console.log(zxy['sex']);
zxy.sing('李香兰');
1.构造函数名字首字母要大写
2.我们构造函数不需要return就可以返回结果
3.我们调用构造函数 必须使用new
4.我们只要new Star() 调用函数创建一个对象ldh{}
5.我们属性和方法前面必须添加this
11.2 new关键字执行过程
(1)new构造函数可以在内存中创建一个空的对象。
(2)this 就会指向刚才创建的空对象。
(3)执行构造函数里面的代码 给这个空对象添加属性和方法。
(4)返回这个对象。(所有构造函数里面不需要return)
11.3 遍历对象属性(for…in )
for…in 语句用于对数值或者对象的属性进行循环操作。
for (变量 in 对象) {
}
var obj = {
name: 'pink',
age: 18,
sex: '男',
fn: function () {},
};
for (var k in obj) {
console.log(k); //k变量 输出 得到的是属性名
console.log(obj[k]); //obj[k]得到的是 属性值
}
//我们使用for in 里面的变量 我们喜欢写 k 或者 key