javascript语法简洁 (javascript的优点简洁介绍)

javascript点击事件延时写法,javascript写法及骚操作

1、三元运算符(条件运算符):

三元运算符,也称为条件运算符,是在某些编程语言中编写 if-else 语句的一种简写方式。它需要三个操作数:要判断的条件、条件为真时要返回的值以及条件为假时要返回的值。

例子:

// Longhand if-else statement
let age = 20;
let message;

if (age >= 18) {
  message = 'You are an adult.';
} else {
  message = 'You are a minor.';
}

// Shorthand ternary operator
let age = 20;
let message = (age >= 18) ? 'You are an adult.' : 'You are a minor.';
console.log(message);

2. 短路判断:

短路判断利用逻辑运算符 && (AND) 和 || (OR) 更简洁地判断。

例子:

// Longhand if statement
if (array && array.length > 0) {
  // Do something with the array
}

// Shorthand short-circuit evaluation
array && array.length > 0 && doSomething(array);

3. 默认参数值:

默认参数值是在不为特定参数传递值的情况下调用函数时使用的值。

默认参数值是在ECMAScript 2015 (ES6)中引入的,是在调用缺少或未定义参数的函数时避免错误的便捷方法。

例子:

// Longhand default parameter values
function greet(name) {
  name = name || 'Guest';
  console.log('Hello, ' + name + '!');
}

// Shorthand default parameter values
function greet(name = 'Guest') {
  console.log('Hello, ' + name + '!');
}

greet(); // Output: Hello, Guest!
greet('Lokesh'); // Output: Hello, Lokesh!

4.对象属性简写:

在创建对象时,我们可以使用速记符号将变量赋值为对象的同名属性。

例子:

// Longhand object property assignment
let name = 'Lokesh';
let age = 30;

let person = {
  name: name,
  age: age
};

// Shorthand object property assignment
let name = 'Lokesh';
let age = 30;

let person = {
  name,
  age
};

5.解构赋值:

解构赋值是 JavaScript ES6(ECMAScript 2015)中引入的一个特性,它允许你从数组中提取值或从对象中提取属性,并以更简洁和方便的方式将它们分配给变量。它简化了从复杂结构中提取数据的过程,使您的代码更具可读性和表现力。

{} 解构赋值语法对对象使用一组花括号, [] 对数组使用方括号。让我们探讨一下它在不同场景下的工作原理:

例子:

// Longhand array destructuring assignment
let numbers = [1, 2, 3];
let a = numbers[0];
let b = numbers[1];
let c = numbers[2];

// Shorthand array destructuring assignment
let numbers = [1, 2, 3];
let [a, b, c] = numbers;

// Longhand object destructuring assignment
let person = { name: 'John', age: 30 };
let name = person.name;
let age = person.age;

// Shorthand object destructuring assignment
let person = { name: 'John', age: 30 };
let { name, age } = person;

6.箭头功能:

箭头函数为编写函数表达式提供了简洁的语法。它们对于编写更短和更易读的回调函数特别有用。

// Longhand function expression
let add = function(a, b) {
  return a + b;
};

// Shorthand arrow function
let add = (a, b) => a + b;

7. 模板文字:

模板字面量是连接字符串和在反引号 (`) 内嵌入表达式的简写方式,而不是使用连接运算符或字符串插值。

例子:

// Longhand string concatenation
let name = 'Lokesh';
let greeting = 'Hello, ' + name + '!';

// Shorthand template literal
let name = 'Lokesh';
let greeting = `Hello, ${name}!`;

8. 数组方法(map、filter、reduce):

JavaScript 提供了数组方法,例如 map() , filter() , 并且 reduce() 允许您以简洁且富有表现力的方式对数组执行常见操作。

例子:

let numbers = [1, 2, 3, 4, 5];

// Longhand map
let doubled = numbers.map(function(num) {
  return num * 2;
});

// Shorthand map with arrow function
let doubled = numbers.map(num => num * 2);

// Longhand filter
let evens = numbers.filter(function(num) {
  return num % 2 === 0;
});

// Shorthand filter with arrow function
let evens = numbers.filter(num => num % 2 === 0);

// Longhand reduce
let sum = numbers.reduce(function(acc, num) {
  return acc + num;
}, 0);

// Shorthand reduce with arrow function
let sum = numbers.reduce((acc, num) => acc + num, 0);