前端js语法摘录--笔记

开发过程中遇到的语法

1.转换所有值的绝对值 Math.abs(value)
2.向上取整 Math.ceil(value) 例： Math.ceil(15.4) = 16 Math.ceil(15.1) = 16 Math.ceil(15.9) = 16
3.向下取整 Math.floor(value) 例： Math.floor(12.9) = 12 Math.floor(12.5) = 12 Math.floor(12.1) = 12
4.四舍五入 Math.rint(）
5.取0.0 – 1.0之间的随机数 Math.random()
6.取最大\最小值 Math.max() Math.min()

es6语法 数组去重

const uniqueArr = (arr) => [...new Set(arr)];
console.log(uniqueArr(["前端","js","html","js","css","html"]));
// ['前端', 'js', 'html', 'css']

检查对象是否为空

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;
isEmpty({}) // true
isEmpty({a:"not empty"}) //false

反转字符串

const reverse = str => str.split('').reverse().join('');
reverse('this is reverse');
// esrever si siht

扩展运算符的应用合并数组

let arr1 = ["你好", "code"];
let arr2 = ["hello", "code"];
let arr = [...arr1, ...arr2];
console.log(arr);

数组克隆

let arr1 = ["你好", "code"];
let arr2 = ["hello", "code"];
let arr = [...arr1, ...arr2];
console.log(arr);
let arr3 = [...arr2];
console.log(arr3);

ES7部分特性
1.includes：检测数组中是否包含某个元素，返回值是布尔值

let arr1 = ['米', 'jaj', 'midq']
console.log(arr1.includes('jaj'))
//true

2.指数操作符：**
指数（乘方）exponentiation运算符

console.log(Math.pow(2, 10));  // ES7之前的用法
console.log(2 ** 10);  // 1024

async和await
ES8对象方法的扩展
Object.values():返回一个给定对象所有可枚举属性值的数组

var arr = [1,2,4,2,3]
Object.values(arr)
//(5) [1, 2, 4, 2, 3]

Object.entries():返回一个给定对象自身可遍历属性[key,value]的数组，方便map()方法遍历

var arr = [1,2,4,2,3]
Object.entries(arr)
(5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
 ['0', 1]
 ['1', 2]
 ['2', 4]
 ['3', 2]
 ['4', 3]

对象的扩展运算符

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

reduce语法
1.基本数据类型求和

var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);
// total  6

2.引用数据类型求和

let arr = [
  {
    value: 45,
  },
  {
    value: 88,
  },
  {
    value: 101,
  },
];
let newArr = arr.reduce((acc, cur) => {
  return acc+ cur.value;
}, 0);
console.log(newArr);   //234

3.扁平数组
3.1二维数组转一维数组（利用concat方法可以将传入的数组参数与当前数组拼接）

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),
 []
);
// [0, 1, 2, 3, 4, 5]

3.2多维数组转一维

let flattened = [[1, [2, 8]], [3, 4, 9], [5, [6, 10]]]
function fn(arr) {
  return arr.reduce((acc, cur) => {
    return acc.concat(Array.isArray(cur) ? fn(cur) : cur);
  }, []);
}
const newArr = fn(flattened );
console.log(newArr); //[1, 2, 8, 3, 4, 9, 5, 6, 10]

4.累加对象里的值

let sum = [{x: 1}, {x:2}, {x:3}].reduce(
    (accumulator, currentValue) => accumulator + currentValue.x
    ,0
);
console.log(sum) //  6

5.计算数组中每个元素出现的次数

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames :
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

6.按属性对object分类

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
var groupedPeople = groupBy(people, 'age');
// groupedPeople :
// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }

ES10数组扩展方法flat：将多维数组转换为低维数组

let arr14 = [1,2,3,4,[5,5,6]]
console.log(arr14.flat())
//[1, 2, 3, 4, 5, 5, 6]