Recent posts

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);

javascript basis

dfx

  • js 的基础语法、变量、常量、数据类型

变量引用问题#

  • 多个变量引用指向同一个对象，通过一个变量修改对象内部数据，其他引用都被改变
var obj1 = { name: "tom" };
var obj2 = obj1;
console.log(obj1 == obj2) / 同一个对象;
obj2.age = 12;
//可以获取到对象的值 修改了obj1的值
console.log(obj1.age); //12

try catch 异常处理#

try {
let tmp = undefined;
console.log(tmp.a); // 没有 tmp.a 抛出异常
} catch (error) {
console.error(error);
}
console.log("--test--");

数组#

//创建方式
var arr1 = [1, 2, 3];
console.log(arr1);
var arr2 = new Array(1, 2, 3);
console.log(arr2);
var arr3 = Array(1, 2, 3);
console.log(arr3);
var arr4 = Array.of(1, 2, 3);
console.log(arr4);
//单个注意点
var arrSingle = Array(3);
console.log(arrSingle); // 长度为3的空数组
var arrSingle2 = new Array(3);
console.log(arrSingle2); // 长度为3的空数组
var arrSingle3 = Array.of(3);
console.log(arrSingle3); //一个值 [3]
var arrSingle4 = [3];
console.log(arrSingle4); //一个值 [3]
//访问数据
console.log(arr1.length); //数组长度
//访问数组值
console.log(arr1[0]);
console.log(arr1[3]); //超过数组的长度 返回 undefined
遍历数组#
//遍历数组
var ay = [1, 2, 3, 4, 5];
for (let ar of ay) {
console.log(ar);
}
for (let ar in ay) {
console.log(ar);
}
// e 遍历的值 i 下标索引 arr:数组本身 =ay
ay.forEach((e, i, arr) => {
console.log(e, i, arr);
});
添加删除元素#
// 添加元素
arr1[3] = 4;
console.log(arr1);
//删除元素
var arr = [1, 2, 3];
arr.length = 2; //缩小长度
console.log(arr);
arr.length = 0; //清空
console.log(arr);
var ay = [1, 2, 3, 4, 5];
// ay.splice(1, 1) // 把数组的下标为1的值删除掉
// console.log(ay)
// ay.splice(1, 1, 'a') //把数组的下标为1的值替换为 'a'
ay.splice(1, 0, "bb"); //把数组的下标为1的值添加为 'bb'
console.log(ay);
栈 队列#
//栈 数组原生支持
var stack = [1, 2, 3, 4];
stack.push(5, 6, 7);
console.log(stack);
var p = stack.pop(2);
console.log(p);
console.log(stack);
//队列 数组原生支持
var queue = [1, 2, 3, 4];
queue.push(5, 6, 7);
console.log(queue);
var q = queue.shift();
console.log(q);
console.log(queue);
var q1 = queue.unshift("a", "b");
console.log(q1);
console.log(queue);
反转#
//反转数组
var test007 = [1, 2, 3, 4, 5];
test007.reverse();
console.log(test007);
// 字符串反转
console.log("hello".split("").reverse().join(""));
数组排序#
//排序
var test01 = [1, 5, 4, 3];
test01.sort();
console.log(test01);
//反序
test01.sort((a, b) => b - a);
console.log(test01);
数组链接#
//数组链接
var test = [1, 2, 3];
var test1 = [5, 6, 7];
console.log(test1.concat(test));
数组切片#
//数组切片 slice 第一个参数：下标开始位置，第二个参数：裁剪长度-1
var test = [1, 2, 3, 4];
console.log(test.slice(1, 2));
数组的 map 操作#
var test = [1, 2, 3, 4];
//将数组的每个元素+1
var testMap = test.map((element) => element + 1);
console.log(test);
console.log(testMap);
数组 reduce#
// 两个值相加后作为参数与下一个元素进行相加
var test = [1, 2, 3, 4];
var reduce = test.reduce((v1, v2) => {
return v1 + v2;
}, 0);
console.log(reduce);
数组过滤#
var test = [1, 2, 3, 4];
var filter = test.filter((item) => item > 2);
console.log(filter);
数组测试#
//数组测试 true false 查看元素是否都大于2
var test = [1, 2, 3, 4];
var every = test.every((item) => item > 2);
console.log(every);
destructuring 解构操作#
//destructuring 解构操作
var test = [1, 2, 3];
var [a, b, c] = test;
console.log(a, b, c);
var [, f, e] = test;
console.log(f, e);
function test1() {
let name = "dfx";
let position = "前端实践者";
return [name, position];
}
var [name, position] = test1();
console.log(name, position);
rest 操作#
// rest
function test(...rest) {
console.log(rest);
}
// var test2 = [1, 2, 3];
test(1, 2, 3, 4);