ECMAScript 5 常用的技巧（一）

2018-01-05  本文已影响0人  BGING

结合自己编码遇到的小坑的积累吧。因此下面会有一些个人的见解，参考书籍《JavaScript高级程序设计》（第三版）

尽量不适用 var 声明局部变量

在 esc5 中 var 声明变量是一个万能的方式，往往因为太便利了就会出现一些问题。例如我其实只是想让一个变量在局部作用域中有效果，但是在下面的代码却出现了问题。

// 猜猜下面执行后的结果。

var a = { a: 2 }
var b = { a: 2 }
if (a) {
    a.a = 1;
    var a = new Object();
    a.a = 3;

}

// 如果你讲 if 里的 var 换成 let 会抛出异常，需要将 a.a=1 注销掉才可以。
console.error(a); // 3

function str(b) {
    b.a = 1;
    var b = new Object();
    b.a = 3;
}
str(b)
console.log(b); // 1

for (var i = 0; i < 3; i++) {
    var b = 2
}
console.log(i); // 3
console.log(b); // 2

所以在声明变量的时候最好是用 let 而不是 var 这也是 ECMAScript6 推荐的做法。

Array 数组

其实数组里还是设计到数据结构栈类似的存储结构，对栈的认识 可以参考这个链接

正则

RegExp 每次执行都会创建一个新的构造函数，并且只接收字符串

// exec 返回匹配的第一个值

// test

函数

// 1、apply、和call 相同点：都是指定方法在被调用的作用域
//                 不同点：apply，第二个参数是，方法接收参数用数组传递；call 是直接一个一个书写。

function a(num1, num2){
    return num1 + num2;
}
 function b(num1, num2){
   //return a.apply(this, arguments);
    return a.call(this, num1, num2);
 }
  b(1,2); //3


// 方法内部继承，实例化方法调用。
  function animal(name){
    this.name= name || "animal";
    this.getName = function(name){
      return this.name;
    }
  }

  function dog(name){
     animal.call(this, name);
  }
  var dog1= new dog("旺财");
  console.log(dog1.getName()); // 旺财


  // 实例化方法继承的方式
  function Animal(){
    this.name= "animal";
    this.getName = function(name){
         return this.name;
    }
  }
  function Dog(){
    this.name ='汪汪'
  }
  var dog= new Dog();
  var animal = new Animal();
  console.log(animal.getName.call(dog, ","));


// functionName.apply(作用域， 参数数组)

function sun(num1, num2){

          return num1 - num2;

      }

      function cont(num1, num2){

          return sun.apply(this, [num1,num2]);  // 这两种都是可以的

          //return sun.apply(this, arguments);

      }

      console.log(cont(1,10)); // -9

数字的处理 toFixed / toExponential / toPrecision

//toFixed 
var a =10;
a.toFixed(2); // 10.00;
// 常见问题，如果对数据的精度要求不是很高的情况下，我们解决 0.1+0.2 != 0.3 的情况
Number((0.1+0.2).toFixed(2)) // 0.30

// 采用科学计数法显示
a.toExponential() // "1e+1"

// 会根据传入的参数，自动的用科学计数法，还是正常的显示十进制    
a.toPrecision(1) // 1e+1;

字符方法 charAt、charCodeAt、concat、slice、substr、substring、toLowerCase、toLocaleLowerCase、toUpperCase、toLocaleUpperCase、fromCharCode、split

var str = 'hello world';
// 获取字符串中指定位置的字符
str.charAt(1); //e

// 获取指定位置字符的字符编码
str.charCodeAt(); //101

// 字符连接,当然后面是可以跟多个参数的。其实更多的时候我们是用 + 来实现字符串的链接
str.concat(" and"," you "); //"hello world and you"

//fromCharCode 的作用与 charCodeAt 方法效果是相反的。参数是字符和数字都可以，前提是能转换成整数
Sting.fromCharCode(101); //e  

// split 经常用来将 string 转换成 Array 类型。
let a = "foo";
let b = a.split("");
b// ['f','o','o'];
// 当然如果想对字符串的操作用 Array 的方法其实可以不用将字符串 split 转换
1. 使用call
Array.prototype.join.call(a,"-"); // f-o-o

Array.prototype.map.call(a, (val) => {
    return val.toLocaleUpperCase()
}).join(".")  // F.O.O

replace 方法的使用

//在以前的时候我都是仅仅简单的使用 replace 替换字符，其实我们可以对 ，替换的字符做一些操作

// 可以给符合的字符增加字符并凭借在一起。
var str = "bat, cat, dat";
var word= str.replace(/(.at)/g, "word ($1)");
alert(word);

// 当然第二个参数也可以是一个方法，传入三个值
// match:匹配的字符
// originalText:被替换的字符
// positoin:被替换字符的位置
var word = str.replace(/(.at)/g, function(match, originalText, position){
    switch(match){
        case "bat" :
            return "bb "+position +' '+originalText;
        case "cat" :
            return "cc "+ position+ ' ' +originalText;
        case "dat" :
            return "dd "+ position +' '+ originalText;
    }
})
alert(word); // "bb 0 bat, cc 5 cat, dd 10 dat"
获取匹配参数说明

在数组中比较数字的大小

// 方法一排序 sort
var arr = [1,2,3,4];

var arrsort = arr.sort(function(a, b){
  return b -a ; // return a-b; 升序
})
arrsort[0]; // 4

//方法二： Math.max， Math.min 
//语法： Math.max(num1,num2,num3...);  但是如果我是想比较数组里的值怎么办呢，这时候就可以用到 eval了
var arr = [1,2,3,4];
var arrStr = arr.toString();
eval("Math.max("+ arrstr +")"); // 4

// 方法三，利用 apply 第二参数可以接收数组的特性，然后结合Math.max & Math.min js 提供的 2 个方法
var arr = [1,2,3,4];
function max(arr){
    return Math.max.apply(Math,arr);  
};
max(arr); // 4

// 方法 4 for 循环判断
var arr = [1,2,3,4];
function max(arr){
  var curr = "";
  for(var i in arr){
    if(arr[i] > curr ){
      curr = arr[i]
    }
  }
  return curr;
}
max(arr); // 4

 // 我知道的暂时就这四种，还缺少性能上的比较，后期看到了在更新。

Math 方法

// Math.max(num1, num2, num3 ...) 获取最大值
// Math.min(num1, num2, num3 ...) 获取最小值
// Math.ceil(num) // 执行向上舍入为最接近的整数
// Math.floor(num) // 执行向下舍入最接近的整数
// Math.round(num) // 执行标准的四舍五入，并且四舍五入小数后一位，只保留整数位置，和toFixed不同
// Math.random() //返回一个 0 ~ 1 之间的随机数，不包括 0 和 1


// 生成 0 - 9 的一个随机数
Math.floor(Math.random() * 10);

// 如果你想生成的 2 - 10 的一个随机数, 然后自己看半天蛮麻烦的。其实别人早已经想到方法了

function selectFrom(lowerValue, upperValue){
  var choices = upperValue -  lowerValue;
  return  Math.floor(Math.random() * choices + lowerValue );
}

备注常见的问题

// 精度要求不高的情况下
Number((0.1+0.2).toFixed(2)) // 0.3
// 判断一个特定值
Number.EPSILON  // 2.220446049250313e-16
if(a - b< Number.EPSILON){
  return true; // 相等
}

1、~~49.1 // 49
2、~~-49.1 // -49
3、 Number.parseInt(49.1) // 49

let d = {
    val: 1
}
console.log(d ==1); // false

let d = {
    val: 1,
    toString: function () {
        return this.val;
     },

}
console.log(d ==1); // false

let d = {
    val: 1,
     toString: function () {
         return this.val;
     },
     valueOf: function () {
         return this.val + 1;
     }
}
console.log(d ==2); // true

// 在使用 == 判断相等的时候，js 会将引用类型数据获取 ToPrimitive 对应的值，会调用 toString 和 ValueOf。

false == "0"; // true -- 晕！
false == 0; // true -- 晕！
false == ""; // true -- 晕！
false == []; // true -- 晕！
"" == 0; // true -- 晕！
"" == []; // true -- 晕！
0 == []; // true -- 晕！

var a = "hello world";
var b = 10;
switch (true) {
    case (a || b == 10):
        // 永远执行不到这里
        console.log(123)
        break;
    default:
        console.log("Oops");
}
// 如果细微的更改下
switch (true) {
    case !!(a || b == 10):
        console.log(123)
        break;
    default:
        console.log("Oops");
}
// 这里执行的结果就是 123， 这样书写仅做参考。

备注

上一篇下一篇

猜你喜欢

热点阅读