编程

Posted 2022-12-15 Leatitia

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了编程相关的知识，希望对你有一定的参考价值。

用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

function randomArr(arr) 
	var num = randomNumber();
    if (arr.indexOf(num)< 0)
        arr[i] = num;
        i++;
     else 
        num = randomNumber();
    
    if (i>=arr.length)
        return;
    else
        randomArr(arr,num)
    

function randomNumber() 
    return Math.floor(Math.random()*31 + 2)


var arr = new Array(5);
var i = 0;
randomArr(arr);

圣杯布局和双飞翼布局的理解和区别，代码实现：
两者都是为了不让左右遮住middle

圣杯布局：父元素设置padding给左右腾位置，从而不会遮住middle内容

<body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>

<style>
#hd
    height:50px;
    background: #666;
    text-align: center;

#bd
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;

#middle
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;

#left
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;

#right
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;

#footer
    height:50px;
    background: #666;
    text-align: center;

</style>

双飞翼布局：middle设置margin，限制内部内容区域，以防左右遮挡middle内容

<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

<style>
#hd
    height:50px;
    background: #666;
    text-align: center;

#middle
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;

#left
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;

#right
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;


/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside
    margin:0 200px 0 180px;
    height:100px;

#footer  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
 
</style>

写一个方法去掉首尾空格

const str = '  s t  r  '

const POSITION = Object.freeze(
  left: Symbol(),
  right: Symbol(),
  both: Symbol(),
  center: Symbol(),
  all: Symbol(),
)

function trim(str, position = POSITION.both) 
  if (!!POSITION[position]) throw new Error('unexpected position value')
  
  switch(position) 
      case(POSITION.left):
        str = str.replace(/^\\s+/, '')
        break;
      case(POSITION.right):
        str = str.replace(/\\s+$/, '')
        break;
      case(POSITION.both):
        str = str.replace(/^\\s+/, '').replace(/\\s+$/, '')
        break;
      case(POSITION.center):
        while (str.match(/\\w\\s+\\w/)) 
          str = str.replace(/(\\w)(\\s+)(\\w)/, `$1$3`)
        
        break;
      case(POSITION.all):
        str = str.replace(/\\s/g, '')
        break;
      default: 
  
  
  return str


const result = trim(str)

console.log(`|$result|`) //  |s t  r|

删除字符串最后一个指定字符

//方法一  lastIndexOf()
function delLast (str,del) 
	if (tpeof str !== 'string') 
	alert('请确认要删除的对象为字符串！');
	retrun false;
	 else 
	let index = str.lastIndexOf(del);
	str.substring(0,index ) + str.substring(index+1,str.length);
	


//方法二  反转字符串
function delLast(str, target) 
  return str.split('').reverse().join('').replace(target, '').split('').reverse().join('');


const str = delLast('asdfghhj', 'h')

console.log(str) // asdfghj

写一个方法把下划线命名转为驼峰命名：

//方法一  
function toCamel(str) 
	 if(str.split('_').length==1)return;
	  str = str.replace(/(\\w)/, (match, $1) => `$$1.toUpperCase()`)
	  while(str.match(/\\w_\\w/)) 
	    str = str.replace(/(\\w)(_)(\\w)/, (match, $1, $2, $3) => `$$1$$3.toUpperCase()`)
	  
	  return str


console.log(toCamel('a_c_def')) // ACDef 

//方法二
function changeStr(str)
   if(str.split('_').length==1)return;
   str.split('_').reduce((a,b)=>
     return a+b.substr(0,1).toUpperCase() + b.substr(1)
   )

写一个把字符串大小写切换的方法

function caseConvert(str)
    return str.replace(/([a-z]*)([A-Z]*)/g, (m, s1, s2)=>
	return `$s1.toUpperCase()$s2.toLowerCase()`
    )

caseConvert('AsA33322A2aa') //aSa33322a2AA

css实现三角形

.rect 
      width: 0;
      height: 0;
      background-color: #fff;
      border-right: 100px solid transparent;
      border-left: 100px solid transparent;
      border-top: 100px solid rgb(29, 156, 194);
      border-bottom: 100px solid transparent;
 
	/*方法二*/
	.triangle:after
	    content: '';
	    border: 35px solid transparent;
	    border-bottom-color: lightgreen;

写一个去除制表符和换行符的方法
\\s会匹配空格，还是老实用[\\t\\n\\v\\r\\f]

var str = '大家好  阿斯蒂芬阿斯顿\\n发生的发生';
function fn(str) 
     var s = str.replace(/\\t|\\n|\\r|\\f/g, "");
     return s;
 
 console.log(fn(str))

统计某个字符或者字符串在另一个字符串中出现的次数

//方法一
function count(str, param) 
  const reg = new RegExp(param, 'g');
  return str.match(reg).length;

//方法二
var childInNums = parent.split(child).length - 1

简单的加密字符串的方法

// String.fromCharCode()  返回字符串的Unicode编码
function strEncrypt(str) 
  return str.split('').map(s => 
    return String.fromCharCode(s.charCodeAt() + 1)
  ).join('')


console.log(strEncrypt('hello world')) // ifmmp!xpsme

简单的判断数据类型的方法

// "Array", "Function", "Object", "RegExp", "Date"
// "Boolean", "Number", "String"
function myType(v)
    return Object.prototype.toString.call(v).replace(/^.8(.+)]$/,(m,$1)=> $1.toLowerCase());

获取当前url查询字符串中参数的方法

window.location.search可直接获取
function urlParam(url)
    const param = ;
    url.replace(/[?&](.*?)=([^&]*)/g,(m,$1,$2)=> param[$1] = $2);
    return param;

数组去重的方法（支持多维）

function flat(arr, target) 
  arr.forEach(item => 
    if (Array.isArray(item)) 
      flat(item, target)
     else 
      target.push(item)
    
  )


function flatArr(arr) 
  let result = []
  flat(arr, result)
  return result


function uniqueArr(arr) 
  return [...new Set(flatArr(arr))]


const result = uniqueArr([1, 2, 3, 4, [3, 4, [4, 6]]])

console.log(result) // 1,2,3,4,6

检测中文的方法：

//使用的Unicode 编码 4e00 和 9fa5 分别表示第一个汉字和最后一个汉字的编码
function isChinese(str) 
  const re = /^[\\u4e00-\\u9fa5]+$/;
  return re.test(str);

获取数组最大最小值的方法

const getMinAndMax = arr => (
  // 数组展开在 ES5 中可以用 apply 代替
  // ES5: Math.min.apply(null, arr)
  min: Math.min(...arr),
  max: Math.max(...arr)
);

写一个方法判断是否是回文字符串

var isPalindrome = function(s) 
	  if (s.length === 1) return true
	  const str = s.replace(/[^a-zA-Z0-9]/g, "").toLowerCase()
	  const strReverse = str.split('').reverse().join('')
	  return str === strReverse
;

div模拟texterea

<style>
.edit
    width: 300px;
    height: 200px;
    padding: 5px;
    border: solid 1px #ccc;
    resize: both;
    overflow:auto;

</style>
<body>
    <h3>用一个div模拟textarea的实现</h3>
      <div class="edit" contenteditable="true">
        这里是可以编辑的内容，配合容器的 overflow ，多行截断，自定义滚动条，简直好用的不要不要的。
    </div>
</body>

手写一个幻灯片效果
找出一个字符串中最长的字符

function maxLengthString(str)
 str.split('').reduce(function(start,end)
   return start>end?start.leng以上是关于编程的主要内容，如果未能解决你的问题，请参考以下文章 
 （转） 三种编程命名规范（匈牙利命名法驼峰式命名法帕斯卡命名法）
 三种编程命名规范（匈牙利命名法驼峰式命名法帕斯卡命名法）
 转载——三种编程命名规范（匈牙利命名法驼峰式命名法帕斯卡命名法）
 下划线比小驼峰差
 编程的命名法
 阿里巴巴Java开发手册上常规的编程命名总结