GH1995 / articles

blog
https://gh1995.github.io
2 stars 0 forks source link

javascript[2] #47

Open GH1995 opened 4 years ago

GH1995 commented 4 years ago
/**
 * arguments, all parameters
 */
function abs2() {
  if (arguments.length === 0) {
    return 0;
  }
  var x = arguments[0];
  return x >= 0 ? x : -x;
}
abs2(); //=
abs2(10); //=
abs2(-9); //=

/**
 * rest, es6
 */
function foo(a, b, ...rest) {
  console.log(a);
  console.log(b);
  console.log(rest);
}

foo(1, 2, 3, 4, 5);

foo(1);

/**
 * variable
 */
// 变量提升
// 由于JavaScript的变量作用域实际上是函数内部,我们在for循环等语句块中是无法定义具有局部作用域的变量的

const PI = 3.14; //=
// @解构赋值
var [x, y, z] = ["hello", "JavaScript", "ES6"];
var person = {
  name: "小明",
  age: 20,
  gender: "male",
  passport: "G-12345678",
  school: "No.4 middle school"
};
var { name, age, passport } = person; //=

// @交换变量
var x = 1,
  y = 2;
[x, y] = [y, x];

function buildDate({ year, month, day, hour = 0, minute = 0, second = 0 }) {
  return new Date(
    year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
  );
}

buildDate({ year: 2018, month: 1, day: 1 }); //=

/**
 * method
 */
// @that
var xiaoming = {
  name: "xiaoming",
  birth: 1990,
  age: function() {
    var that = this;
    function getAgeFromBirth() {
      var y = new Date().getFullYear();
      return y - that.birth;
    }
    return getAgeFromBirth();
  }
};
xiaoming.age(); //=

// @apply
Math.max.apply(null, [3, 5, 4]); //=
Math.max.call(null, 3, 4, 5); //=

// @装饰器
var count = 0;
var oldParseInt = globalThis.parseInt;
globalThis.parseInt = function() {
  count += 1;
  return oldParseInt.apply(null, arguments);
};

/**
 * 高阶函数
 */
// @map, reduce, filter
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(Math.pow); //=
arr.reduce(function(x, y) {
  return x + y;
}); //=

arr.filter(function(x) {
  return x % 2 == 0;
}); //=

// @sort
arr.sort(function(x, y) {
  if (x < y) {
    return 1;
  } else if (x > y) {
    return -1;
  } else {
    return 0;
  }
}); //=

// @Array
var arr = ["Apple", "pear", "orange"];
arr.every(function(s) {
  return s.toLowerCase() == s;
}); //=

arr.find(function(s) {
  return s.toLowerCase() === s;
}); //=

arr.findIndex(function(s) {
  return s.toLowerCase() === s;
}); //=

/**
 * 闭包
 * 内部函数sum可以引用外部函数lazy_sum的参数和局部变量,当lazy_sum返回函数sum时,相关参数和变量都保存在返回的函数中,这种称为“闭包(Closure)”的程序结构拥有极大的威力。
 */
// @函数作为返回值
function lazy_sum(arr) {
  var sum = function() {
    return arr.reduce(function(x, y) {
      return x + y;
    });
  };
  return sum;
}

var f1 = lazy_sum([1, 2, 3, 4, 5]);
f1(); //=
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2;

// @闭包
// 如果一定要引用循环变量怎么办?方法是再创建一个函数,用该函数的参数绑定循环变量当前的值,无论该循环变量后续如何更改,已绑定到函数参数的值不变
function count2() {
  var arr = [];
  for (let i = 0; i <= 3; i++) {
    arr.push(
      (function(n) {
        return function() {
          n * n;
        };
      })(i)
    );
  }
  return arr;
}
var results = count2();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

function create_counter(initial) {
  var x = initial || 0;
  return {
    inc: function() {
      x += 1;
      return x;
    }
  };
}

var c1 = create_counter();
c1.inc(); //=
c1.inc(); //=
c1.inc(); //=

/**
 * 箭头函数
 */
x => ({ foo: x });

// 箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者

/**
 * generator
 */
function* bar(x) {
  yield x + 1;
}