初入前端坑
严格模式
关于JavaScript严格模式的一些贴个官网在这儿，但里面还是有点需要说明的，目前（2018年3月10日）还有个不支持的，如果你有兴趣自己试一下这个是不会报错的。但这不耽误你按规范写哈，我就是提一句。
"use strict"
var testObj =
{
prop1: 10,
prop2: 15,
prop1: 20
};
JSON对象
主要是两个方法，贴一下我的代码，还算清晰复制到浏览器就可以看结果了。
//声明一个可爱的“JSON格式”的String
var str ='{"a":"1","b":2,"c":"13"}';
//1、JSON.parse把String转成Object了
var resultPars= JSON.parse(str);
console.log(str);
console.log(resultPars);
console.log("上面这还是String，下面就转成Object的了，typeof一下就更确定了");
console.log("typeof str："+typeof str+" typeof resultPars："+typeof resultPars);
//如果你试了上面的代码就会发现1和13都还是String类型的
//那么可以看看下面这种神奇的使用方法
var resultPars2 = JSON.parse(str, function(key, value){
if (typeof value == 'string'){
return parseInt(value);
} else {
return value;
}
});
//这里的重点我觉得是typeof，不知道你觉得呢
console.log("现在就全都是数值类型的啦");
console.log(resultPars2);
//2、JSON.stringify 可以用来对Json对象进行简单过滤
var luckyNums = JSON.stringify(resultPars, function(key, value){
if (value == 13) {
return undefined;//使用undefined，则键值对就不会包含在最终的JSON中
} else {
return value;
}
});
console.log("这里就少了值为13的键值对了");
console.log(luckyNums);
//JSON.stringify还可以用来做Json格式化，就用上面的这个例子，也好对比
var luckyNums = JSON.stringify(resultPars, function(key, value){
if (value == 13) {
return undefined;//使用undefined，则键值对就不会包含在最终的JSON中
} else {
return value;
}
},4);
console.log("看一下和上面有什么不一样吧");
console.log(luckyNums);
运行结果
Object对象
方法有很多，但常用的是最后一个，其他的也重要哈，只是不太常用
Object.getPrototypeOf
Object.getOwnPropertyDescriptor
Object.getOwnPropertyNames
Object.create
Object.defineProperty
Object.defineProperties
Object.seal
Object.freeze
Object.preventExtensions
Object.isSealed
Object.isFrozen
Object.isExtensible
Object.keys
举个例子怎么用的，这样就可以简单遍历对象了，又贴代码了
var obj = {
a: "1",
b: 2,
c: "13"
}
console.log(typeof obj);
for (var i = 0; i <Object.keys(obj).length; i++) {
console.log(obj[Object.keys(obj)[i]]);
}
运行结果
Array对象
有好多方法在原型链上，下面这些吧，可以看看，然后实验几个
- isArray 判断是否为数组
"use strict"
var str = "aa";
var arr = [1,2,3,4,5,6];
console.info(Array.isArray(str));
console.log(Array.isArray(arr));
运行结果
- forEach 遍历循环数组
//这样就方便计算数组中数据了
arr.forEach(function(item,index,array){
console.log("索引项："+index+" 数组项："+item);
})
- arr.map 处理原数组，返回处理后的值。
var arrObj = [
{name:"one",age:1},
{name:"two",age:2},
{name:"three",age:3},
{name:"four",age:4},
{name:"five",age:5},
{name:"six",age:6},
{name:"seven",age:7},
];
var ages = arrObj.map(function(obj){
return obj.age;//返回值
});
console.log(ages);
运行结果
- arr.filter 过滤器，根据自己的条件进行过滤，filter和上面的map还是有点小区别的，自己发现吧。
"use strict"
var arrObj = [
{name:"one",age:1},
{name:"two",age:2},
{name:"three",age:3},
{name:"four",age:4},
{name:"five",age:5},
{name:"six",age:6},
{name:"seven",age:7},
];
var arrFilter = arrObj.filter(function(obj){
return obj.age>5;//返回值的判断条件
});
console.log(arrFilter);
运行结果
- arr.some 判断数组中是否有满足需要的值，返回true/false
"use strict"
var arrObj = [
{name:"one",age:1},
{name:"two",age:2},
{name:"three",age:3},
{name:"four",age:4},
{name:"five",age:5},
{name:"six",age:6},
{name:"seven",age:7},
];
var somefour = arrObj.some(function(obj){
return obj.age>4;//判断age有没有大于4的,如果有返回true,没有返回false
});
var someten = arrObj.some(function(obj){
return obj.age>10;//判断age有没有大于10的,如果有返回true,没有返回false
});
console.log("判断有没有大于4的："+somefour);
console.log("判断有没有大于4的："+someten);
运行结果
- arr.every 判断数组中是否所有值都满足需要，返回true/false
"use strict"
var arrObj = [
{name:"one",age:1},
{name:"two",age:2},
{name:"three",age:3},
{name:"four",age:4},
{name:"five",age:5},
{name:"six",age:6},
{name:"seven",age:7},
];
var everyfour = arrObj.every(function(obj){
return obj>4;
});
var everyten = arrObj.some(function(obj){
return obj.age>10;//判断age有没有大于10的,如果有返回true,没有返回false
});
console.log("判断是不是所有都大于4:"+everyfour);
console.log("判断是不是所有都大于10:"+everyten);
运行结果
其他的就不试了，有空的时候可以看看这个MDN上的介绍，又一个官方地址Array MDN TODO界面也都挺美的，有空的时候一个一个过一下挺好。
- bind/apply/call 都能起到改变this的效果，但还是有一点区别的
（代码部分来自张鑫旭）
"use strict"
function locate(){
console.log(this.location);
}
function Maru(location){
this.location = location;
}
var kitty = new Maru("cardboard box");
var locateMaru = locate.bind(kitty);
locateMaru();
//apply和call 立即执行，而bind如果不调用是不执行的
locate.apply(kitty)
locate.call(kitty)
据说看了别人的写出来不贴人家的地址是不好的，那么大家点这里可以看原文哦。
网友评论