js基础知识例子

1.作用域问题：

1.arguments

var a = 0;
function b(c){
 console.log(a); 
 var a = 1;
 arguments[0] = 2;
 console.log(c); 
 console.log(a);
}
b(3);
console.log(a); 

第一个输出：undefined，因为a在函数内没有在声明之前就被调用，函数内部变量a的作用域就在函数内，外部变量和a无关。

第二个输出：2， arguments 是一个对应于传递给函数的参数的类数组对象。所以c = arguments[0]，c=2

第三个输出： 1，

第四个输出： 0， 函数内部的变量a，在函数结束后被销毁。

2.局部作用域

var a = 10;
function sum(){
   a=5;
}
console.log(a); //10   全局作用域
sum();
console.log(a); //5  局部作用域

 

2.类型转换问题：

var x= 10;
var y="10";
alert(x + y); //字符串拼接，1010
alert(x = y); //赋值，返回后面的，10
alert(x == y); //比较符，将'10'转换为10，所以返回true
alert(x === y); //严格比较符， 将'10'转换为10，两数字相等，true

1.map 和 parseInt

['1','2','3'].map(parseInt);
[1, NaN, NaN]

parseInt函数的参数有两个，第二个参数表示的是参数1的进制，map方法在调用callback函数时，会给回调函数传递第三个参数：当正在遍历的元素、元素索引，原数组本身。parseInt会忽略第三个参数（parseInt 只需要两个参数，第一个为要被解析的参数，第二个为要解析的数字的基数），即parseInt将元素的索引当做进制数来用，则会变成parseInt('1',0); parseInt('2', 1); parseInt('3', 2); 返回值为[1, NaN, NaN]

2.""的类型转换

"" ==false //true
"" ==0 //true
"" ==[]  //true
"" =={}  //false

== 先将""转换为Number类型，其中只有{}转换为Number类型为NaN，返回false

3.递归

直接或间接调用函数本身。

递归 1加到n的和

function sum(n){
    if(n==1){
        return 1;
    }
    return sum(n-1) + n;
}
console.log(sum(100));

-斐波那契数列(生兔子)

function rabbit(month){
    if(month < 4){
        return 1;
    }
    return rabbit(month - 3) + rabbit(month -1);
}
console.log(rabbit(4));

递归耗内存。

4.排序

冒泡排序

-冒泡排序 [8,9,3,2,12,30]

第一轮： 8,9,3,2,12,30

8,3,9,2,12,30

8,3,2,9,12,30

8,3,2,9,12,30

8,3,2,9,12,30

【注】每一轮取出最大的数，放在最后位置

第二轮：8，3，2，9，12

3，8，2，9，12

3，2，8，9，12

3，2，8，9，12

第三轮：3，2，8，9

2，3，8，9

2，3，8，9

第四轮：2，3，8

2，3，8

2，3，8

第五轮：2，3

var arr = [2,32,12,43,8,13];
for(var i=0;i<arr.length-1;i++){ //一共比较了几轮
  for(var j=1; j<arr.length-i; j++){ //每轮比较次数
    if(arr[j] > arr[j+1]){ //判断前后是否符合交换条件
      var holder = arr[j];
      arr[j]=arr[j+1];
      arr[j+1]=holder;
    }
  }
}

alert(arr); //2,8,12,13,32,43

选择排序

-选择排序：通过比较首先选出较小的数放在第一个位置上，然后在其余的数中选出次小数放在第二个位置上，依次类推，直到所有的数成为有序序列

【注】打擂台法 [9,8,7,6,5,4]

第一轮：4， [9,8,7,6,5,4]

第二轮： 5, [9,8,7,6,5]

第三轮 : 6, [9,8,7,6]

第四轮： 7, [9,8,7]

第五轮： 8, [9,8]

var arr = [2,32,12,43,8,13];
for(var i=0;i<arr.length-1;i++){
  for(var j=i+1; j<arr.length; j++){
    if(arr[i] > arr[j]){
      var holder = arr[i];
      arr[i]=arr[j];
      arr[j]=holder;
    }
  }
}
alert(arr);

5.例子获取值

在Web开发中，获取诸如?id=5&search=ok这种类型的URL键值对，通过location来写一个函数获取。

<script>
/* 
id=5&search=ok

获取url的search,通过传入对应key，返回key对应的value
 例子：传入id，返回5
 

*/
 function getValue(search,key){
  //<1>找出key第一次出现的位置
  var start = search.indexOf(key);
  if(start == -1){
   return ;
  }else{
   //找出键值对结束的位置
   var end = search.indexOf('&',start);
   if(end == -1){
	   //最后一个键值对
	   end = search.length;
   }
  }
  
  //<3>提取键值对
  var str = search.substring(start,end); //拼接字符串
  //<4>key=value  获取value
  var arr = str.split("="); //分隔符
  return arr[1];
 }
 
 var search = 'id=5&search=ok';
 alert(getValue(search,"id"));
 alert(getValue(search,"search"));
</script>

6.封装获取元素

dom元素获取

1. id document.getElementById()
2. tagName node.getElementsByTagName()
3. name document.getElementsByName()
4. className document.getElementsByClassName();

封装函数进行，拥有上述操作

function $(arg){
  //<1>对参数进行区分
  switch(arg[0]){
   case "#": //id
		return document.getElementById(arg.substring(1));
		break;
	case ".": //class
		return elementByClassName(document,arg.substring(1));
		break;
	default:
		//对前面5个字符进行判断 
		var str = arg.substring(0,5);
		if(str == "name="){ //name
			return document.getElementsByName(arg.substring(5));
		}else{//tagname
			return document.getElementsByTagName(arg);
		}
		break;
  }
 }
 
 function elementByClassName(parent, classStr){
  //<1>找到parent下所有的元素节点
  var nodes = parent.getElementsByTagName("*");
  var result=[];//用记录条件的元素节点
  for(var i=0;i<nodes.length;i++){
   //<2>如果符合条件,添加到数组中
   if(nodes[i].className == classStr){
	   result.push(nodes[i]);
   }
  }
  return result;
 }

[注] xx.style.width 只能找到行间的css样式。

获取当前有效样式： getComputedStyle(元素节点)[获取样式类型]; 火狐/谷歌/safari支持

IE 支持 ： 元素节点.currentStyle[获取样式类];

 浏览器兼容：样式
 function getStyle(elem , attr){
     return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];
 }

创建一个带文本的元素节点

function createElementWithTxt(tagName , txt){
    var node = document.createElement(tagName);
    var oTxt = document.createTextNode(txt);
    node.appendChild(oTxt);
    return node;
}

删除空白节点，回车，tab，空格都会导致空白节点。

【注】识别空白节点

/^\s+$/.test() 使用正则去验证，如果是空白节点，返回true；否则返回false

使用firstChild,lastChild必须从父节点上删除空白节点

【注】删除数组元素时必须倒序删除

function removeSpaceNode2(parent){
    var nodes = parent.nodeChilds; 
    for(var i = nodes.length-1; i>=0; i--){
        if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
            //删除空白节点
            parent.removeChild(nodes[i]);
        }
    }
}
function removeSpaceNode(nodes){
    var result = [];//使用一个数组将非空子节点装起来
    for(var i=nodes.length-1; i>=0; i--){
        if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i]).nodeValue){
            continue;
        }
        result.push(nodes[i]);
    }
    return result;
}

创建带文本的元素节点

function createElementWithTxt(tagName, txt){
    var node = document.createElement(tagName);
    var oTxt = document.createTextNode(txt);
    node.appendChild(oTxt);
    return node;
}

insertBefore()将新节点插入到旧节点之前

insertAfter() 将新节点插入旧节点之后

function insertAfter(newNode, oldNode){
    //判断oldNode是否是最后一个节点
    var parent = old.parentNode;
    if(oldNode == parent.lastChild){
        //最后一个节点，直接插入到子节点的末尾
        parent.appendChild(newNode);
    }else{
        //直接到oldNode的下一个节点之前
        parent.insertBefore(nodeNode ,  oldNode.nextSibling);
    }
} 

setInterval(函数，毫秒数)定时器

每隔所传参数的毫秒数，就调用一次所传参数的函数。

clearInterval() 取消定时器

innerHTML 标签间的所有内容 --如果innerHTML中包含标签则标签会被识别。

秒表

//html部分
<div id= "div1">
<div id="count">
    <span id= "id_H">00</span>:
    <span id= "id_M">00</span>:
    <span id= "id_S">00</span>
    </div>
    <input id="start" type="button" value="开始" class="btn">
    <input id="pause" type="button" value="暂停" class="btn">
    <input id="stop" type="button" value="归零" class="btn">
</div>
//js部分
var timer = null ;
var count = 0; //开始计数以后累加的总秒数
var isClick = true; //防止重复点击
$("start").onclick=function(){
	if(isClick){
		isClick = false; //防止重复点击
        timer = setInterval(function(){
            count++;
        //需要改变页面上时分秒的值
        $("id_S").innerHTML = showNum(count%60);
        $("id_M").innerHTML = showNum(parseInt(count / 60) % 60);
        $("id_H").innerHTML = showNum(parseInt(count/3600));
	},1);
	}
}

$("pause").onclick=function(){
	clearInterval(timer);
	isClick = true;
}

$("stop").onclick = function(){
	//<1>s数据清零<2>页面数据清零
	clearInterval(timer);
	count = 0;
	$("id_S").innerHTML = "00";
	$("id_M").innerHTML = "00";
	$("id_H").innerHTML = "00";
	isClick = true;
}

}
function $(id){
return document.getElementById(id);
}
//处理10以下的数字
function showNum(num){
if(num < 10){
	return "0"+num;
}else{
	return num;
}
}

 

 

break	continue
break语句用于跳出循环 break可以用于switch判断里面	continue用于跳出循环中的一个迭代，会继续执行该循环之后的代码（如果有的话） continue语句只能用在循环。