1. JSON

1. JSON字符串, JSON对象
{
  "id": "1",
  "course":"前端开发之企业级深度JavaScript特训课【JS++前端】",
  ...
}
2. JSON对象集合, JSON数据集合
[
  {
    "id": "1",
    "course":"前端开发之企业级深度JavaScript特训课【JS++前端】",
    ...
  },
  {
    "id": "2",
    "course":"前端开发之企业级深度HTML+CSS特训课【JS++前端】",
    ...
  },
]
3. JSON字符串与对象
  1. 字符串 ---> 对象    JSON.parse();
  2. 对象 ---> 字符串 JSON.stringify();

2. 数组拓展方法

2.1 forEach

forEach() 方法对数组的每个元素执行一次给定的函数

语法

arr.forEach(callback(currentValue[, index[, array]])[,thisArg]);

参数
1. callback: 为数组中的每个元素执行的函数, 该函数接受1-3个参数.
  1. currentValue: 数组中正在处理的元素
  2. index: 数组中正在处理的当前元素的索引
  3. array: 正在操作的数组
2. thisArg: 可选参数. 当执行回调函数 callback时, 用作this的值.

返回值 undefined

// 补充, 如果thisArg不传参数,或者为undefined, null, 则this指向全局对象
Array.prototype.myForEach = function(fn){
var arr = this,
   len = arr.length,
   arg2 = arguments[1];
for(var i = 0; i < len; i++){
 fn.apply(arg2, [arr[i], i, arr]);
}
}

2.2 filter

filter() 方法创建一个新的数组, 其包含通过所提供函数实现的测试的所有元素.

语法

var newArray = arr.filter(callback( elem [, index [, array])[, thisArg])
参数
1. callback: 用来测试数组的每个元素的函数. 返回true表示该元素通过测试. 保留该元素, false则不保留.其接收以下三个参数:
  1. element: 数组中当前正在处理的函数
  2. index: 正在处理元素在数组中的索引.
  3. array: 调用了filter的数组
2. thisArg: 执行callback, 用于this的值.
返回值: 一个新的由通过测试的元素组成的数组, 如果没有数组通过测试,则返回空数组. ```javascript Array.prototype.myFilter = function(fn){ var arr = this, len = arr.length, arg2 = arguments[1] newArr= [], item; for(var i = 0; i < len; i++){ item = deepClone(arr[i]); fn.apply(arg2, [arr[i], i, arr]) ? newArr.push(item) : ‘’; }

return newArr; }

function deepClone(origin, target){ var target = target || {}, toStr = Object.prototype.toSring, arrType = ‘[object Array]’;

for(var key in origin){ // 1.判断该项是不是属于 origin本身的属性 if(origin.hasOwnProperty(key)){ // 2. 判断该项是不是对象 if(typeof(origin[key]) === ‘object’){ // 3. 进一步判断该项为数组还是对象 if(toStr.call(origin[key]) === arrType){ target[key] = []; }else{ target[key] = {}; }

    target[key] = deepClone(origin[key], target[key]);
  }else{
    target[key] = origin[key];
  }
}

} return target; }

<a name="HYJfb"></a>
## 2.3 map
> map() -> 创建一个新数组, 这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成
1. 语法
      var newArr = arr.map(callback(currentValue[, index [, array]])[ , thisArg] )
2. 参数
   1.  callback: 为数组中的每个元素执行的函数, 该函数接受1-3个参数.
      1. currentValue: 数组中正在处理的元素
      1. index: 数组中正在处理的当前元素
      1. array: 正在操作的数组
   2. thisArg: 执行 callback 函数时值被用作this
3. 返回值: 一个由原数组每个元素的执行回调函数的结果组成的新数组.
```javascript
Array.prototype.map = function(fn){
  var arr = this,
      len = arr.len,
      arg2 = arguments[1],
      newArr = [];
  for(var i = 0; i < len; i++){
    newArr.push(fn.apply(arg2, [arr[i], i, arr]));
  }
  return arr;
}

3. 使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p class="J-nav">
        <a href="javascript:;"  data-field="all">全部课程</a>
        <a href="javascript:;" data-field="free">免费课程</a>
        <a href="javascript:;" data-field="vip">VIP课程</a>
    </p>

    <ul class="J-list">

    </ul>

    <div id="data" style="display: none">
        [{"id": "1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id": "2","course":"WEB前端工程师就业班之深度JS DOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
        {"id": "3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id": "4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id": "5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
        {"id": "6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
        {"id": "7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}]

    </div>

    <script type="text/html" id="course-tpl">
        <li>{{course}}</li><hr />
    </script>
    <script src="js/utils.js"></script>
    <script type="text/javascript">
        ;(function(){
                var oNav = document.getElementsByClassName('J-nav')[0],
                        oList = document.getElementsByClassName('J-list')[0],
                        data = JSON.parse(document.getElementById('data').innerHTML),
                        courseTpl = document.getElementById('course-tpl').innerHTML;

                var init = function(){
                    oList.innerHTML = renderList(data);
                    bindEvent();
                }

                function bindEvent(){
                    oNav.addEventListener('click', clickNav, false);
                }

                function clickNav(e){
                    var e = e || window.event,
                            tar = e.target || e.srcElement,
                            tarTagName = tar.tagName.toLowerCase();

                    if(tarTagName === 'a'){
                        var field = tar.getAttribute('data-field');

                        oList.innerHTML = renderList(dataFilter(data, field));
                    }
                }

                function dataFilter(data, filed){
                    var arr = data.filter(function(elem, index, arr){
                        switch(filed){
                            case 'all':
                                return true;
                            case 'free':
                                return elem.is_free === '1';
                            case 'vip': 
                                return elem.is_free === '0';
                            default:
                                return true;
                        }
                    });

                    return arr;
                }

                function renderList(arr){
                    var list = '';
                    arr.forEach(function(elem, index, arr){
                        list += courseTpl.replace(/{{(.*?)}}/g, function(node, key){
                            return {
                                course: elem.course
                            }[key]
                        })
                    });

                    return list;
                }

                init();

        })();

    </script>
</body>
</html>

js笔记

1. forEach, filter, map 使用与重写

1. JSON

2. 数组拓展方法

2.1 forEach

2.2 filter

3. 使用