前端有用JavaScript技巧

数组去重

//法1
 var arr = [1, 2, 3, 3, 4];
 console.log(...new Set(arr))
 // [1, 2, 3, 4]

//法2 
function SetArr(array) {
        return Array.from(new Set(array));
    }
    console.log(SetArr([1, 1, 2, 2, 3, 4, 4]))  // [1, 2, 3，4]

s三元表达式

语法：条件？表达式1：表达式2 。  条件的括号可要可不要的

                    let istrue = true;

                    let a = (istrue === true) ? '我是true啊' : "我是false啊";
                    console.log(a) //我是true啊

                    let b = '';
                    (istrue === false) ? b = '我是true啊': b = '我是false啊';
                    console.log(b)//我是false啊

使用Array.isArray更好的检测数组

                    let isArray = [{
                            a: 1
                        }
                    ]
                    let isArr={a:1}

                    //使用instanceof
                    console.log(isArray instanceof Array)//true
                    console.log(isArr instanceof Array)//false

                    //使用新方法
                    console.log(Array.isArray(isArray))//true
                    console.log(Array.isArray(isArr))//false

数组和布尔值

有时我们需要过滤数组中值为 false 的值. 例如(0, undefined, null, false)

 var myArray = [1, 0 , undefined, null, false];
 myArray.filter(Boolean);
 //[1]

合并对象

const page = {
 current: 1,
 pageSize: 10
 }
 const form = {
 name: "",
 sex: ""
 }
 const params = {...form, ...page};
 /*
 {
 name: "",
 sex: "",
 current: 1,
 pageSize: 10
 }
 *

Object.values()   遍历对象所有值

                    const obj = {
                        a: 1,
                        b: 2,
                        c: 3
                    }
                    // ES7写法
                   const val= Object.keys(obj).map(key => obj[key])
                   console.log(val)//[1,2,3]

                   //ES8写法
                   const value=Object.values(obj)
                   console.log(value)//[1,2,3]

Object.entries()  ：Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。如下：

                    const obj = {
                        a: 1,
                        b: 2,
                        c: 3
                    }
                    console.log(Object.entries(obj));

打印出数组：

接下来再看obj对象的所有属性的key和value

                obj() {
                    const obj = {
                        a: 1,
                        b: 2,
                        c: 3
                    }
                    //不使用Object.entries() :ES7
                    Object.keys(obj).forEach(key => {
                        console.log('key:' + key + ' value:' + obj[key]);
                        //key:a value:1
                        //key:b value:2
                        //key:c value:3
                    })

                    //使用Object.entries() :ES8
                    for (let [key, value] of Object.entries(obj)) {
                        console.log(`key: ${key} value:${value}`)
                    }
                    //key:a value:1
                    //key:b value:2
                    //key:c value:3

                }

通过 Object.fromEntries， 可以将 Array 转化为 Object:

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

• flat()方法最基本的作用就是数组降维

var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity);
// [1, 2, 3, 4, 5, 6]

Promise.finally()

一个Promise调用链要么成功到达最后一个.then()，要么失败触发.catch()。在某些情况下，你想要在无论Promise运行成功还是失败，运行相同的代码，例如清除，删除对话，关闭数据库连接等。

function doSomething() {
 doSomething1()
 .then(doSomething2)
 .then(doSomething3)
 .catch(err => {
 console.log(err);
 })
 .finally(() => {
 // finish here!
 });
}

ES2018引入异步迭代器（asynchronous iterators）

async function process(array) {
 for await (let i of array) {
 doSomething(i);
 }
}

函数参数默认值

function foo(height, color)
{
 var height = height || 50;
 var color = color || 'red';
 //...
}

获取查询参数

// 假设地址栏中查询参数是这样 "?post=1234&action=edit"
 var urlParams = new URLSearchParams(window.location.search);
 console.log(urlParams.has('post')); // true
 console.log(urlParams.get('action')); // "edit"
 console.log(urlParams.getAll('action')); // ["edit"]
 console.log(urlParams.toString()); // "?post=1234&action=edit"
 console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

||与&&用法

a() && b() :如果执行a()后返回true，则执行b()并返回b的值；如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；

a() || b() :如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；如果执行a()后返回false，则执行b()并返回b()的值；

    console.log(0 && 4); //
    console.log(1 && 4); //
    console.log(0 || 4); //
    console.log(1 || 4); //
    console.log((1 && 3 || 0) && 4); //4
    console.log(1 && 3 || 0 && 4); //3
    console.log(0 && 3 || 1 && 4); //4 

模板字符串

ES6支持 模板字符串，使得字符串的拼接更加的简洁、直观。

不使用模板字符串：

var name = 'Your name is ' + first + ' ' + last + '.'

使用模板字符串：

var name = `Your name is ${first} ${last}.`

在ES6中通过 ${}就可以完成字符串的拼接，只需要将变量放在大括号之中。

对象属性简写

在ES6中允许我们在设置一个对象的属性的时候不指定属性名。

不使用ES6

const name = 'Ming', age = '18', city = 'Shanghai';

const student = {
    name: name,
    age: age,
    city: city
};

console.log(student);

对象中必须包含属性和值，显得非常冗余。

使用ES6

const name = 'Ming', age = '18', city = 'Shanghai';

const student = {
    name,
    age,
    city
};

console.log(student);

对象中直接写变量，非常简洁。

Promise对象：

数组includes()方法：

扩展：

every：

some：

filter：

map：

forEach 数组遍历

 fill()：

用新元素替换掉数组内的元素，可以指定替换下标范围。

arr.fill(value, start, end)

find()：

传入一个回调函数，找到数组中符合当前搜索规则的第一个元素，返回它，并且终止搜索。

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

console.log(arr.find(n => typeof n === "number")) // 1

参考地址：

http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651497267&idx=1&sn=00ce17c00ada4488b6833e081ea61f07&chksm=80f1aafbb78623ed4bd851b125c6e0498b9e0a35698a5896c51673044ace89564c9baf1ab7c7&mpshare=1&scene=24&srcid=#rd

https://www.cnblogs.com/chaoyuehedy/p/6905422.html

http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651496630&idx=1&sn=3ecaf7db6f4888479c0556b8792e958b&chksm=80f1a97eb7862068a20ad54333db4c21c1e292c4c4482046f1ae56bd77057fe0ade78c7f710f&scene=0#rd

http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651496526&idx=1&sn=c71b32d764cf3f704934570e456579d6&chksm=80f1a986b7862090f768b90beecc920c1d2d732ce2da97f6fd9e8a402963567a389a2c2648f8&scene=0#rd