Web前端相关笔记（三）——JavaScript篇

JavaScript

一、js的数据类型？

• 5大基本数据类型 Number、String、Boolean,null、undefined
• 1种复杂数据类型（Object）。
  对象类型(Object)：object,array(数组),json,function

二、常用的字符串方法：

• charAt(下标)：获取字符串中的字符；
• indexOf(string)：检索字符在字符串中首次出现的位置，有在字符串中出现返回对应下标，没有返回-1；
• lastIndexOf():检索字符在字符串中最后一次出现的位置；
• substring(start，end): 截取字符串，从start位置开始到end结束，包括开始不包括结束；
• toUpperCase()：将字符串转换为大写；
• toLowerCase()：将字符串转换为小写；
• split（分割字符串）
• replace（替换）
• slice 提取字符串的片断，并在新的字符串中返回被提取的部分；
• substr 从起始索引号提取字符串中指定数目的字符；
• substring 提取字符串中两个指定的索引号之间的字符；

三、常用的数组方法？

• concat() 连接两个或更多的数组，并返回结果。
• join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
• pop() 删除并返回数组的最后一个元素
• push() 向数组的末尾添加一个或更多元素，并返回新的长度。
• reverse() 颠倒数组中元素的顺序。
• shift() 删除并返回数组的第一个元素
• slice() 从某个已有的数组返回选定的元素
• sort() 对数组的元素进行排序
• splice() 删除元素，并向数组添加新元素。
• toString() 把数组转换为字符串，并返回结果。
• toLocaleString() 把数组转换为本地数组，并返回结果。
• unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

四、js中如何实现数组的随机排序？

1.方法一：

var arr =[1,2,3,4];
var t;
for(var i = 0;i < arr.length; i++){
  var rand = parseInt(Math.random()*arr.length);
     t = arr[rand];
     arr[rand] =arr[i];
     arr[i] = t;
}
      console.log(arr);

2.方法二：

var arr =[1,2,3,4];
var brr = [];
var num  = arr.length;
for (var i = 0; i < num; i++){
  var temp = parseInt(Math.random()*(num-i));
  brr.push(arr[temp]);
  arr.splice(temp,1);
}
console.log(brr);

3.方法三：最优解

//思想：通过随机产生0到1的数，然后判断是否大于0.5从而影响排序，产生随机性的效果。
//sort（）方法中可以传参，但是这个参数必须是函数，规定了排序的规则！
function randomsort(a, b) {
   return Math.random()>.5 ? -1 : 1;
}
var arr = [1, 2, 3, 4, 5];
arr.sort(randomsort);

5、查找出现最多的字符和次数？

let str = "zhaochucichuzuiduodezifu";
  let o = {};
  遍历str，统计每个字符出现的次数
  for (let i = 0, length = str.length; i < length; i++) {
    当前第i个字符
    let char = str.charAt(i);
    char就是对象o的一个属性，o[char]是属性值，存储出现的次数
    if (o[char]) {    //如果char属性存在，属性值+1
      o[char]++;      //次数加1
    } else {          //char属性不存在为1（即字符第一次出现）
      o[char] = 1;    //若第一次出现，次数记为1
    }
  }
  //输出的是完整的对象，记录着每一个字符及其出现的次数
  //输出{a:1, c:3, d:2, e:1, f:1, h:3, i:3, o:2, u:5, z:3}
  console.log(o);
  //遍历对象，找到出现次数最多的字符和次数
  let max = 0;        //存储出现次数最多的次数
  let maxChar = null; //存储出现次数最多的字符
  for (let key in o) {
    if (max < o[key]) {
      max = o[key];   //max始终储存次数最大的那个
      maxChar = key;  //那么对应的字符就是当前的key
    }
  }
  console.log("最多的字符是" + maxChar);
  console.log("出现的次数是" + max);

5、获取url后的参数

  function find(url) {
    let result = {};
    let n=url.indexOf('?');
      let str = url.substr(n+1);（或者slice）
      let s = str.split("&");
      for(let i = 0; i < s.length; i ++) {
        result[s[i].split("=")[0]]=(s[i].split("=")[1]);
      }
    return console.log(result);
  }
  let url='';
 find(url);

6、call和apply的区别

call()
apply()

• 相同点：①这两个方法都是函数对象的方法需要通过函数对象来调用；②这两个方法可以直接调用函数，并且可以通过第一个实参来指定函数中this；
• 不同点：call是直接传递函数的实参而apply需要将实参封装到一个数组中传递

7、this及argument的相关问题

• arguments
  - arguments和this类似，都是函数中的隐含的参数
  - arguments是一个类数组元素，它用来封装函数执行过程中的实参
  所以即使不定义形参，也可以通过arguments来使用实参
  - arguments中有一个属性callee表示当前执行的函数对象

• this
  - this是函数的上下文对象，根据函数的调用方式不同会执向不同的对象
  1.以函数的形式调用时，this是window
  2.以方法的形式调用时，this是调用方法的对象
  3.以构造函数的形式调用时，this是新建的那个对象
  4.使用call和apply调用时，this是指定的那个对象
  5.在全局作用域中this代表window
  6．直接调用，函数内部的 this 指向全局对象，在浏览器中全局对象是 window ，在 NodeJs 中全局对象是 global 。
  7.bind() 的影响。 Function.prototype.bind() 的作用是将当前函数与指定的对象绑定，并返回一个新函数，这个新函数无论以什么样的方式调用，其 this 始终指向绑定的对象。

8、深拷贝

var clone = function (obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = function (obj) { 
    if(obj === null) return null 
    if(typeof obj !== 'object') return obj;
    if(obj.constructor===Date) return new Date(obj); 
    var newObj = new obj.constructor ();
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            var val = obj[key];
            newObj[key] = typeof val === 'object' ? arguments.callee(val) : val;
        }
    }  
    return newObj;  
};

9、数组排序（从小到大&从大到小）

• 数组从小到大排序：

//创建数组元素arr
            var arr=[7,13,34,3,200,100,4];
　　　　　　　//创建每次循环存储最大值得变量
            var max;
　　　　　　　//遍历数组，默认arr中的某一个元素为最大值，进行逐一比较
            for(var i=0; i<arr.length; i++){
　　　　　　　//外层循环一次，就拿arr[i] 和 内层循环arr.legend次的 arr[j] 做对比
                for(var j=i; j<arr.length; j++){
                    if(arr[i]<arr[j]){
                        //如果arr[j]大就把此时的值赋值给最大值变量max
　　　　　　　            max=arr[j];
                        arr[j]=arr[i];
                        arr[i]=max;
                    }
                }
            }
            document.write(arr.toString()+"<br>"); 

• 数组从大到小排序：

var Arr=[13,7,10,76,97,100,35];
            var min;
            for(var i=0; i<Arr.length; i++){
                for(var j=i; j<Arr.length;j++){
                    if(Arr[i]>Arr[j]){
                      min=Arr[j];
                      Arr[j]=Arr[i];
                      Arr[i]=min;
                    }
                }
            }
            document.write(Arr.toString()+"<br />");

10、数组去重

• Es6 实现一行代码去重 let set = new Set(array);

function uniq(array){
var temp = [];
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}
var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

11、javascript获取宽高

• 网页可见区域宽： document.body.clientWidth
• 网页可见区域高： document.body.clientHeight
• 网页可见区域宽： document.body.offsetWidth (包括边线的宽)
• 网页可见区域高： document.body.offsetHeight (包括边线的高)
• 网页正文全文宽： document.body.scrollWidth
• 网页正文全文高： document.body.scrollHeight
• 网页被卷去的高： document.body.scrollTop
• 网页被卷去的左： document.body.scrollLeft
• 网页正文部分上： window.screenTop
• 网页正文部分左： window.screenLeft
• 屏幕分辨率的高： window.screen.height
• 屏幕分辨率的宽： window.screen.width
• 屏幕可用工作区高度： window.screen.availHeight
• 屏幕可用工作区宽度： window.screen.availWidth

12、使用JS代码获取文件扩展名：

这里我们使用 split() 方法和使用一个 点 (.) 来分割， 以及使用 pop() 方法获得文件扩展名。

function fnGetExtension() {
  //通过id获得文件输入元件 
  var fileInput = document.getElementById('myFile');
  //获得文件名
  var fileName = fileInput.files[0].name;
  //获得文件扩展名 
  var fileExtension = fileName.split('.').pop();
  alert(fileExtension);
}

13、null和undefined的区别？

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，可以认为是对象类型,它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。