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

Posted 2020-10-10

学习一门知识，先要学习其中存在的原理，就像一名医生，如果不知道人体内存在的规律，生病的原因，如何治病等，他就不是一名优秀的医生。同样学习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 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>

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

 

 

 

 

 

 

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

变量类型：undefined /null/boolean/string/number【值类型】object/function/array【引用类型】

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

<script>

/*

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

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

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

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

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

*/

var a = 10;

var b = a;

// console.log(a);//10

// console.log(b);//10

// var b = 20;

// console.log(a);//10

// console.log(b);//20

/* 两个房间，两把钥匙

变量表示在内存中开辟一块空间

var a;表示在内存中开了一个房间，并且钥匙是a

a=10 ;表示把10放到a房间中

var b;表示在内存中开了一个房间，并且钥匙是b

b=a ;表示把a房间中的10复制一份，放到b房间

var b=20;表示把b房间中的10删除掉，在放入20,不影响a房间中的10

*/

//引用类型比较的是地址

var obj1 = {};//表示在内存中开辟一个房间，房间地址叫obj1;

var obj2 = {};//表示在内存中开辟一个房间，房间地址叫obj2;

console.log(obj1 === obj2);//false,因为地址不同

console.log({} === {});//false,因为地址不同

//对象的引用

var obj1 = {

a: 10

}

var obj2 = obj1;

console.log("对象的引用");

console.log(obj1.a);//10

console.log(obj2.a);//10

obj2.b = 20;

console.log(obj1.b);//20

console.log(obj2.b);//20

/*

var obj1={a:10};表示在nei存中开辟一个房间obj,把10 放入到房间中

var obj2=obj1; 表示obj2可以进入obj房间

obj2.b=20; 表示在obj房间中加入20

*/

//函数的引用

var fn1 = function () {

this.a = 10;

return this.a;

}

var fn2 = fn1;

console.log("函数的引用");

console.log(fn1());//10

console.log(fn2());//10

fn2.a = 20;

console.log(fn1.a);//20

console.log(fn2.a);//20

//数组的引用

var arr1 = [10];

var arr2 = arr1;

console.log("数组的引用");

console.log(arr1);//10

console.log(arr2);//10

arr2.push(20);

console.log(arr1);//10,20

console.log(arr2);//10,20

/*一个房间，一把钥匙 此时引用相当于一个钥匙

var arr1;表示在内存中开了一个房间，并且钥匙是arr

arr1=[10];表示把10放到arr房间中

var arr2=arr1;表示arr1和arr2共用arr钥匙

arr2.push(20);表示用arr钥匙打开arr房间，放入20,结果如上

*/

</script>

<script>

 

//第一种办法:交换两个变量的值

function Temp1() {

this.a = null;

this.b = null;

}

Temp1.prototype.exchange = function (a, b) {//方法放再原型对象上，属于公用方法

var temp = null;

temp = a;//先把a的值放入temp中，清空a

this.a = b; //再把b的值放入a中,清空b

this.b = temp;//再把temp的值放入b中，清空a。

}

var a = 10;

var b = 20;

var obj1 = new Temp1();

obj1.exchange(a, b);//

console.log(a);//10 结果是没有交换，原因是函数执行完毕后被释放

console.log(b);//20 结果是没有交换，原因是函数执行完毕后被释放

a = obj1.a;

b = obj1.b;

console.log(a);//20

console.log(b);//10

//第二种办法:交换两个变量的值

function Temp2() {

this.a = null;

this.b = null;

}

Temp2.prototype.exchange = function (arr, i, j) {//方法放再原型对象上，属于公用方法

var temp = null;

temp = arr[i];

arr[i] = arr[j];

arr[j] = temp;

}

var arr = [10, 20, 30];

var obj2 = new Temp2();

obj2.exchange(arr, 1, 2);//arr是数组，对象，函数，数组属于引用类型，传参时，arr指向数组地址，

console.log(arr);

 

</script>

 

 

 

 

 

 

 

 

 

【运算符的关键词:算术比较逻辑】
1.算术运算符：* - + / % ++（余数） --
2.关系运算符： > < == != >= <=
3.逻辑运算符：! && ||
4.位运算符：<< >> ~ | ^ &
5.赋值运算符：=及扩展赋值运算符
6.条件运算符：?:

三元运算符

判断条件 true false;
1>0 ? alert("正确") :alert("错误");

用于字符串的 + 运算符
var a="姓名:";
var b="刘洋";
document.write(a+b)//姓名:刘洋
document.write(a+" "+b)//姓名: 刘洋【中间有空格】

如果把数字与字符串相加，结果将成为字符串。
x=5+5; //10
x="5"+"5"; //55
x=5+"5"; //55
x="5"+5; //55

a++【a在前边 先使用 后运算】
++a【a在后边 先运算，后使用】
a--【a在前边 先使用 后运算】
--a【a在后边 先运算，后使用】

给定 x=10 和 y=5，下面的表格解释了赋值运算符：
运算符号 例子 等价于 结果 x=10 y=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

比较符号 > < >= <= == =! ===【数值和类型相同】 !==【数值和类型有一个不同】
逻辑符号&&【且】 ||【或】 !【非】
赋值符号=

var a="10";
var b=10;
var c=9;
var d="9";

alert(a===b);true 【数值相同;类型不同，a是string,b是number】【字符和数字比较，会变成数字】
alert(a===c);false【数值相同，类型相同，都是number类型】

alert(a+b);1010【数字加字符串会变成字符串】
alert(b+c);19;

【控制语句的关键词:if else,switch       for,while    break  continue   reutrn】

(1). 条件判断语句
if语句、switch语句；

if(条件范围){

}

if(条件){
}else{
}

if(条件){
}else if{
}else{
}

switch(表达式){
case 常量1:
JS语句1;
break;
case 常量2:
JS语句2;
break;【遇到break，跳出switch循环语句】

default:
JS语句3;

}

(2) .循环执行语句
do while语句、while语句、for语句；

while(1<0){
document.write(‘是while{}循环‘);【while循环的特点是先判断后执行】
i++;
}

do{
document.write(‘是 do{} while()循环‘);【do-while循环的特点是先执行，再判断】
j++;
}while(1<0);

多重循环
for(var i=0;i<5;i++){【嵌套for循环中不能重复用i,嵌套之外可以用i】
for(var i=0;i<5;i++){【外层循环变量变化一次，内层循环变量要变化一遍】

}
}

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
for(x in person){}

var txt="";
var person={fname:"Bill",lname:"Gates",age:56};

for (x in person)
{
txt=txt + person[x];
}

 

 

（3）中断方法

for(var i=1;i<=5;i++){
if(i==3){
// break;//输出 1,2 跳出整个循环
continue; //输出 1,2,4,5 跳出本次循环，进入下次循环
}
document.write(i+‘<br/>‘);
}

break常用于switch结构和循环结构中
continue一般用于循环结构中
break语句终止某个循环，程序跳转到循环块外的下一条语句
continue跳出本次循环，进入下一次循环

 

System.out.print("请输入第" + (i+1) + "门课的成绩： ");
score = input.nextInt();【从控制台输入数字】

循环录入Java课的学生成绩，统计分数大于等于80分的学生比例
for (int i = 0; i < total; i++) {
System.out.print("请输入第" + (i + 1) + "位学生的成绩： ");
score = input.nextInt();
if (score < 80) {
continue;
}
num++;
}
System.out.println("80分以上的学生人数是： " + num);

 

1-100之间的和
var a=0;
for(var i=1;i<=100;i++){
a+=i;//a=a+i;
if(i==100)
document.write("1-100的和是:"+a+‘<br/>‘);
}

九九乘法表
for(var i=1;i<10;i++){
for(var j=1;j<=i;j++){
document.write(j+"*"+i+"="+i*j);
}
document.write("<br/>");
}

判断是不是素数【只能被1或本身整除的数是素数/质数】
var count=0;//计数
for(var i=1;i<=100;i++){

for(var j=2;j<i;j++){
var flag=true;//标记
if(i<2){
alert(i+"不是素数");
flag=flase;

}else{
if(i%j==0){
alert(i+"不是素数");
flag=flase;
}
}
if(flag){
alert(i+‘是素数‘);
count++;
}

}
}
alert(‘1-100之间的素数个数‘+count);

parseInt ("字符串")
将字符串转换为整型数字
如: parseInt ("86")将字符串“86”转换为整型值86
parseFloat("字符串")
将字符串转换为浮点型数字
如: parseFloat("34.45")将字符串“34.45”转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字