JavaScript基础 ----- 一些概念杂谈（1）

1.document.write 、 innerHTML 、innerText 三者的区别： 

    document.write()：是重写整个document，写入的内容是字符串的html；

    innerHTML：是DOM页面元素的一个属性，代表该内容的html内容，可以精确到某一个具体的标签元素进行更改，不会导致页面全部重绘；

    innerText：是从起始位置到终止位置的文本内容，不包括html标签（只有IE浏览器和chrome浏览器支持）

2.$(document).ready() 和 window.onload 的区别：

    （1）window.onload 是在DOM文档树加载完和所有文件加载完之后执行一个函数；

  （2）$(document).ready() 是在DOM文档树加载完之后执行一个函数（并不代表全部文件加载完）；也就是$(document).ready 要比 window.onload 先执行；

3.前端开发有哪些优化问题：

    （1）减少HTTP请求次数；

    （2）对JavaScript、CSS代码进行压缩；

    （3）用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能；

    （4）用setTimeout来避免页面失去响应；

    （5）当需要设置的样式很多时，尽量设置类名，而不是直接操作style；

    （6）尽量少用全局变量；

    （7）避免在页面的主体中使用table标签布局，table要等其中的内容完全加载完之后才会显示出来，显示要比div+css布局慢；

    （8）图片预载，尽量加入alt属性；

4. $(this) 和 this 关键字在 jQuery 中有何不同：

    （1）$(this) 返回一个 jQuery 对象，可以对它调用多个 jQuery 方法；

    （2）this 代表的是当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素，不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)；

5.怎样创建、添加、删除、插入、替换和查找节点：

    （1）创建新节点：

creatDocumentFragment()        //创建一个DOM片段
creatElement()                 //创建一个具体的元素节点
creatTextNode()                //创建一个文本节点

    （2）添加、删除、插入、替换：

appendChild()                 //添加子节点
removeChild()                 //删除子节点（并没有实质上的删除）  注：remove()：彻底删除子节点
replaceChild()                //替换子节点
insertBefore(a,b)             //将a节点插入到b节点之前

    （3）查找：

getElementsByTagName()          //通过元素的标签名查找
getElementsByName()             //通过元素的Name属性查找
getElementById()                //通过元素的id名查找
getElementsClassName()          //通过元素的class名查找

6.用 js 实现随机选取 10-100 之间的 10 个数字，存入一个数组，并排序：

//思路：随机数10-100的写法：(（0-91） + 10 )
var arr = [];
function getRandom(istart,iend){
   var iChoice = iend - istrat + 1;        //获取到91
   var res = Math.floor(Math.random()*iChoice + istrat)
   return res;
}
for(var i = 0;i < 10;i ++){
   arr.push(getRandom(10,100))
}
//排序
arr.sort(function(a,b){
   return a > b;           //a>b：升序
})
console.log(arr)

    拓展：获取0-10的随机数，并且不重复，放到数组中：

var arr = [];
for(var i = 0;i < 10;i ++){      //代表数组的长度，或取0-10之间的数
   arr.push(i)
}
arr.sort(function(){
   return 0.5 - Math.random();
})
arr.length = 10;        //定义数组的长度（可选）
console.log(arr)        //输出0-10之间不重复的数字

7.如何消除一个数组中重复的元素：

   以下列代码为例，列出两种写法：

var arr = [1,2,2,3,5,4,8,8,4];

    第一种写法：

var data
function data(){
    var nData = [];       //定义一个临时数组
    for(var i = 0;i < arr.length;i ++){
        if(nData.indexOf(arr[i]) == -1){
            nData.push(arr[i])
        }
    }
    return nData;
}
var arr1 = data(arr);
console.log(arr1)        //输出[1, 2, 3, 5, 4, 8]

    第二种写法：

function delet(){
    var newArr = [];
    var obj = {};
    var index = 0;
    for(var i = 0;i < arr.length;i ++){
        if(obj[arr[i]] == undefined){
            obj[arr[i]] = 1;
            newArr[index++] = arr[i];
        }else if(obj[arr[i]] == 1){
             continue;
        }
    }
    return newArr;
}

//调用这个函数
var arr2 = delet(arr);
console.log(arr2)        //输出[1, 2, 3, 5, 4, 8]