for的各种循环
1、for 循环
let arr = [1,2,3];
for (let i=0; i<arr.length; i++){
console.log(i,arr[i])
}
// 0 1
// 1 2
// 2 3
for 循环是 Js 中最常用的一个循环工具，经常用于数组的循环遍历。
2、for in 循环
let obj = {name:'zhou',age:'**'}
for(let i in obj){
console.log(i,obj[i])
}
// name zhou
// age **
for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj[i] 代表对应的 value
3、for of 循环
let arr = ['name','age'];
for(let i of arr){
console.log(i)
}
// name
// age
for of 循环是 Es6 中新增的语句，用来替代 for in 和 forEach，它允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的数据结构,注意它的兼容性。
4、Array forEach 循环
let arr = [1,2,3];
arr.forEach(function(i,index){
console.log(i,index)
})
// 1 0
// 2 1
// 3 2
forEach循环，循环数组中每一个元素并采取操作， 没有返回值， 可以不用知道数组长度,他有三个参数，只有第一个是必需的，代表当前下标下的 value。
5、Array map()方法
let arr = [1,2,3];
let tt = arr.map(function(i){
console.log(i)
return i*2;
})
// [2,4,6]
let arr = [{
age: 25,
address: '你猜'
}, {
age: 40,
address: '你猜'
}, {
age: 30,
address: '你猜'
}]
// 此时我们要把年龄都加上2
arr = arr.map(item => {
item.age += 2
return item
})
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
注意：map 和 forEach 方法都是只能用来遍历数组，不能用来遍历普通对象。
6、Array filter() 方法
let numbers = ['001','003','004','005','006','007','008','009','010','011','018','019']
arr.filter(item =>{return !numbers.includes(item.groupCode)}) // 多个条件let arr = [
{ name:'小明',sex:0,age:9},
{ name:'小红', sex:1, age:9},
{ name:'小亮', sex:0, age:10 }
]
arr.filter(item => item.age === 9)
// 去掉数组空字符串、undefined、null
let arr2 = [ 1,3,5,null,4,undefined,10,'hahah','','end' ];
console.log(arr2.filter(item => item));
结果为：[1, 3, 5, 4, 10, "hahah", "end"]
// 数组去重的用法
let arr3 = [ 1,3,3,6,5,5,8,9,8,'hahah','wer','hahah' ];
console.log(arr3.filter((item,index,self) => self.indexOf(item) == index));
filter 方法是 Array 对象内置方法，它会返回通过过滤的元素，不改变原来的数组。
7、Array some() 方法
let arr = [1,2,3];
let tt = arr.some(function(i){
return i>1;
})
// true
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）,返回 boolean 值，不改变原数组。
8、Array every() 方法
let arr = [1,2,3];
let tt = arr.some(function(i){
return i>1;
})
// 检测数组中元素是否都大于1
// false
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供），返回 boolean 值，不改变原数组。
9、Array reduce()方法
let arr = [1,2,3];
let ad = arr.reduce(function(i,j){
return i+j;
})
// 6
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
数组去重
1.利用Array.from与set去重
function unique(arr) {
if (!Array.isArray(arr)) {
console.log("type error!");
return;
}
return Array.from(new Set(arr));
}
关于转换
数组转化为对象（Array to Object）
const arr = [1,2,3]
const obj = {...arr}
console.log(obj)
Output:{0: 1, 1: 2, 2: 3}
转换为数字类型
这种是很常见的，大家用的比较多的可能是parseInt()、Number()这种：
const age = "69";
const ageConvert = parseInt(age);
console.log(typeof ageConvert);
Output: number;
其实也可以通过+来实现转换：
const age = "69";
const ageConvert = +age;
console.log(typeof ageConvert);
Output: number;
转换为字符串类型
转换为字符串一般会用toString()、String()实现：
let a = 123;
a.toString(); // '123'
但也可以通过value + ""这种来实现：
let a = 123;
a + ""; // '123'
合并对象/数组
1.对象合并
const obj1 = { a: 1 }
const obj2 = { b: 2 }
const combinObj = { ...obj1, ...obj2 }
console.log(combinObj)
Output:{ a: 1, b: 2 }
2.合并数组
es6提供了一个新方法 flat(depth)，参数depth，代表展开嵌套数组的深度，默认是1
let arr = [1, [2, 3, [4, [5]]]];
arr.flat(3); // [1,2,3,4,5]
3.reduce也可以合并数组，但这里介绍reduce求和
var arr = [1,2,3,4]
var sum = arr.reduce(function (prev, cur) {
return prev + cur;
},0);
console.log(sum) //10
var result = [
{
subject: 'math',
score: 10
},
{
subject: 'chinese',
score: 20
},
{
subject: 'english',
score: 30
}
];
var sum = result.reduce(function(prev, cur) {
return cur.score + prev;
}, 0);
console.log(sum) //60
截断数组
1.如果你有修改数组长度为某固定值的需求，那么你可以试试这个
let array = [0, 1, 2, 3, 4, 5];
array.length = 3;
console.log(array);
Output: [0, 1, 2];
2.获取数组数组一项
let arr = [0, 1, 2, 3, 4, 5];
const last = arr[arr.length - 1];
console.log(last);
Output: 5;
但我们也可以通过slice操作来实现：
let arr = [0, 1, 2, 3, 4, 5];
const last = arr.slice(-1)[0];
console.log(last);
Output: 5;
拷贝数组
1.Array.slice
const arr = [1, 2, 3, 4, 5];
const copyArr = arr.slice();
2.展开操作符
const arr = [1, 2, 3, 4, 5];
const copyArr = [...arr]
3.使用 Array 构造函数和展开操作符
const arr = [1, 2, 3, 4, 5];
const copyArr = new Array(...arr)
4.Array.concat
const arr = [1, 2, 3, 4, 5];
const copyArr = arr.concat();
喜欢第二个。♥
避免多条件并列
开发中有时会遇到多个条件，执行相同的语句，也就是多个||这种：
if (status === 'process' || status === 'wait' || status === 'fail') {
doSomething()
}
这种写法语义性、可读性都不太好。可以通过switch case或includes这种进行改造。
1.switch case
switch(status) {
case 'process':
case 'wait':
case 'fail':
doSomething()
}
2.includes
const enum = ['process', 'wait', 'fail']
if (enum.includes(status)) {
doSomething()
}
条件语句的优化
// 根据颜色找出对应的水果
// bad
function test(color) {
switch (color) {
case 'red':
return ['apple', 'strawberry'];
case 'yellow':
return ['banana', 'pineapple'];
case 'purple':
return ['grape', 'plum'];
default:
return [];
}
}
test('yellow'); // ['banana', 'pineapple']
// good
const fruitColor = {
red: ['apple', 'strawberry'],
yellow: ['banana', 'pineapple'],
purple: ['grape', 'plum']
};
function test(color) {
return fruitColor[color] || [];
}
// better
const fruitColor = new Map()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function test(color) {
return fruitColor.get(color) || [];
}
浮点数转为整数
我们一般将浮点数转化为整数会用到Math.floor()、Math.ceil()、Math.round()。但其实有一个更快的方式：
console.log(~~6.95); // 6
console.log(6.95 >> 0); // 6
console.log(6.95 << 0); // 6
console.log(6.95 | 0); // 6
// >>>不可对负数取整
console.log(6.95 >>> 0); // 6
性能追踪
1.如果你想测试一段js代码的执行耗时，那么你可以尝试下performance：
let start = performance.now();
let sum = 0;
for (let i = 0; i < 100000; i++) {
sum += 1;
}
let end = performance.now();
console.log(start);
console.log(end);
2.还有另外一种方法：
console.time('时间执行');
console.timeEnd('时间执行')
以上皆是转载里然后合并自己喜欢的函数。
