ืืฉืืชืืืชื ืืืืื JavaScript, ืืืืจ ืืจืืฉืื ืฉืขืฉืืชื ืืื ืืืืื ืจืฉืืื ืฉื ืืจืืงืื ืฉืขืืจื ืื ืืืกืื ืืื. ืืืืืชื ืืืชื ืืชืื ืชืื ืืืจืื, ืืืชืจืื ืฉืื ืื ืืืืืจืืืื.
ืืืืืจ ืื, ืื ื ืืจืื ืื 12 ืืจืืื ื ืืืจืืช ืืฉืคืจ ืืืืืืฅ ืืช ืงืื ื-JavaScript ืฉืื. ืืจืื ืืืงืจืื ืื ืืื ืืืจืกืืืื.
ืื ื ืืืืืจืื: ืืื ืงืืจืื Habr - ืื ืื ืฉื 10 ืจืืื ืืขืช ืืจืฉืื ืืื ืงืืจืก Skillbox ืืืืฆืขืืช ืงืื ืืืืื ืฉื Habr.
Skillbox ืืืืืฆื: ืงืืจืก ืืขืฉื
"Mobile Developer PRO" .
ืกืื ืื ืขืจืืื ืืืืืืืื
ืืขืจืืื
ืกืื ืืืืืืืงื ืืืฆื ื-ES6, ืืื ืขื ืืืืคืจืืืจ..., ืืชืคืฉืืืช, ื ืืื ืืืฉืชืืฉ ืื ืืื ืืืฆืืจ ืืขืจื ืืืฉ ืืืืื ืจืง ืขืจืืื ืืืืืืืื.
const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]
ืืืฆื ืจืืื, ืืฉ ืฆืืจื ืืืจืื ืืืชืจ ืงืื ืืื ืืืฆืข ืืช ืืืชื ืคืขืืื.
ืืื ืืงื ืื ืคืืขืืช ืขืืืจ ืืขืจืืื ืืืืืืื ืืืคืืกืื ืคืจืืืืืืืืื: ืื ืืืืืจ, null, ืืืืืื ื, ืืืจืืืช ืืืกืคืจ. ืื ืืชื ืขืืื ืขื ืืขืจื ืืืืื ืืืืืืงืืื, ืคืื ืงืฆืืืช ืื ืืขืจืืื ื ืืกืคืื, ืชืฆืืจื ืืืฉื ืืืจืช.
ืืืจื ืืขืจื ืืืืืื ืืืืืืจืื
ืืืืืจืื
ืืืฉืจ ืืชื ืืืื ืขืืืจ ืืืืืืช, ืืชื ืคืืขื ืืคื ืื ืืื ืืกืื ืืจืื:
for (let i = 0; i < array.length; i++){
console.log(i);
}
ืขื ืืืช, ืขื ืชืืืืจ ืื, ืืืืืช for ืืืืงืช ืฉืื ืืฉืื ืืช ืืืจื ืืืขืจื ืืื ืืืืจืฆืื.
ืืคืขืืื ืื ืืืื ืืืืืช ืฉืืืืฉื, ืืื ืืจืื ืืืงืจืื ืืขืื ืืืชืจ ืืฉืืืจ ืืช ืืืจื ืืืขืจื ืืืืืื, ืื ืฉืืืจืืฉ ืืืฉื ืืืช ืืืื. ื ืืื ืืขืฉืืช ืืืช ืขื ืืื ืืืืจืช ืืฉืชื ื ืืืจื ืฉืื ื ืืืืจ ืืช ืืืฉืชื ื i, ืื:
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}
ืืืืคื ืขืงืจืื ื, ืืืขื ืืื ืืขืื, ืืื ืขื ืืื ืืืืืช ืืืื ืืืืืื ื ืงืื ืืืกืืื ืืฉืืขืืชื ืืืื.
ืืืจืื ืงืฆืจ ืืฉืืื (ืืืจืื ืืงืืจืชื)
ืืคืขืืืื ืืืชื ืื
ืืืืคืจืืืจ ืืฉืืืฉืื ื ืืื ืืจื ืืืืจื ืืืขืืื ืืืชืื ืืฆืืจืืช ืืืชื ืืืช ืคืฉืืืืช (ืืืคืขืืื ืื ืื ืื ืคืฉืืืืช):
x> 100? "ืืืชืจ ื-100": "ืคืืืช ื-100";
x> 100? (x>200? "ืืืชืจ ื-200": "ืืื 100-200"): "ืคืืืช ื-100";
ืืื ืืคืขืืื ืืคืืื ืืืืคืจืืืจ ืืฉืืืฉืื ื ืืกืืื ืืืชืจ ืืื ืืจืฉ. ืื ืื ื ืืืืืื ืืืฉืชืืฉ ื-'and' && ื-'ืื' ืืืงืื || ืืืคืจืืืจืื ืืืืืื ืืื ืืืขืจืืช ืืืืืืื ืืกืืืืื ืืฆืืจื ืชืืฆืืชืืช ืขืื ืืืชืจ. ืื ื ืงืจื ืืขืชืื ืงืจืืืืช "ืงืฆืจ ืืฉืืื" ืื "ืืืจืื ืงืฆืจ ืืฉืืื".
ืึตืื ืึทืคืขึดืืึดืื ืึถืช ืึถื
ื ื ืื ืฉืื ื ืจืืฆืื ืืืืืืจ ืจืง ืืื ืืฉื ื ืชื ืืื ืื ืืืชืจ.
ืฉืืืืฉ ื-&& ืืืืืจ ืืช ืืขืจื ืืฉืงืจื ืืจืืฉืื. ืื ืื ืืืคืจื ื ืืืขืจื ื-true, ืื ืืืืืื ืืืืจืื ืฉืืืขืจื ืืืืืจ.
let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0
ืืืืฆืขืืช || ืืืืืจ ืืช ืืขืจื ืืืืืชื ืืจืืฉืื. ืื ืื ืืืคืจื ื ืืืขืจื ื-false, ืื ืืขืจื ืืืืขืจื ืืืืจืื ืืืืืจ.
let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null
ืืืืื 1
ื ื ืื ืฉืื ืื ื ืจืืฆืื ืืืืืืจ ืืช ืืืืจื ืฉื ืืฉืชื ื, ืืื ืื ืื ื ืื ืืืืขืื ืืช ืกืืื.
ืืืงืจื ืื, ืืชื ืืืื ืืืฉืชืืฉ ื-if/else ืืื ืืืืืง ืฉ-foo ืืื ืืกืื ืื ืืื, ืืื ืฉืืื ืื ืขืฉืืื ืืืืืช ืืจืืื ืืื. ืืื, ืขืืืฃ ืืงืืช ืืช ื"ืงืฆืจ ืืฉืืื" ืฉืื ื.
return (foo || []).length;
ืื ื-foo ืืืฉืชื ื ืืฉ ืืืจื ืืชืืื, ืื ืื ืืืืืจ. ืืืจืช ื ืงืื 0.
ืืืืื 2
ืืื ื ืชืงืืช ืืืขืืืช ืืืืฉื ืืืืืืืงื ืืงืื ื? ืืืชืื ืฉืืื ื ืืืืข ืื ืงืืื ืืืืืืงื ืื ืืื ืืืืคืืื ื ืืืฉื ื ืฉืื, ืืืืืจ ืขืืื ืืืืืื ืืืขืืืช.
ืืืืืื, ืจืฆืื ื ืืืฉืช ืืืืคืืื ืื ืชืื ืื ื- this.state, ืื ื ืชืื ืื ืืื ื ืืืืืจืื ืขื ืฉืืชืืื ืืช ืฉืื ื ืชืืืืจ ืืงืฉืช ืืืืืจ.
ืืืชืื ืืืงืื ืฉืื ืื ื ืืฉืชืืฉืื ืื, ืงืจืืืช this.state.data ืขืฉืืื ืืื ืืข ืืช ืืคืขืืช ืืืคืืืงืฆืื. ืืื ืืคืชืืจ ืืช ืืืขืื, ื ืืื ืืขืืืฃ ืืช ืื ืืืืืื ืืืชื ื:
if (this.state.data) {
return this.state.data;
} else {
return 'Fetching Data';
}
ืืคืฉืจืืช ืืืื ืืืชืจ ืชืืื ืืืฉืชืืฉ ืืืืคืจืืืจ "ืื".
return (this.state.data || 'Fetching Data');
ืื ืื ื ืื ืืืืืื ืืฉื ืืช ืืช ืืงืื ืฉืืืขืื ืืื ืืืฉืชืืฉ ื-&&. ืืืคืขืื 'ืืฉืืืจ ื ืชืื ืื' && this.state.data ืืืืืจ ืืช this.state.data ืืื ืงืฉืจ ืื ืื ืื ืืืืืจืื ืื ืื.
ืฉืจืฉืจืช ืืืคืฆืืื ืืืช
ืืคืฉืจ ืืืฆืืข ืืืฉืชืืฉ ืืฉืจืฉืืจ ืืืคืฆืืื ืื ืืืฉืจ ืื ืกืื ืืืืืืจ ื ืืก ืขืืืง ืืชืื ืืื ื ืขืฅ. ืื, ืกืื ืกืืื ืืฉืืื? ื ืืชื ืืืฉืชืืฉ ืืื ืืืืืจ ื ืืก ืจืง ืื ืืื ืื ืจืืง.
ืืืืืื, ื ืืื ืืฉื ืืช ืืช ืืืืืื ืฉืืืขืื ืืื ืืงืื this.state.data?..(). ืืืืืจ, ืื ืชืื ืื ืืืืืจืื ืจืง ืื ืืขืจื ืืื ื null.
ืืืืืคืื, ืื ืื ืืฉื ื ืื ืืืืื ื ืืืืืจืช ืื ืื, ื ืืื ืืืืืืจ ืืช this.state?.data.
ืืืจ ืืืืืืื ืืช
ืืืจืช ืกืื
ืื ืืกืฃ ืืคืื ืงืฆืืืช ืืืืืืื ืืืช ืืจืืืืืช ืืืช ืืฉืงืจ, JavaScript ืืชืืืืก ืื ืืื ืฉืืจ ืืขืจืืื ืืื ืืืช ืื ืืืื.
ืขื ืฉืืฆืืื ืืืจืช, ืื ืืขืจืืื ื-JavaScript ืื ืืืช, ืืืขื 0, "", null, undefined, NaN ืืืืืื ืฉืงืจ. ืืืืจืื ืื ืืืืืคืื.
ืื ื ืืืืืื ืืขืืืจ ืืงืืืช ืืื ืืฉื ืืื ืืืืฆืขืืช ืืืืคืจืืืจ !, ืฉืื ืืืืจ ืืช ืืกืื ืืืืืืื ืืช.
const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"
ืืืจ ืืืืจืืืช
ืืืจืช ืกืื
ืืืจื ืืืืจื ืืืกืคืจ ืฉืื ืืืืจืืืช ืืืืื ืืืชืืฆืข ืืืืคื ืืื.
const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"
ืืืจ ืืืกืคืจ ืฉืื
ืืืจืช ืกืื
ืื ื ืืืฆืขืื ืืช ืืืจื ืกืคืืจืืฆืื ืืืคืืื ืื.
let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
ื ืืชื ืืืฉืชืืฉ ืืฉืืื ืื ืื ืืื ืืืืืจ ืืช ืกืื ืื ืชืื ืื ืืืืืืื ืืื ืืขืจืืื ืืกืคืจืืื ืจืืืืื, ืืคื ืฉืืืฆื ืืืื:
console.log(+true); // Return: 1
console.log(+false); // Return: 0
ืืืชืื ื ืืฆืืื ืฉืืื + ืืชืคืจืฉ ืืืืคืจืืืจ ืฉืจืฉืืจ ืืื ืืืืคืจืืืจ ืืืืืจ. ืืื ืืืืื ืข ืืื, ืขืืื ืืืฉืชืืฉ ืืืืืืืช: ~~. ืืืคืจืืืจ ืื ืฉืืื ืขืจื ื-n-1. ืืืืืื, ~15 ืฉืืื ื-16.
ืฉืืืืฉ ืืฉืชื ืืืืืืช ืืฉืืจื ืฉืืื ืืช ืืคืขืืื ืืืืืื ืฉ- (- - n - 1) - 1 = n + 1 - 1 = n. ืืืืืื ืืืจืืช, ~-16 ืฉืืื ื-15.
const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"
<Quick Powers
ืคืขืืืืช
ืืื ื-ES7, ืืชื ืืืื ืืืฉืชืืฉ ืืืืคืจืืืจ ืืืงืกืคืื ืฆืื ** ืืงืืฆืืจ ืฉื ืขืฆืืืช. ืื ืืจืื ืืืชืจ ืืืืจ ืืฉืืืืฉ ื- Math.pow(2, 3). ืื ื ืจืื ืคืฉืื, ืืื ื ืงืืื ืื ืืืืื ืืจืฉืืืช ืืืื ืืงืืช, ืืืืืื ืฉืืื ืื ืืืืืจืช ืืื ืืงืื.
console.log(2 ** 3); // Result: 8
ืืื ืืืืื ืืืชื ืขื ืืกืื ^, ืืืฉืืฉ ืืืจื ืืื ืืืืืื. ืืื ื-JavaScript ืื ืืืืคืจืืืจ XOR.
ืืคื ื ES7, ืงืืฆืืจ ืืืจื ** ืืืื ืืฉืืฉ ืจืง ืขืืืจ ืืืืงื ืฉื ืืกืืก 2 ืืืืฆืขืืช ืืืคืจืืืจ ืืืฉืืจืช ืฉืืืื ืืืืืื ืกืืืืืช <<:
Math.pow(2, n);
2 << (n - 1);
2**n;
ืืืืืื, 2 << 3 = 16 ืฉืืื ืขืจื ื-2 ** 4 = 16.
ืฆืฃ ืืืกืคืจ ืฉืื
ืคืขืืืืช / ืืืจืช ืกืื
ืื ืืชื ืฆืจืื ืืืืืจ ืฆืฃ ืืืกืคืจ ืฉืื, ืืชื ืืืื ืืืฉืชืืฉ ื- Math.floor(), Math.ceil() ืื Math.round(). ืืื ืืฉ ืืจื ืืืืจื ืืืชืจ, ืืฉื ืื ืื ื ืืฉืชืืฉืื ื- |, ืืืืืจ ืืืืคืจืืืจ OR.
console.log(23.9 | 0); // Result: 23
console.log(-23.9 | 0); // Result: -23
ืืชื ืืืืช | ืชืืื ืืืืื ืจืื ืื ืืชื ืืชืืืื ืขื ืืกืคืจืื ืืืืืืื ืื ืฉืืืืืื, ืื ืฉืืื ืื ืืชืืืื ืจืง ืื ืืชื ืืืื ืืื ืฉืืชื ืขืืฉื.
n | 0 ืืกืืจ ืืช ืื ืื ืฉืืืจื ืืืคืจืื ืืขืฉืจืื ื, ืืงืืฆืจ ืืช ืืฆืฃ ืืืกืคืจ ืฉืื.
ืืชื ืืืื ืืงืื ืืช ืืืชื ืืคืงื ืขืืืื ืืืืฆืขืืช ~~. ืืืืจ ืืืจื ืืคืืื ืืืกืคืจ ืฉืื, ืืขืจื ื ืฉืืจ ืืื ืฉืื ืื.
ืืกืจืช ืืกืคืจืื ื ืืจืจืื
ื ืืชื ืืืฉืชืืฉ ืืืืคืจืืืจ OR ืืื ืืืกืืจ ืื ืืกืคืจ ืฉื ืกืคืจืืช ืืืกืคืจ. ืื ืืืืจ ืฉืื ืื ื ืื ืฆืจืืืื ืืืืืจ ืกืืืื ืืื ืืื:
let str = "1553";
Number(str.substring(0, str.length - 1));
ืืืงืื ืืืช ืื ื ืคืฉืื ืืืชืืื:
console.log(1553 / 10 | 0) // Result: 155
console.log(1553 / 100 | 0) // Result: 15
console.log(1553 / 1000 | 0) // Result: 1
ืงืืฉืืจ ืืืืืืื
ืฉืืขืืจืื
ื ืืชื ืืืฉืชืืฉ ืืกืืืื ื ืืฆืื ES6 ืืฉืืืืช ืืืืงืืช, ืืืืจืืื ืืฉืชืืขืช. ืื ืืืืจ ืฉืืชื ืืืื ืืืืคืจื ืืืืืืืื ืฉืืืืจืื ืขื ืขืฆืื ืืื this.myMethod = this.myMethod.bind(this)!
import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};
ืืืชืื ืืขืจื
ืืขืจืืื
ืื ืืชื ืฆืจืื ืืืกืืจ ืขืจืืื ืืืขืจื, ืืฉ ืฉืืืืช ืืืืจืืช ืืืชืจ ืืืฉืจ splice().
ืืืืืื, ืื ืืชื ืืืืข ืืช ืืืื ืืืขืจื ืืืงืืจื, ืชืืื ืืขืงืืฃ ืืช ืชืืื ืช ืืืืจื ืฉืื ืืืืคื ืืื:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]
ืืื ืืฉ ืฉืืื ืืืจืช, ืืืืืจื ืืืชืจ. ืื ืืืืืจืืช ืืื ืื ืฉืืฉืื ืื, ืื ื ืืืืืจืืช ืฉืื ื:
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]
ืืืคืกืช ืืขืจืืื ืืืืจืื ืื ืฉื ืืขืจื
ืืขืจืืื
ืืื ืืงื ืื ืืืจืฉืช ืฉืืืืฉ ืืฉืืืช slice() .
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]
ืขืืฆืื ืงืื JSON
JSON
ืืืชืื ืฉืืืจ ืืฉืชืืฉืช ื-JSON.stringify. ืืื ืืืขืช ืฉืื ืขืืืจ ืืขืฆื ืืช ื-JSON ืฉืื?
ืฉืืืช stringify() ืืืงืืช ืฉื ื ืคืจืืืจืื ืืืคืฆืืื ืืืื: ืคืื ืงืฆืืืช ืชืืืืฃ, ืฉืื ื ืืชื ืืืฉืชืืฉ ืืื ืืกื ื ืืช ื-JSON ืืืืฆื, ืืขืจื ืจืืื.
console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));
// Result:
// '{
// "alpha": A,
// "beta": B
// }'
ืื ืืื, ืื ื ืืงืืื ืฉืื ืืืื ืืงืืช ืืืื ืืื ืฉืืืืฉืืืช. ืืืื ืืจืืงืื ืืชื ืืืืจ? ืืชืื ืืืชื ืืชืืืืืช.
Skillbox ืืืืืฆื:
- ืงืืจืก ืืขืฉื ืฉื ืชืืื
"ืื ื ืืคืชื ืืชืจืื PRO" .- ืงืืจืก ืืงืืื
"ืืคืชื C# ื-0" .- ืงืืจืก ืืขืฉื ืื ืฉื ื
"ืืคืชื PHP ื-0 ื-PRO" .
ืืงืืจ: www.habr.com