JS学习之路系列总结三才阵（此文犹如武林之中的易筋经，是你驰骋IT界的武功心法，学会JS五大阵法就学会了JS，博主建议先学三才阵）

nqxcwl

于 2019-11-08 19:05:51 发布

阅读量302

点赞数

分类专栏：前端文章标签： js

原文链接：https://www.mk2048.com/blog/blog.php?id=h1ac22cjbkaa&title=JS%E5%AD%A6%E4%B9%A0%E4%B9%8B%E8%B7%AF%E7%B3%BB%E5%88%97%E6%80%BB%E7%BB%93%E4%B8%89%E6%89%8D%E9%98%B5%EF%BC%88%E6%AD%A4%E6%96%87%E7%8A%B9%E5%A6%82%E6%AD%A6%E6%9E%97%E4%B9%8B%E4%B8%AD%E7%9A%84%E6%9

版权

前端专栏收录该内容

241 篇文章 0 订阅

订阅专栏

学习一门知识，先要学习其中存在的原理，就像一名医生，如果不知道人体内存在的规律，生病的原因，如何治病等，他就不是一名优秀的医生。同样学习JavaScript（以下简称JS），如果你不知道计算机的基本原理和功能，你就不明白为什么要学习了解熟悉掌握JS。一种东西存在了就有存在的必要，既然存在了，我们就需要知道它的存在有什么作用。我学习东西，喜欢追根溯源，打破砂锅问到底，知其一必知其二，知其然必知其所以然。JS存在于哪里，它存在于软件之中，网页之中，无处不在，也就是存在于计算机网络之中。

此时我就需要了解计算机了。就像医生了解解剖人体一样，我们也需要对计算机进行全面了解和解剖。何为计算机，就是数学计算用的机器，最初是为了数学研究中的计算设置的，因为数学的有些领域需要计算庞大的数字，个人无法对其计算，如果一个人对其计算，可能需要上百年上千年，计算机的出现就解决了这个问题。可以用一天甚至几小时就计算完毕了。计算机在漫长的时间中慢慢演变，就像人类的出现一样，从类猿人到直立人等等一直到现代的人类。一直演化成现在的五大功能，三大核心部件。

五大功能：输入（Input），输出（Outinput），存储器（Memory），运算器（operation），控制（control）

【为了便于记忆，减少占用大脑内存，我命名为JS心法为：道阵法，两仪阵法，三才阵法，四象阵法，五行阵法，只需记住阵法的关键字，即可搜索大脑中相应的内容，学会JS五大阵法即可学会JS】

三大核心部件:输入输出设备（I/O），内部存储器，中央处理器（是运算器和高速缓存存储器（Cache）和控制器的组合。简称CPU：Central中央的Processing处理Ｕnit单元）

好了前边的都是点心，现在开始我们的主题大餐了，说那么多都是为了一下做铺垫的。就像练武之人，必先学好扎马步一样，我们也必须在思想上，扎好马步。

准备好你的大脑，开始我们的JS畅想之旅【本文只是先将概念，具体解释不在本文。下边每个词语都是JS人体系统中的细胞（犹如一滴水）。由它们组成JS整体功能（好似一片海）】

三才阵法: 变量运算符控制语句【为了便于记忆，减少占用大脑内存，我命名为JS心法为：道阵法，两仪阵法，三才阵法，四象阵法，五行阵法，只需记住阵法的关键字，即可搜索大脑中相应的内容，学会JS五大阵法即可学会JS】

变量:在内存中存储数据的空间，相当于一个房子，里边可以存放各种东西

运算符:用于算术逻辑运算的，

控制语句:就是数学中的判断语句

变量相当于存储器是存储数据信息的

运算符相当于运算器是用于做判断条件的

控制语句相当于控制器是控制执行顺序的

程序:是为了解决特定问题或执行特定操作而编写的一系列有序代码的集合。因此执行顺序（由运算符和控制语句）特别重要，可以锻炼一个人的逻辑思维能力

变量的关键词: 1：全局变量，局部变量，隐变量，作用域，生命周期 2：变量提升 3：变量类型值类型，引用类型
变量：
变量命名规则
1:首字母必须以下划线_、字母、$开头
2:中间可以是字母/数字/下划线_
【 1：全局变量，局部变量，隐变量，作用域，生命周期】

声明变量的关键字变量名赋值值
var width = 100;在内存中建个房子，把东西100放里边【var 是variable的简写】

全局变量和局部变量

全局变量:1,用var 声明的变量 2,在函数之外【global全局 variable】

局部变量:1,用var 声明的变量 2,在函数之内【local 局部variable】

隐变量: 1,没有用var声明的变量【hidden隐式 variable】【不推荐使用,严格模式不能使用】

变量生命周期

全局变量:在页面打开时生成，在页面关闭时销毁(释放)

局部变量:在函数执行时生成，在函数执行完毕时销毁(释放)

function alert(a) {

console.log("全局变量和函数可以覆盖window对象上的属性和方法，比如此时，我修改了window对象上的alert()" a);

}

alert(10);

//变量名，函数名，事件名重复时后边一个会覆盖一个

var a = 10;

var a = 20;

console.log(a);//20

function show() {

var b = 10;

console.log(b);

}

function show() {

var b = 20;

console.log(b);

}

show();//20

window.onclick = function () {

console.log(10);

}

window.onclick = function () {

console.log(20);//20

}

var global = 10;//全局变量

hidde1 = 30;//隐变量

function localVAr() {

var global = 20;//局部变量

hidden2 = 40;//隐变量

console.log("局部变量覆盖全局变量");

console.log(global);//

}

console.log(global);

console.log(window.global "全局变量是 window 对象: 所有数据变量都属于 window 对象。");//

console.log(hidde1);

localVAr();//没有调用locaVar函数时变量 hidden2 is not defined

console.log(hidden2);

//console.log(local);//local是布局变量 local is not defined

// 正常模式:1,声明2,赋值3,使用

var a; //1:先用var声明

a = 10; //2:再赋值值2=10;

console.log(a) //3:最后使用;

//函数声明(statement声明)

function statement1() {

console.log("我是函数声明");

}

statement1();//根据代码运行执行顺序:函数调用在函数声明之后

//【 2：变量提升】

//变量提升(hoisting):函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部

//在JS中，函数及变量的声明都将提升到函数的最顶部

a = 20; //1:先赋值

console.log(a); //2:再使用

var a; //3:最后声明

//函数声声明的提升

statement2();//根据代码运行执行顺序:函数调用在函数声明之后，

//根据变量提升的语法:函数调用可以在函数之前

function statement2() {

console.log("我是函数声明的提升");

}

//只有声明的变量会提升，初始化(initial)变量不会提升

//初始化变量:声明赋值一起操作

console.log(initial1);//undefined

var initial1 = 10;//初始化变量:声明赋值一起操作

//initial2(); //initial2 is not a function;系统错误initial2不是一个函数

var initial2 = function () {

console.log("我是函数表达式,此时initial2是初始化变量");

}

</script>

//头部声明你的变量

//如果程序员不能很好的理解变量提升，他们写的程序就会容易出现些问题

//为了避免这些问题，通常我们在每个变量作用域开始之前申明这些变量

//这是正常JS解析步骤，便于理解

//严格模式(strict mode):是指指定代码在严格条件下执行

//注意:在严格模式下不允许使用未声明的变量【即是隐变量】

//严格模式通常在脚本或函数的头部添加"use strict";

// "use strict";

// strict1=100;

// console.log("严格模式下不能使用隐变量");

// console.log(strict1);//strict is not defined

// "use strict";//放在脚本头部

var a = 1;

console.log(a);

//"use strict";//不能放在此处，不起作用

function show() {

"use strict";//在函数内部声明是局部作用域 (只在函数内使用严格模式):

var localVar = 300;

console.log("严格模式下不能使用隐变量");

console.log(localVar);//局部变量可以用

strict2 = 200;

console.log(strict2);//严格模式下隐变量不能用

}

show();

console.log(strict2);//严格模式下隐变量不能用

//为什么使用严格模式

//消除JS语法的一些不合理，不严谨之处，减少一些怪异行为

//1:消除代码运行的一些不安全之处，保证代码运行的安全

//2:提高编译器效率，增加运行速度

//3:为未来新版本的JS做好铺垫

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员。

</script>

【2：变量类型值类型，引用类型】

1:简单数据类型(也称基本数据类型也叫值类型)undefined,null,booelan,string,number通过typeof验证

2:引用类型也就是对象类型,它的值是指向内存空间的引用，

就是地址,所指向的内存保存着变量所表示的一个值和一组值

创建好对象可以调用这个对象下的方法

Object,Function,Array,Date,RegExp,包装类型。

typeof运算符返回值如下：
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：javascript中的对象、数组和null

变量类型：

undefined /null/

boolean/string/number【值类型】

object/function/array【引用类型】

boolean/string/number/object/function/array既是变量又是对象

是变量：因为object有对象名，function有函数名，array有数组名，

它们创建时会在内存中开辟一块空间（为了便于理解，可看成房间），对象名，函数名，数组名就相当于房间的钥匙

是对象：因为值类型和引用类型有各自的属性和方法

boolean：true/false

string：lenth/concat()/strim()/split()/slice(start,end)/substring(start,end)/substr(start,length)

/indexOf()/lastIndexOf()/charAt()/charCodeAt()/toLowewCase()/toUpperCase()

number：isNaN（is not a number）不是一个数字返回true 是数字返回false

object：

function：

array：length/concat()/join()/toString()/slice(start,end)/splice(start,lenth,add)/sort()/reverse()/push()/pop()/shift()/unshift()

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

var arr2 = ["4", "5", "6"];

var str = "4,5,6";

var str2 = "1,2,3";

var kong="1 2 ";

console.log(kong.length);//4

console.log(kong.trim().length);//3

console.log(arr);//["1", "2", "3"]

console.log(typeof arr);//object

console.log(arr.toString());//1,2,3

console.log(typeof arr.toString());//string

console.log(arr.join(""));//123 变成string类型

console.log(arr.join(" "));//1 2 3 变成字符串string类型

console.log(typeof arr.join(""));//string

console.log(str.split(","));//[4,5,6] 变成数组array类型

console.log(typeof str.split(","));//object

console.log(arr.concat(arr2));//["1","2","3","4","5","6"]

console.log(str.concat(str2));//4,5,,61,2,3

console.log(arr.concat("9"));//["1","2","3","9"]

console.log(str.concat("9"));//4,5,,69s

var a = [null, undefined, 0, "", false];

var b = ["null", "undefined", 1, " ", true];

for (var i = 0; i < a.length; i ) {

console.log(typeof a[i]);//五个true

}