8.26study（补）
用js实现一个方法，返回数组里出现次数最多的一个元素。
代码：
function maxCountElement(arr) {
var obj={};
for(var i=0;i<arr.length;i++){
//建立空对象，利用对象键值对，以数组元素为键，次数为值。
var key=arr[i];
if(obj[key]){
obj[key]++;
}else{
obj[key]=1;
}
}
var maxCount=0;
var maxElement=arr[0];
var eq = [];
for(var key in obj){
if(maxCount < obj[key]){
maxCount=obj[key];
maxElement=key;
eq.length=0;
}else if(maxCount === obj[key]){
eq.push(key);
}
}
if(eq.length > 0){
for(var j=0;j<eq.length;j++){
maxElement+='，'+eq[j];
}
}
return "该数组中出现次数最多的元素:"+maxElement+"
}
var arr = [1,2,2,3,3,4,5,6];
var res = maxCountElement(arr);
console.log(res);
请用js程序实现二分查找算法，在数组[2,12,30,34,55,59,102,200]中找出59的所在数组下标。
二分法查找：是一种搜索某个值的索引的算法。
基本条件：有序的数组。
思路：将数组折半，分成左右两个数组，判断要查找的数和中间位置数值的大小，来判断要查找的数值在哪一边，之后继续折半查找，直到找到这个数。
方法：二分法查找的两种方法，一种是非递归方式，采用while方式。另一种是递归方式，用if方式递归查找。
代码：
function binary_search(arr, key) {
var low = 0,
high = arr.length - 1;
while (low <= high) {
var mid = parseInt((high + low) / 2);
if (key == arr[mid]) {
return mid;
} else if (key > arr[mid]) {
low = mid + 1;
} else if (key < arr[mid]) {
high = mid - 1;
} else {
return -1;
}
}
}
var arr=[2,12,30,34,55,59,102,200];
var key=59;
binary_search(arr,key)
用js实现一个方法，去重数组里的重复元素。
代码：
Set方法
var arr=[1,1,2,3] var newArr=new Set(arr); console.log(newArr); // JS var arr=[1,2,3,3,4,2,1]; var newArr=[]; for(var i=0;i<arr.length;i++){ if(newArr.indexOf(arr[i])==-1){ newArr.push(arr[i]); } } console.log(newArr);
每隔一秒输出一次i值，i的值初始值为0，每次加1.
js代码：
var i=0;
setInterval(function(){
console.log(i);
i++;
},1000)
实现一个数组柱状图，根据数组的每项作为高度，点击按钮顺序倒叙切换。
代码：
<!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>
#box {
display: flex;
}
/* #sbox{
display: flex;
} */
</style>
</head>
<body>
<div id="box"></div>
<!-- <div id="sbox"></div> -->
<p id="btn">anniu1</p>
</body>
<script>
var arr = [1, 2, 3];
var sBox = document.getElementById('box');
// var ssBox=document.getElementById('sbox');
var btn = document.getElementById('btn');
// 初始
function bed(){
for (var i = 0; i < arr.length; i++) {
var div = document.createElement('p');
console.log(arr[i] * 1000)
div.style.height = arr[i] * 100 + 'px';
div.style.width = 200 + 'px';
div.style.backgroundColor = "red";
div.style.margin = 20 + 'px';
sBox.appendChild(div);
console.log(22)
}
}
bed()
// 按钮
btn.onclick = () =>{
var divOld = document.getElementsByTagName('p');
console.log(divOld)
// if(divOld.length==1){return}
for (var i = 0; i < divOld.length; i++) {
sBox.removeChild(divOld[i]);
}
sBox.removeChild(divOld[0]);
console.log(divOld)
arr = arr.reverse();
console.log(arr);
// for (var i = 0; i < arr.length; i++) {
// var div = document.createElement('p');
// console.log(arr[i] * 1000)
// div.style.height = arr[i] * 100 + 'px';
// div.style.width = 200 + 'px';
// div.style.backgroundColor = "red";
// div.style.margin = 20 + 'px';
// sBox.appendChild(div);
// }
bed()
}
</script>
</html>
vue+echart实现：
loding.....
简单阐述new一个对象的过程
参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new
理解：
H5和小程序的区别：
1.运行环境
传统的h5运行环境是浏览器，包括webview等。
微型小程序运行环境是非完整的浏览器，是基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，大幅提升了小程序的流畅度和性能。
2.开发成本
当开发一个h5的页面需求时，我们考虑的从开发工具，前端框架，模块管理工具，任务管理工具，ui库的选择，接口调用工具，浏览器兼容性等等都需要考虑周到。
而微信提供了统一的开发工具，并且规范了开发标准，所以，作为开发者，你需要专注写代码就ok了，而且，你可以随意调用微信开发中的api，不用担心浏览器的兼容性，
因此，小程序的开发成本逼以往的HTML5开发的web成本低很多。
3.系统权限。
微信能获取更多的系统权限，如网络通讯状态，缓存能力等，这些系统级权限都能和微信小程序无缝衔接，也就是官方宣称的拥有Native App的流畅性能。
而HTML5 web应用则相对少了很多。
4.用户体验。
在打开一个HTML5页面的时候，实际上就是打开一个web网页而网页在浏览的时候，需要在浏览器中进行渲染，这个过程叫加载，无论时间长短，都会给用户一种不灵敏的感觉。
小程序是微信内的云端应用，通过websocket双向通信，本地缓存以及微信底层技术优化实现了小程序接近原生APP的体验。所以在使用小程序的时候，同等网络条件下几乎不用等待，可以像操作普通app一样流畅。
浙公网安备 33010602011771号