JavaScript知识点一(简介、基本数据类型、流程控制、数组与函数)

目录

前言

浏览器执行JS简介  

JS的组成        

ECMAScript  

JS的书写位置  

变量  

数据类型  

运算符  

流程控制  

数组

函数

作用域


前言

        计算机语言分为:机器语言,汇编语言,高级语言三类;  

        计算机最终所执行的都是机器语言,它是由'0'和'1'组成的二进制数;  

        汇编语言和机器语言本质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆;

        高级语言主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包含了很多编程语言,常用的有C语言/C++/C#/Java/python/JavaScript;        

        高级语言所编写的程序不能直接被计算机识别,必须经过转换才能被执行,中间需要有一个翻译器。这个翻译器在JavaScript就可以是浏览器的解析器,如谷歌的V8      

        编程语言有很强的逻辑和行为能力,发出的指令是主动的;

        标记语言不用于向计算机发出指令,常用于格式化和链接,标记语言的存在是用来被读取的,它是被动的;

浏览器执行JS简介  

        浏览器分为两部分:渲染引擎和JS引擎;  

        渲染引擎:用来解析HTML与CSS,俗称内核,如谷歌浏览器的blink,老版本的webkit;

        JS引擎:也称为JS解释器,用来读取网页中的JavaScript代码,对其处理后运行,如谷歌浏览器的V8;  

        浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。

JS的组成        

        JavaScript定性:是一种运行在客户端的脚本语言(脚本语言是指不需要编译,运行过程中由js解释器--js引擎逐行来进行解释并执行);可以用作表单动态校验(密码强度检测、网页特效、服务器开发、桌面程序、APP、控制硬件-物联网、游戏开发)    

         由三部分组成:ECMAScript(JavaScript语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)  

ECMAScript  

        它是由ECMA国际进行标准化的一门编程语言,规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。  

        下面的是ECMAScript语法规范

JS的书写位置  

        分为行内、内嵌和外部三种方式;  

        行内式:可将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性),如onclick ;

查 询 

        内嵌式:将多行JS代码写到

        外部式:将大段js代码独立于HTML页面之外,引用外部JS文件的script标签中间不可以写代码~  

变量  

变量是程序在内存中申请的一块用来存放数据的空间。  

  • 变量的使用:   变量在使用时分为两步:1.声明变量 2.赋值 ;
var name;  // 声明变量        
name = '张三'   // 赋值 

 也可以直接一步对变量初始化:

 var name = '张三' 

  可同时声明多个变量,变量名之间用英文逗号隔开:

var name='张三', sex= '男', age = 12; 

 声明变量的特殊情况:

情况             说明            结果
var age; console.log(age) 只声明,不赋值 undefined
console.log(age) 不声明,不赋值,直接使用

报错        

age=10;console.log(age); 不声明,只赋值 10

 ps:第三种方式,会变成全局变量,也有问题,不提倡使用

  •  变量命名规范

         由字母(A-Za-z)、数字(0-9)、下划线、美元符号($)组成  ;

        JavaScript是一种弱类型或者说动态语言,这意味着,利用var声明的变量类型,在程序运行过程中,数据类型会自动确定;   同时这也意味着,相同的变量可用作不同的类型:        

var x=6; // x为数字      
var x="张三";  // x为字符串

数据类型  

        数据类型分为两类:简单数据类型(Number、String、Boolean、Underined、Null)、复杂数据类型(Object) ;

  • 数字型(Number)  

        数字的最大值Number.MAX_VALUE;  

        数字的最小值Number.MIN_VALUE;  

        无穷大:Infinity  

        无穷小:-Infinity  

        非数字:NaN(Not a number)  

        用来判断一个变量是否为非数字: isNaN(X) ,输出为布尔值,  如:

var age = 17;
var isOrNot = isNaN(age);
console.log(isOrNot);  // true
  •  字符串型(String)  

        字符串型是引号中的任意文本,这个引号可以是双引号,也可以是单引号,推荐使用单引号;  

        js可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)  

        字符串转义符:    转义符都是\开头的,常用的转义符及其说明如下:    

转义符             解释说明
\n               换行符,n是newline意思
\\               斜杠\
\'               单引号 '
\"               双引号 "
\t               tab缩进
\b               空格,b是blank的意思

        字符串长度:    通过字符串的length属性可获取整个字符串的长度 string.length  

        字符串拼接:    一个字符串和任意类型拼接,都会变成一个新的字符串,字符串拼接用+    

  • 布尔型( Boolean)  

         布尔类型有两个值,true和false,布尔值和数字型相加时,true的值为1,false的值为0;    

  • Underined  

         一个声明后没有被赋值的变量,就会是undefined,undefined类型的变量与数字或布尔值拼接后,都会变成NaN; 

  • Null  

        一个声明变量给null值,里面存的值为空,Null类型的变量与数字、布尔值结合,当做0处理;  注意:Null的类型是object  

  • 数据类型转换  

        通常有三种方式的转换:转换为字符串类型;转换为数字型;转换为布尔型;  

转换为字符串:        

方式                                                                        说明  案例
toString()                转成字符串  var  num=1;
 alert(num.toString());
String() 强制转换             转成字符串 var num=1;
alert(String(num)) ;
加号拼接字符串                 和字符串拼接的结果都是字符串 要转换的 + ""(这种用的频率最高)

转换为数字型:        

方式                         说明                                               案例
parseInt(String)           将string类型转成整数数值型 parseInt("78")  
parseFloat(string)        将string类型转成浮点数值型 parseFloat("78.99")
Number()强制转换函数                               将string类型转成数值型 Number('12')
- * / 隐式转换               利用算术运算隐式转换成数值型 '12' - 0

注意:

parseInt取整,和四舍五入没关系,如:

parseInt('4.98'); // 结果为4 

parseInt和parseFloat还可以从数字开头的字符中,取出数字,如:

parseInt(128rem); // 结果为128

但是不是数字开头的字符串则不行,如:

parseInt('this128rem'); // 结果为NaN

 转换为布尔型

方式                说明   案例
Boolean()         将其它类型转成布尔值    Boolean("true")

      注意:代表空、否定的值会被转换为false,如'0'、''、NaN、null、undefined;其余值会被转换为true;

运算符  

        有如下几种方式:算数运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符;

        运算符优先级:  

优先级                       运算符   顺序
1               小括号              ()
2              一元运算符             ++ -- !
3               算数运算符             先* / % 后+ -
4               关系运算符           < >= < <=
5               相等运算符            == != === !==
6               逻辑运算符             先&& 后||
7               赋值运算符             =
8               逗号运算符          

流程控制  

流程结构分为顺序结构、 分支结构与循环结构  

顺序结构:无特定语法,按代码先后顺序执行;  

分支结构:根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果,典型的有if语句和switch语句;

        通常在针对变量设置一系列的特定值的选项时,选择switch,switch中表达式的值与下面case中的value匹配,语法如下:

switch(表达式) {      
    case value1:       
        // 执行语句1       
        break;     
    case value2:      
        // 执行语句2       
        break;          
    case value3:       
        // 执行语句3       
        break;      
    default;       
        // 执行语句(不等于任何一个value时执行的代码)     
} 

注意:

如果case中执行语句后面,没有加break,则就会执行下一个case中的语句,直到遇到break执行才会停下来;

三元表达式

表达式 (expr1) ? (expr2) : (expr3)

指表达式expr1为真的时候,执行表达式expr2,反之则执行表达式expr3

  • 循环结构:

        在JS中,主要有三种类型的循环语句:for 循环、while循环、do...while循环;

  • continue与break

continue关键字用于立即跳出本次循环,继续下一次循环;

break关键字用于跳出当前循环,该循环结束,不再继续循环;

数组

  • 数组的创建方式:  

JS中创建数组有两种方式:    

利用new创建数组  

 var 数组名 = new Array();  

  示例:

var array = new Array(); // 创建一个新的空数组  

注意:Array(),A要大写;    

利用数组字面量创建数组    

var 数组名 = [];  // 使用数组字面量方式创建空的数组      
var 数组名 = ['小白','小黑','大黄']; // 使用数组字面量方式创建带初始值的数组       

声明数组并赋值称为数组的初始化,这种字面量方式使用最多。      

数组元素的类型

数组中可存放任意类型的数据,如字符串,数字,布尔值等,如:  

var arryexam = ['123', 0, 12.4, true]; 

 获取数组元素

数组的索引(下标)是指用来访问数组元素的序号(数组小标从0开始)。    

数组可通过索引来访问、设置、修改对应的数组元素,可通过数组名[索引]的形式来获取数组中的元素。 如:    

var arryexam = ['123', 0, 12.4, true];     
console.log(arryexam[0]);      // 结果是'123' 

数组的长度    

可通过数组名.length获取数组长度  

遍历数组    

遍历即是把数组中的每个元素从头到尾都访问一次   

数组中新增元素    

  • 可通过修改length长度以及索引号增加数组元素,长度扩容后,新增的字段为undefined。length属性是可读写的。    如: 
var arr = ['123', true, 123];     
arr.length = 7;     
console.log(arr[6]);     // 输出结果是undefined 

   因为索引号是3/4/5/6的空间没有给值,即声明变量未给值,所以默认值是undefined。    

  • 通过修改数组索引新增数组元素     可通过修改数组索引的方式追加数组元素    如:
var arr = ['123', true, 123];     
arr[3] = '234';     
console.log(arr) // ['123', true, 123, '234']   

 注意:不能直接给数组名赋值,否则会覆盖掉以前的数据;      

冒泡排序    

冒泡排序是一种简单的排序算法,它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行,直到没有再需要交换,也就是说该数列已经排序完成,这个算法的名称由来是由于越小的元素会经由交换慢慢“浮到”数列的顶端。    

两个for循环即可解决排序问题:外层for循环解决需要的趟数(趟数是数组长度-1),内层for循环用来解决每一趟交换的次数(次数是从0开始的,所以最终为arr.length-i-1)    

Q:冒泡排序每趟都能保证最后一个是大的么?如第一趟排完是最后一个最大,第二趟排完是倒数第二个最大  

函数

函数的使用   

函数在使用时分为两步:声明函数和调用函数  

  • 声明函数  

声明函数有两种方式,一种方式是利用函数关键字自定义函数,也称为命名函数,另外一种方式是通过函数表达式,亦即匿名函数;

调用函数关键字自定义函数(命名函数)

function 函数名() {
    // 函数体
}

示例:

function getSum() {
    var sum = 0;
    for (i = 0;i < 10; i++) {
    sum += i;
    }
}

函数表达式定义函数(匿名函数)

var 变量名 = function(aru) {
    //函数体
}
变量名("奥利给~")
var 变量名 = function(aru) {
    console.log('好好学习~')
    console.log('天天向上~')
    console.log(aru)
}
fun("奥利给~")

函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数~

  • 调用函数
function getSum() {
    var sum = 0;
    for (i = 0;i < 10; i++) {
    sum += i;
    }
}
getSum();

通过函数直接使用函数名()即可;   // 通过调用函数名来执行函数体代码  

注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码;  

  • 函数的封装    

是指一个或多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口;  

  • 函数的形参和实参

在声明函数时,可在函数名称后面的小括号中添加一些参数,这些参数被称为形参,在调用该函数时,传递的参数叫实参;  

如果实参的个数和形参的个数一致,则正常输出结果;  

如果实参的个数多于形参的个数,会只取到形参的个数;  

如果实参的个数小于形参的个数,则多余的形参定义为undefined,最终的结果就是NaN(undefined做任何操作,结果都为NaN)  

形参可看做是不用声明的变量 所以未传实参的变量没有接收值,结果就是undefined  

  • 函数的返回值

若希望函数将值返回给调用者,此时需要通过return语句就可实现;

return后面的代码不会被执行;并且return只能返回一个值;如果是return多个值,则最终返回的结果依然是最后一个值,如:    

return num1, num2;   // 结果返回的依然是num2 

若想返回多个输出结果,可以将多个结果组成数组再return;如:    

return [num1 + num2, num1 - num2, num1* num2];

函数的返回值有三种类型:    

break: 结束当前的循环体(如for/while)    

continue: 跳出本次循环,继续执行下次循环(如for、while)    

return: 不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码 

  • arguments的使用

当不确定有多少个参数传递的时候,可用arguments来获取。

在JS中,arguments实际上是当前函数的一个内置对象,所有函数都内置了一个 arguments对象,arguments对象中存储了传递的所有参数。(使用arguments就可不用传参数了,适用于不知道形参有几个的情况~)  

arguments其实是一个伪数组,并不是真正意义上的数组,但是具有数组的length属性;按照索引的方式进行存储;没有真正数组的一些方法:pop() push()等  

  • 函数可以调用另外一个函数

作用域

作用域即代码名字(变量)在某个范围内起作用和效果,为提高程序的可靠性,更重要的是减少命名冲突;  es6之前,作用域分为全局作用域和局部作用域,相应的有全局变量和局部变量;es6新增了块级作用域  

全局变量

 在全局作用域下的变量,在全局下都可以使用;

 注意:若在函数内部,没有声明直接赋值的变量也属于全局变量!!  

局部变量

  在函数内部的变量即为局部变量;  

  函数的形参实际上就是局部变量;  

从执行效率来看局部和全局变量

   全局变量只有浏览器关闭的时候才会销毁,比较占内存资源;  

   局部变量在所在代码块被执行时被初始化,当代码块运行结束后,就会被销毁,即更节省内存空间;  

你可能感兴趣的:(前端知识,javascript,前端)