ES6的语法糖

语法糖目录,点击跳转:
…[1, 2, 3]
解构
??
?.
?:
!+name



第一个:...主要有个出现情形

  • function(a, b, ...params){//代码块}
    这个会将调用函数的前两个参数分别映射给a和b,后面的参数映射为一个数组给params。
  • 在函数调用的时候,如
way1: let len = getLen("hello world!", ...[1, 2, 3]);
way2: let len = getLen("hello world!", [1, 2, 3]);

这两个的区别在于way1将分解 第二个参数...[1, 2, 3]为多个参数;而way2则把[1, 2, 3]当作是一个数组参数,就是常理解的方法。

function getLen(string, params){
	console.log(params);
}
getLen("hello", ...[1,2,3]);
getLen("hello", [1,2,3]);

//1
//[ 1, 2, 3 ]
  • 对象解构特性,es7支持,数组同理
    如:
let dicA = {
	name: "gpw",
	age: "18"
};

let dicB = {
	...dicA,
	local: "yz"
}

//这个dicB等同于

let dicB = {
	name: "gpw",
	age: "18",
	local: "yz"
}

第二个 继前文所述的对象解构特性

...可以将数组和字典解构后赋值或直接传递给新的对象,利用这种思路可以稍微拓展下,这有点类似于在jsx中结构模块的例子:

const {account, password} = req.body

[s1, s2, s3] = lines.split("/n");

//还可以与nodejs的jQuery统一
let {divv, spann} = $("#app").children();

第三个: ??是空值合并操作符,按照第一个取值,如果第一个是空的,就取第二个。

注意:只对nullundefined敏感。如下:

const def = null ?? 111;
console.log(def); // 111

const def = 0 ?? 111;
console.log(def); // 0

第四个:?.是可选链操作符,功能等同于.但是不会在引用为null或undefined时报错。

这个语法糖在实际开发过程中很实用,但是在babel的7.13版本前都是不起作用的!

var obj = {
  name: "ycc",
  age: "25"
};
cosnole.log(obj.info.major);

// 在可编译版本后结果为

"use strict";
var obj = {
  name: "ycc",
  age: "25"
};
cosnole.log(obj.info.major);

这时候程序会因无法识别undefined的对象而抛出异常

7.13版本后使用语法糖识别为

var obj = {
  name: "ycc",
  age: "25"
};
cosnole.log(obj.info?.major);

// 在可编译版本后结果为

"use strict";
var _obj$info;
var obj = {
  name: "ycc",
  age: "25"
};
cosnole.log((_obj$info = obj.info) === null || _obj$info === void 0 ? void 0 : _obj$info.major);

可以在babel官网上测试下:Babel 中文网


第五个:?:同上,在字典重定义时使用

let newAccount = {
	...lastUser,
	isSignedIn?: boolean
}

第六个:!+name是判断name是否为空的,空为true。具体理解是这样的:

!是逻辑非运算,+前面没有值或者前面的值是空对象且后面有值的时候,它是一个一元运算符,作用是将它后面的操作数转换成数字。
所以后面的对象为“0”或者null、undefined甚至是“”的时候,前置一个+就被转转为0,再加上一个逻辑非则转0为true。






end!
参考来源在这里


持续更新中。。。

### ES6 语法糖特性及其功能 ES6(ECMAScript 2015)引入了许多新的特性和语法糖,这些改进使得 JavaScript 的开发更加高效和简洁。以下是几个重要的语法糖特性以及它们的功能和用法。 #### 箭头函数 (Arrow Functions) 箭头函数提供了一种更短的函数书写方式,并且不会绑定自己的 `this` 值,而是继承自外层作用域[^1]。 ```javascript // 普通函数写法 function multiply(x, y) { return x * y; } // 使用箭头函数简化 const multiply = (x, y) => x * y; console.log(multiply(3, 4)); // 输出 12 ``` #### 默认参数值 (Default Parameters) 默认参数允许开发者在定义函数时指定参数的默认值,从而减少不必要的条件判断逻辑[^2]。 ```javascript // 定义带有默认值的参数 function greet(name = 'Guest') { console.log(`Hello, ${name}!`); } greet(); // Hello, Guest! greet('Alice'); // Hello, Alice! ``` #### 解构赋值 (Destructuring Assignment) 解构赋值可以从数组或对象中提取数据并将其分配给变量,极大地提高了代码可读性[^3]。 ```javascript // 数组解构 let [a, b, c] = [1, 2, 3]; console.log(a); // 输出 1 // 对象解构 let { name, age } = { name: 'John', age: 30 }; console.log(name); // 输出 John ``` #### 扩展运算符 (Spread Operator) 扩展运算符可以用于展开数组或者对象中的元素,在复制、合并操作中有广泛的应用场景[^4]。 ```javascript // 合并两个数组 let array1 = [1, 2, 3]; let array2 = [...array1, 4, 5]; console.log(array2); // 输出 [1, 2, 3, 4, 5] // 复制对象 let obj1 = { a: 1, b: 2 }; let obj2 = { ...obj1, c: 3 }; console.log(obj2); // 输出 { a: 1, b: 2, c: 3 } ``` #### 模板字符串 (Template Strings) 模板字符串通过反引号 `` 提供多行字符串支持以及嵌入表达式的便利方法[^5]。 ```javascript let firstName = 'Jane'; let lastName = 'Smith'; // 使用模板字符串构建完整姓名 let fullName = `${firstName} ${lastName}`; console.log(fullName); // 输出 Jane Smith ``` ### 总结 上述列举的是 ES6 中一些常见的语法糖特性,每一种都旨在提升编码效率与清晰度。理解并熟练掌握这些新特性对于现代前端工程师来说至关重要。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值