Array
new Set（）
用来对数组进行去重。
var arr = [1,2,3,3,4,5,5,5];
console.log(new Set(arr));//{1, 2, 3, 4, 5}
const a = Array.from(new Set(arr));console.log(a);//[1, 2, 3, 4, 5]
const b= [...new Set(arr)]; console.log(a);//[1, 2, 3, 4, 5]
sort（）
对数组元素进行排序（改变原数组）
var aa = [1,3,4,2,5,7,9,6];console.log(aa.sort());//[1, 2, 3, 4, 5, 6, 7, 9]
reverse（）
反转数组中的元素（改变原数组）。
var aa = [1,3,4,2,5,7,9,6];console.log(aa.reverse());// [9, 7, 6, 5, 4, 3, 2, 1]
delete
删除一个数组成员，会形成空位，并不会影响length属性（改变原数组）,同样适用于对象。
var aa = [1,3,4,2,5,7,9,6];delete aa[0]; console.log(aa); // [empty, 3, 4, 2, 5, 7, 9, 6]
aa.length //8
const obj = {name: 'pboebe',age: '23',sex: '女'};delete obj.sex;console.log(obj);//{name: "pboebe", age: "23"}
shift（）
把数组的第一个元素从其中删除，并返回第一个元素的值（改变原数组）。
var aa = [1,3,4,2,5,7,9,6]; aa.shift()// 1; console.log(aa); //[3, 4, 2, 5, 7, 9, 6]
unshift（）
向数组的起始处添加一个或多个元素,并返回新的长度（改变原数组）。
push（）
在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度（改变原数组）。
valueOf（）
返回数组本身。
toString（）
可把值转换成字符串。
var aa= [3,4,4,5,4,6,5,7];
console.log(aa.toString());//3,4,4,5,4,6,5,7
concat（）
在原始数据尾部添加另外数据组成新数据（字符串适用）。
var aa1 = [3,4,5],aa2 = [6,7]; console.log(aa1.concat(aa2));//[3, 4, 5, 6, 7]
const x = 'abc';const y = 'def';const z = x.concat(y);console.log(y);//"abcdef"
join（）
以参数作为分隔符，将所有参数组成一个字符串返回（一般默认逗号隔开）。
const arr = [3,4,4,5,4,6,5,7];console.log(arr.join('-')); // 3-4-4-5-4-6-5-7
从对象中循环出key和value 拼接成带&的url
var pames = {a:'a',b:'b',c:'c'}; var arr = [];
for( let key in pames ){arr.push(`${key}=${pames[key]}`)}
var url='http://xsx?'+arr.join('&'); //"http://xsx?a=a&b=b&c=c"
slice（start, end）
用于提取原来数组的一部分，会返回一个提取的新数组，原数组不变（字符串适用,不包括end)。
const arr = [3,4,4,5,4,6,5,7];
const a = arr.slice(2, 5);console.log(a);//[4, 5, 4]
const x = 'abcdefgh';const y = x.slice(3, 6);console.log(y);//def
splice（）
用于删除原数组的一部分，并且可以在删除的位置添加新的数组成员，返回值是被删除的数组元素。（改变原数组）
splice（t, v, s）t:被删除元素的起始位置；v：被删除元素个数；s:s以及后面的元素为被插入的新元素。
const arr = [3,4,4,5,4,6,5,7];
const a = arr.splice(3, 2, 12); // [5, 4]
console.log(arr);// [3, 4, 4, 12, 6, 5, 7]
map（）
依次遍历数组成员，根据遍历结果返回一个新数组。（map方法同样适用于字符串，但是不能直接调用，需要通过函数的call方法，间接使用，或者先将字符串川转为数组，再使用）（不会改变原始数组）。
const arr = [3,4,4,5,4,6,5,7];arr.map(item => item*2); //[6, 8, 8, 24, 12, 10, 14]
forEach（）
跟map方法类似，遍历数组，区别是无返回值。
const arr3 = [3,4,4,5,4,6,5,7];arr3.forEach(item => {item=item*2;console.log(item);}) //6 8 8 10 8 12 10 14
for in（）
跟map方法类似，遍历对象或者数组。
但值得注意的是for in循环返回的值都是数据结构的键值名。 遍历对象返回的对象的key值,遍历数组返回的数组的下标(key)。
对象：const obj1 = {a: 123, b: 12, c: 2 };for(objitem in obj1){console.log(objitem+':'+obj1[objitem])} //a:123 b:12 c:2
数组：
const arr = [3,4,4,5];
for(let a in arr) {
console.log(a+':'+arr[a])
}//0:3 1:4 2:4 3:5
filter（）
一个过滤方法，参数是一个函数，所有的数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。（不会改变原始数组）。
const arr8 = [3,4,4,5,4,6,5,7];
const a = arr8.filter(item => item % 3 > 1);
console.log(a);//[5, 5]
find（）
返回符合传入测试（函数）条件的数组元素。
const arr = [3,4,4,5,4,6,5,7];
const a = arr.find(item => item > 3);
console.log(a); //4(find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。)
const b = arr.find(item => item == 0);
console.log(b); //undefined(如果没有符合条件的元素返回 undefined)
some（）& every（）
这两个方法类似于“断言”（assert），用来判断数组成员是否符合某种条件。
some方法是只要有一个数组成员的返回值为true，则返回true，否则false；
every方法是需要每一个返回值为true，才能返回true，否则为false;
const arr10 = [3,4,4,5,4,6,5,7];
arr10.some(function(item,index,arr){console.log('item:'+item+',index:'+index+',arr:'+arr);return item >3;})
//item:3,index:0,arr:3,4,4,5,4,6,5,7
//item:4,index:1,arr:3,4,4,5,4,6,5,7
//true
arr10.every(function(item,index,arr){console.log('item:'+item+',index:'+index+',arr:'+arr);return item >3;})
//item:3,index:0,arr:3,4,4,5,4,6,5,7
//false
reduce（）
依次处理数组的每个成员，最终累计成一个值。
格式：
reduce（a, b, x, y）
a:必填，累计变量；b：必填，当前变量；x: 可选，当前位置； y:可选，原数组。
const arr = [3,4,4,5,4,6,5,7];
方法1:const b = arr.reduce((p,v)=>{return p+v}); //38
方法2:const a = arr.reduce((pre, cur) => (sum= pre+cur, sum));console.log(a);
//高级用法（举个数组去重和数组扁平化栗子） const b = arr.reduce((pre, cur) => { if(!pre.includes(cur)) { return pre.concat(cur) } else { return pre } }, []) // [3, 4, 5, 6, 7] const arrs = [[2,3,2], [3,4,5]] const c = arr.reduce((pre, cur) => { return pre.concat(cur) }, []) // [3, 4, 4, 5, 4, 6, 5, 7]
reduceRight（）
与reduce方法使用方式相同，区别在于reduceRight方法从右到左执行（例子略过）
indexOf（）
返回给定元素在数组中的第一次出现的位置，如果没有则返回-1(同样适用于字符串)。
lastIndexOf（）
返回给定元素在数组中最后一次出现的位置，没有返回-1(同样适用于字符串)。
groupBy（）
把集合的元素按照key归类，key由传入的参数返回。
const arr = [ {name: '小孙', age: 18, score: 60, weight: 60}, {name: '小王', age: 19, score: 70, weight: 55}, {name: '小李', age: 18, score: 60, weight: 70}, {name: '小刘', age: 20, score: 70, weight: 65}, {name: '小赵', age: 18, score: 60, weight: 60}, {name: '小钱', age: 19, score: 70, weight: 55}, {name: '小周', age: 20, score: 60, weight: 50}, ]; const example = (data, key) => { return data.reduce(function(prev, cur) { (prev[cur[key]] = prev[cur[key]] || []).push(cur); return prev; }, {}); }; console.log(example(arr, 'age')); // object: {18: Array(3), 19: Array(2), 20: Array(2)} 18: Array(3) 0: {name: "小孙", age: 18, score: 60, weight: 60} 1: {name: "小李", age: 18, score: 60, weight: 70} 2: {name: "小赵", age: 18, score: 60, weight: 60} 19: Array(2) 0: {name: "小王", age: 19, score: 70, weight: 55} 1: {name: "小钱", age: 19, score: 70, weight: 55} 20: Array(2) 0: {name: "小刘", age: 20, score: 70, weight: 65} 1: {name: "小周", age: 20, score: 60, weight: 50}
shuffle（）
用洗牌算法随机打乱一个集合。
const arr = [1,2,3,4,5,6,7,8,9,10]; const shuffle = ([...arr]) => { let m = arr.length; while (m) { const i = Math.floor(Math.random() * m--); [arr[m], arr[i]] = [arr[i], arr[m]]; } return arr; }; console.log(shuffle(arr)) // [10, 9, 7, 5, 6, 4, 1, 2, 8, 3]
flatten（）
简写为flat（），接收一个数组，无论这个数组里嵌套了多少个数组，flatten最后都会把其变成一个一维数组(扁平化)。
const arr = [[1,2,3],[4,5,[6,7]]];
const a = arr.flat(3);
console.log(a);// [1, 2, 3, 4, 5, 6, 7]
Array.isArray（）
用来判断是不是数据是不是一个数组，返回值为true或false。
const arr = [3,4,4,5,4,6,5,7];
console.log(Array.isArray(arr))//true
copyWithin（）
从数组的指定位置拷贝元素到数组的另一个指定位置中。
array.copyWithin(target, start, end)
简单的数组去重
最便捷的方法： [...new Set(arr)]
const arr = [4,5,3,4,6,5,8,6];
console.log(Array.from(new Set(arr))) // [4, 5, 3, 6, 8]
console.log([...new Set(arr)]) // [4, 5, 3, 6, 8]
recude+include去重
const arr = [4,5,3,4,6,5,8,6];
const a = arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
console.log(a) // [4, 5, 3, 6, 8]
利用filter去重
const arr = [4,5,3,4,6,5,8,6];
const b = arr.filter((item, index, arr) => arr.indexOf(item, 0) === index;) // [4, 5, 3, 6, 8]
利用hasOwnProperty去重
const arr = [4,5,3,4,6,5,8,6];
function duplicate (arr) {
var obj = {};
return arr.filter(function(item, index, arr){
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}
console.log(duplicate(arr)) // 4, 5, 3, 6, 8]
1、过滤唯一值
Set对象类型是在 ES6 中引入的，配合展开操作...一起，我们可以使用它来创建一个新数组，该数组只有唯一的值。
const array = [1, 1, 2, 3, 5, 5, 1];const uniqueArray = [...new Set(array)];console.log(uniqueArray); // Result: [1, 2, 3, 5]
在 ES6 之前，隔离惟一值将涉及比这多得多的代码。此技巧适用于包含基本类型的数组：undefined，null，boolean，string和number。 （如果你有一个包含对象，函数或其他数组的数组，你需要一个不同的方法！）
2、与或运算
三元运算符是编写简单（有时不那么简单）条件语句的快速方法，如下所示：
x > 100 ? "Above 100" : "Below 100";x > 100 ? (x > 200 ? "Above 200" : "Between 100-200") : "Below 100"；
但有时使用三元运算符处理也会很复杂。 相反，我们可以使用’与’&&和’或’|| 逻辑运算符以更简洁的方式书写表达式。 这通常被称为“短路”或“短路运算”。
它是怎么工作的
假设我们只想返回两个或多个选项中的一个。使用&&将返回第一个条件为假的值。如果每个操作数的计算值都为true，则返回最后一个计算过的表达式。
let one = 1,two = 2,three = 3;console.log(one && two && three); // Result: 3console.log(0 && null); // Result: 0
使用||将返回第一个条件为真的值。如果每个操作数的计算结果都为false，则返回最后一个计算过的表达式。
let one = 1,two = 2,three = 3;console.log(one || two || three); // Result: 1console.log(0 || null); // Result: null
例一
假设我们想返回一个变量的长度，但是我们不知道变量的类型。我们可以使用if/else语句来检查foo是可接受的类型，但是这可能会变得非常冗长。或运行可以帮助我们简化操作：
return (foo || []).length;如果变量foo是 true，它将被返回。否则，将返回空数组的长度:0。
例二
你是否遇到过访问嵌套对象属性的问题？ 你可能不知道对象或其中一个子属性是否存在，这可能会导致令人沮丧的错误。假设我们想在this.state中访问一个名为data的属性，但是在我们的程序成功返回一个获取请求之前，data 是未定义的。根据我们使用它的位置，调用this.state.data可能会阻止我们的应用程序运行。 为了解决这个问题，我们可以将其做进一步的判断：
if (this.state.data) {return this.state.data;} else {return "Fetching Data";}
但这似乎很重复。 ‘或' 运算符提供了更简洁的解决方案：
return this.state.data || "Fetching Data";一个新特性: Optional Chaining
过去在 Object 属性链的调用中，很容易因为某个属性不存在而导致之后出现Cannot read property xxx of undefined的错误。那 optional chaining 就是添加了?.这么个操作符，它会先判断前面的值，如果是 null 或 undefined，就结束调用、返回 undefined。例如，我们可以将上面的示例重构为 this.state.data?.()。或者，如果我们主要关注state 是否已定义，我们可以返回this.state？.data。该提案目前处于第 1 阶段，作为一项实验性功能。 你可以在这里阅读它，你现在可以通过 Babel 使用你的 JavaScript，将 @babel/plugin-proposal-optional-chaining添加到你的.babelrc文件中。
3、转换为布尔值
除了常规的布尔值true和false之外，JavaScript 还将所有其他值视为 ‘truthy’ 或‘falsy’。除非另有定义，否则 JavaScript 中的所有值都是’truthy’，除了 0，“”，null，undefined，NaN，当然还有false，这些都是‘falsy’我们可以通过使用负算运算符轻松地在true和false之间切换。它也会将类型转换为“boolean”。
const isTrue = !0;const isFalse = !1;const alsoFalse = !!0;console.log(isTrue); // Result: trueconsole.log(typeof true); // Result: "boolean"
4、 转换为字符串
要快速地将数字转换为字符串，我们可以使用连接运算符+后跟一组空引号""。
const val = 1 + "";console.log(val); // Result: "1"console.log(typeof val); // Result: "string"
5、转换为数字
使用加法运算符+可以快速实现相反的效果。
let int = "15";int = +int;console.log(int); // Result: 15console.log(typeof int);Result: "number";
这也可以用于将布尔值转换为数字，如下所示：
console.log(+true); // Return: 1console.log(+false); // Return: 0
在某些上下文中，+将被解释为连接操作符，而不是加法操作符。当这种情况发生时(你希望返回一个整数，而不是浮点数)，您可以使用两个波浪号:~~。连续使用两个波浪有效地否定了操作，因为— ( — n — 1) — 1 = n + 1 — 1 = n。 换句话说，~—16 等于15。
const int = ~~"15";console.log(int); // Result: 15console.log(typeof int);Result: "number";
虽然我想不出很多用例，但是按位 NOT 运算符也可以用在布尔值上：~true = -2和~false = -1。
6、性能更好的运算
从 ES7 开始，可以使用指数运算符**作为幂的简写，这比编写Math.pow(2, 3) 更快。 这是很简单的东西，但它之所以出现在列表中，是因为没有多少教程更新过这个操作符。
console.log(2 ** 3); // Result: 8这不应该与通常用于表示指数的^符号相混淆，但在 JavaScript 中它是按位异或运算符。在 ES7 之前，只有以2为基数的幂才存在简写，使用按位左移操作符<<
2 << (n - 1);2 ** n;
例如，2 << 3 = 16等于2 ** 4 = 16。
7、快速浮点数转整数
如果希望将浮点数转换为整数，可以使用Math.floor()、Math.ceil()或Math.round()。但是还有一种更快的方法可以使用|(位或运算符)将浮点数截断为整数。
console.log(23.9 | 0); // Result: 23console.log(-23.9 | 0); // Result: -23
|的行为取决于处理的是正数还是负数，所以最好只在确定的情况下使用这个快捷方式。如果n为正，则n | 0有效地向下舍入。 如果n为负数，则有效地向上舍入。 更准确地说，此操作将删除小数点后面的任何内容，将浮点数截断为整数。你可以使用~~来获得相同的舍入效果，如上所述，实际上任何位操作符都会强制浮点数为整数。这些特殊操作之所以有效，是因为一旦强制为整数，值就保持不变。
删除最后一个数字
按位或运算符还可以用于从整数的末尾删除任意数量的数字。这意味着我们不需要使用这样的代码来在类型之间进行转换。
let str = "1553";Number(str.substring(0, str.length - 1));
相反，按位或运算符可以这样写：
console.log((1553 / 10) | 0); // Result: 155console.log((1553 / 100) | 0); // Result: 15console.log((1553 / 1000) | 0); // Result: 1
8、 类中的自动绑定
我们可以在类方法中使用 ES6 箭头表示法，并且通过这样做可以隐含绑定。 这通常会在我们的类构造函数中保存几行代码，我们可以愉快地告别重复的表达式，例如this.myMethod = this.myMethod.bind(this)
import React, { Component } from React;export default class App extends Compononent {constructor(props) {super(props);this.state = {};}myMethod = () => {// This method is bound implicitly!}render() {return (<><div>{this.myMethod()}</div></>)}};
9、 数组截断
如果要从数组的末尾删除值，有比使用splice()更快的方法。例如，如果你知道原始数组的大小，您可以重新定义它的length属性，就像这样
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];array.length = 4;console.log(array); // Result: [0, 1, 2, 3]
这是一个特别简洁的解决方案。但是，我发现slice()方法的运行时更快。如果速度是你的主要目标，考虑使用：
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];array = array.slice(0, 4);console.log(array); // Result: [0, 1, 2, 3]
10、获取数组中的最后一项
数组方法slice()可以接受负整数，如果提供它，它将接受数组末尾的值，而不是数组开头的值。
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(array.slice(-1)); // Result: [9]console.log(array.slice(-2)); // Result: [8, 9]console.log(array.slice(-3)); // Result: [7, 8, 9]
11、格式化 JSON 代码
最后，你之前可能已经使用过JSON.stringify，但是您是否意识到它还可以帮助你缩进 JSON？stringify()方法有两个可选参数：一个replacer函数，可用于过滤显示的 JSON 和一个空格值。
console.log(JSON.stringify({ alpha: "A", beta: "B" }, null, " "));// Result:// '{// "alpha": A,// "beta": B// }'