JavaScript 基础
JS定义函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>hi</h1> <script> function f1() { // 定义一个局部变量（var） // var i = 123 //定义一个全局变量 i = 123; } f1(); // alert 弹窗 alert(i) </script> </body> </html>
JS的序列化JSON
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
URL转译
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
JS数组
JavaScript中的数组类似于Python中的列表
常见功能：
obj.length 数组的大小 obj.push(ele) 尾部追加元素 obj.pop() 尾部获取一个元素 obj.unshift(ele) 头部插入元素 obj.shift() 头部移除元素 obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 obj.splice(n,0,val) 指定位置插入元素 obj.splice(n,1,val) 指定位置替换元素 obj.splice(n,1) 指定位置删除元素 obj.slice( ) 切片 obj.reverse( ) 反转 obj.join(sep) 将数组元素连接起来以构建一个字符串 obj.concat(val,..) 连接数组 obj.sort( ) 对数组元素进行排序
JS跑马灯效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ left: 100px; } </style> </head> <body> <div id="i1" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div> <div id="i2" style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div> <script> // setInterval(函数，每1000毫秒运行一次) setInterval("f1()",1000); function f1() { // js获取某一个标签 id =i1 var tag = document.getElementById('i1'); // 获取标签内容 var text = tag.innerText; // 获取第0个元素的text字符串 var a = text.charAt(0); var sub = text.substr(1,text.length); var new_str = sub + a; tag.innerText = new_str; } </script> </body> </html>
JS for循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> var li = [11,22,33,44]; // 第一种for（console.log 输出的console端，页面无任何显示） for(var i = 0;i<li.length;i++){ console.log(i,li[i]); } // 第二种for for(var item in li){ console.log(item,li[item]); } var dic = {'k1':11,'k2':22} for(var key in dic){ console.log(key,dic[key]) } </script> </head> <body> </body> </html>
JS 布尔类型判断
布尔类型仅包含真假，与Python不同的是其首字母小写。
- == 比较值相等（字符串‘123’与数字123返回为true）
- != 不等于(针对值)
- === 比较值和类型相等
- !== 不等于（针对值、类型等）
- || 或
- && 且
JS 字符串
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：
obj.length 长度 obj.trim() 移除空白 obj.trimLeft() obj.trimRight) obj.charAt(n) 返回字符串中的第n个字符 obj.concat(value, ...) 拼接 obj.indexOf(substring,start) 子序列位置 obj.lastIndexOf(substring,start) 子序列位置 obj.substring(from, to) 根据索引获取子序列 obj.slice(start, end) 切片 obj.toLowerCase() 大写 obj.toUpperCase() 小写 obj.split(delimiter, limit) 分割 obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号
JS 三种类型函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 普通函数
function func(arg) {
return true;
}
// 匿名函数
var func1 = function(arg) {
return "Eason";
};
// 自执行函数
(function(arg) {
console.log(arg);
})('123')
</script>
</body>
</html>
JS 闭包
「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。
function f2(){ var arg= [11,22]; function f3(){ return arg; } return f3; } ret = f2(); ret();
JS 面向对象
function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg; } } var obj = new Foo('alex', 18); var ret = obj.Func("sb"); console.log(ret);
对于上述代码需要注意：
- Foo充当的构造函数
- this代指对象
- 创建对象时需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：
function Foo (name,age) { this.Name = name; this.Age = age; } Foo.prototype = { GetInfo: function(){ return this.Name + this.Age }, Func : function(arg){ return this.Name + arg; } }
