es6 语法糖 - 社区

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：1301
发帖：99 篇
来自：保密
注册：2022-08-28 23:20:57
造访：2025-03-23 21:18:24

[ 第 1 楼 ]

语法糖：是指编程语言中可以更容易的表达一个操作的语法，它可以使程序员更加容易去使用这门语言，操作可以变得更加清晰、方便，或者更加符合程序员的编程习惯。

1. 速写属性

var name = '米斯特肖', age = '18';

var person1 = {

    name：name，

    age：age

}

# 下面语法糖写法等价上面

var person2 = { name, age };

console.log(person1, person2);

2. 速写方法

var person = {

    name: '米斯特肖',

    age: '18',

    describe: function() {

        console.log('你最帅');

     }

}

person.describe();

# 等价于下面，即对象里的方法可以去掉冒号和 function

var person = {

    name:'米斯特肖',

    age:'18',

    describe(){

         console.log('你最帅')

    }

}

person.describe();

3. 模板字符串

var person = {

    name: '米斯特肖',

    age: '18'

};

var str1 = '我叫：' + person.name + ',\n 永远都是' + person.age + '岁。',

str2 = `我叫：${person.name}, 永远都是${person.age}岁。`;

console.log(str1, str2);

2023-01-23 20:46:47

IP：已设置保密

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：1301
发帖：99 篇
来自：保密
注册：2022-08-28 23:20:57
造访：2025-03-23 21:18:24

[ 第 2 楼 ]

赋值

一、展开语法

1、数组浅拷贝

const arr = [...'ABCDE'];

console.log(arr); // ["A", "B", "C", "D", "E"]

const arr1 = [1, 2];

const arr2 = ['a', ...arr1];

const arr3 = [...arr1, ...arr2];

console.log(arr2);  // ['a', 1, 2]

console.log(arr3);  // [1, 2, 'a', 1, 2]

2、对象浅拷贝

const obj1 = {a: 1, b: 2};

const obj2 = {...obj1, c: 30};

console.log(obj2);  // {a:1, b:2, c:30}

const obj3 = {b: 20, c: 30};

const obj4 = {...obj2, ...obj3};  // 合并对象

console.log(obj4);  // {a:1, b:20, c:30}

3、函数调用时传参

function sum(x, y, z) {

  return x + y + z;

}

const data = [1,2,3];

console.log(sum(...data));  // 6

二、剩余语法

1、函数参数

function fn(name, ...args) {

  console.log(name);  // 基础参数

  console.log(args);  // 剩下的参数组成的数组

}

fn('ES6');

// 'ES6'

// []

fn('abcd', 7, 'ES6');

// "abcd"

// [7, "ES6"]

解构

一、数组解构

var [a, b] = [10, 20];

console.log(a);   // 10

console.log(b);   // 20

// 默认值(对未能取的值的变量赋一个默认值)

let [a=3, b=9] = [1];             // a=3 b=9

let [a, b = 1] = [10, ''];        // a=10, b=''

let [a, b = 1] = [10, undefined]; // a=10, b=1

在 ES6 中，判断一个数组中是否有值，使用严格相等运算符（===）来进行断，
只有当一个数组成员严格等于 undefined，默认值才会生效。所以第三个 b 使用了默认值。

let [a = 1] = [null];  // a=null

// null==undefined 返回的是 true，null===undefined 返回的是 false。所以数组成员是 null，默认值就不会生效。

// 交换变量

var a = 1;

var b = 4;

[a, b] = [b, a]  // a=4, b=1

// 选择性获取值

var [a, , , b] = [10, 20, 30, 40];

console.log(a);   // 10

console.log(b);   // 40

// 剩余参数

var [a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(a);     // 10

console.log(b);     // 20

console.log(rest);  // [30, 40, 50]

二、对象解构

var obj = { name: 'abcd', age: 7 };

var { name, age } = obj;  // name: abcd, age: 7

var {a = 10, b = 5} = {a: 3};                 // a = 3, b = 5

var {a = 10, b = 5} = {a: 3, b: undefined};   // a = 3, b = 5

var {a = 10, b = 5} = {a: 3, b: null};        // a = 3, b = null

var {a, c, ...rest} = {a: 1, b: 2, c: 3, d: 4}

console.log(a);     // 1

console.log(c);     // 3

console.log(rest);  // { b: 2, d: 4 }

三、字符串解构

const [a, b, c, d, e] = 'ABCDE';

console.log(a);   // "A"

console.log(b);   // "B"

console.log(c);   // "C"

console.log(d);   // "D"

console.log(e);   // "E"



let {length : len} = 'hello';

console.log(len); // 5

2023-01-23 20:47:54

IP：已设置保密