ES6 学习笔记2 - 技术栈

模板字符串使用

反引号（`）里面使用 ${}调用json参数；

配合 map方法和箭头函数遍历数组；

html 复制代码

let resultObj = objs.map(（item,index) =>(
        `<div class='bd'>
            <div class='item'>
                <div>${item.value}</div>
                <div>${index}</div>
                <div>常量</div>
            </div>
        </div>`
    ));
$("#id").html(resultObj);

数组扩展运算符三个点（...）

‌1. 数组扩展‌：可以将数组元素展开成单独的元素

使用扩展运算符可以将一个数组拆分为多个元素：

let parts = $'a', 'b'$ ;

let sentence = $'c', ...parts, 'd', 'e'$ ;

// sentence 是 $"c", "a", "b", "d", "e"$
2. 对象扩展,用于复制对象的可枚举属性：

使用对象扩展时，如果对象中有相同的属性名，后面的属性会覆盖前面的属性。

let obj1 = { foo: 'bar', x: 42 };

let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };

// clonedObj 是 { foo: "bar", x: 42 }

let mergedObj = { ...obj1, ...obj2 };

// mergedObj 是 { foo: "baz", x: 42, y: 13 }，
let arr1 = $0, 1, 2$ ;
let arr2 = $3, 4, 5$ ;
arr1.push(...arr2);

函数调用

在函数调用时，可以使用扩展运算符将数组作为参数传递给该函数：

function sum(x, y, z) {

return x + y + z;

}

const numbers = $1, 2, 3$ ;

console.log(sum(...numbers)); // 使用扩展运算符传递数组元素作为参数，输出 6

在函数调用中，扩展运算符允许你将数组转换为参数列表，这在处理不定数量的参数时特别有用。应用

1）复制数组

const a1 = $1, 2$ ;

// 写法一

const a2 = $...a1$ ;

// 写法二

const $...a2$ = a1;

2).合并数组

const arr1 = $'a', 'b'$ ;

const arr2 = $'c'$ ;

const arr3 = $'d', 'e'$ ;

// ES5 的合并数组

arr1.concat(arr2, arr3);

// $'a', 'b', 'c', 'd', 'e'$

// ES6 的合并数组
$...arr1, ...arr2, ...arr3$
// $'a', 'b', 'c', 'd', 'e'$