JavaScript语法理论知识点

媒介

这个笔记不知道什么时候记下的横竖很有意义,很基础,很理论。

JavaScript进修笔记1

第一章 JavaScript概述

1.1 什么是JavaScript

JavaScript是一种轻量级的剧本言语,也是一种嵌入式(embedded)言语,是一种对象模子言语。

剧本言语又被称为扩建的言语,或许动态言语,是一种编程言语,用来掌握软件应用顺序,剧本平常以文本(如ASCII)保留,只在被挪用时举行诠释或编译,在依托特定的宿主环境供应API来完成操纵和结果。罕见的宿主环境有浏览器,服务器环境(操纵体系)。

嵌入式言语一句话就是不能自力干事,插进去到其他言语才能用的言语。

1.2 运用要领

1.2.1 内部援用(标签引入)

理论上<script><script>标签能够放HTML代码的恣意位置,现实开辟中关于函数的挪用,代码的实行平常放入body标签下面;函数的定义,类的定义以及外部文件的引入平常放入head标签中。

1.2.2 外部引入

在head标签中写引入文件的代码即可。

1.2.3 谁人用法最好?

  1. 第三方框架或许库文件的引入都运用外部引入
  2. 本身写的少许代码用标签引入
  3. 大批代码最好外部引入,关于前端代码的优化保护有益

第二章 JavaScript基础语法

2.1 变量

变量是用来临时存储数据内容的容器,在运用过程中能够随时转变存储的值。

是不是编程言语的前提是是不是有变量,有变量才算得上真正的编程言语。

2.1.1 变量及变量范例

变量定名划定规矩:运用var关键字声明变量;数字,字母,下划线,$,且不能数字开首;能够用种种定名法。var不写则是全局变量;

JavaScript中中文能够作为变量名是能够的,因为JavaScript言语本身就是运用ut8编码,平常不运用中文作为变量名,因为占的空间大,显得low

数据范例:数字,字符串,布尔,对象,null,undefined

在JavaScript中数据范例粉三大类:简朴范例(数字,字符串,布尔),复合范例(数组,对象,函数),特别范例(null,undefined),注重JavaScript中没有数组范例这一说法,用typeof推断就说其是object。

对照一下PHP的数据范例:1.整形2.字符串3.浮点型4.null5.布尔范例6.资源型7.数组范例8.对象

2.1.2 检测值范例

用typeof来推断数据范例,返回范例有:Number,String,boolean,undefined,function,object;

注重没有null这一范例,

2.1.3 null 和defined的区分

为何null的范例是object?

这是因为汗青缘由形成的。 1995年JavaScript言语的初版, 当时, 只设想了五种数据范例(对象、 整数、 浮点数、字符串和布尔值) , 完整没斟酌null, 只把它看成object的一种特别值, 为了兼容之前的代码, 厥后就没法修正了。

这并非说null就属于对象, 本质上就是一个特别值, 示意“没有”。

而在ES6草案时, 也曾将 null 的数据范例修正为了 null ,然则因为兼容性题目, 厥后又改回了object。

null和undefined的区分?

null与undefined都能够示意“没有”, 寄义异常类似;宽松比较时,二者值相称,都示意空,无,没有;

然则, JavaScript的值分红原始范例和合成范例两大类, Brendan Eich(JS作者)以为示意”无”的值最好不是对象;其次, JavaScript的最初版本没有包含毛病处理机制, 发作数据范例不婚配时, 往往是自动转换范例或许默默地失利。我以为, 假如null自动转为0, 很不轻易发明毛病。因而又设想了一个undefined。

详细的说有以下区分:

  1. 宽松比较时(双等号),二者值相称,都示意空,无,没有。严厉比较时(全等号)不相称;
var n=null;
var d=undefined;

var s=(n==d)
alert(s);
var f=(n===d);
alert(f);
  1. 猎取一个不存在的对象时,值是Null
var d=document.getElementById('div');
alert(typeof(d));//object
alert(d);//null
  1. null检测数据范例时是object,undefined就是范例本身undefined
  2. null示意一个“无”对象,数据范例转换为数值时是0;undefined 示意一个”无”的原始数据,数据范例转换为数值时是NaN
var n=Number(null);
var d=Number(undefined);
alert(n);//0
alert(d);//NaN

5.涌现undefined的几种状况:

A.变量声明但没有赋值时

 var i;
 alert(typeof(i));//undefined

B.函数须要传参但并没有传值时

function f(x){
    return x;//undefined
}
var p=f();
alert(p);

C.接见不存在的属性时,涌现undefined

var o={};
alert(typeof(o.p));

D.函数没有返回值时,函数的返回值是undefined

function h(){};
alert(h());//undefined

2.2 运算符

2.2.1 算数运算符

加,减,乘,除,取余,自增,自减,举个风趣点的案例:

var i=10;
var j=++i;
var h=i++;
var k=++i;
//没有赋值操纵前自增和后自增是没有区分的。
console.log(j);//11
console.log(k);//13
console.log(h);//11
console.log(i);//13

复合运算:

//复合赋值运算符 +=,-=,*=,/=
//三目运算符 前提?代码1:代码2; 前提?true:false;

2.2.2 比较运算符

//比较运算符 < > == === <= >= != !==

2.2.3 逻辑运算符

逻辑运算符 ! || && 三目运算符等

逻辑与剖析图:
《JavaScript语法理论知识点》

逻辑或剖析图
《JavaScript语法理论知识点》

2.3 流程掌握

  1. 递次构造:从上而下
  2. 分支构造(挑选构造):if else if else 和switch。

if else 和 switch的区分?

if构造不仅能够推断固定值, 还能够推断局限区间。

switch构造只能推断固定值状况。

3.轮回构造:while,for,do while等

4.continue和break的区分;

continue:跳出当前轮回,继承下次轮回。

break:跳出悉数轮回构造,也就相当于完毕轮回。

2.4 数组

2.4.1 数组的简朴运用

数组是一组有序数据的鸠合,在内存中表现为一段一连的内存地址。

数组的声明也很简朴:

var arr=[1,2,3,4];

var arr=new Array(1,2,3,4);

var arr=new Array(2); arr[0]=1;arr[1]=2;arr[2]=3;

多维数组:数组的元素也是一个数组,则父数组是多为数组。

var arr=[1,2,[3,4,5,[6,7]]];是个三维数组

猎取数组元素:经由过程下标猎取(数组[下标]),多为数组的话一切下标都写上,不然只的到地点行的悉数元素。

数组的遍历:

最经常使用的经由过程for轮回,依据轮回语法,在轮回之前先猎取数组长度

var arr=['Apple','Huawei','SumSung'];
var len=arr.length;
for(var i=0;i<len;i++){
    console.log(arr[i]);
}

for…in轮回遍历数组:for..in能够遍历对象,也能够遍历数组,毕竟数组也是个特别的对象。

var arr=['Apple','Huawei','SumSung'];
for(var i in arr){
    //每次遍历是,体系自动将元素的索引下标放入变量i中
    console.log(arr[i]);
}

2.4.2 数组对象的属性及要领(很主要,背下来)

length属性:返回数组的成员数目即数组的长度。

数组对象的经常使用要领:

  1. push要领:用于在数组的末尾增加一个或多个元素,并返回新元素的数组长度。注重push要领会转变原数组。
var a=[];
a.push(1);
alert(a);//1
a.push('a');
console.log(a);//Array[1,'a']
a.push(true,{});
console.log(a);//Array [ 1, "a", true, {} ]
  1. pop要领:用于删除数组的最好一个元素,并返回该元素。注重,pop要领会转变原数组
var a=['a','b','c'];
var b=a.pop();//c
console.log(a);//Array['a','b']
console.log(b);//c
  1. join要领:用于参数离开符,将一切数组成员一个字符串返回,假如不供应参数,默许用逗号离开。不转变原数组。
var a=[1,2,3,4];
var b=a.join('|');
console.log(b);//1|2|3|4
var c=a.join();
console.log(c);
  1. concat要领:用于多个数组的兼并,它将新数组的成员增加到原数组的尾部,然后返回一个新的数组,原数组稳定。
var a=['hello'];
var b=['world'];
var d=a.concat(b);
console.log(d);//Array [ "hello", "world" ]
console.log(d.concat(['!'],['A']));//Array [ "hello", "world", "!", "A" ]
  1. shift要领:用于删除数组的第一元素,并返回给该元素。注重转变原数组。
var a=[1,2,3];
var b=a.shift();
console.log(a);//Array [ 2, 3 ]
console.log(b);//1
  1. unshift要领:用于在数组的第一个位置增加一个元素,并返回新加元素后的数组长度。注重该要领会转变原数组。
var a=[1,2,3];
var b=a.unshift(5);
console.log(a);//Array [ 5, 1, 2, 3 ]
console.log(b);//4
  1. reverse要领:用于倒置数组中的元素,返回转变后的数组。注重,该要领将转变原数组。
var a=[1,2,3];
var b=a.reverse();
console.log(a);//Array [ 3,2,1 ]
console.log(b);//Array [ 3,2,1 ]
  1. slice要领:用于提取原数组中的一部分元素(相当于截取),返回一个新数组,原数组稳定。它的第一个参数为肇端位置(从0最先) , 第二个参数为停止位置(但该位置的元素本身不包含在内) 。假如省略第二个参数, 则一向返回到原数组的末了一个成员。
var a = ['a','b','c','d','e'];
console.log(a.slice(0)) // ["a", "b", "c", "d", "e"]
console.log(a.slice(1)) // ["b", "c", "d", "e"]
console.log(a.slice(1,3)); // ["b", "c"]
  1. splice要领:用于删除原数组中的一部分元素,并能够在被删除的位置增加新数组成员,返回值是被删除的元素。注重,该要领会转变原数组。splice的第一个参数是删除的肇端位置, 第二个参数是被删除的元素个数
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
var a1 =  a.splice(4, 2);
console.log(a1); //Array["e", "f"]
console.log(a); // Array["a", "b", "c", "d"]

var b = ['a', 'b', 'c', 'd', 'e', 'f'];
var a2 = b.splice(1, 2, 1, 2);
console.log(a2); //["b", "c"]
// console.log(b);//["a", 1, 2, "d", "e", "f"]
  1. forEach要领:用于遍历数组的一切成员,实行某种操纵;forEach要领的参数是一个函数,数组的一切成员会顺次实行该函数,它接收三个参数,分别是当前位置的值,当前位置的编号和悉数数组
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.forEach(function(v,k,h){
    console.log(v);
    console.log(k);
    console.log(h);
});
//第三个参数能够写能够不写,它带便遍历次数

第三章 函数

3.1 函数概述

函数就是制造东西的东西,比方计算器就是一个东西,而制造计算器的东西就是函数,也就是制造东西的东西。一次定义屡次运用。

用函数的优点:节约代码的数目,削减代码量,使代码能够重复运用,节约空间,节约时间,使顺序代码具有构造化,模块化,后期保护更友爱等等许多优点

3.2 函数基础运用

3.2.1 函数的声明及挪用

屡次声明同一个函数的话,末了一次声明的函数会掩盖前面的函数,前面的声明在任何时候都是无效的。

递归函数:函数内部挪用函数本身,称之为递归。只如果递归必需的有推断,不然它是个死轮回,用别的函数处理的题目最好别用递归处理,递归占内存大,不友爱。

function Recursion(x){
    if(x>1){
        return x+Recursion(x-1);
    }else{
        return 1;
    }
}
console.log(Recursion(100);

3.2.2 函数的参数及返回值

函数的参数有形参和实参:

形参就是函数声明时须要接收的参数,能够明白成临时的占位符,并没有现实意义

实参就是挪用函数是传递进函数的详细的现实数据,也就是给占替换位符的的值

函数体内部的return语句:示意将数据返回给挪用者。return背面纵然有语句,也不会实行,也就是return背面不实行.return语句无足轻重,没有则不忏悔任何值或许说返回undefined。

函数中的arguments对象:arguement是函数挪用时的实参列表;只是实参列表

function Argu(a){
    console.log(arguments);
}
Argu(1,2,3);

aruguments对象带有一个callee属性,返回他所对应的原函数。callee代表当前运转的函数

function Argu(a){
    console.log(arguments.callee);
}
Argu(1,2,3);

3.2.3 自挪用匿名函数

函数能够没著名字吗?固然能够:(function(){})();

为何要有自挪用匿名函数?

 因为著名函数有缺点,能够运转时会涌现定名争执,假如在编写顺序时,直接采纳自挪用匿名函数,则不会发生定名争执题目。市场上许多框架,如JQuery.js,ext.js等都是采纳匿名函数举行封装。

运用自挪用匿名函数连系aruguments对象完成递归:

var a = (function (n) {
            if (n > 1) {
                return n + arguments.callee(n - 1);
            } else {
                return 1;
            }
        })(100);
console.log(a);

3.3 函数作用域

3.3.1 定义

作用域指的是变量存在的局限。JavaScript中作用域有两种部分作用域和全局作用域。

部分作用域:变量只在函数的内部存在。在函数内运用var声明的变量是部分变量,是工资的声明。

全局作用域:变量在悉数顺序中存在,一切处所都能够读取。全局变量一个是函数外声明的变量;另有一个是函数内不运用var的变量(仅仅带便变量被赋值),也就是假如不是工资定义,体系会定义,体系定义的变量在悉数顺序中存在,不加var会污染全局。

function a(){
    b=1
}
a();
console.log(b);

部分变量会替换全局变量:函数内部声明的变量会在函数内部地区掩盖同名的全局变量。

 这说明javascript的函数在查找本身函数定义最先,从“内”向“外”查找。

var a=3;
function fun(){
    var a=2;
    console.log(a);
}
fun();//2
console.log(a);//3

假如函数内部不运用var关键字,那末函数内部的赋值将会影响全局变量。

现实上,JavaScript默许哟偶一个全局的对象窗口,全局作用域的变量现实上是被绑定到窗口对象上的一个属性,因而,直接接见全局对象a和接见window.a是完整一样的

var a=3;
function fun(){
    a=2;
    console.log(a);
}
fun();//2
console.log(a);//2

作用域诠释图:

《JavaScript语法理论知识点》

3.3.2 变量提拔

JavaScript的函数定义有个特性,他会先扫描悉数函数体呃逆的语句,把一切声明的变量提拔到函数的顶部,注重只是把声明提拔了,并不会提拔变量的赋值。

function fun(){
    console.log(a);//undefined
    var a=2;
    //JavaScript剖析引擎来讲相当于
    /**
    *var a;
    *var b=1+a;
    *alert(b);
    *a=2;
    **/
}
fun();

3.3.3 函数本身的作用域

函数本身也是一个值,也有本身的作用域;函数的作用域与变量一样,就是它声明时所作的作用域,与其运转时地点的作用域无关

函数实行时的作用域是定义时的作用域,而不是挪用时的作用域。

var a=3;
var x=function(){
    console.log(a);
}
function f(){
    var a=4;
    x();
}
f();//3

再看这个:

var x=function(){
    console.log(a);
}
function y(f){
    var a=2;
    f();
}
y(x);//ReferenceError: a is not defined
//函数实行时的作用域是定义时的作用域,而不是挪用是的,所以,这代码运转结果是如许。

继承看代码

function fun(){
    var a=2;
    function bar(){
        console.log(a);
    }
    return bar;
}
var a=4;
var f=fun();
f();//2

第四章 语法分析

4.1 JavaScript代码的编译以及实行

JavaScript代码运转,分为编译阶段和实行阶段:

编译阶段:声明变量,声明函数(display),语法搜检等操纵,一旦失足不会实行下一阶段,除了毛病提醒不输出别的内容

实行阶段:变量的赋值,函数的挪用,代码的实行等操纵,这一阶段失足的话失足之前的内容实行;

<script>
    console.log(1);
    console.log(s);
    console.log(3);
    //实行结果是:1  毛病提醒:找不到变量s
    //缘由代码编译阶段没有题目,实行阶段因为发作了毛病,毛病背面不会实行
</script>
<script>
    console.log(3);
    console.log(4)
    console.log(4);
    //实行结果是:毛病提醒:有语法毛病请搜检
    //缘由:代码编译阶段就失足不再实行实行阶段
</script>

4.2 script代码段

在html中<script></script>是一段自力的代码,这一段代码失足不会影响下一个<script></script>代码段的实行;不论前面的代码段毛病涌现在编译阶段照样实行阶段都不会影响下一段代码的实行。

为何呢?

虽然script代码段在一个页面,然则script代码并非一同实行,而是离开剖析与实行。

JavaScript剖析引擎从上而下读取第一个代码段–>放入内存–>编译阶段–>实行阶段–>下一个JavaScript代码段–>放入内存…等操纵;

总之一句话,JavaScript剖析引擎实行完一段代码再实行下一段代码,每一段代码都是自力的存在。因而,前一个代码不管发作什么毛病都不会影响下一个代码段的实行

看图:

《JavaScript语法理论知识点》

参考资料

W3school
菜鸟教程
JavaScript威望指南(第6版)

    原文作者:Aklman
    原文地址: https://segmentfault.com/a/1190000013844569
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞