一、调用方法
1 个标签
<script>......</script>
2 个文件
<script type="text/javascript" src="common.js"></script>
二.局部变量全局变量js有块级作用域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function f1() { //var i =123; //局域变量 i=123 //全局变量 } f1() alert(i); </script> </head> <body> </body> </html>
三、js 实现滚动横幅选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id='i1' style="display: inline-block;background-color: green;color: white">欢迎宝强莅临指导</div> <script> setInterval("f1()",1000) function f1() { //js获取摸一个标签 id=i1 var tag =document.getElementById('i1'); //获取标签的内容 var text = tag.innerText var a= text.charAt(0); var sub = text.substring(1,text.length); var new_str= sub +a tag.innerText=new_str; } </script> </body> </html>
显示效果
四、url格式转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var url = "http://www.etiantian.org?n=王宝强"; //一般url汉字浏览器会自动转换格式 var ret = encodeURI(url); //手动转换url汉字 //alert(ret); console.log(ret); var u = decodeURI(ret); //转换所有包括汉字内的特殊字符 //alert(u);console.log(u); var r2 = encodeURIComponent(url); console.log(r2); </script> </body> </html>
显示效果：
五、基础知识
1. 基本语法
关键词
关键字关键字关键字关键字
别的
极好的
枚举
整数
休息
字节
让
这个
案子
错误的
长
扔
抓住
最后
字符
新的
班级
漂浮
无效的
真的
常量
为了
尝试
去
变量
如果
空白
做
短的
尽管
在
和
更多保留关键字，请点击查看！
2. 变量
属性
该属性返回所有变量的构造函数。
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
您可以使用属性来查看对象是否为数组（包含字符串“Array”）：
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;}
同样，属性可用于查看对象是否为日期（包含字符串“Date”）：
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;}
3. 数据类型
有 5 种不同的数据类型：
3种对象类型：
2 种不包含任何值的数据类型：
检查数据类型用法，一定要注意几种特殊情况！
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
3.1 个数字。2 个布尔值
关于比较操作
三元操作
result = (condition)?value1:value2 3.3 null 和 .4 字符串
字符串是用单引号 ‘ 或双引号 ” 括起来的任何文本，例如 ‘abc’、”xyz” 等。
3.5 数组
数组是一组有序的集合，其中集合的每个值都称为一个元素。数组可以包含任何数据类型。称为列表。
3.6 个对象
对象是键值的无序集合，类似于 .
获取对象的属性，使用对象变量.属性名或对象变量[‘属性名’]的方法。
3.7 数据类型的转换
注意大小写，这个真的很烦人。
4. 字符串
var name = '小明';
var age = 20;
alert(`你好, ${name}, 你今年${age}岁了!`);
提供一些常用的字符串方法。调用这些方法不会改变原始字符串的内容，而是返回一个新的字符串：
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个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
5. 数组
以下是数组的常用方法：
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( ) 对数组元素进行排序
以下是一些例子，请注意评论：
var arr = [10, 20, '30', 'xyz'];
arr.indexOf(30); // 元素30没有找到，返回-1
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引
arr.slice(3); // 从索引3开始到结束
var aCopy = arr.slice();
aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']
aCopy === arr; // false
var arr = [1, 2];
arr.push('A', 'B'); // 返回Array新的长度: 4
arr; // [1, 2, 'A', 'B']
arr.pop(); // pop()返回'B'
arr; // [1, 2, 'A']
arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次
arr; // []
arr.pop(); // 空数组继续pop不会报错，而是返回undefined
arr; // []
var arr = [1, 2];
arr.unshift('A', 'B'); // 返回Array新的长度: 4
arr; // ['A', 'B', 1, 2]
arr.shift(); // 'A'
arr; // ['B', 1, 2]
arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次
arr; // []
arr.shift(); // 空数组继续shift不会报错，而是返回undefined
arr; // []
//splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素.
ar arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];
// 从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook'); // 返回删除的元素 ['Yahoo', 'AOL', 'Excite']
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
// 只删除,不添加:
arr.splice(2, 2); // ['Google', 'Facebook']
arr; // ['Microsoft', 'Apple', 'Oracle']
// 只添加,不删除:
arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因为没有删除任何元素
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']
//concat()方法并没有修改当前Array，而是返回了一个新的Array。接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里.
var arr = ['A', 'B', 'C'];
arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
6. 对象
这里有些例子：
var xiaoming = {
name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错
'name' in xiaoming; // true
'grade' in xiaoming; // false
'toString' in xiaoming; // true
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false
7. 条件判断
请永远不要省略花括号！不值得损失！
陈述：
默认使用三等式进行判断。===
8. 循环
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
有四种循环语句，它们是：
var names = ["alex", "tony", "rain"]; for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); }
var names = ["alex", "tony", "rain"];
for(var index in names){
console.log(index);
console.log(names[index]);
}
while(条件){
// break;
// continue;
}
var n = 0; do { n = n + 1; } while (n < 100); n; // 100
任意跳转：标签
对于循环控制，通常有break and，这是众所周知的。但不同的是js中还有一个label标签，可以设置跳转点。
用法：：
具体看例子：
不添加标签时：
var num = 0; for (var i = 0 ; i < 10 ; i++){ for (var j = 0 ; j < 10 ; j++){ if( i == 5 && j == 5 ){ break; } num++; } } alert(num); // 循环在 i 为5，j 为5的时候跳出 j循环，但会继续执行 i 循环，输出 95
添加标签后：
var num = 0; outPoint: for (var i = 0 ; i < 10 ; i++){ for (var j = 0 ; j < 10 ; j++){ if( i == 5 && j == 5 ){ break outPoint; } num++; } }alert(num); // 循环在 i 为5，j 为5的时候跳出双循环，返回到outPoint层继续执行，输出 55
![图片[2]-1. 基本语法-唐朝资源网](https://images.43s.cn/wp-content/uploads//2022/06/1655205572111_6.png)
9. 映射和设置
{} 的默认对象表示可以被认为是一个 Map 或其他语言的数据结构，即一组键值对。
但是该对象有一个小问题，即键必须是字符串。但在实践中或其他数据类型作为键也是非常合理的。
为了解决这个问题，最新的 ES6 规范引入了一种新的数据类型 Map。
Map是一组键值对的结构，查找速度极快。
var m = new Map([[”, 95], [‘Bob’, 75], [‘Tracy’, 85]]);
m.get(”); // 95
初始化一个Map需要二维数组，或者直接初始化一个空的Map。地图有以下方法：
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
由于一个键只能对应一个值，如果你多次将一个值放入一个键中，后面的值会冲掉前面的值：
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
与 Map 类似，Set 也是键的集合，但不存储值。同样，键不能在 Sets 中重复。
要创建一个集合，将一个数组作为输入，或者简单地创建一个空集合：
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
重复元素在 Set 中自动过滤；
元素可以通过 add(key) 方法添加到 Set 中，可以重复添加，但无效。
可以通过 (key) 方法删除元素：
10.
ES6 标准引入了新的类型，Array、Map 和 Set 都是类型。可以使用新的 for…of 循环来迭代具有类型的集合。
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
alert(x);
}
for (var x of s) { // 遍历Set
alert(x);
}
for (var x of m) { // 遍历Map
alert(x[0] + '=' + x[1]);
}
为什么要…的
由于历史问题，for … in 循环实际上会遍历对象的属性名称。for…of 循环完全解决了这些问题，它只是循环了集合本身的元素。
但是，更好的方法是直接使用内置方法，它接受一个函数并在每次迭代时自动调用它。注意该方法是 ES5.1 标准引入的，需要测试你的浏览器是否支持。
对于数组：
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
alert(element);
});
对于套装：
与 Array 类似，但 Set 没有索引，所以回调函数的前两个参数是元素本身：
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
alert(element);
});
对于地图：
Map的回调函数参数依次为value、key和map本身：
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
alert(value);
});
© 版权声明
本站下载的源码均来自公开网络收集转发二次开发而来，
若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，
我们会及时删除，给您带来的不便，我们深表歉意。
下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。
THE END
暂无评论内容