10个js技巧，让你代码更加优雅

1.使用解构赋值

const user = { name: 'Tom', age: 18, sex: 'male', address: 'Beijing' };

如果只想获取一部分数据，可以使用解构赋值

const {name,age} = user

console.log(name,age)

2.使用模板字符串来处理字符串拼接

在ES6之前，我们通常使用加号或者concat()方法来进行字符串拼接。但这种方式比较繁琐，代码可读性也较差。在ES6中，我们可以使用模板字符串来处理字符串拼接，可以让代码更加清晰易懂。

const name = 'Tom';

const age = 18;

const message = `My name is ${name}, I am ${age} years old.`;

console.log(message); // 输出：My name is Tom, I am 18 years old.

3. 使用箭头函数来缩短代码，同时提高代码的可读性；

例如，我们有一个普通函数：

function add(a, b) { return a + b; }

可以使用箭头函数的方式来定义：

const  add = (a,b)=>a+b

4. 使用Object.assign()来合并对象；

在开发过程中，我们经常需要合并两个或多个对象，这时可以使用Object.assign()方法来实现。该方法可以将一个或多个源对象的所有属性复制到目标对象中，从而实现对象的合并。

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

const obj2 = { c: 3, d: 4 };

const obj3 = Object.assign({}, obj1, obj2);

console.log(obj3); // 输出：{a: 1, b: 2, c: 3, d: 4}

5. 使用Map数据结构来管理数据;

// 创建一个Map对象

const formData = new Map();

// 添加表单元素的值到Map中

formData.set('username', 'John');

formData.set('password', '123456');

// 获取表单元素的值

const username = formData.get('username')

contst password = formData.get('password')

通过使用Map来管理数据，可以使代码更加简洁和易于维护。同时，Map也提供了一些方便的方法，如set()、get()、has()、delete()等，可以方便地对数据进行操作。

下面是一些常见的使用场景：

5.1管理表单数据

当页面中有多个表单元素需要进行数据交互时，可以使用Map来存储表单数据

const formData = new Map();

formData.set('username', 'John');

formData.set('password', '123456');

这样，我们可以通过get()方法来获取对应表单元素的值：

const username = formData.get('username');

const password = formData.get('password');

5.2管理页面状态

const state = new Map();

state.set('loading', false);

state.set('error', null);

这样，我们可以使用set()方法来更新对应状态的值

state.set('loading', true);

state.set('error', '请求失败');

5.3管理列表数据

当页面中存在一个列表需要管理时，可以使用Map来存储列表数据

const list = new Map();

list.set(1, { id: 1, name: 'John' });

list.set(2, { id: 2, name: 'Mike' });

这样，我们可以使用get()方法来获取对应项的值

const item = list.get(1);

5.4管理缓存数据

const cache = new Map();

cache.set('key1', 'value1');

cache.set('key2', 'value2');

这样，我们可以使用get()方法来获取对应的缓存数据：

const value = cache.get('key1');

总之，Map是一种非常实用的数据结构，在前端开发中有着广泛的应用。使用Map来管理数据，可以使代码更加简洁和易于维护。

6. 使用Set数据结构来去除重复的元素

const arr = [1, 2, 3, 2, 1];

const set = new Set(arr);

const uniqueArr = Array.from(set); // [1, 2, 3]

在上面的代码中，我们首先定义了一个数组 arr，其中包含重复的元素。然后使用 new Set(arr) 创建了一个 Set 集合，将数组中的重复元素去除，得到了一个只包含不重复元素的集合。最后，我们使用 Array.from 将集合转换为数组，得到了一个不包含重复元素的数组 uniqueArr。

这种方式不仅可以用于数组去重，也可以用于对象去重。例如，我们可以使用 Set 来去除一个数组中包含重复对象的情况：

const arr = [{ id: 1 }, { id: 2 }, { id: 1 }, { id: 3 }];

const set = new Set(arr.map(item => item.id));

const uniqueArr = Array.from(set, id => ({ id }));

console.log(uniqueArr); // [{ id: 1 }, { id: 2 }, { id: 3 }]

7. 使用async/await来处理异步操作

在JavaScript中，异步操作是一种常见的编程模式，例如从服务器获取数据或执行长时间运行的任务等。异步操作通常涉及到回调函数或Promise对象，这会导致代码变得复杂和难以阅读。为了解决这个问题，ES2017引入了async/await语法糖，它提供了一种更加直观和易于理解的方式来处理异步操作。

async/await语法糖使用起来非常简单，只需要在函数前面加上async关键字，并在需要等待异步操作完成的地方使用await关键字即可。例如，下面是一个使用Promise对象的异步操作：

function getData() {

    return new Promise((resolve, reject) => {

        setTimeout(() => {

            console.log(1)

            resolve('data');

        }, 1000);

    });

}

getData().then((data) => {

    console.log(data);

});

使用async/await语法糖可以改写成如下代码：

8. 使用Promise.all()来处理多个异步操作

const fetchData1 = fetch('https://api.example.com/data1');

const fetchData2 = fetch('https://api.example.com/data2');

const fetchData3 = fetch('https://api.example.com/data3');

Promise.all([fetchData1, fetchData2, fetchData3]) .then(responses => Promise.all(responses.map(res => res.json()))) .then(dataArray => { // 在此处对数据进行处理和展示 }) .catch(error => console.log(error));

在这个示例中，首先创建了3个异步操作，每个操作使用fetch()方法从API接口中获取数据。然后，将这3个异步操作封装成一个Promise对象的数组，并传递给Promise.all()方法进行处理。当所有异步操作都执行完毕后，使用.then()方法获取到每个异步操作的结果，并使用Promise.all()方法对所有结果进行处理，将结果转换为JSON格式的数据。最后，对处理后的数据进行展示或其他处理。如果在异步操作中出现任何错误，则使用.catch()方法进行捕获和处理。

9. 使用const和let来代替var，可以避免变量提升和全局变量的问题

10.使用try/catch来处理错误，可以使代码更加健壮。

async function fetchData() {

    try {

      const response = await fetch('https://api.example.com/data');

      const data = await response.json();

      return data;

    } catch (error) {

      console.log('Error fetching data:', error);

      return null;

    }

  }