第1天 本地存储和[].forEach().call()方法

203 阅读2分钟

1.本地存储

凡是用本地存储后,如果是数组或者对象并且再次使用的话,需要将存储后读取的数据进行json格式化;如下代码:

this.courseList =JSON.parse(sessionStorage.getItem("courseList"))|| [];
this.classList =JSON.parse(sessionStorage.getItem("classList")) || [];

2.forEach方法

forEach方法中的function回调有三个参数: 第一个参数是遍历的数组内容, 第二个参数是对应的数组索引, 第三个参数是数组本身

var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){
    array[index] == value; //结果为true
    sum+=value; 
 });

.forEach() 方法是数组的一种方法,. call() 是javascript的内置函数 改变this指向 可传两种参数,第一个是 一个对象作用域,即指向谁;第二个是 参数列表 父级的实参。

//父级.call(对象,父级函数的参数)
function parent(age){
    this.name="小明"
    this.age=age
}
function Child(){
    parent.call(this,"18")		//第二个参数表示  往函数添加实参		//超类型传参
}
var obj=new Child()
console.log(obj)	//child: [age:"18",name:"小明"]

[].forEach.call() 也就是 Array.prototype.forEach.call(elems, callback)的简写 表示数组 [].forEach 是 call() 的父级 即 [].forEach==*父级,所以 [].forEach.call( obj, 父级的参数)。

//[].forEach.call()  理解
//[].forEach.call(obj,参数)		即参数是[].forEach() 父级的 实参    依次添加

//[].forEach() 存在三个参数    value  index  array  

var arr=[];
[].forEach.call(["a", "b", "c"], function (item) {
    arr.push(item);
});
console.log(arr)		//["a","b","c"]

[1, 2, 3].forEach.call(["a", "b", "c"], function (item, i, arr) {
    console.log(i + ": " + item);
});
// 0: "a"
// 1: "b"
// 2: "c"

[].forEach.call()是一种快速的方法访问forEach,并将空数组的this`换成想要遍历的list.

[] 就是个数组,而且是用不到的空数组,用来就是为了访问原生js中的数组相关方法。 但问题来了,elems的结构明明也可以正常使用forEach,为什么要用一个无用的[].forEach.call(elems, callback)而不直接使用elems.forEach( callback)? 这是因为,elems有时并不一定是一个严格意义上的数组,比如函数内实参类数组arguments,及DOM元素List,这些只是拥有类似于数组的数据结构,并不一定是数组。它们可以被遍历,但它们的原型并不是Array。故而,有时候会出现[].forEach.call(elems, callback)而不直接使用elems.forEach( callback)的情况。 但同样地,如果你明确你要遍历的数据结构的原型是Array,那么使用这种方式就会显得多余和混乱。会造成别人的困扰。