排序
冒泡排序
<script>
var arr = [9, 6, 8, 5, 7, 4, 3, 1, 2]
// 排序:冒泡排序 那相邻的两个数进行比较,得到最大/小的一个数
function bubbleSort(arr) {
for (var i = 0; i < arr.length; i++) { // 比较length轮
for (var j = i; j < arr.length; j++) { // 确定最小的位就不再比较
if (arr[i] > arr[j]) {
var temp = arr[i] // 交换两个数
arr[i] = arr[j]
arr[j] = temp
console.log("交换")
}
}
console.log(arr)
}
return arr
}
bubbleSort(arr)
</script>
快速排序
<script>
var arr = [9, 6, 8, 5, 7, 4, 3, 1, 2]
// 快速排序:
// 找到中间位,比中间位小的放左边,比中间大的放右边
function quickSort(arr){
if(arr.length<1){
return arr
}
var index = Math.floor(arr.length/2)
var center = arr.splice(index,1)[0]
var left = []
var right = []
for(var i = 0;i<arr.length;i++){
if(arr[i]<center){
left.push(arr[i])
}else{
right.push(arr[i])
}
}
console.log(left,center,right)
return quickSort(left).concat(center,quickSort(right))
}
var re = quickSort(arr)
console.log("结果:",re)
</script>
选择排序
function select(arr){
for(var i=0;i<arr.length;i++){
var min = i;
for(var j=i+1;j<arr.length;j++){
if(arr[min]>arr[j]){
min = j;
}
}
var temp = arr[i];
arr[i] = arr[min];
arr[min] = temp;
}
console.log(arr);
return arr;
}
select(arr)
防抖节流
区别
- 防抖节流是优化高频率执行代码的一种手段,如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能
- 为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率
- 都可以通过使用 setTimeout 实现
目的都是，降低回调执行频率。节省计算资源 - 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能
函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次
防抖
function debounce(func, wait) {
let timeout;
return function () {
let context = this; // 保存this指向
let args = arguments; // 拿到event对象
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
节流
function debounce(func, wait, immediate) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout); // timeout 不为null
if (immediate) {
let callNow = !timeout; // 第一次会立即执行，以后只有事件执行后才会再次触发
timeout = setTimeout(function () {
timeout = null;
}, wait)
if (callNow) {
func.apply(context, args)
}
}
else {
timeout = setTimeout(function () {
func.apply(context, args)
}, wait);
}
}
}
ajax
介绍
即异步的JavaScript 和XML，是一种创建交互式网页应用的网页开发技术，可以在不重新加载整个网页的情况下，与服务器交换数据，并且更新部分网页
实现
<script>
// 同步,异步 post与get restFul http请求过程 http响应码
// 01:同步:按顺序从上至下执行阻塞式代码 异步:先执行主线程代码,再去执行非主线程的代码
// 实现异步:回调函数,事件响应函数,订阅与发布模式,promsie sync与await
// ajax默认是异步的,可以
function ajax(url,method,data,config){
return new Promise((resovle,reject)=>{
var xhr = new XMLHttpRequest()
// 打开
xhr.open(method,url)
if(config&&config.headers){
// 设置请求头
for(var k in config.headers){
xhr.setRequestHeader(k,config.headers[k])
}
}
// 等待状态发生变化
xhr.onreadystatechange = function(){
if(xhr.readyState===4){
// 成功
if(xhr.status===200){
resovle(JSON.parse(xhr.responseText))
}else{
// 失败
reject(xhr)
}
}
}
xhr.send(data)
})
}
ajax(url)
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
// 02:post与get
// get:数据大小 post没有限制
// get2k post不缓存
//post通常用来修改,新增,删除 get通常用来获取
//restFul是一种程序设计规范,通常每一个url都是一个资源,可以通过get方法来获取post新增,put修改,delect删除
// http请求过程:在
// 01 浏览器通过域名找到ip
// 02 建立tcp链接,发送请求体与请求头
// 03 服务响应响应体,响应头,
// 04 浏览器解析html 生成dom树(下载css与js)
// 05 解析css 生成css树
// 06 css树与dom树合成为渲染树进行渲染(遇到js先执行js)
// 响应码
// 1开头准备
// 2开头成功 200成功 201创建成功 307重定向 404找不到 401没有权限 500服务器错误
// 3开头重定向
// 4开头客户端错误
// 5开头 服务器错误
</script>
jsonp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 什么是同源 请求的地址与当前页面地址,域名,子域名,端口号一致
// 怎么跨域 jsonp,代理,cors响应头允许,
// jsonp的原理, src没有同源策略
// 统计功能用图片的src没有同源限制
function jsonp(url){
return new Promise((resolve,reject)=>{
// 创建一个src标签
var script = document.createElement("script")
// 定义回调函数
var fun = "callback"+Date.now()
// 拼接url
var src = ""
if(url.includes("?")){
src = url+"&callback="+fun
}else{
src = url+"?callback="+fun
}
// 插入到body
script.src = src
document.body.appendChild(script)
// 当执行回调函数返回数据
window[fun]=function(data){
resolve(data)
document.body.removeChild(script)
}
script.onerror = function(err){
reject(err)
document.body.removeChild(script)
}
})
}
jsonp("url")
.then(res=>{
console.log(res)
})
.catch(err=>console.log(err))
</script>
</body>
</html>
bind call apply
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
Function.prototype.myCall = function(context,...args){
var obj = context||window;
var sy = Symbol('唯一特殊符号');
obj[sy]=this;
obj[sy](...args);
delete obj[sy];
}
function fun(a,b){
console.log(this,a,b);
}
//bind
Function.prototype.myBind = function(context,...args){
context = context?context:window;
var sy = Symbol();
context[sy] = this;
return function(){
var list = [...args,...arguments]
context[sy](...list);
delete context[sy];
}
}
var f = fun.myBind({name:'刘星雨'},4);
f(6);
</script>
</body>
</html>
new关键字
function Person(name, age){
this.name = name;
this.age = age;
}
Person.prototype.sayName = function () {
console.log(this.name)
}
const person1 = new Person('Tom', 20)
console.log(person1) // Person {name: "Tom", age: 20}
t.sayName() // 'Tom'
- new 通过构造函数 Person 创建出来的实例可以访问到构造函数中的属性
- new 通过构造函数 Person 创建出来的实例可以访问到构造函数原型链中的属性（即实例与构造函数通过原型链连接了起来）
- 现在在构建函数中显式加上返回值，并且这个返回值是一个原始类型
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
