第二周知识点总结

103 阅读2分钟

第一天

1.作用域: 全局作用域:作用在全局,页面每个位置都能使用

局部作用域:只能在函数调用时内部可用

特别:局部可以使用全局的,全局不能使用局部的

全局污染: 在函数内部对未声明的变量直接赋值,会造成全局污染,降低页面性能。

函数基础: 创建/声明/定义 两种方式: 1、直接量方式

function 函数名(形参){
       操作;
}

2、构造函数方式

var 函数名=function(形参){
       操作;
}

数组基础: 1、创建 两种方式: 1.直接量方式

var arr=[];
  

2、构造函数方式

var arr=new Array();

函数的唯一属性: length

获取数据:

arr[i];

设置:

arr[i]="";

遍历:

for(i=0;i<arr.length;i++){
      console.log(arr[i]);
}

固定套路: 1.插入元素

arr[arr.length]="";

2.获取倒数第n个元素

arr[arr.length-n];

3.缩容

arr.length-=n;

length=最大下标+1;

最大下标=length-1

函数的三大不限制:

1.不限制长度

2.不限制数据类型

3.不限制下标越界(缺点):下标越界,会得到undefined,如果遍历会得到稀疏数组。

第二天:

DOM(Document Object Model) 文档对象模型

把页面看作一个倒挂的树状模型,以document为树根

查找元素

直接查找:

1.通过ID查找

elem=document.getElementById("id");

特殊:其实标签名不需要查找,可以直接使用 2.通过标签名查找

elem=document.getElementsByTagName("标签名");

特殊:1.得到的是一个集合,JS只能操作元素,不能直接操作集合,要么通过下标拿到某个元素,要么遍历得到所有元素,没找到会返回一个空集合。

2.不一定非要从document开始找,也可以从某个找到的父元素开始找。

3.通过class名查找

elem=document.getElementsByClassName("class名");

通过关系查找元素:

父亲:elem.parentNode;
儿子:elem.children;
第一个儿子:elem.firstElementChild;
最后一个儿子:elem.lastElementChild;
前一个兄弟:elem.previousElementSibling;
后一个兄弟:elem.nextElementSibling;

内容:

elem.innerHTML;  //可以识别标签
elem.innerText;  //智能识别纯文本
设置:
elem.innerHTML=""
elem.innerText=""

单标签:
获取:input.value
设置:input.value="属性值"

属性

elem.getAttribute("");
elem.setAttribute("")
简化版:elem.属性名
      elem.属性名="属性值"
      特殊:简化版只能操作标准属性,不能操作自定义属性

样式:

获取:elem.style.css属性名
设置:elem.style.css属性名="属性值"
background-color => backgroundColor
border-radius    => borderRadius

绑定事件:

elem.on事件名=function(){
     this这个->单个:当前元素
             ->多个:当前触发元素
}

第三天:

按值传递

var a=x,
    b=a;

如果是原始类型 a变了,b不会变。

如果是引用类型,a变了,b会变,只是保存了一个地址值,浅拷贝。

hash数组

可以自定义下标的数组

创建:

var arr=[];

arr["自定义下标"]="新值";

访问:
arr["自定义下标"];

遍历:
for(var i in arr){
    arr[i];
}

数组的API 1.数组转字符串

arr.join("自定义连接符");


该API可以做数据渲染
var arr=[];
var str="<option>"+arr.join("</option><option>")+"/option";
sel.innerHTML=str;

2.拼接


var newArr=arr.concat("");


3.截取

var subArr=arr.slice(starti,endi+1)  //含头不含尾,可以写负数参数。

4.删插替

删除:
var subArr=arr.splice(starti,n); //直接修改原数组,也有返回值,返回的是被删除的子数组。

插入:
var subArr=arr.splice(starti,0,新值1...);

替换:
var subArr=arr.splice(starti,0,替换); 

//删除和插入的个数不必相同

5.翻转

arr.reverse();

二级联动

1.select专属事件 elem.onchange=function(){};

2.select专属属性 selectedIndex();

3.必须使用二维数组

第四天:

数组的API:

1.数组排序

冒泡排序:

        arr = [16, 36, 35, 48, 464, 36, 45, 2, 46, 3];
        for (var j = 1; j < arr.length; j++) {
            for (var i = 0, tmp = 0; i < arr.length - j; i++) {
                if (arr[i] > arr[i + 1]) {
                    tmp = arr[i];
                    arr[i] = arr[i + 1];
                    arr[i + 1] = tmp;
                }
            }
        }
        console.log(arr);

数组排序:


arr.sort()

只能比较10以内的数组,因为是按照每个下标值的ascii码排序

arr.sort(function(a,b){return a-b升序});

//a后一个
//b前一个

return b-a降序

栈和队列:

栈:

开头进:arr.unshift(新值,...);
开头出:var first=arr.shift();

尾部进:arr.push(新值,...);
尾部出:var last=arr.pop();

队列:
从头进:arr.unshift(新值,...);
尾部出:var last=arr.pop();

尾部进:arr.push(新值,...);
尾部出:var last=arr.pop();

ES5新增:

判断:

1.判断every类似&&
var bool=arr.every(function(val,i,arr){
return判断条件;
})

2.判断some类似||
var bool=arr.some(function(val,i,arr){
return判断条件;
})

遍历:

forEach


arr.forEach(function(val,i,arr){
操作;
})

map


var newArr=arr.map(function(val,i,arr){})

过滤

var subArr=arr.filter(function(val,i,arr){})

汇总

var subArr=arr.reduce(function(prev,val,i,arr){})