บันทึก 기능 프로그래밍
52573 단어 writingjavascript
JavaScript ES6 (ES2015)
화살표 함수
// ES6
[1, 2, 3].map(num => num * 2);
// ES5
[1, 2, 3].map(function(num) {
return num * 2;
});
// ES6
app.get('/', (req, res) => {
res.json({
message: 'Hello World'
});
});
// ES5
app.get('/', function(req, res) {
res.json({
message: 'Hello World'
});
});
() => ‘Hello’
() => {} (แบบ code block)
(num) => num * 2
(num1, num2) => {return num1 + num2;} (แบบ code block)
() => ({ foo: ‘bar’ }) (return เป็น Object ให้ใช้ปีกกา)
ลองเล่น
const f = x => x * 2
print(f(2));
//===========================
var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
//จัดให้ดูง่ายสำหรับผม
const a = materials.map(
function(material) {
return material.length;
}
);
//เปลื่อน function เป็น => ไว้ด้านหลังแทน
const b = materials.map(
(material) => {
return material.length;
}
);
// ลบ () ของ parameter ออก
รวมถึง {},return ของ Function
materials.map(material => material.length);
//output [8, 6, 7, 9]
//====================================
var simple = a => a > 15 ? 15 : a;
print(simple(16));
print(simple(10));
// 15 10
const a = (a,b=10) => a*b
print(a(2));
// 20
// ต้องใส่ () ด้วย ถ้าจะ Default
const a = (a=5) => a
print(a());
네스트된 화살표 함수
let add = (x,y) => x + y;
add(2,3); //=> 5
let add = x => y => x + y;
add(2)(3);
let add = function (x) {
return function (y) {
return x + y;
};
};
What is Functional Programming
แบบธรรมดา
let numbers = [1, 2, 3, 4, 5, 6 ,7, 8, 9, 10];
let squaredEvens = [];
for(let i = 0; i < numbers.length; i++) {
let currentNumber = numbers[i];
if(currentNumber % 2 === 0) {
squaredEvens.push(currentNumber * currentNumber)
}
}
แบบ FP
const numbers = [1, 2, 3, 4, 5, 6 ,7, 8, 9, 10];
const isEven = n => n % 2 === 0;
const square = n => n * n;
numbers.filter(isEven).map(square);
메모
필터รับ 매개 변수เป็น 기능ที่โยนไปค่าจาก 어레이ไปเชคทีละตัว
동일했어
function isEven(n) { return n % 2 === 0; }
function square(n) { return n * n; }
หัวใจสำคัญของ 함수식 프로그래밍
หลีกเลี่ยง 부작용หรือผลข้างเคียงที่จะเกิดต่อ 기능อื่นและต่อตัวเอง
ตัวแปร (ในเชิงคณิตศาสตร์ ซึ่งเป็นตัวแทนของค่า หรือ 논쟁하다ของ 기능ไม่ใช่ 가변 변수หรือตัวแปรแบบที่เรา 업데이트ค่าได้เรื่อยๆเวลาเขียนโปรแกรมแบบ (명령식)
const foo = [1,2,3];
const baz = foo.map(function bar (n) { return n + 1; });
ส่วน 닫기เป็นสิ่งที่ผมสงสัยอยู่นานมาก เพราะมักจะเจอตัวอย่างแบบนี้ function ticker() {
let count = 0;
return () => count++;
}
let t = ticker();
t(); // 0
t(); // 1
t(); // 2
t(); // 3
เขาบอกว่า 가방을 닫다คือ 기능ที่อ้างอิง 자유 변수เจ้า 자유 변수เนี่ย มันคือตัวแปรที่ไม่ได้ถูกประกาศไว้ใน 매개 변수จากตัวอย่างด้านบน จะเห็นได้ว่า () = > 계수++ไม่มี 매개 변수เลย แต่มีตัวแปร 세다ซึ่งโดยปกติแล้วเมื่อ 실행 주식 코드เสร็จ เจ้า 세다ควรจะถูก 스팸 컬렉터เก็บไป แต่ในกรณีนี้ เมื่อเราบอกว่า t=ticker()를 설정합니다.แล้ว tจะกลายเป็น 닫기ซึ่งเป็น 기능ที่จำสภาพแวดล้อมที่สร้างมันขึ้นมา ทำให้ผลลัพธ์เป็นอย่างที่เห็น แต่ไม่เป็น FP // Original
function makeAdder(a) {
return b => a + b;
}
const addFive = makeAdder(5);
const addTen = makeAdder(10);
addFive(20); // 5 + 20 => 25
addTen(9); // 10 + 9 => 19
// Refactoring
const makeAdder2 = a => b => a + b;
const addfuck = makeAdder2(5)
addfuck(20)
คราวนี้จะเห็นได้ว่าทั้ง makeAdder,add5และ 가등하다ล้วนเป็น 순함수หรือตัวอย่างที่ดูฉลาดขึ้นหน่อย const makeSum = transFunc => (a, b) =>
transFunc(a) + transFunc(b);
const sumSquared = makeSum(n => n * n);
const sumCubed = makeSum(n => n * n * n);
sumSquared(1, 2); // 1^2 + 2^2 => 5
sumCubed(1, 2); // 1^3 + 2^3 => 9
## รู้จักกับ Javascript Callback Function ### แบบธรรมดา (동기화)
console.log('Step 1');
funcSync();
console.log('Step 3');
function funcSync () {
console.log('Step 2');
}
### แบบไม่ธรรมดา (비동기식) setTimeout(function(){
console.log('Step 1')
}, 3000);
console.log('Step 2')
// ผลลัพท์
// Step 2
// Step 1
setTimeout(doSomeThing, 3000);
function doSomeThing () {
console.log('Hello')
}
ฟังชั่น 시간 초과 설정จะมีการรับ 매개 변수อยู่ 2ตัวก็คือ기능ที่จะให้ทำงานเมื่อถึงเวลาที่กำหนด(หรือก็คือ 콜백 함수นั่นเอง)
정수ที่ใช้กำหนดเวลา มีหน่วยเป็น ms
const myAsyncFunc = callback => callback();
myAsyncFunc(callbackFunc);
function callbackFunc () {
print('this is callback function')
}
มันจะทำ 기능ที่ใส่เข้าไปให้เสร็จก่อนแล้วค่อยออกมาลองเล่น
예1
// Original
asyncFunc(
function (str)
{
print('cb1 : ' + str);
},
function (str)
{
print('cb2 : ' + str);
}
);
function asyncFunc (cb1, cb2) {
cb1('A');
cb2('B');
}
// Refactoring
let asyncFunc = (cb1,cb2) => {
cb1('A');
cb2('B');
}
const f1 = str => print('cb1 : ' + str);
const f2 = str => print('cb2 : ' + str);
asyncFunc(f1,f2);
예2
// Original
asyncFunc(cb, cb);
function asyncFunc (cb1, cb2) {
cb1('A');
cb2('B');
}
function cb (str) {
print('cb : ' + str);
}
// Refactoring
const cb = str => print('cb : ' + str)
let asyncFunc = (cb1,cb2) => {
cb("A");
cb("B");
}
asyncFunc(cb,cb);
예3
// Original
asyncFunc(cb, cb);
function asyncFunc (running, done) {
for (var i = 0;i<10;i++) {
running('i = ' + i);
}
done('done');
}
function cb (str) {
print(str);
}
// Refactoring
let cb = str => print(str);
let asyncFunc = (running, done) =>{
for (var i = 0;i<10;i++) {
running('i = ' + i);
}
done('done');
}
asyncFunc(cb, cb);
จัดการ Callback
보증하다
เป็นเหมือนกับคำสัญญาว่าจะทำคำสั่งนี้ให้เรานะ โดยมันจะมีอยู่ 셋สถานะก็คือ 보류 중, 해결됨, 거부됨เมื่อเริ่มต้นทำคำสั่ง 보증하다จะมีสถานะเป็น 미해결이었어ถ้าทำเสร็จแล้วจะมีสถานะเป็น 단호했어โดยจะทำคำสั่งถัดไปที่อยู่ใน .다음 ()และถ้าทำคำสั่งไม่สำเร็จ จะมีสถานะเป็น 거부และจะไม่ทำคำสั่งถัดไป แต่จะทำคำสั่งที่อยู่ใน .캡처()แทน
var p = new Promise(function(resolve, reject) {
let a = 5;
if(a >= 5) {
resolve(a);
}else {
reject(a);
}
}).then(function(a) {
console.log(`result then : ${a}`);
return a + 2;
}).then(function(b) {
console.log(`result then : ${b}`);
}).catch(function(a) {
console.log(`result catch : ${a}`);
});
메모
การส่ง 되돌아오다จะไม่ออกมาข้างนอกนะ จะเข้า 그럼 매개 변수는요?ถัดไป
비동기식/대기
const resolveAfter2Seconds = x => {
return new Promise(
resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
}
);
}
console.log(resolveAfter2Seconds(50));
async function add1(x) {
const a = await resolveAfter2Seconds(20);
const b = await resolveAfter2Seconds(30);
return x + a + b;
}
console.log(add1(100));
add1(10).then(v => {
console.log(v); // prints 60 after 4 seconds.
});
async function add2(x) {
const p_a = resolveAfter2Seconds(20);
const p_b = resolveAfter2Seconds(30);
return x + await p_a + await p_b;
}
add2(10).then(v => {
console.log(v); // prints 60 after 2 seconds.
});
Function Composition
คือกระบวนการรวมกันของ 기능มากกว่า 1ขึ้นไป และก่อให้เกิด 기능ใหม่ขึ้นมา
หรือรูปแบบหนึ่งที่ใช้ในการอธิบายที่ง่ายที่สุดก็คือ f(g(x))หรือการรวมกันของ 함수และ gมากระทำกับ x
const compose = function(f, g) {
return function(x) {
return f(g(x))
}
}
const compose = (f, g) => x => f(g(x))
응용 함수ไล่ไปจาก ขวา ไป ซ้ายตัวอย่าง
จินตนาการว่า เราจะสร้าง 기능ทำความสะอาด 꿰미ก่อนนำไปใช้งาน (소독 기능)
ขั้นตอนการทำงาน
ตัดช่องว่างที่ไม่จำเป็นหน้าหลังของคำ (트림)
แปลงคำทั้งหมดเป็นตัวพิมพ์เล็ก (트림)
function sanitize(str) {
return str.trim().toLowerCase()
}
sanitize(' Hello My Name is Ham ') // 'hello my name is ham'
ทีนี้ เราลองเขียนแบบ FPกันดูconst trim = s => s.trim()
const toLowerCase = s => s.toLowerCase()
function sanitize(str) {
return toLowerCase(trim(str))
}
sanitize(' Hello My Name is Ham ') // 'hello my name is ham'
const compose = (f, g) => x => f(g(x))
const sanitize = compose(toLowerCase, trim)
sanitize(' Hello My Name is Ham ') // 'hello my name is ham'
const trim = s => s.trim()
const toLowerCase = s => s.toLowerCase()
const join = separator => arr => arr.join(separator)
const split = separator => arr => arr.split(separator)
const toSlug = compose(
toLowerCase,
join('-'),
split(' '),
trim,
)
toSlug(' THIS is SluG ') // 'this-is-slug'
담뱃대
ลักษณะการทำงานของ 담뱃대คือ การส่งต่อ ผลลัพธ์ ที่ได้จากการ คำสั่งก่อนหน้า ไปให้แก่ คำสั่งด้านหลัง
const toSlug = pipe(
trim,
split(' '),
join('-'),
toLowerCase,
)
toSlug(' THIS is SluG ') // 'this-is-slug'
https://github.com/NantipatSoftEn/FunctionalPrograming/blob/master/Higher-Order/README.md
Reference
이 문제에 관하여(บันทึก 기능 프로그래밍), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nantipatsoften/functionalprograming-233m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)