JavaScript学习笔记

作者: 苏敏 | 来源:发表于2017-11-02 18:41 被阅读5次

-------印象笔记不是很好贴图，我就改用简书了---------

数据类型

image.png

逻辑操作符

image.png

数值：

Math.abs(5)   // 5                  取绝对值
Math.abs(-5)  // 5

Math.round(1.1)   // 1             四舍五入
Math.round(1.9)  // 2

Math.ceil(1.1)   // 2               向上取整
Math.ceil(1.9)  // 2

Math.floor(1.1)   // 1               向下取整
Math.floor(1.9)  // 1

Math.max(1,2)      // 2             取最大值
Math.max(-1,-2,-3) // -1

Math.min(1,2)      // 1                取最小值

Math.min(-1,-2,-3) // -3

Math.random()  //                               大于等于0且小于1的随机数
Math.floor(Math.random()*10)    获取一个大于等于0且小于等于9的随机整数

parseInt('1.1')    // 1                 parseInt()函数解析一个字符串，并返回一个整数
parseInt('1.9')    // 1
parseInt('1b2.4')  // 1
parseInt('www')    // NaN

parseFloat('100.1')  // 100.1      parseFloat()函数解析一个字符串，并返回一个浮点数
parseFloat('12.4b5') // 12.4
parseFloat('www')    // NaN

Number('100.1')    // 100.1
Number('12.4b5')   // NaN          Number强制转换成数字类型
Number('www')      // NaN

(100.123).toFixed(2)   //  "100.12"     保留多少位小数点
(100.123).toFixed(0)  //  "100"

字符串：

"micromajor".length  // 10                                             字符串长度

"micromajor".charAt(0)  // "m"                                      从字符串中取得索引位置字符
"micromajor".charAt(100) // ""

"micro-major".indexOf("-")     // 5                                   返回某个指定的字符串值在字符串中首次出现的位置。
"micro-major-web".indexOf("-") // 5
"micro-major".indexOf("major") // 6
"micromajor".indexOf("-")      // -1

"micromajor163".search(/[0-9]/) // 10                       检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,
"micromajor163".search(/[A-Z]/) // -1                        返回的是第一个与正则相匹配的子串的起始位置。search() 方法不执                                                                                     行全局匹配，它将忽略标志 g

"micromajor163".match(/[0-9]/) // ["1"]                        找到一个或多个正则表达式的匹配.该方法类似 indexOf() 和 lastIndexOf()，但是它                                                                                                返回指定的值，而不是字符串的位置
"micromajor163".match(/[0-9]/g)// ["1","6","3"]
"micromajor163".match(/[A-Z]/) // null

"micromajor163".replace("163","###")  // "micromajor###"         在字符串中用一些字符替换另一些字符，或替换一个与正                                                                                                     则表达式匹配的子串
"micromajor163".replace(/[0-9]/,"#")  // "micromajor#63"
"micromajor163".replace(/[0-9]/g,"#") // "micromajor###"
"micromajor163".replace(/[0-9]/g,"")  // "micromajor"

"micromajor".substring(5,7)  // "ma"               截取字符串，传入为负数都是处理成0.
"micromajor".substring(5)    // "major"            以两个参数中较小一个作为起始位置，较大的参数作为结束位置

"micromajor".slice(5,7)   // "ma"                    截取字符串和数组，并且可以为负数
"micromajor".slice(5)     // "major"                 当接收的参数是负数时，slice会将它字符串的长度与对应的负数相加，结果作
"micromajor".slice(1,-1)  // "icromajo"            为参数，也可以理解为负数是从后往前数
"micromajor".slice(-3)    // "jor"

"micromajor".substr(5,2)  // "ma"               substr接收的则是起始位置和所要返回的字符串长度
"micromajor".substr(5)    // "major"

"micro major".split(" ")     // ["micro","major"]              分隔符，把一个字符串分割成字符串数组
"micro major".split(" ",1)  // ["micro"]
"micro2major".split(/[0-9]/) // ["micro","major"]

"MicroMajor".toLowerCase()  // "micromajor"               转小写

"MicroMajor".toUpperCase()  // "MICROMAJOR"           转大写

"0571" + "-" + "88888888"  // "0571-88888888"               字符串拼接

String(163)  // "163"
String(null) // "null"

"micro\"major"  // "micro"major"                              正则转义
"micro\\major"  // "micro\major"
"micro\tmajor"  // "micro major"

想要去除一个字符串的第一个字符，有哪些方法可以实现

 str.subString(1);
 str.slice(1);
 str.subStr(1);
 str.replace(str.charAt(0),"");

image.png

eg:使用不定参数求和

function sum(...rest) {
   var sum = 0;
   for(var x of rest)
   {
       sum += x;
   }
   return sum;
}

function sum() {                          //第二种方式性能会好一点
   var sum =0;
     for(var i=0;i< arguments.length ;i++){
     sum += arguments[i];
   }
   return sum;
}

image.png

类型识别

实现自定义日期类型识别：
视频中说把判断数组和判断对象的位置换一下就会有问题，确实改了以后会出现无法识别数组日期类型，因为数组也是对象的一种，typeof(param) == 'object'会返回true进入逻辑if(typeof(param) == 'object')进行处理，不会进入if(param instanceof Array)中处理。

- /*
- * 输入格式：
- * '2015-08-05'
- * 1438744815232
- * {y:2015,m:8,d:5}
- * [2015,8,5]
- * 返回格式：Date
- */
- function toDate(param){
-   if (typeof(param) == 'string' ||
-       typeof(param) == 'number' ){
-     return new Date(param);
-   }
-   if (param instanceof Array){
-     var date = new Date(0);
-     date.setYear(param[0]);
-     date.setMonth(param[1]-1);
-     date.setDate(param[2]);
-     return date;
-   }
-   if (typeof(param) == 'object') {
-     var date = new Date(0);
-     date.setYear(param.y);
-     date.setMonth(param.m-1);
-     date.setDate(param.d);
-     return date;
-   }
-   return -1;
- }

image.png

视频中关于getConstructorName函数写法存在bug，导致传入 0, false, "", NaN 这些值时，得到错误的返回结果，这里更新如下:
// 视频中obj&&替换成(obj===undefined||obj===null)?obj:(...)这样一个表达式，该表达式实现
// 1. 入参obj如果是undefined和null，则返回其自身;
// 2. 入参obj如果是其他值，则返回obj.constructor&&obj.constructor.toString().match(/function\s*([^(]*)/)[1]的结果;
function getConstructorName(obj){
    return (obj===undefined||obj===null)?obj:(obj.constructor&&obj.constructor.toString().match(/function\s*([^(]*)/)[1]);
}

JS中有哪些场景会出现隐式类型转换？

数字运算符；

"."运算符

if语句；

==运算。

image.png

------------------------------分割线----------------------------------------

Function.prototype.apply()

apply()方法调用一个函数，他具有一个特定的this值，以及作为一个数组提供的参数。

注意：

call()方法的作用和apply()类似，只有一个区别，call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个的参数数组。

语法：

fun.apply(thisArg, [argsArray])

参数

thisArg
在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。
argsArray
一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。

Function.prototype.call()

区别上面说过了不再重复。

我们可以利用call()方法干嘛呢，实际上我们可以让call()中的对象调用当前对象所拥有的function。你可以使用call()来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

在一个子构造函数中，你可以通过调用父构造函数的 call 方法来实现继承，类似于Java中的写法。下例中，使用 Food 和 Toy 构造函数创建的对象实例都会拥有在 Product 构造函数中添加的 name 属性和 price 属性,但 category 属性是在各自的构造函数中定义的。

function Product(name, price) {
  this.name = name;
  this.price = price;

  if (price < 0) {
    throw RangeError('Cannot create product ' +
                      this.name + ' with a negative price');
  }
}

function Food(name, price) {
  Product.call(this, name, price);         //实现类似java的super，即可以继承父类的参数
  this.category = 'food';
}

//等同于
function Food(name, price) { 
    this.name = name;
    this.price = price;
    if (price < 0) {
        throw RangeError('Cannot create product ' +
                this.name + ' with a negative price');
    }

    this.category = 'food'; 
}

//function Toy 同上
function Toy(name, price) {
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

使用call方法调用匿名函数

在下例中的for循环体内，我们创建了一个匿名函数，然后通过调用该函数的call方法，将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法，这个print方法可以打印出各元素在数组中的正确索引号。当然，这里不是必须得让数组元素作为this值传入那个匿名函数（普通参数就可以），目的是为了演示call的用法。

var animals = [
  {species: 'Lion', name: 'King'},
  {species: 'Whale', name: 'Fail'}
];

for (var i = 0; i < animals.length; i++) {
  (function (i) { 
    this.print = function () { 
      console.log('#' + i  + ' ' + this.species + ': ' + this.name); 
    } 
    this.print();
  }).call(animals[i], i);
}

使用call方法调用函数并且指定上下文的'this'

function greet() {
  var reply = [this.person, 'Is An Awesome', this.role].join(' ');
  console.log(reply);
}

var i = {
  person: 'Douglas Crockford', role: 'Javascript Developer'
};

greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer

JavaScript学习笔记

数据类型

逻辑操作符

数值：

字符串：

类型识别

JS中有哪些场景会出现隐式类型转换？

Function.prototype.apply()

注意：

语法：

参数

Function.prototype.call()

我们可以利用call()方法干嘛呢，实际上我们可以让call()中的对象调用当前对象所拥有的function。你可以使用call()来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

使用call方法调用匿名函数

使用call方法调用函数并且指定上下文的'this'

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读