web前端让前端飞程序员

2017.12.11-学习笔记：js进阶知识点整理

2017-12-11  本文已影响365人  bixin

前言：古人云，温故而知新，把自己学习js的进阶笔记整理一下，有错误之处还望指出，谢谢。

→点我去看js基础知识点整理

→点我去看jQuery知识点整理

→点我去看dom知识点整理

JavaScript进阶

1.typeof：
2.逻辑运算符：
function animate(fn) {
  fn && fn(); //如果传参数函数就执行函数
}
animate();
3.比较运算符：
4.严格模式：
5.数据类型：
6.拷贝：
7.对象：无序的键值对的集合。
var obj = new Object();

var obj={}; // 字面量创建；

//工厂函数：每次调用，都会创建出来一个对象。
function createPhone(brand) {
  var obj = {
    brand: brand
  }
  return obj;
}
// 缺点：创建出来的对象全是object类型，无法区分。

/*构造函数：实例化对象
  1. 首字母大写
  2. 作用： 实例化对象(给this添加属性和方法)
  3. 配合new关键字使用，如不配合new，this指向window*/
function Phone(brand) {
  this.brand = brand;
}
// 缺点：内存浪费；改进：用原型'
var hw = new Phone("华为");
8.prototype:原型对象
9.原型链：
1.var p = new Person();
p-- > Person.prototype-- > Object.prototype-- > null

2.var arr = [];
arr-- > Array.prototype-- > Object.prototype-- > null

3.var date = new Date();
date-- > Date.prototype-- > Object.prototype-- > null

4.var obj = {}
obj-- > Object.prototype-- > null

5. Math对象
Math-- > Object.prototype-- > null
10.Object.prototype的成员：
11.沙箱：匿名函数自调用
12.继承：让一个对象可以使用另一个对象的属性和方法。
var jQuery = {
  extend: function(temp) {
    for (var k in temp) {
      if(temp.hasOwnProperty(k)){
        this[k] = temp[k];
      }
    }
  }
}
var class = {
  addClass:function(){}
}
jQuery.extend(class)

// 1.直接给原型增加属性和方法

// 2.原型替换(jQuery的原型替换)
jQuery.prototype = {
  constructor: jQuery,
  version: "1.0.0",
  extend: function(temp) {
    for (var k in temp) {
      if(temp.hasOwnProperty(k)){
        this[k] = temp[k];
      }
    }
  }
}


// 3.mixin+原型：不换原型，给原型混入
class = {
  addClass:function(){}
}
jQuery.prototype.extend = function(temp) {
  for (var k in temp) {
    if(temp.hasOwnProperty(k)){
      this[k] = temp[k];
    }
  }
}
jQuery.prototype.extend(class)

var lw = {
  money: 1000000,
  car: "劳斯莱斯"
}
var newObj = Object.create(lw);

function MyArray() {}
MyArray.prototype = new Array() / [空数组];
MyArray.prototype.push = function() {
  console.log("hehe");
}
var arr = new MyArray();
arr.push();
var arr2 = new Array();
console.log(arr2.push(1, 2, 3));
13.函数进阶
    var fn1 = new Function("a1", "a2", "alert(a1+a2)");
    fn1(1,2);//3
14.eval的作用：
button.onclick = function() {
  var content = txt.value;
  eval(content);
}
15.json:
16.this的指向:
17.伪数组：
18.完整版原型链:
完整版原型链
原型链神图.jpg
19.ECMAScript族谱
ECMAScript族谱 
/*jQuery的css方法
设置单个样式：.css(name, value)
设置多个样式：.css(obj)
获取样式.css(name)*/

function css() {
  if (arguments.length === 2) {
    console.log("要执行设置单个样式的操作");
  }
  if (arguments.length === 1) {
    var temp = arguments[0];
    if (typeof temp === "object") {
      console.log("要执行设置多个样式的操作");
    }
    if (typeof temp === "string") {
      console.log("要执行的是获取样式的操作");
    }
  }
}

function max() {
  return Math.max.apply(Math, arguments);
}
console.log(max(1, 2, 3, 4, 55, 6, 7, 8, 9));// 55
20.字面量和变量

字面量（直接量）：从字面的意思就能看出来类型和值 55 "abc" true [] {}，浏览器能够直接显示字面量。
变量：可以变化的量， 必须要先声明，才能使用， 如果变量没有声明，浏览器不认识，就会报错。

21.预解析：
22.作用域：
//作用域面试题1：
var num = 10;
fn1();

function fn1() {
  console.log(num);
  var num = 20;
  console.log(num);
}
console.log(num);

//作用域面试题2：
var num1 = 10;
var num2 = 20;

function fn(num1) {
  num1 = 100;
  num2 = 200;
  num3 = 300;
  console.log(num1); //100
  console.log(num2); //200
  console.log(num3); //300
  var num3;
}
fn();
console.log(num1); //10  100
console.log(num2); //200
console.log(num3); //报错

//作用域面试题3：
fn3();
console.log(c); //9 undefined
console.log(b); //9 
console.log(a); //报错

function fn3() {
  var a = b = c = 9;
  console.log(a); //9
  console.log(b); //9
  console.log(c); //9
}

//作用域面试题4：
var num = 1;

function fn() {
  var num = 100;
  num++;
  console.log(num);
}
fn(); //101
fn(); //101
console.log(num); //1

//作用域面试题5：
var color = "red";

function outer() {
  var anotherColor = "blue";

  function inner() {
    var tmpColor = color;
    color = anotherColor;
    anotherColor = tmpColor;
    console.log(anotherColor);
  }
  inner();
}
outer();
console.log(color); //red blue

//This面试题1：
var obj = {
  sayHi: function() {
    console.log(this);
  }
}
var fn = obj.sayHi;
fn(); //请问打印结果是什么？

//This面试题2：
var fn = function() {
  console.log(this);
}
var obj = {
  sayHi: fn
}

//This面试题3：
var age = 38;
var obj = {
  age: 18,
  getAge: function() {
    console.log(this.age); //???
    function foo() {
      console.log(this.age); //????
    }
    foo();
  }
}
obj.getAge();
23.递归函数：函数内部直接或者间接的调用自己
// 1.计算1-n之间所有数的和
function getSum(n) {
  if (n == 1) {
    return 1;
  }
  return getSum(n - 1) + n;
}
console.log(getSum(100));

// 2.计算斐波那契数列
var arr = [];
function fib(n) {
  if (n == 1 || n == 2) {
    return 1;
  }
  return fib(n - 1) + fib(n - 2);
}
console.log(fib(100));

var n1 = 1;
var n2 = 1;
var num = 0;
for (var i = 3; i <= 12; i++) {
  num = n1 + n2;
  n1 = n2;
  n2 = num;
}
console.log(num);
24.闭包：
//1.计数器：
function outer() {
  var count = 0;

  function add() {
    count++;
    console.log("当前count" + count);
  }
  return add;
}
var result = outer();
result();

//2.私有变量的读取和设置：
function outer() {
  var num = 10;

  function set_num(n) {
    num = n;
  }

  function get_num() {
    return num;
  }
  return {
    set_num: set_num,
    get_num: get_num
  }
}
var obj = outer();
obj.set_num(2000);
console.log(obj.get_num());

//3.实现缓存：
//缓存（cache）：数据的缓冲区，当要读取数据时，先从缓冲中获取数据，
                                       //如果找到了，直接获取，
                                       //如果找不到，重新去请求数据。
function outer() {
  //缓存
  var arr = [];
  var fbi = function(n) {
    if (n == 1 || n == 2) {
      return 1;
    }
    if (arr[n]) {
      return arr[n];
    } else {
      var temp = fbi(n - 1) + fbi(n - 2);
      arr[n] = temp; //存入缓存
      return temp;
    }
  }
  return fbi;
}
var fbi = outer();
console.log(fbi(40));

引用记数垃圾收集：如果没有引用指向某个对象（或者是函数作用域），那么这个对象或者函数作用域就会被垃圾回收机制回收。

var o = {
  name:"zs"
}
//对象被o变量引用  ，引用记数1
var obj = o;   //变量被o和obj引用，引用记数2

o = 1;  //o不在引用对象了， 引用记数1
obj = null; //obj不在引用对象了，引用记数0，可以被垃圾回收了。

闭包占用内存释放：

function outer(){
  var count = 0;

  function fn(){
    count++;
    console.log("执行次数"+count);
  }
  return fn;
}

var result = outer();
result();
result = null;//当函数fn没有被变量引用了，那么函数fn就会被回收，
              //函数fn一旦被回收，那么outer调用形成的作用域也就得到了释放。

打印当前按钮对应的下标：
第一种：使用let定义变量   es6  let特点：{}也能形成作用域
var btns = document.querySelectorAll("button");
for (let i = 0; i < btns.length; i++) {
  btns[i].onclick = function () {
    console.log(i);
  }
}

第二种： 使用属性存储下标
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].index = i;
  btns[i].onclick = function () {
    console.log(this.index);
  }
}

第三种： 使用forEach遍历
var btns = document.querySelectorAll("button");
btns.forEach(function (e, i) {
  //e:是每一个元素   i:每一个下标
  btns[i].onclick = function () {
    console.log(i);
  }
});

第四种：闭包解决
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
  (function (num) {
    btns[num].onclick = function () {
      console.log(num);
    }
  })(i);//调用btns.length-1次匿名函数，每次调用都产生相应的函数作用域，
        //在每个相应的函数作用域中给注册事件赋值一个函数
}

第五种：
var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++) {
  btns[i].onclick = (function (num) {
    function fn() {
      console.log(num);
    }
    return fn;
  })(i);//给btn注册btns.length-1次事件赋值，每次注册调用匿名函数产生相应的函数作用域
}


使用setTimeout  每秒钟打印一个数字  0， 1， 2，3，4，5，6，7，8，9
第一种：let
for(let i = 0; i < 10; i++){
  setTimeout(function () {
    console.log(i);
  }, i * 1000 )
}

第二种:闭包
  for(var i = 0; i < 10; i++){
    (function (num) {
      setTimeout(function () {
        console.log(num);
      }, num * 1000)
    })(i);
  }

第三种:闭包
for(var i = 0; i < 10; i++){
  var fn = (function (i) {
    return function(){
      console.log(i);
    }
  })(i);
  setTimeout(fn, i * 1000);
}
25.正则表达式：js中常用于表单验证。
题1：var str = "   123AD  asadf   asadfasf  adf  ";
①.把所有 ad 换成 xx
str = str.replace(/ad/g, "xx");

②.把ad /AD /aD /Ad  都换成xx
str = str.replace(/ad/gi, "xx");

③.把str中所有的空格去掉
str = str.replace(/\s/g, "");

题2：var str = "abc,efg,123,abc,123,a";
所有的逗号替换成 !
str = str.replace(/,/g, "!");

题3：var jsonStr = '[{"name":"张三",score:8},{"name":"张三",score:90},{"name":"张三",score:81}]';
把所有成绩都修改成100分
jsonStr = jsonStr.replace(/\d{1,2}/g, "100");

字符串传匹配，匹配所有分数
var reg = /\d{1,2}/g;
var arr = jsonStr.match(reg);
console.log(arr);

题4：var str = "大家好，我是xxx,我的手机号码是18511112222,我前女友的手机号码是13222221111,我的现女友的手机号码15555555555";

var reg = /1[345789]\d{9}/g;
var arr = str.match(reg);
console.log(arr);


Knowledge changes the mind

上一篇下一篇

猜你喜欢

热点阅读