js的一些有用技巧&字符串、数组操作

1、保留数字两位小数

实现一：number.toFixed(2)

参数：小数点后数字的个数；介于 0 到 20 （包括）之间，实现环境可能支持更大范围。如果忽略该参数，则默认为 0

该方法不会改变原数值。

该方法会返回一个数值的字符串表现形式，保留 digits 位小数。

修改了数据类型：从数字到字符串

实现二：Math.round()

Math.round()方法：四舍五入，取得是整数，不能精确小数位。

保留两位小数先把数据扩大100倍，四舍五入后在缩小100倍即可。

round() 方法可把一个数字舍入为最接近的整数，不修改数据类型

  console.log(9.02.toFixed(2))
  console.log((8).toFixed(2))
  console.log(Math.round(9.02))
  console.log(Math.round(8))
  console.log(Math.round(9.02*100)/100)
  console.log(Math.round(8.1*100)/100)
  console.log(Math.round(8*100)/100)

输出结果：

可知，采用先乘后除可以是Math.round也保留小数，但是对于8.1或者8还是无法保留，这时需要检测结果是否有.再在小数点后补0.

2、对于函数参数传入为不确定（对象）的情况判断及处理

一 传入参数为空或者对象

formatNumber(number, option)

如上：第二个参数option，可能不传，可能传入一个对象，对象的key 为currency

那么可以用如下代码判断，先判断option是否有，再判断currency

  if (option && option.currency=== true) {

二、判断传入参数为null ,''空字符串或者不传入

if (args&&args.length !== 0) {

args可以过滤null和Undefined,args.length可以过滤‘’空字符串或者空数组

js中 0，NaN,'',null,undefined为false

if（[]){}中是会进入{}的.。[]的布尔值是true

举例：[]==![]为true

分析：![]是false

[]==false，都转化为数字，那么0==0所以为true

3、数组扁平化但是只拍平第一层数组

console.log(flattenArray([[1, 2], [[3, 4], 5]])) //[1, 2, [3, 4], 5]

实现：用flag来标识，只进入一次扁平化处理

 function flattenArray(array) {
    var res=[];
     array.map(function(item) {
       var flag=true
       if (flag && Array.isArray(item)){
         res = res.concat(item)
           flag = false;
       }else {
         res.push(item)
       }
     })
    return res
  }

4、将布尔值转化为数字

使用Boolean类型转换，再写一个+

5、如何确定上级作用域

当前函数执行，形成一个私有作用域A，A的上级作用域是谁，和他在哪里执行无关，只和创建定义有关，在哪里创建的，他的上级作用域就是谁

var a=12;
function fn(){ 
   console.log(a);
}
function sum(){
  var a=120;
   fn();
}
sum();  //a=>12

6、对于组装两份相同数据只有一个字段不同，可以通过给函数传参来区分。

var data ={
   firstData:firstData,
   secondData:secondData
}
var firstData = getData();
var secondData = getData(c);
function getData(){
   if(c){
      second.rest = '2';
   }
}

7、关于reduce 高级应用

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值

这个例子index是从0开始的，第一次的prev的值是我们设置的初始值0，数组长度是4，reduce函数循环4次。

结论：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。
实例：求取所有产品的库存*数目

function Inventary() {
            this.items = Array.prototype.slice.call(arguments);
        }
Inventary.prototype = {
                add : function (item) {
                this.items.push(item);
            },

            remove : function (item) {
                var index = this.items.indexOf(item);

                if (index > -1) {
                    this.items.splice(index, 1);
                }
            },

            getTotalPrice : function () {
                var sum = this.items.reduce(function (previousValue, currentValue, index, array) {
                    console.log(previousValue,currentValue,index)
                    return previousValue + currentValue.price * currentValue.quantity;
                },0);

                return sum;
            }
        };
 var peaches = new Product(0, "peaches", 5, 5000),
     carrots = new Product(1, "carrots", 2, 10000),
     bananas = new Product(2, "bananas", 6, 3000),
     inventary = new Inventary(peaches, carrots, bananas);

不加0 时，输出为：

previosValue直接输出了第一个实例对象。而第二轮循环时取到的previosValue的name属性，是一个字符串。

加0时：

可以得知，index从0开始，第一个previosValue为0，之后就是25000

8、格式化json

JSON.stringify  将对象转化为json字符串

JSON.parse 将json串解析为Javascript对象

其中，stringify方法共接收三个参数，两个可选参数，最后一个参数用来格式化显示。

     <textarea id= "show-score" ></textarea>
      const students = [
        {
          name: 'akira',
          score: 100
        },
        {
          name: 'John',
          score: 60
        },
        {
          name: 'Jane',
          score: 90
        }
      ]
      const textarea = document.getElementById('show-score')
      textarea.textContent = JSON.stringify(students,null ,4)
      textarea.textContent = JSON.stringify(students,['name'] ,4)

不加4，则显示为一排，加了以后每行会缩进四个空格。

如果第二个参数为数组。数组的元素为name ，那么会得到只包含学生名的数据。并且可递归。

 

第二个参数，除了传数组，还可以传入函数作为参数。可以替换学生的分数。函数的参数key,value分别指每一个对象的健和值。

如果stringify的第二个参数为函数那么它的返回值如果是undefined，那么对应的属性不会被序列化，如果返回其他的值，那么用返回的值替代原来的值进行序列化。

JSON.parse也有额外的参数，可以传一个函数

 const str = '{"result":true, "count":42}'
      const result = JSON.parse(str, (key, value) => {
        if (typeof value === 'number') return value * 2

        return value
      })
      console.log(result) // {result: true, count: 84}