增 数组.push()

删 数组.splice(开始删除索引,删除几个)

在当前对象中调用当前对象的方法中和属性,必须用this调用

nodeType判断节点类型

节点.nodeType ==  1:元素节点/2:属性节点/3:文本节点

concat 返回的是一个新的数组

封装歌曲列表管理（函数）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script>

         window.onload = function () {

             //给页面中所有的元素添加一个边框  1px solid pink

             //DOM中，没有提供直接获取后代元素的API

             //但是可以通过childNodes来获取所有的子节点

             //先找body的所有子元素

             //再找body的子元素的所有子元素

             function getChildNode(node){

                 //先找子元素

                 var nodeList = node.childNodes;

                 //在用子元素再找子元素  这里就可以递归了

                 //for循环中的条件，就充当了结束的条件

                 for (var i = 0; i < nodeList.length; i++) {

                     //childNode获取到到的节点包含了各种类型的节点

                     //但是我们只需要元素节点  通过nodeType去判断当前的这个节点是不是元素节点

                     var childNode = nodeList[i];

                     //判断是否是元素节点

                     if(childNode.nodeType == 1){

                         childNode.style.border = "1px solid pink";

                         getChildNode(childNode);

                     }

                 }

             }

             getChildNode(document.body);

         }

     </script>

 </head>

 <body>

 <div>1div

     <p>1p<span>1span</span><span>2span</span><span>3span</span></p>

     <p>5p<span>1span</span><span>2span</span><span>3span</span></p>

 </div>

 <div>10div

     <p>1p<span>1span</span><span>2span</span><span>3span</span></p>

     <p>5p<span>1span</span><span>2span</span><span>3span</span></p>

 </div>

 <p>我是第1个p标签</p>

 <p>我是第10个p标签</p>

 </body>

 </html>

面向对象封装歌曲管理

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Title</title>

        <script>

            function SongManager(){

                this.songList = null;

            }

            //在当前对象的方法中，调用当前对象的其他方法，需要使用this

            //例如 在 removeSong方法中调用 selectSong  this.selectSong

            SongManager.prototype = {

                init:function (songList) {

                    this.songList = songList;

                },

                addSong: function (song){

                    this.songList.push(song);

                },

                removeSong:function (songName){

                    var song = this.selectSong(songName);

                    if(song == null){

                        throw "您要删除的歌曲不存在！请重新尝试";

                    }

                    var index = this.songList.indexOf(song);

                    this.songList.splice(index, 1);

                },

                updateSong: function (songName, singer) {

                    var song = this.selectSong(songName);

                    if(song == null){

                        throw "您要修改的歌曲不存在！请重新尝试";

                    }

                    song.singer = singer;

                },

                selectSong: function (songName) {

                    for (var k = 0; k < this.songList.length; k++) {

                        var song = this.songList[k];

                        if(song.songName == songName){

                            return song;

                        }

                    }

                    return null;

                }

            };

            var pwbDEManager = new SongManager();

            pwbDEManager.init([

                {

                    songName:"青藏高原",

                    singer:"潘文斌"

                },

                {

                    songName:"我的换板鞋，摩擦摩擦最时尚",

                    singer:"约翰逊，庞麦郎"

                }

            ]);

            pwbDEManager.addSong({

                songName:"东风破",

                singer:"Jay Chou"

            })

            var gjbDEManager = new SongManager();

            gjbDEManager.init([

                {

                    songName:"两只老虎",

                    singer:"高金彪"

                },

                {

                    songName:"粉刷匠",

                    singer:"高金彪"

                }

            ]);

    //        gjbDEManager.removeSong("李白");

            gjbDEManager.removeSong("两只老虎");

            console.log(pwbDEManager.songList);

            console.log(gjbDEManager.songList);

            //要封装一个歌曲管理的工具

            //特征：歌曲列表

            //行为：增  删  改 查

        </script>

    </head>

    <body>

    </body>

    </html>

递归（练习在最底下）

1.在函数内调用函数自己,就是递归
2.函数不调用不占用内存
3.没有递归结束条件的递归就是死队规

递归的两个要素

1.自己调用自己
2.要有结束的条件

化归思想:把问题由难化易,化繁为简,有复杂变简单的过程成为化归

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload = function () {

            //给页面中所有的元素添加一个边框  1px solid pink

            //DOM中，没有提供直接获取后代元素的API

            //但是可以通过childNodes来获取所有的子节点

            //先找body的所有子元素

            //再找body的子元素的所有子元素

            function getChildNode(node){

                //先找子元素

                var nodeList = node.childNodes;

                //在用子元素再找子元素  这里就可以递归了

                //for循环中的条件，就充当了结束的条件

                for (var i = 0; i < nodeList.length; i++) {

                    //childNode获取到到的节点包含了各种类型的节点

                    //但是我们只需要元素节点  通过nodeType去判断当前的这个节点是不是元素节点

                    var childNode = nodeList[i];

                    //判断是否是元素节点

                    if(childNode.nodeType == 1){

                        childNode.style.border = "1px solid pink";

                        getChildNode(childNode);

                    }

                }

            }

            getChildNode(document.body);

        }

    </script>

</head>

<body>

<div>1div

    <p>1p<span>1span</span><span>2span</span><span>3span</span></p>

    <p>5p<span>1span</span><span>2span</span><span>3span</span></p>

</div>

<div>10div

    <p>1p<span>1span</span><span>2span</span><span>3span</span></p>

    <p>5p<span>1span</span><span>2span</span><span>3span</span></p>

</div>

<p>我是第1个p标签</p>

<p>我是第10个p标签</p>

</body>

</html>

方式二

    <script>

        window.onload = function () {

            //给页面中所有的元素添加一个边框  1px solid pink

            //DOM中，没有提供直接获取后代元素的API

            //但是可以通过childNodes来获取所有的子节点

            //先找body的所有子元素

            //再找body的子元素的所有子元素

            function getChildNode(node){

                //先找子元素

                var nodeList = node.childNodes;

                var result = [];

                //在用子元素再找子元素  这里就可以递归了

                //for循环中的条件，就充当了结束的条件

                for (var i = 0; i < nodeList.length; i++) {

                    //childNode获取到到的节点包含了各种类型的节点

                    //但是我们只需要元素节点  通过nodeType去判断当前的这个节点是不是元素节点

                    var childNode = nodeList[i];

                    //判断是否是元素节点

                    if(childNode.nodeType == 1){

                        result.push(childNode);

                        var temp = getChildNode(childNode);

                        result = result.concat(temp);

                    }

                }

                return result;

            }

            //1.第一次调用时获取body的所有子元素,会把所有的子元素全部放到result里面

            //2.每放进去一个 就找这个子元素的所有子元素  有返回值

            //3.把这个返回值和我们存当前子元素的数组拼接起来 就变成了 子元素 和 孙子元素的集合

            var arr = getChildNode(document.body);

            for (var i = 0; i < arr.length; i++) {

                var child = arr[i];

                child.style.border= "1px solid pink";

            }

        }

    </script>

递归

例子:

1, 2, 3, 4, 5, ..., 100 求和

  1. 首先假定递归函数已经写好, 假设是foo. 即foo(100)就是求1到100的和

  2. 寻找递推关系. 就是n与n-1, 或n-2之间的关系:foo( n ) == n + foo( n - 1 )

var res = foo(100);

var res = foo(99) + 100;

将递推结构转换为递归体

function foo(n){

    return n + foo( n - 1 );

}

上面就是利用了化归思想：

  • 将 求 100 转换为 求 99

  • 将 求 99 转换为 求 98

  • ...

  • 将求 2 转换为 求 1

  • 求 1 结果就是 1

  • 即: foo( 1 ) 是 1

将临界条件加到递归体中(求1的结果为1)

function foo( n ) {

    if ( n == 1 ) return 1;

    return n + foo( n - 1 );

}

练习:

求 1, 3, 5, 7, 9, ... 第n项的结果与前n项和. 序号从0开始

先看求第n项

  1. 首先假定递归函数已经写好, 假设是fn. 那么第n项就是fn(n)

  2. 找递推关系:fn(n) == f(n-1) + 2

  3. 递归体

function fn(n) {

    return fn(n-1) + 2;

}

  1. 找临界条件

    • 求 n -> n-1

    • 求 n-1 -> n-2

    • ...

    • 求 1 -> 0

    • 求 第 0 项, 就是 1

  2. 加入临界条件

function fn( n ) {

    if ( n == 0 ) return 1;

    return fn( n-1 ) + 2;

}
再看求前n项和

  1. 假设已完成, sum( n ) 就是前 n 项和

  2. 找递推关系: 前 n 项和 等于 第 n 项 + 前 n-1 项的和

  3. 递归体

function sum( n ) {

    return fn( n ) + sum( n - 1 );

}

  1. 找临界条件

    • n == 1结果为 1

  2. 加入临界条件

function sum( n ) {

    if (n == 0) return 1;

    return fn(n) + sum(n - 1);

}

练习

2, 4, 6, 8, 10 第 n 项与 前 n 项和

解题方法和上一题一样。

练习

现有数列: 1, 1, 2, 4, 7, 11, 16, … 求 第 n 项, 求前 n 项和.

求第n项

  1. 假设已经得到结果 fn, fn( 10 ) 就是第 10 项

  2. 找递推关系

    • 0, 1 => fn( 0 ) + 0 = fn( 1 )

    • 1, 2 => fn( 1 ) + 1 = fn( 2 )

    • 2, 3 => fn( 2 ) + 2 = fn( 3 )

    • ...

    • n-1, n => fn( n-1 ) + n - 1 = fn( n )

  3. 递归体也就清楚了

  4. 临界条件是 n == 0 => 1

function fn( n ) {

    if ( n == 0 ) return 1;

    return fn( n-1 ) + n - 1;

}
前n项和
function sum( n ) {

    if ( n == 0 ) return 1;

    return sum( n - 1 ) + fn( n );

}

练习

Fibonacci 数列: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, … 求其第 n 项.

递推关系:fn(n) == fn(n-1) + fn(n - 2)

function fib( n ) {

    if ( n == 0 || n == 1 ) return 1;

    return fib( n - 1 ) + fib( n - 2 );

}

练习

阶乘：一个数字的阶乘表示的是从 1 开始 累乘到这个数字. 例如 3! 表示 1 2 3. 5! 就是 1 2 3 4 5. 规定 0 没有阶乘, 阶乘从1开始。

求n的阶乘

function foo ( n ) {

    if ( n == 1 ) return 1;

    return foo( n - 1 ) * n;

}

练习

求幂

  • 求幂就是求 某一个数 几次方

  • 2*2 2 的 平方, 2 的 2 次方

  • 求 n 的 m 次方

  • 最终要得到一个函数 power( n, m )

  • n 的 m 次方就是 m 个 n 相乘 即 n 乘以 (m-1) 个 n 相乘

function power ( n, m ) {

    if ( m == 1 ) return n;

    return power( n, m - 1 ) * n;

}

JS高级. 04 增删改查面向对象版歌曲管理、递归、的更多相关文章

  1. js操作indexedDB增删改查示例

    js操作indexedDB增删改查示例 if ('indexedDB' in window) { // 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本 var r ...

  2. NX二次开发-NX访问SqlServer数据库(增删改查)C#版

    版本:NX9+VS2012+SqlServer2008r2 以前我写过一个NX访问MySQL数据库(增删改查)的文章https://www.cnblogs.com/nxopen2018/p/12297 ...

  3. JS源生代码“增删改查”之增

    51呢最近在做一个管理数据的,第一次接触到用JS的源代码去实现一些功能,才知道网页里的许多功能都是依赖于“增删改查”完成的,下面的几张图片就是对于增的演示: 下面是有关HTML的代码:这个主要是弹窗部 ...

  4. Node.js之mysql增删改查

    1.安装库 npm install mysql 2.编写db.js(用作公共模块) //连接MySQL数据库 var mysql = require("mysql"); var p ...

  5. DOM操作 JS事件 节点增删改查

    --------------------------习惯是社会的巨大的飞轮和最可贵的维护者.——威·詹姆斯 day 49 [value属性操作] <!DOCTYPE html><ht ...

  6. iOS 数据库的增删改查(OC版)

    自己写了几个方法来实现数据的增删改查功能: 首先在TARGETS--->>Build phases里面添加数据库所关联的库文件libsqlite3.tbd 添加完以后,在控制器上添加 #i ...

  7. node.js封装数据库增删改查

    数据库增删改查的封装 小编不容易 const sql = { insert: function (Collection, insertData) { return new Promise((resol ...

  8. js数组的增删改查

    array 数组的增删改: push 从数组后面推入一个元素或多个元素 var arr = [1,2,3]; ​ // 返回:修改后数组的长度 arr.push(4,5,6); pop 删除数组最后一 ...

  9. JS DOM节点增删改查 属性设置

    一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加   删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...

随机推荐

  1. css 字体样式设置大全

    css样式大全(整理版)   字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  2. 使用gulp解决外部编辑器修改Eclipse文件延迟刷新

    本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...

  3. SharePoint Server 2010的移动设备配置方案

    随着微软全新一代办公系统Office 2010 的推出,其所支持的移动方案也日渐受到人们的关注,而这些移动功能则是依赖于 SharePoint 2010 的移动性支持.下面就将大家介绍如何设置 Sha ...

  4. Java IO 整理总结

    read(byte b[], int off, int len) 方法的作用是从输入流中读取 len 个字节,并把数据写入到字节数组b中,并返回实际读取了多少数据.如果没有读取到任何数据,意味着文件已 ...

  5. Win10下使用VSCode配置python运行环境

    VSCode配置python运行环境 安装python 到官网下载python,直接安装即可,在安装过程中可以选择将python加入环境变量 安装VSCode 官网下载,直接安装 配置 安装pytho ...

  6. python常用模块（二）

    1.ConfigParser模块 用于生成和修改配置文档,在python3.x中变更为configparser 1 [DEFAULT] 2 ServerAliveInterval = 45 3 Com ...

  7. Tomcat与MySQL的数据源连接方法

    Tomcat配置数据源,由于项目经常访问数据库,需要不断地打开关闭,这就耗费了大量的资源.所以用数据源的方式访问数据库. 大体步骤: 配置server.xml 配置项目所在的WebRoot/WEB-I ...

  8. IOS UIImagePickerController(拍照或者读取相册)

      UIImagePickerController ● 使用UIImagePickerController就可以进行拍照或者读取相册 ● 通过sourceType属性来决定拍照还是读取相册 ➢ UII ...

  9. 设计模式——抽象工厂模式(AbstractFactoryPattern)

    抽象工厂模式(AbstractFactory):提供一个创建一系列相关或相互依赖对象的接口,而无需指定他们具体的类. UML图: IFactory: package com.cnblog.clarck ...

  10. Android（java）学习笔记54：Android 调用Vibrator震动功能

    1. 之前我编写的代码是如下: package com.himi.vibrate; import android.app.Activity; import android.app.Service; i ...