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。

JavaScript相关笔记

JavaScript相关笔记

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

一、js的数据类型？

二、常用的字符串方法：

三、常用的数组方法？

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

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

5、获取url后的参数

6、call和apply的区别

7、this及argument的相关问题

8、深拷贝

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

10、数组去重

11、javascript获取宽高

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

13、null和undefined的区别？

推荐阅读更多精彩内容