JavaScript笔记

最新推荐文章于 2024-03-16 13:21:00 发布

原创最新推荐文章于 2024-03-16 13:21:00 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript基础 #算法 #语句

前端同时被 2 个专栏收录

20 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

JavaScript

< script >标签

在 HTML 中，JavaScript 代码必须位于 < script > 与 < /script > 标签之间。

// An highlighted block
<script>
document.getElementById("demo").innerHTML = "JavaScript";
</script>

注释：旧的 JavaScript 例子也许会使用 type 属性：< script type=“text/javascript”>(可以省略)。

JavaScript 引用

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。
例如，当发生事件时调用函数，比如当用户点击按钮时。

< head >中的 JavaScript

// An highlighted block
<!DOCTYPE html>
<html>
<head>
<script>
   document.getElementById("demo").innerHTML = "Hello JavaScript！";
</script>
</head>
<body>
</body>
</html>

< body >中的 JavaScript

// An highlighted block
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
   document.getElementById("demo").innerHTML = "Hello JavaScript！";
</script>
</body>
</html>

外部 JavaScript
外部JavaScript文件可以放在< head >或< body >中

// An highlighted block
<script src="myScript.js"></script>

JavaScript 输出

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框

// An highlighted block
<script>
   window.alert（ "Hello JavaScript！"）;
</script>

使用 document.write() 写入 HTML 输出

// An highlighted block
<script>
   document.write（ "Hello JavaScript！"）;
</script>

使用 innerHTML 写入 HTML 元素

// An highlighted block
<script>
    document.getElementById("demo").innerHTML = "Hello JavaScript！";
</script>

使用 console.log() 写入浏览器控制台

// An highlighted block
<script>
    console.log("Hello JavaScript！");
</script>

JavaScript 变量的声明

JavaScript里面的变量的初始化问题：
定义变量
严格区分大小写
关键字：
var——弱类型语言
15种数据类型：
int uint long ulong sbyte byte string char bool float double dec… object
声明变量格式：
var 变量名称是否初始化
命名规则：
驼峰
声明单个变量：

// An highlighted block
<script>
	var setName;
</script>

如需赋值，可使用等号：

// An highlighted block
<script>
	var setName;
	setName="Hello!";
</script>

声明变量时赋值：

// An highlighted block
<script>
	var setName="Hello!";
</script>

声明多个变量：

// An highlighted block
<script>
	 var b,c;
     console.log(b, c);
     b=c=10;
     console.log(b, c);
</script>

注释：变量在使用之前切记初始化

变量的数据类型：
number string boolean object null undefined
typeOf 检测变量的数据类型

// An highlighted block
<script>
     var a=10;
     var b="nihao";
     var c=true;
     var d={};//对象
     var e=[];//数组
     var f=null;//空对象引用
     var g=undefined;
     console.log(typeof a);//number
     console.log(typeof b);//string
     console.log(typeof c);//boolean
     console.log(typeof d);//object
     console.log(typeof e);//object
     console.log(typeof f);//object
     console.log(typeof g);//undefined
     console.log(typeof showname);//function
     function showname(){}
</script>

值类型：值
值的引用空间不变
引用类型：function 对象
引用的位置是可变的
变量的提升
变量会被JavaScript 提前声明

// An highlighted block
<script>
	 console.log(a);//undefined
     var a=10;
     console.log(a);
</script>

变量的作用域
变量的作用范围

// An highlighted block
<script>
	var a=10;
    function f1(){
        var b=15;
        console.log(b,a);
    }
    function f2(){
        var b=15;
        console.log(b,a);
    }
    f1();
    f2();
</script>

JavaScript 函数的声明

JavaScript面向对象开发

对象：
世间万物都是对象
属性和行为：
被动——事件
主动——方法
关键字：function

// An highlighted block
<script>
	 function show() {
        console.log(1);
    }
</script>

注释：函数也会被提前声明，如果不被提前声明 show is not a function

带返回值的函数

// An highlighted block
<script>
function show() {
        console.log();
        return '1';
    }
</script>

带参函数（形参、实参）

// An highlighted block
<script>
    var a = show();
    console.log(a);
</script>

// An highlighted block
<script>
    function show(name, sex, age) {
        return name;
    }
    var name = showname("张蓝", "女", 18);
    console.log(name);
</script>

注释：如果函数没有参数列表，取值按照集合来取值，key：value 索引

// An highlighted block
<script>
    function showData() {
    console.log(arguments[0], arguments[1],
    arguments.length);
    }
    showData("张蓝", 18);
</script>

匿名函数
不带函数名称的函数用变量去接收，匿名函数不提前声明

// An highlighted block
<script>
    var list = function () {
        console.log(arguments);
        return arguments[0];
    }
    console.log(list(1, 2, 3));
</script>

自执行函数
自执行的函数体，有实参、形参和返回值

// An highlighted block
<script>
    var setA = (function (x, y) {
        console.log(x, y);
        console.log(arguments);
        return x + y;
    })(1, 2);
    console.log(setA);
</script>

JavaScript 闭包

变量的闭包：
使用别人的局部变量，闭包会大量占用内存，会导致网页内存泄露，尽量避免使用闭包，会将闭包的值存在内存里面

// An highlighted block
<script>
    function f1(){
        var a=10;
        return a;
    }
    function f2(){
        console.log(f1());
    }
    f2();
</script>

注释：
在声明变量时不写var，声明变量为全局变量
js里面定义全局变量，全局方法都是window属性，浏览器最大对象

dom元素的获取

在进行dom元素获取的时候注意获取的元素是否初始化

获取方式（8种）
常规获取（动态获取）：
document.getElementsByClassName()
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()

在js里面不能进行隐式迭代（不能操作一堆元素只能操作单个元素）
HTMLCollection——数组，取元素对象，按照索引来取值

// An highlighted block
<script>
    var a=document.getElementsByClassName("block");
    a.innerHTML="11";
    a[0].innerHTML = "11"
</script>

单个对象

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="block" name="blist" id="btn"></div>
<div class="block" name="blist" id="btn1"></div>
<script>
    var a= document.getElementById("btn");
    console.log(a);
</script>
</body>
</html>

集合类型

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="block" name="blist" id="btn"></div>
<div class="block" name="blist" id="btn1"></div>
<script>
    var a1= document.getElementsByName("blist");  
    console.log(a1);
</script>
</body>
</html>

HTMLCollection 集合

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="block" name="blist" id="btn"></div>
<div class="block" name="blist" id="btn1"></div>
<script>
    var a2= document.getElementsByTagName("div");
    console.log(a2);
</script>
</body>
</html>

选择器获取

返回单个元素

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="block" name="blist" id="btn"></div>
<div class="block" name="blist" id="btn1"></div>
<script>
    var a3 = document.querySelector("#btn");
    console.log(a3);
</script>
</body>
</html>

返回的是多个元素 NodeList 集合

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="block" name="blist" id="btn"></div>
<div class="block" name="blist" id="btn1"></div>
<script>
    var a4=document.querySelectorAll("#btn1");
    console.log(a4);
</script>
</body>
</html>

特定的获取元素
body 获取
console.log(document.body);
html 获取
console.log(document.documentElement);

dom元素事件

键盘事件
onkeydown onkeyup onkeypress
鼠标事件
onmouseover onmousemove onmouseout（包涵垂直离开） onmouseleave(水平离开) onclick ondbclick onmousedown onmouseup oncontentmenu
表单事件
onfocus onblur onselected onchange
浏览器事件
onload onreload onresize
onerror
JavaScript事件写法：

直接在标签上写

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn" onclick="showname()">按钮</button>
<script>
	function showname() {
    	alert("张三");
    }
</script>
</body>
</html>

动态绑定事件

// An highlighted block
<script>
	 var btn = document.querySelector("#btn");
     btn.onclick = function () {
     alert("张三");
     btn.onclick=null;
     }
 </script>

// An highlighted block
<script>
	 btn.onclick=showalert;//不加括号
     function showalert(){
     alert("张三");
     }
</script>

注释：不能一次性绑定多个事件

事件的监听

事件的冒泡：
false冒泡里—外；true捕获外—里；默认是冒泡
事件的监听:
不写第三个参数，默认false，冒泡 —click

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            height: 30px;
            width: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <p>1111</p>
    <li>2</li>
</ul>
<script>
    var ul = document.getElementsByTagName("ul");
     var li = document.getElementsByTagName("li");
     ul[0].addEventListener("click", function () {
     console.log(1);
     },true);
     li[0].addEventListener("click", function () {
     console.log(2);
     },true);
</script>
</body>
</html>

处理事件冒泡：—阻止事件冒泡

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            height: 30px;
            width: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <p>1111</p>
    <li>2</li>
</ul>
<script>
    var ul = document.getElementsByTagName("ul");
     var li = document.getElementsByTagName("li");
     ul[0].addEventListener("click", function (e) {
     console.log(1);
     });
     li[0].addEventListener("click", function (e) {
     console.log(2);
     e.stopPropagation();
     });
</script>
</body>
</html>

注释：阻止事件冒泡，在原生js里面阻止事件冒泡是 e.stopPropagation(); return false

事件的执行参数 -有开发者使用的相关属性和方法

// An highlighted block
<script>
    document.body.onkeypress=function (){
    //1.事件的执行对象直接添加事件匿名函数上面
    //获取按键键值
     console.log(e.keyCode);
     //2.可以直接声明变量使用window.event  调用事件的执行对象
     var e=window.event;
     console.log(e);
</script>

事件的委托：click事件委托

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            height: 30px;
            width: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <p>1111</p>
    <li>2</li>
</ul>
<script>
    var ul = document.getElementsByTagName("ul")[0];
    var li = document.getElementsByTagName("li")[0];
    ul.onclick = function (e) {
        //输出的当前点击的元素
        //找到委托的元素对象
        var child = e.target || e.srcElement;
        console.log(e);
        if (child.nodeName.toLowerCase() == "li") {
            console.log(1);
        }
    }
</script>
</body>
</html>

JavaScript this指针
函数里面的this 指代window对象
事件里面的this指代当前执行事件的对象

JavaScript 运算符

算数运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	系数
++	递加
–	递减

逻辑运算符

运算符	描述
&&	逻辑与
丨丨	逻辑或
！	逻辑非

比较运算符

运算符	描述
==	等于
===	恒等于
！=	不等于
>	大于
<	小于
>=	大于等于
<=	小于等于
?	三元运算符

JavaScript 语句

循环语句
for 循环
循环代码块一定的次数

// An highlighted block
<script>
	function myFunction(){
		var x="";
		for (var i=0;i<5;i++){
			x=x + "该数字为 " + i + "<br>";
	}
	document.write(x);
}
</script>

for/in 循环
循环遍历对象的属性

// An highlighted block
<script>
	var txt = "";
	var person = {fname:"Bill", lname:"Gates", age:62}; 
	var x;
	for (x in person) {
  		txt += person[x] + " ";
	}
	document.write(txt);
</script>

while 循环
当指定的条件为 true 时循环指定的代码块

// An highlighted block
<script>
	var x="",i=0;
	while (i<5){
		x=x + "该数字为 " + i + "<br>";
		i++;
	}
	document.write(x);
}
</script>

do/while 循环
while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

// An highlighted block
<script>
	var x="",i=0;
	while (i<5){
		x=x + "该数字为 " + i + "<br>";
		i++;
	}
	document.write(x);
}
</script>

条件语句
If 语句
只有当指定条件为 true 时，该语句才会执行代码。

// An highlighted block
 <script>
	if (condition)       
  	{       
 		当条件为 true 时执行的代码        
  	}
</script>

If…else 语句
if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

// An highlighted block
 <script>
	if (condition)        
  	{       
  		当条件为 true 时执行的代码      
  	}        
	else        
  	{        
  		当条件不为 true 时执行的代码        
  	}
</script>

switch
switch 语句用于基于不同的条件来执行不同的动作

// An highlighted block
<script>
var day=new Date().getDay();
switch (day)
{
case 6:
  x="Today it's Saturday";
  break;
case 0:
  x="Today it's Sunday";
  break;
default:
  x="Looking forward to the Weekend";
}
</script>

JavaScript 元素属性操作

操作当前元素的文本值
btn.innerHTML 或者btn.innerText

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn" class="btnlist" style="width: 100px; border: 1px solid red;">按钮</button>
<script>
	btn.innerHTML="点击我"  //如果给的值里面包含标签   自动解析标签
	btn.innerText="点击我"   //直接显示
	btn.innerHTML="<span>我是按钮</span>";
	btn.innerText="<span>我是按钮</span>";
</script>
</body>
</html>

操作元素的样式

js操作的样式为元素的行内样式

// An highlighted block
 <script>
	btn.style.backgroundColor="red";
	console.log(btn.style.width);
</script>

js不能直接操作内嵌或者外部样式
如何获取内嵌样式或者外部样式
console.log(window.getComputedStyle(btn).width);
getAttribute也可以用来获取自定义的属性

// An highlighted block

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn" class="btnlist" style="width: 100px; border: 1px solid red;">按钮</button>
<script>
	console.log(btn.getAttribute("id"));
	console.log(btn.getAttribute("class"));
	console.log(btn.getAttribute("style"));
</script>
</body>
</html>

自定义属性
规则 data-src

// An highlighted block

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn" class="btnlist" style="width: 100px; border: 1px solid red;">按钮</button>
<script>
	btn.setAttribute("data-src", "./img/1.jpg");
    //读取自定义属性
    console.log(btn.getAttribute("data-src"));
</script>
</body>
</html>

js里面数据类型的强制转化

// An highlighted block
<script>
	var a = "123";
    console.log(parseInt(a));
    var b = "1.23";
    console.log(parseFloat(b));
    console.log(parseInt(b));
    var c = "100px";
    console.log(parseInt(c));
</script>

JavaScript节点操作及元素创建

childNodes 子节点，包涵文本元素—NodeList集合—length属性
nodeType 1 代表元素 3 代表字符
nodeName 当前节点的名称
nodevalue 标签的值为null，文本节点的值为文本

获取当前元素的子元素的个数—childElementCount

// An highlighted block
<script>
	var nav = document.querySelector("#nav");
    console.log(nav.childElementCount);
</script>

获取当前元素的同胞兄弟元素
nextElementSibling 属性返回指定元素之后的下一个兄弟元素
previousElementSibling 属性返回指定元素的前一个兄弟元素
nextSibling 属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="nav">
    <li id="menu">aaa</li>
    <input type="text" value="123"/>
    <li id="menu1">aaa</li>
</ul>
<script>
	var nav = document.querySelector("#nav");
    console.log(nav.nextElementSibling);
    console.log(nav.previousElementSibling);
   	console.log(nav.childNodes[1].nextSibling);
</script>
</body>
</html>

直接获取父元素里面的子集
firstElementChild 当前元素里面第一个
firstChild 第一个节点

// An highlighted block
<script>
	var nav = document.querySelector("#nav");
    console.log(nav.firstElementChild);
    console.log(nav.lastElementChild);//反之
    console.log(nav.firstChild);
    console.log(nav.lastChild);//反之
</script>

通过子元素来获取父元素

// An highlighted block
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="nav">
    <li id="menu">aaa</li>
    <input type="text" value="123"/>
    <li id="menu1">aaa</li>
</ul>
<script>
	var menu=document.getElementById("menu");
    console.log(menu.parentNode);//parentNode  父节点
    console.log(menu.parentElement);//parentElement  可以获取父元素
    //console.log(menu.parent);
</script>
</body>
</html>

创建dom元素

// An highlighted block
<script>
	var block=document.getElementsByClassName("block");
	var b=document.querySelectorAll(".block");
    // 类似这种获取 getElementsByClassName  动态获取   创建的元素也可以拿到
    var domele=document.createElement("div");
    domele.className="block";
    domele.innerHTML="new";
    block[0].appendChild(domele);追加到当前元素的内容之后
    console.log(b);
</script>

JavaScript JSON对象

JSON：
JavaScript 对象表示法（JavaScript Object Notation）。 JSON 是存储和交换文本信息的语法。类似 XML。 JSON 比 XML 更小、更快，更易解析。
json单个建立

// An highlighted block
<script>
	var stus = {
        "name": "张三",
        "age": 18,
        "job": "学生"
    }
    console.log(stus);
    //取值的方式
    console.log(stus.name);
    console.log(stus["job"]);
</script>

json多个建立

// An highlighted block
<script>
	var student = [
        {
            "name": "李四",
            "age": 20,
            "job": "学生"
        },
        {
            "name": "战三",
            "age": 20,
            "job": "学生"
        },
        {
            "name": "马六",
            "age": 20,
            "job": "学生"
        }
    ]
    console.log(student);
</script>

注释：后台返回的json数据对象字符串

json的数据类型转化

// An highlighted block
<script>
	var student = [
        {
            "name": "李四",
            "age": 20,
            "job": "学生"
        },
        {
            "name": "战三",
            "age": 20,
            "job": "学生"
        },
        {
            "name": "马六",
            "age": 20,
            "job": "学生"
        }
    ]
    var str = JSON.stringify(student);
    //json字符串转化对象型
    console.log(JSON.parse(str));
    console.log(eval(str));
</script>

JavaScript 数组方法

数组的实例化

// An highlighted block
<script>
	var arr=new Array({});
    console.log(arr);
</script>

数组的赋值

// An highlighted block
<script>
	arr[0]=1;
    arr[1]="a";
    arr[2]=null;
    arr[3]={};
    arr[4]=true;
    arr[5]=undefined;
    arr[6]=function(){};
    console.log(arr[0]);
</script>

数组的简化声明

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
</script>

数组的相关方法
concat
合并数组—返回新的数组

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
    console.log(a.concat(b));
</script>

filter
过滤数组—返回过滤出的值

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
	console.log(a.filter(function (val, index, arr) {
        /*if (val % 2 == 0) {
            return val;
        }*/
        return val;
    }));
</script>

数组的遍历
数组遍历没有返回值，能影响到原数组

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
	a.forEach(function (val, index, arr) {
        arr[index]+=val;
    })
    console.log(a.indexOf(2));
</script>

join
将数组转化为字符串

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
	console.log(a.join("你好！"));
</script>

map
相当遍历数组，映射一个新的数组

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
	var b=a.map(function (val, index, arr) {
            return val*val;
    })
    console.log(b,a);
</script>

slice
截取数组，对原数组无影响

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
	console.log(a.slice(1, 3));
    console.log(a);
</script>

splice
截断数组，对原数组有影响

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
	console.log(a.splice(0, 3));
    console.log(a);
</script>

push
数组追加—数组的后边追加，返回值是数组的长度

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
	a.push(9)
    console.log(a);
</script>

unshift
数组追加—数组的前边追加，返回数组的长度

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
    a.unshift(7)  
    console.log(a);
</script>

shift
数组删除—数组的前删除

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
    a.shift()
    console.log(a)
</script>

pop
数组删除—数组的后删除

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
    a.pop();
    console.log(a);
</script>

reverse
翻转数组

// An highlighted block
<script>
	var  a=[1,2,3,4];
    var b=[4,5,6];
    a.reverse();
    console.log(a);
</script>

sort
数组排序—默认小-大排序

// An highlighted block
<script>
	var b=[2,1,4,3,6,5];
    console.log(b.sort());
</script>

排序方法（大—小）

// An highlighted block
<script>
	var b=[2,1,4,3,6,5];
    b.sort(function (n1,n2){
        return n1-n2;
    });
    console.log(b);
</script>

some
检测数组里面的值—返回值是true/false

// An highlighted block
<script>
	var b=[2,1,4,3,6,5];
    console.log(b.some(function (val, index, arr) {
        return val == 11;
    }));
</script>

reduce
数组的累加器

// An highlighted block
<script>
	var b=[2,1,4,3,6,5];
    console.log(b.reduce(function (totle, current, index) {
        console.log(totle,current);
        return totle *= current;
    }));
</script>

JavaScript 数组排序

冒泡排序法

// An highlighted block
<script>
	var arr = [3, 2, 0, 1, 7, 5, 4, 6, 9, 8];
    function maopao(array) {
        if (array.length == 1) {
            return array;
        }
        var temp;
        for (var i = 0; i < array.length - 1; i++) {
            for (var k = 0; k < array.length - i - 1; k++) {
                if (array[k] < array[k + 1]) {
                    temp = array[k];
                    array[k] = array[k + 1];
                    array[k + 1] = temp;
                }
            }
        }
        return array;
    }
    console.time();
    console.log(maopao(arr));
    console.timeEnd();
</script>

快速排序法

// An highlighted block
<script>
	var arr = [3, 2, 0, 1, 7, 5, 4, 6, 9, 8];
	function quickSort(array) {
        if (array.length <= 1) {
            return array;
        }
        var center = array.splice(parseInt(array.length / 2), 1);
        var left = []; //相对于中间值  左边放  右边放
        var right = [];
        for (var i = 0; i < array.length; i++) {
            if (array[i] < center) {
                left.push(array[i]);
            }
            else {
                right.push(array[i]);
            }
        }
        return quickSort(left).concat(center).concat(quickSort(right));
    }
    console.time();
    console.log(quickSort(arr));
    console.timeEnd();
</script>

选择排序法

// An highlighted block
<script>
	var arr = [3, 2, 0, 1, 7, 5, 4, 6, 9, 8];
	function selectSort(array){
        if(array.length<=1)
        {
            return array;
        }
        //默认一个值  数组里面第一个
        for(var i=0;i<array.length;i++)
        {
            var temp;
            for(var k=i+1;k<array.length;k++)
            {
                if(array[k]>array[i])
                {
                    temp=array[i];
                    array[i]=array[k];
                    array[k]=temp;
                }
            }
        }
        return array;
    }
    console.time();
    console.log(selectSort(arr));
    console.timeEnd();
</script>

JavaScript 字符串方法

concat
字符串的拼接

// An highlighted block
<script>
	var s="123";
    var b="456";
    console.log(s + b);
    console.log(s.concat(b).concat(s));
</script>

charAt
根据索引返回对应字符

// An highlighted block
<script>
	var s="123";
    var b="456";
    console.log(str.charAt(0));
</script>

查找字符
indexOf------左–右边去找字符
lastindexOf------右–左边去找字符

// An highlighted block
<script>
	// 单个参数     直接找字符   返回值是-1  或者索引
    var str="a,b,c,def,ga";
    //也可以遍历字符串
    for(var index in str)
    {
        //console.log(str[index]);
        console.log(str.charAt(index));
    }
    console.log(str.indexOf("a"));
    //两个参数的时候   2  startindex
    console.log(str.indexOf("bc", 0));
    console.log(str.lastIndexOf("a"));
    console.log(str.lastIndexOf("ab",2));
</script>

charCodeAt
根据索引返回当前的ascii 值

// An highlighted block
<script>
    var str="a,b,c,def,ga";
    console.log(str.charCodeAt(0));
</script>

fromCharCode
将ascii 值转化为字符

// An highlighted block
<script>
    var str="a,b,c,def,ga";
    console.log(String.fromCharCode(97));
</script>

字符串的截取
substr—截取多少长度
subString—按照索引截取

// An highlighted block
<script>
    var str="a,b,c,def,ga";
    console.log(str.substr(0, 2));
    // 两个参数都是索引
    console.log(str.substring(0, 3));
    console.log(str);
</script>

replace
字符替换—返回值是替换之后的字符串多个替换使用正则

// An highlighted block
<script>
    var str="a,b,c,def,ga";
    console.log(str.replace("a", "m"));
    console.log(str);
</script>

search
查找字符—查找字符并返回当前索引

// An highlighted block
<script>
    var str="a,b,c,def,ga";
    console.log(str.search('a'));
</script>

split
数据类型转化—将字符串转化为数组

// An highlighted block
<script>
    var str="a,b,c,def,ga";
    console.log(str.split(","));
</script>

大小写转化

// An highlighted block
<script>
    var str="a,b,c,def,ga";
    console.log(str.toUpperCase().toLowerCase());
    console.log(str.toLocaleUpperCase());
</script>

JavaScript 字符串算法

查找字符串里面的最长的单词

// An highlighted block
<script>
    var st = "The quick brown fox jumped bcaked jumped abscefg over the lazy dog 15625765675276";
    function showDanci(str) {
        var arr = st.split(" ");
        var temp = arr[0];
        for (var i = 1; i < arr.length; i++) {
            if (temp.length < arr[i].length) {
                temp = arr[i];
            }
        }
        return temp;
    }
    console.log(showDanci(st));
</script>

数组去重

// An highlighted block
<script>
    var arr = [1, 1, 2, 3, 4, 3, 5, 5, 6, 7, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9];
    function moveNumber(array) {
        for (var i = 0; i < array.length - 1; i++) {
            var temp = array[i];
            for (var k = i + 1; k < array.length; k++) {
                if (temp == array[k]) {
                    array.splice(k, 1);
                    k--;
                }
            }
        }
        return array;
    }
    console.log(moveNumber(arr));
</script>

字符串的翻转

// An highlighted block
<script>
    var str = "abcdefghi";
    console.log(str.split("").reverse().join(""));
</script>

统计一个字符串中出现最多的及其出现的次数给出一个字符串

// An highlighted block
<script>
    var str1 = "cccccccccasdfssaaasasasasaadddddddd";
    function findChar(str) {
        var ss = moveNumber(str.split(""));
        /*[a,c,f,h]*/
        var list = [];
        for (var i = 0; i < ss.length; i++) {
            var count = 0;
            for (var index in str) {
                if (ss[i] == str.charAt(index)) {
                    count++;
                }
            }
            list.push([ss[i], count]);
        }
        var tong = 1;
        for (var i = 0; i < list.length; i++) {
            if (list.length <= tong)break;
            if (list[i][1] > list[i + 1][1]) {
                list.splice(i + 1, 1);
                i--;
            }
            else if (list[i][1] < list[i + 1][1]) {
                list.splice(i, 1);
                i--;
            }
            else {
                tong++;
            }
        }
        return function () {
            var strlist = "";
            for (var i = 0; i < list.length; i++) {
                strlist += list[i][0] + "---" + list[i][1] + "个"
            }
            return strlist;
        }
    }
    console.log(findChar(str1)());
</script>

阶乘

// An highlighted block
<script>
    function jiecheng(n) {
        if (n <= 1) {
            return 1;
        }
        return n * jiecheng(n - 1);
    }
    console.log(jiecheng(5));
</script>

JavaScript Date（日期）对象

日期对象用于处理日期和时间。

设置时间

// An highlighted block
<script>
    var time=new Date("2019 8-13 13:42");
    console.log(time);
    var time=new Date(2019,8,13,13,42);//月份上面有+1情况
    console.log(time);
    var time=new Date();//直接实例化时间
    time.setDate(20)//设置日
    time.setFullYear(2020)//设置年份
    time.setHours(0)//设置小时
    time.setMilliseconds(0)//设置毫秒
    time.setMinutes(0)//设置分钟
    time.setMonth(0)//设置月份
    time.setSeconds(0)//设置秒
    time.setTime()//设置当前时间到1970年0点的总毫秒数
    time.setYear()//设置年份  返回值为119   2019-1900=119
</script>

获取时间（to/get两者获取方法一致）

// An highlighted block
<script>
    var time=new Date("2019 8-13 13:42");
    console.log(time);
    var time=new Date(2019,8,13,13,42);//月份上面有+1情况
    console.log(time);
    var time=new Date();//直接实例化时间
    console.log(time.getDate());//获取日
    console.log(time.getFullYear());//获取年份
    console.log(time.getHours());//获取小时
    console.log(time.getMilliseconds());//获取毫秒
    console.log(time.getMinutes());//获取分钟
    console.log(time.getMonth());//获取月份
    console.log(time.getSeconds());//获取秒
    console.log(time.getTime());//获取当前时间到1970年0点的总毫秒数
    console.log(time.getYear());//获取年份  返回值为119   2019-1900=119
</script>

JavaScript Math（数学）对象

Math对象不需要实例化，可直接使用

常用方法

// An highlighted block
<script>
    console.log(Math);//绝对值
    console.log(Math.abs(-1));
    console.log(Math.PI);
    Math.floor(0.9)//向下取整
    Math.ceil(0.9) //向上取整
    Math.round(4.4) //四舍五入
    Math.max(1, 2) //判断最大值的
    Math.min(1, 2)  //取最小值的
    Math.random()//随机数  0-1  取小不取大
    Math.sqrt(4)  //开平方
    console.log(Math.pow(8, 1 / 3));  //求幂的
    console.log(Math);
    // 三角函数的值，计算得换算为弧度，角度*Math.PI/180
    console.log(Math.sin(180 * Math.PI / 180));
    //6.123233995736766e-17  无限接近0
    console.log(Math.cos(180 * Math.PI / 180));
</script>

JavaScript 计时器

setInterval()
循环计时器，延迟多长时间去反复执行

// An highlighted block
<script>
    setInterval(function () {
     	console.log(1);
    }, 1000);
</script>

setTimeout()
一次性计时器，也可以通过代码制作出循环计时器

// An highlighted block
<script>
    var timer=setTimeout(function (){
     	console.log(1);
    },1000);
</script>

关闭计时器
clearInterval()
clearTimeout()
settimeout 改装循环计时器

// An highlighted block
<script>
     var count = 0;
     var timer=null;
     showtime();
     function showtime() {
     count++;
     console.log(count);
     if(count>=10)
     {
     clearTimeout(timer);
     return;
     }
     timer=setTimeout("showtime()", 1000);
     }
</script>

requestAnimationFrame
requestAnimationFrame和 setTimeout、setInterval前者在浏览器放小或者切换选项卡的时候会暂停，后两个不会暂停

// An highlighted block
<script>
     function loop()
     {
     console.log(1);
     //根据电脑屏幕的fps   16ms 刷新一次  1000/60
     window.requestAnimationFrame(loop);
     }
</script>

注释：requestAnimationFrame需要考虑兼容性问题

JavaScript 自定义对象

标准写法

// An highlighted block
<script>
    var stu=new Object();
    stu.name="张三";
    stu.sex="男";
    stu.age=23;
    stu.job="coffee";
    stu.eat=function (){
        return this.name+"饮食规律";
    }
    stu['marriage']="未婚";
    console.log(stu);
</script>

白话写法

// An highlighted block
<script>
    var students={
        name:"张三",
        sex:"男",
        age:20,
        eat:function (){
            return this.name+"饮食规律";
        }
    };
    students['sleep']=function (){
        return this.name+"起居正常";
    }
    console.log(students);
</script>