js学习之路----基础

基础

逻辑运算符

||   &&   !

1、|| 或，只要任意一个成立就返回true

2、 && 与，只要两个同时成立才返回true，任一一个不成立，就返回false

3、! 非 返回相反的值

赋值运算

n ++; 相当于  n = n+1

n += int；加等于

n -= int; 减等于

	n *= int;乘等于

	n /= int;除等于

循环

for循环

var s1 = [1,2,3,4,'da','df','2'];
for (var i=0;i<s1.length;i++){
	console.log(i);
	console.log(s1[i])
	};

while 循环

var a = 10;
while (a <= 13){console.log("小于13",a);a++;console.log("等于13")}

三元运算

var a = 10;
var b = 20;
var c = a > b ? a : b       #如果a>b,那么取a的值，反正取b的值

判断

a = 10;
if (a>5){
	console.log('yes');
} else {
	console.log('no');
}

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch 循环

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

正则

创建一个匹配5-11位的以字母开头的正则

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
var s1 = 'hello!';
var s2 = 'hao'
console.log(reg1.test(s1));  // 结果true
console.log(reg1.test(s2));  // 结果false

如果方便简洁的话，还可以这样写。

console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test('hello'));

console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test(''));   //结果为true
console.log(/^[0-9][a-zA-Z0-9_]{5,11}$/.test(''));   //结果为false,因为undefiend数字开头
console.log(/^[a-zA-Z][a-zA-Z0-9_]{5,11}$/.test('undefiend'));   //结果为true
因为不填写参数，默认会加一个undefiend,js会默认转换为undefiend字符串

替换

var s1 = 'Dasdadasd';
var s2 = s1.replace(/d/,'你好'); //g 全局替换，i忽略大小写
console.log(s2);
结果：Das你好adasd
var s1 = 'Dasdadasd';
var s2=  s1.replace(/d/gi,'你好'); //g 全局替换，i忽略大小写
console.log(s2);  
结果：你好as你好a你好as你好

正则坑：
1、表达式内一定不要有空格，否则无法识别。
2、如果正则匹配不传参数，会默认传一个undefiend，但是js会把undefiend当做一个字符串去匹配，因此匹配不到
3、正则表达式完成替换，不是替换原来的字符串，而是生成新的字符串，无法单纯替换原来的字符串~

函数

# 函数的定义
普通函数
function foo(a,b){
    console.log(a);
    console.log(b)
}
#函数的调用
foo(1,2)

# 定义带返回值的函数，加一个return即可
function foo(a,b){
    return a+b
}
# 调用有返回值的函数，只需要var 一个变量赋值接收这个返回值即可
var ret= foo(1,2)
console.log(ret)
结果为3

# 匿名函数，没有名称的函数
function (a,b){
    console.log(a);
    console.log(b);
    return a+b
}
这种情况下，匿名函数无法调用，如果需要调用，需要var一个变量进行赋值即可
var func = function (a,b) {
	console.log(a);
	console.log(b);
	return a+b
}
如果调用，直接运行func即可
func(a,b)

# 立即执行函数
(function (a,b){
	console.log(a);
	console.log(b);
	var abc = "我是函数内部的变量，其他地方无法调用，只在函数内部生效"
}) (1,2);
a和b为形参
1和2位实参

# 为什么需要立即执行函数
有些方法或者变量，只需要调用一次即可，因此写一个立即执行函数，
假如有一个变量定义在立即执行函数中，其他的地方无法访问这个变量的，
这样就做到了隔离其他的调用、上面的例子abc，就无法在其他地方调用。

假如函数需要传2个参数。但是只传递了一个参数，那么那个没有进行传递的参数默认会是 undefined 
假如函数需要传递2个参数，但是传递了5个参数，这个函数是不会报错的

举例：
var abc = func (a,b){
	console.log("a的值为：",a);
	console.log("b的值为：",b);
} 
abc(1)
打印的结果为
a的值为：1
b的值为：undefined

var abc = function(a,b,c) {
	console.log(arguments);
	console.log(arguments.length);
}
# 执行
abc(1,2,3)
console.log(arguments) 可以打印参数的结果

# 实现一个加法运算
function add(a,b,c) {
    console.log(arguments); //打印参数的键值
    console.log(arguments.length); //打印参数的长度
    var ret = 0;  //定义一个参数
    for (var i=0;i<arguments.length;i++){
        ret += arguments[i];   // 把ret+arguments[i]的结果继续赋值给ret，以此循环
    }
    return ret;  //返回结果
}

console.log(add(1,2,3,4));   //不管多少参数，都不会报错。

结果为 10

作用域

函数作用域就近原则

var city = "上海";

function func(){
	var citt = "北京";
	function inner(){
	var city = "深圳";
	console.log(city);
	}
	inner();
}

调用 
func()  // 结果打印是 深圳
因为就近原则

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印结果是？

打印结果应该为Beijing
因为上面那个函数靠近上面定义的beijing，因此打印结果为北京
//调用函数的时候，要往回找函数的定义阶段，
//如果函数定义阶段没有数据，就去找全局变量
//首先直接f()，没有打印，return调用bar函数，bar函数内没有定义city，因此需要去全局变量中找
//如果全局变量没有，则返回undefined

闭包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();
//执行结果为 ShangHai
// 调用 f(), 其实是执行的inner这个函数，因此f（）函数return返回的是inner这个函数
//inner函数没有定义city这个变量
//因此需要去inner外面去找，靠近inner，定义了一个city = "ShangHai" 因此输出结果为ShangHai
//如果函数内部没有定义city，那么就去全局变量中查找

js词法分析

js执行函数的过程会先进行分析

当函数调用的前一瞬间，会先形成一个激活对象：Avtive Object（AO），并会分析以下3个方面：

1:函数参数，如果有，则将此参数赋值给AO，且值为undefined。如果没有，则不做任何操作。
2:函数局部变量，如果AO上有同名的值，则不做任何操作。如果没有，则将此变量赋值给AO，并且值为undefined。
3:函数声明，如果AO上有，则会将AO上的对象覆盖。如果没有，则不做任何操作。

函数内部无论是使用参数还是使用局部变量都到AO上找。

var age = 18;
function foo(){
  console.log(age);   //函数经过分析，返现age开始没有定义，生成一个undefined，于是不糊赋值，哪怕全局变量有定义age
  var age = 22;       //第一步，因为没有函数调用age，会生成一个AO.age = undefined
  console.log(age);	  //这里就执行了age
}
foo();  // 问：执行foo()之后的结果是？
// 结果是先打印 undefined  后打印22
// 先词法分析，后赋值，先分析 var，之后再进行赋值操作，如果var age ，后面有 function age进行调用，那么会被覆盖
// 总结就是先分析函数内部变量定义过程，先看参数，后看局部变量，最后看有没有函数定义，后执行

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){     // 这里有函数调用age，不会生成undefined，
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 执行后的结果是？
//先分析 AO赋值  
//第一个console.log(age); 一开始没有定义，则为undefined，后面var age = 22;定义了，则为AO.age = undefined，之后 function age()覆盖了第二步的 AO.age = undefined，变成了 AO.age = function(){}
//于是第一个age变成了 AO.age = function(){}，第二个赋值了变成了22，第三个变成了 呵呵

第一个打印的，永远是分析阶段最后一个状态，或者为undefined 或者为函数，第二步才真正执行。

参考

词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=undefine;
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};

最终，AO上的属性只有一个age，并且值为一个函数声明

执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找

1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

李文周
https://www.cnblogs.com/liwenzhou/p/8004649.html

小技巧：
f12，在console界面输入
document.body.contentEditable=true

ctrl +shift +p 弹出浏览器的输入框

可以截取浏览器内的屏幕截图

即可修改页面信息