JavaScript学习笔记
2017-11-02 本文已影响5人
苏敏
-------印象笔记不是很好贴图，我就改用简书了---------
数据类型
image.png
image.png
image.png
image.png
image.png
image.png
逻辑操作符
- ！
- &&
- ||
image.png
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
image.png
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
image.png
image.png
image.png
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
image.png
image.png
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
image.png
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
