Recent posts

5 posts tagged with "javascript"

View All Tags

javascript module

dfx

导出 导入#
// npm init，在生成的package.json中，添加"type": "module"
// 再 index.html <script type="module"></script>
// util.js export
/**
* 获取格式时间
* @param {Date} date
*/
export function formatDate(date) {
return `${date.getFullYear()}-${
date.getMonth() + 1
}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
//index.js import
import { formatDate } from "./utils.js";
console.log(formatDate(new Date()));

javascript function

dfx

  • js 函数

函数表达式#

function putSize() {
console.log("test");
return 1 + 2;
}
// 函数表达式
var sum = putSize();
console.log(sum);
// 匿名函数
var puls = function () {
console.log("test");
};

递归#

// 递归就是自己调用自己
function sum(n) {
if (n === 1) {
return 1;
}
return n + sum(n - 1);
}
// 斐波拉契数列 1 1 2 3 5 8 13 ...
function fib(n) {
if (n <= 1) {
return 1;
}
return fib(n) + fib(n - 1);
}

arguments#

function logs() {
for (let i = 0; i < arguments.length; i++) {
const element = arguments[i];
console.log(element);
}
}
logs(1, 2, 3, 4, 5);

箭头函数#

var test = (x) => x + x;
test(1);

闭包#

function person() {
let name = "fx";
function getName() {
return name;
}
return getName;
}
// person() ---> getName函数
console.log(person()());

柯里化#

function addNumber(a, b, c) {
return a + b + c;
}
//柯里化
function addNumber2(a) {
return function (b) {
return function (c) {
return a + b + c;
};
};
}
console.log(addNumber2(1)(2)(3)); //6
var fixedTwo = addNumber2(1)(2);
console.log(fixedTwo(6)); // 9
console.log(fixedTwo(10)); // 13

自执行函数#

// 自执行函数
let t = 10;
((t) => {
console.log(t);
})(t);
// 回调函数
function tt(cb) {
console.log("开始执行");
cb();
console.log("执行结束");
}
function collback() {
console.log("执行回调");
}
tt(collback);

javascript object

dfx

  • js 的对象

对象创建#

//定义对象 json对象
var obj = {
name: "dfx",
age: 18,
pay: function () {
console.log("挣钱");
},
};
console.log(obj);
// 定义2
var obj2 = new Object();
obj2.name = "dmy";
obj2.age = "16";
obj2.pay = function () {
console.log("花钱");
};
console.log(obj2);
// 省略key
var username = "dd";
var age = 20;
var obj3 = {
username,
age,
pay() {
console.log("加班");
},
};
console.log(obj3.age);
// 构造函数创建对象
function Person(name, age) {
this.name = name;
this.age = age;
}
var p1 = new Person("dfx", 29);
var p2 = new Person("dmy", 20);
console.log(p1, p2);
//class 关键字
class Obj {
constructor(age, name) {
this.age = age;
this.name = name;
}
}
遍历对象#
var obj = {
name: "dfx",
age: 18,
pay: function () {
console.log("挣钱");
},
};
for (key in obj) {
console.log(key, "--", obj[key]);
}
删除对象属性#
delete obj3.pay;
//无法访问到对象属性 TypeError: obj3.pay is not a function
console.log(obj3.pay());
}
对象 setter getter#
var p = {
_age: 18,
get age() {
return this._age;
},
set age(val) {
this._age = val;
},
};
p.age; // 18
p.age = 20; // 20
p.age; // 20
console.log(p.age);
对象原型#
function Employee(name, position) {
this.name = name;
this.position = position;
this.sigln = function () {
console.log("赚钱");
};
}
var emp1 = new Employee("dmy", "🚩");
var emp2 = new Employee("dfx", "lg");
console.log(emp1);
console.log(emp2);
Employee.prototype.age = 20;
console.log(emp1);
console.log(emp2.age);
console.log(emp1.__proto__ === Employee.prototype); //true
console.log(Object.getPrototypeOf(emp1)); //简单获取原型对象
修改对象原型#
function Manager() {}
Manager.prototype.dp = "技术部";
// emp1 为上面的对象
Object.setPrototypeOf(emp1, Manager.prototype);
console.log(emp1.dp);
对象 spread 和 rest 解构#
var post = {
id: 1,
title: "dmy dyy",
centent: "love",
};
var postClone = { ...post };
console.log(post === postClone);
//rest 解构
var { id, title, ...rest } = post;
console.log(id);
console.log(rest);
引用传递和值传递#
function byRefArr(arr) {
arr[0] = 5;
}
var arr2 = [1, 2, 3];
byRefArr(arr2);
console.log(arr2);
function byRefObj(obj) {
obj.id = 2;
}
var obj2 = { id: 10 };
byRefObj(obj2);
console.log(obj2);
function byRefVal(num) {
num = 2;
console.log(num); // 2
}
var num2 = 10;
byRefVal(num2);
console.log(num2); //10
call#
var obj = {
id: 1,
name: "dmy",
};
function printInfo() {
console.log("love " + this.name);
}
printInfo(); // this 指向window
printInfo.call(obj); // call this 指向 obj
setTimeout() setInterval()#
// setTimeout()
console.log("先执行");
setTimeout(() => {
console.log("延迟执行");
}, 1000);
console.log("后执行");
//setInterval()
let intval = setInterval(() => {
let date = new Date();
console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}, 1000);
setTimeout(() => {
clearInterval(intval);
}, 5000);