10种JS速记技巧
web前端开发
共 5232字,需浏览 11分钟
·
2020-12-27 13:38
1、三元运算符
const pet = 'dog';
let sound;
if ( pet === 'dog') {
sound = 'woof';
} else {
sound = 'meow';
}
const pet = 'dog';
let sound = (pet === 'dog') ? 'woof' : 'meow';
2、if 存在/不存在
let test = 'AA';
if (typeof test !== 'undefined' && test !== '' && test !== null && test !== 0 && test !== false) {
console.log('The variable test is defined and not empty and not null and not false');
}
let test = 'AA'
if (test) {
console.log('The variable test is defined and not empty and not null and not false');
}
let test;
if (!test) {
console.log('The variable test is undefined or empty or null or false');
}
let example = true;
if (example === true) {
console.log('It is true');
} else {
console.log('It is false');
}
if (example) {
console.log('it is true');
} else {
console.log('It is false');
}
let example = 'testing';
if (example === true) {
console.log('It is true');
} else {
console.log('It is false');
}
if (example) {
console.log('It is true');
} else {
console.log('It is false'}
}
3、大量变数
let i = 0;
let j = 0;
let counter = 0;
let message = 'Hello there';
let isFound = false;
let isOpen = true;
let text;
let i = 0, j = 0, counter = 0, message = 'Hello there', isFound = false, isOpen = true, text;
let i = 0, j = 0, counter = 0; // counters
let message = 'Hello there', text; // strings
let isFound = false, isOpen = true; // booleans
4、小数
for (let i = 0; i < 1000000; i++) { }
for (let i = 0; i < 1e6; i++) {}
e-表示零跟随x
y-表示零数目
1e1 === 10
1e2 === 100
1e3 === 1000
.
.
.
1e9 === 1000000000
2e1 === 20
2e2 === 200
.
.
2e8 === 200000000
11e2 === 1100
5、模板文字 *
let text = 'Hello '+ name + 'from '+ country +'.'
let multilineText = 'Hello '+ name + 'from '+ country +'.\n\t'
+ 'You have selected '+ number + '' + item + 'at the price of '+ price + '.'
let text = `Hello ${name} from ${country}.`;
let multilineText = `Hello ${name} from ${country}. You have selected ${number} ${item} at the price of ${price}`;
6、对象属性 *
let name = 'Katniss';
let surname = 'Everdeen';
let home = 'District 12';
let contestant = {
name: name,
surname: surname,
home: home
}
let contestant = { name, surname, home }
7、对于循环速记
const heroes= ['Iron Man','Thor','Hulk','Black Widow','Scarlet Witch','Dr Strange','Spiderman'];
for(let i = 0; i < heroes.length; i++) {
console.log(heroes[i]);
}
/**
Iron Man
Thor
Hulk
Black Widow
Scarlet Witch
Dr Strange
Spiderman
*/
for(let hero of heroes) {
console.log(hero);
}
for(let index in heroes) {
console.log(index);
}
/**
0
1
2
3
4
5
6
*/
8、字符串到数字
const num1 = parseInt('10');
const num2 = parseFloat('10.01')
const num1 = +"10";
const num2 = +"10.01";
9、解构分配 *
const student = {
name: 'Harry',
surname: 'Potter',
school: 'Hogwarts',
house: 'Gryffindor'
}
const name = student.name;
const surname = student.surname;
const school = student.school;
const house = student.house;
const {name, surname, school, house} = student;
console.log(name) // Harry
console.log(surname) // Potter
console.log(school) // Hogwarts
console.log(house) // Gryffindor
let a,b,c;
[a,b,…c]= [1,2,3,4,5,6,7,8,9]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5,6,7,8,9]
10、Spread运算符和Rest参数(…)*
let num1 = [1,2,3]
let num2 = [4,5,6]
let final;
final = num1.concat(num2);
final = […num1,…num2] //1,2,3,4,5,6
final2 = […num2, …num1] // 4,5,6,1,2,3
final3 = [1, 2, …num2, 7,8 ] // 1,2,4,5,6,7,8
function restExample(a, b, ...more) {
console.log('a = ', a);
console.log('b = ', b);
console.log('more = ', more);
}
restExample('Testing','for','rest','parameter','here');
// Output:
// a = Testing
// b = for
// more = ['rest','parameter','here']
评论