关于数组的方法

最新推荐文章于 2025-09-17 19:49:44 发布

转载最新推荐文章于 2025-09-17 19:49:44 发布 · 4.2k 阅读

前端技术专栏收录该内容

24 篇文章

订阅专栏

框架整体介绍

框架和库是什么

库: 仓库, 表示的是很多为了实现特殊功能而封装的, 便于使用开发的 函数, 对象 和 常量等.
    例如:
    // 在 dom 元素下, 获得 复合 tagName 的元素, 
    // 如果不提供 dom 参数, 那么就是默认 document
    function getTag( tagName, dom ) {
        dom = dom || document;
        return dom.getElementsByTagName( tagName );
    }

    getTag( 'div', dv );

    在开发过程中为了实现更加方便的使用, 封装这些方法, 然后组合到一起以供使用, 这样就构成了库.

框架: 是一套完整的开发解决方案. 框架一般提供了一些方便的开发格式与方法, 我们只需要按照他的格式
    使用即可, 不需要关注一些具体的实现.

-> 为什么学习框架封装
    1> 强化原生 js 代码
    2> 培养编程的思想与积累代码结构
    3> 提高对 jq 框架的理解
    4> 强化 js 高级中涉及的理论内容
-> 学习建议
    -> 查漏补缺
        入门一门语言有 4 条经验: 1> 语法关键字通关; 2> 字符串操作; 3> 集合操作( 数组, 键值对 ); 4> 学会文件操作.

        url: http://www.123.com/index.php?a=b&c=d

        解析: 协议, 路径, 域名, 参数, ...

    -> 多思考, 多练习, 多转换思想

选择模块

-> 问题引入
传统编码的问题:
1> 获得元素方法名太长, 出现错误的几率变大.
2> 有重复代码的嫌疑, 获得元素重复, 循环遍历增加样式重复
问题可以再优化, 数组带有 forEach 方法

//选择函数的封装，返回的是一个数组
function select(selector) {
    var arr = [];
    arr.push.apply(arr, document.querySelectorAll(selector));
    return arr;
}

<body>
    <span>fdf </span>
    <p>fdfd</p>
    <span>3333</span>
    <p>vvvvv</p>
    <span>bbbbbbb</span>

</body>
<script>
    //需求：为所有的span和div加上边框

    select('span,p').forEach(function (item, i) {
        console.log(item.nodeName);
        item.style.border = item.nodeName == 'SPAN'?"1px solid red":"1px solid blue";
    })
</script>

数组扩展的方法

-> map 与 forEach 方法
-> ES5 中给数组扩展了一些用于遍历数组元素的方法
map
forEach
some
every

map 映射

遍历数组返回一个新的数组

    将一个( 一组 )数据按照一定的规则, 转为另一个( 一组 )数据, 这个就是映射
    在 js 中就是由 一个数组 得到另一个数组

    var arr = [ 1,2,3 ]; // => 规则 元素扩大一倍

语法:
    数组.map(function ( v, i ) {
        // 对每一个元素进行处理
        // 返回一个数据
    });

  //需求：实现数组元素翻倍
        var arr=[1,2,3];
        var newArr=arr.map((v,i)=>{
            return v*2;
            //如果没有return ,则数组中的元素都会变成undefined
        })

forEach

遍历数组，对每一个元素进行操作

就是在遍历一个数组. forEach 在内部会遍历数组中的每一个元素. 因此我们只需要提供如何操作
元素即可, 也就是说提供一个处理函数, forEach 在遍历每一个元素的时候就会调用该函数.

语法:
    数组.forEach( function ( v, i ) {
        // 写上如何处理第 i 个元素即可
    });

生成列表案例：

//传统方法
//需求：将数组渲染生成列表
        var list=['1.html','2.css','3.javascript','4.高级js'];

        var box = document.getElementById('box1');
        var ul = document.createElement('ul');
        var arr=[];
        list.forEach((v,i)=>{
            arr.push('<li>'+v+'</li>'); 
        })
        ul.innerHTML = arr.join('');
        box.appendChild(ul);

//新的方法
document.getElementById('box2').innerHTML =
             '<ul>'
                +list.map(v=>'<li>'+v+'</li>').join('')+
            '</ul>';

some 与 every

这两个方法专门用来判断数组中的元素

some 表示只要存在即可, 相当于逻辑或运算

//判断数组中是否有负数
        var arr = [1,3,5,3,0];
        console.log(arr.some(v=>v>0));

every 表示每一个都要, 相当于逻辑与运算

    //判断数组中的元素是否都大于0
        var arr = [1,3,5,3,0];
        console.log(arr.every(v=>v>0));

着两个方法是专门用来判断数组中元素的

语法:
    数组.方法名(functiuon ( v, i ) {
        // 需要返回一个 boolean 值, 用于表示对数组中该元素的判断
    });
如果是 every 方法, 必须保证数组中每一个元素都返回 true, 那么 every 方法才会返回 true. 
如果是 some 方法, 表示只要有一个为 true, 那么这个 some 方法的返回值就是 true.

-> each 与 map 方法

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
问题: 要求使用数组生成 table 表格
var datas = [
{ name: ‘jim1’, age: 19, gender: ‘男’ },
{ name: ‘jim2’, age: 39, gender: ‘男’ },
{ name: ‘jim3’, age: 29, gender: ‘女’ },
{ name: ‘jim4’, age: 18, gender: ‘女’ }
];

>

    1> jq 中的 each 与 map
    2> 封装自己的 each 与 map
-> 选择函数封装
    1> 封装对象
    2> 封装伪数组
-> jq 对象本质

框架核心结构
-> 核心结构
1> 带有 new 构造函数的形式
2> 隐藏 new 关键字
3> 完成框架结构
-> 核心方法
1> map 与 each
2> toArray
3> get
-> extend 方法
DOM 操作
-> parseHTML 方法
-> 基本 DOM 方法
-> 成员访问方法
事件模块与样式属性
-> 事件复习
-> on 方法与 off 方法
-> 其他事件
插件机制
-> 插件实现原理
-> 常见插件举例
-> 自定义插件