js 不得不知道的秘密

最新推荐文章于 2023-08-28 19:10:40 发布

steven_jxy

最新推荐文章于 2023-08-28 19:10:40 发布

阅读量4.6k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/steven_jxy/article/details/110038799

版权

Js

基本类型

1.递归

函数自己调用自己
注意：递归也是一种循环，注意循环条件的处理，避免出现非必要的无线循环。

code

    let datas = [
  {
    name: '第一阶段 Js 基础入门',
    checked:true,
    children: [
      {
        name: '第一章 走入 JavaScript ',
        checked:false,
        children: [
          {
            name: 'JavaScript 简介',
            checked:true,
          },
          {
            name: 'JavaScript可以做什么？',
            checked:false,
          }
        ]
      } 
  
    ]
  },
  {
    name: '第二阶段 Js 基础入门',
    checked:false,
    children: [
      {
        name: '第一章 走入 JavaScript ',
        checked:false,
        children: [
          {
            name: 'JavaScript 简介',
            checked:false,
          },
          {
            name: 'JavaScript可以做什么？',
            checked:false,
          }
        ]
      } 
  
    ]
  }

]
    
    
     /* 01 forEach循环 */

    // datas.forEach( data =>{
    //   html += `
    //     <li>${data.name}</li>
    //   `
    // })
    // ulElement.innerHTML = html
    
    /* 02 map循环 */
    // ulElement.innerHTML =  datas.map( data =>{
    //   return `
    //   <li>${data.name}</li>
    //   `
    // }).join('')
    

    ulElement.innerHTML =  createHtml(datas)
    
    function createHtml( items， leave=0 ) {
      return items.map( item =>{

        let str=  `
          <li style="padding-left:${30*leava}px">${item.name}</li>
        `;

        if( Array.isArray( item.children ) ) {
          str += createHtml(item.children, leave+ 1)
        }

        return str;

      }).join('')
    }

效果

第一阶段 Js 基础入门
第一章走入 JavaScript
JavaScript 简介
JavaScript可以做什么？
第二阶段 Js 基础入门
第一章走入 JavaScript
JavaScript 简介
JavaScript可以做什么？

2. 数组扁平化（降维）

问题：现有数据结构不利于数据检索

Array.prototype.flat() 参数 depth 可选指定要提取嵌套数组的结构深度，默认值为 1。（ Infinity ）无穷

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

Array.prototype.reduce(function(total, currentValue, currentIndex, arr), initialValue):es5.1 addfled 相当于累加器
两个参数

code ( datas ) 同上


//数据扁平化处理

01.

function flat(items) {
      let newArr = [];

      items.forEach ( item =>{
        newArr.push(item)

        if(Array.isArray( item.children )) {
          newArr =  newArr.concat(flat(item.children))
        }
      } )

      return newArr;
    }

    console.log( flat(datas) )

    let newItems = flat(datas)

    console.log(newItems.filter( item => item.checked))
    
02.

    function flat (items) {
      return items.reduce( ( pre, current ) =>{
        return pre.concat(
            current,
           Array.isArray( current.children ) ? flat( current.children ) : []
          )
      },[] )
    }

    console.log( flat(datas) )

    let newItems = flat(datas)

    console.log(newItems.filter( item => item.checked))

排序

1.sort（）

code


<body>

  <table id="Table" width='100%', border="1px">
    <thead>
      <tr>
        <th>章节</th>
        <th>类型</th>
        <th>知识点</th>
      </tr>
    </thead>
    <tbody>

    </tboby> 
  </table>
  
</body>

<script>
   let datas = [
    {
      chapter: 22,
      type: '客户端信息存储',
      title: 'cookie'
    },
    {
      chapter: 23,
      type: '前后端交互',
      title: 'XMLHttpRequest 对象'
    },
    {
      chapter: 22,
      type: '客户端信息存储',
      title: 'Application Cache'
    }
  ];

  let Table = document.querySelector('#Table');

  let Tbody = Table.tBodies[0];

  datas.sort((a, b) => a.chapter - b.chapter);

  Tbody.innerHTML = creatHTML( datas )
  
  function creatHTML( items ){
    return items.map(item => {
      return `
          <tr>
            <td> ${item.chapter} </td>  
            <td> ${item.type} </td> 
            <td> ${item.title} </td> 
          <tr>
      `
    }).join('')
  }

 



</script>

2.冒泡排序

code

<script>
//冒泡排序 从左到右 ，两两相比  , isOk 判断当前是否排序好了！

let arr1 = [6,1,2,7,9,3,4,5,10,8]

for(let j=0;j<arr1.length;j++) {

      let isOk = true

      for(let i=0; i<arr1.length-1-j;i++){
      let a = arr1[i];
      let b = arr1[i+1];
      if(a > b ){
        arr1[i] = b;
        arr1[i+1] = a
        isOk = false
      }

    }

    if(isOk) {
      break;
    }

    console.log( arr1.toString() )


}

console.log(arr1)



</script>

3.快速排序

最低0.47元/天解锁文章

steven_jxy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 不得不知道的秘密

Js基本类型1.递归函数自己调用自己注意：递归也是一种循环，注意循环条件的处理，避免出现非必要的无线循环。code let datas = [ { name: '第一阶段 Js 基础入门', checked:true, children: [ { name: '第一章走入 JavaScript ', checked:false, children: [ {
复制链接

扫一扫