JavaScript基础知识学习
1、如何在页面中插入JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js文件的引入</title>
<!-- 内部的js-->
<script type="text/javascript">
// 编写js代码
alert('JavaScript学习');
// alert网页弹窗
</script>
<!-- 外部的js-->
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
</body>
</html>
// index.js里面的内容。
// 编写外部js代码
alert('JavaScript学习课程');
2、变量
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变量</title> </head> <body> <script type="text/javascript"> // 单行注释 /* 多行注释 */ // 变量初始化 var x = 30; var X = 30; // 声明变量 var y; // 变量赋值 y = 50; var name = '王聪聪'; /* 1.必须使用字母、下划线（_） $开始 2.多个英文字母 驼峰 myName 3.不能使用js中关键字 和保留字来进行命名 4.严格区别大小写 */ var _A = 40; var $ = 90; // alert(_A); // alert($ ); // alert(x); // alert(X); var z = 40; z = 50; alert(z); </script> </body> </html>
3、基本的变量类型的介绍
<!-- 变量类型 基本的数据类型 Number String Boolean undefined null 引用的数据类型 Object Array Function --> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> // number数值类型 var a = 3; var b = 1.234; var c = -1; // typeof 来检查当前变量的数据类型 // alert(typeof a); // alert(typeof b); // alert(typeof c); // 字符串 string 'abc234' 或者是 "我是mjj" var name = 'mjj'; var en = "abc"; // alert(typeof name); // alert(typeof en); // boolean 0（假 false） 和1（真 true） var c = 3 <= 4; // alert(c); // alert(typeof c); // 声明变量 var x; // alert(x); // alert(typeof x); // 空对象 var y = null; alert(y); alert(typeof y); </script> </body> </html>
4、运算符-算数运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>运算符-算数运算符</title> </head> <body> <script type="text/javascript"> var x = 10; var y = 4; var sum = x + y; var sum2 = 4 + 5 + x + y; var en = x-y; var or = x * y; var op = x % y * sum; alert(or); alert(op); var c = (x + sum) / 4 -3; alert(c); </script> </body> </html>
5、递增和递减以及赋值运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>递增和递减以及赋值运算符</title> </head> <body> <script type="text/javascript"> // ++ // -- var x = 3; // x++; x = x + 1; // alert(x); var a = 5; var b = 6; a = b; var c = 10; // c = c + 5; c += 5; c -= 2; c *= 4; c /= 3; alert(c); </script> </body> </html>
6、字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字符串</title>
</head>
<body>
<script type="text/javascript">
// var str = '@#$%^&*';
// alert(str);
// var word = "hello";
// var newWord = word;
// alert(typeof word);
// alert(newWord);
// var name = 'would you eat a "apple"?';
// alert(name);
// var str = "I 'm \"mjj\"";
// 里面的\是转义字符。
// alert(str);
// var one = 'hello';
// var name = 'mjj';
var joined = 'hello' +' ' + 'mjj';
// 字符串拼接
alert(joined);
</script>
</body>
</html>
7、数字和字符串转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字和字符串转换</title>
</head>
<body>
<script type="text/javascript">
/*
var a = 'mjj' + 521;
alert(a);
alert(typeof a);
*/
/*
var b = '18' + '40';
alert(b);
alert(typeof b);
*/
// 1.隐式转换 数值转字符串
var num = 234;
var myStr = num + "";
// alert(typeof myStr);
// 2.toString() 数值转字符串
var myStr2 = num.toString();
// alert(typeof myStr2);
// 字符串转数值
var myNum = Number(num);
// alert(typeof myNum);
var n = '2424fhfh';
var a = Number(n);
alert(typeof a);
//NaN是数值运算的报错意思是：Not a number。
//这里a的类型还是number，但是给其赋值不是number类型，所以报错。
</script>
</body>
</html>
8、JavaScript中强大的数组Array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript中强大的数组Array</title>
</head>
<body>
<script type="text/javascript">
// 创建
var shopping = ['香蕉','苹果','牛奶','红牛'];
// alert(shopping);
// alert(typeof shopping);
// console.log(shopping);
var rand = ['tree','345',[1,2,3]];
// console.log(rand);
// 访问
var item1 = rand[0];
console.log(item1);
rand[0] = '榴莲';
console.log(rand);
var a = rand[2][2];
console.log(a);
// 访问数组的长度 for
console.log('数组的长度是:' + rand.length);
</script>
</body>
</html>
9、if...else语句，条件判断
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条件判断</title>
</head>
<body>
<script type="text/javascript">
/*
var distance = 10;
var nowDistance = 16;
if ( nowDistance <= distance) {
console.log('自动驾驶');
}else{
console.log('人为驾驶');
}
*/
var weather = 'rainyxxxxxx';
if (weather === 'sunny') {
console.log('天气非常棒,可以出去玩耍');
}else if(weather === 'rainy'){
console.log('天气下雨了,在家里呆着');
}else if(weather === 'snowing'){
console.log('天气下雪了,可以出去滑雪');
}else{
alert('输入的天气有错,重新输入');
}
</script>
</body>
</html>
10、比较运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>比较运算符</title> </head> <body> <script type="text/javascript"> // === 等同于 和 !== 不等于 var a = 5; var astr = '5'; var isequal1 = a === astr; console.log(isequal1); // == 等于 和!= 不等于 var isequal2 = a == astr; // ==只比较里面的数值。这里输出true。 console.log(isequal2); console.log(4 <= 4); </script> </body> </html>
11、逻辑运算符：&&并且 ||或者
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>逻辑运算符</title>
</head>
<body>
<script type="text/javascript">
var weather = 'sunny';
var temp = 32;
/*
if (weather === 'sunny') {
if (temp > 30) {
console.log('在家里吹空调,吃西瓜');
}else{
console.log('天气非常好,可以出去玩耍了');
}
*/
// && 逻辑与 并且 || 逻辑或 或者 !true 非真 取反
if (weather === 'sunny' && temp > 30) {
console.log('在家里吹空调,吃西瓜');
}else if(weather === 'sunny' && temp <= 30){
console.log('天气非常棒,可以出去玩耍了')
}
// 数学考过80 或者英语考过85 才可以玩游戏
var mathScore = 77;
var enlishScore = 80;
if (mathScore >= 80 || enlishScore >= 85) {
console.log('可以玩游戏');
}else{
console.log('在家里写作业');
}
var isLogin = false;
alert(!isLogin);
if (!isLogin) {
console.log('用户已登录');
}
</script>
</body>
</html>
12、switch语句，多个条件判断使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch语句</title>
</head>
<body>
<script type="text/javascript">
var weather = 'rainy';
switch (weather) {
case 'sunny':
alert(1);
break;
case 'rainy':
alert(2);
// 编写switch语句 小心break,cash穿透
// 如果忘记写break，它会直接往下走，直到遇到break，才结束。
break;
case 'snowing':
alert(3);
break;
default:
alert(4);
break;
}
// 多个条件判断，建议用switch语句。其作用和if else相同。
</script>
</body>
</html>
13、三元运算符（运用非常多）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三元运算符（运用非常多）</title> </head> <body> <script type="text/javascript"> // if...else // (条件) ? run this code : run this code; // 括号内是条件，如果条件是真，运行？后面：前面的代码，如果条件是假，则运行：后面代码。 var isresult = 1 < 2 ? '真的' : '假的'; alert(isresult); // 此处弹出窗口为：真的。 </script> </body> </html>
14、for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for循环</title>
</head>
<body>
<script type="text/javascript">
// 循环 来做1+2+3....+10000
// 1+2+3+....+10000
/*
for(初始化条件;结束条件;递增条件){
//run this code
}
*/
var i;
var sum = 0;
for(i = 1; i <= 10000;i++){
sum = sum + i;
// sum = 1 ,i = 2
// sum = 3, i = 3
// sum = 6, i = 4
}
console.log(sum);
var shopping = ['香蕉','苹果','牛奶','红牛'];
var j;
for(j = 0; j < shopping.length; j ++){
// shopping.length为列表的长度。
// console.log(shopping[j]);
var htmlStr = '<h1>'+shopping[j]+'</h1>';
console.log(htmlStr);
document.write(htmlStr);
// 将内容显示在网页上面。
}
</script>
</body>
</html>
15、break和continue语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>break和continue</title>
</head>
<body>
<script type="text/javascript">
// break 可以跳出当前循环
var x = 0;
for(;;){ //死循环
if(x > 100){
break;
}
x++;
}
console.log(x);
// 1+2+3+4+5+6+7+9+10
var sum = 0;
for(var i = 1; i <= 10; i++){
if(i === 8){
// break;
// 跳出当前循环,下次循环继续进行，此处跳过8，继续加9加10
continue;
}
sum = sum + i;
}
alert(sum);
</script>
</body>
</html>
16、while循环和do while循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while循环</title>
</head>
<body>
<script type="text/javascript">
/*
初始化条件
while(判断循环结束条件){
// run this code
递增条件
}
*/
/*
var sum = 0; //计算的和
var n = 99; //初始的奇数
while (n > 0) {
sum = sum + n;
n = n - 2;
}
alert(sum);
*/
// do while
// 1到100之间的数
/*
先判断 再执行
var sum = 0;
var i = 1;
while (i <= 100) {
sum = sum + i;
i ++;
}
alert(sum);
*/
// do-while 先执行一次 再判断
var sum = 0;
var i = 1;
do{
sum = sum + i;
i++;
console.log(sum);
}while(i <= 1);
</script>
</body>
</html>
17、函数的定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
// 做饭
// 买菜
// 洗菜
// 切菜
// 炒菜
// 吃菜
// 洗碗
// 睡觉.....
// 买菜
// 洗菜
// 切菜
// 炒菜
// 吃菜
// 洗碗
// 睡觉.....
// 买菜
// 洗菜
// 切菜
// 炒菜
// 吃菜
// 洗碗
// 睡觉.....
// 封装重复性代码
function 做饭(isBad,a,b,c) { //isBad 形式参数
alert(isBad);
if(isBad){
alert('点个外卖');
}else{
// 买菜
// 洗菜
// 切菜
// 炒菜
// 吃菜
alert('做饭了');
}
}
var bad = true; //刀坏了
// 做饭(bad);
// 洗碗
// 睡觉.....
做饭(bad);
</script>
</body>
</html>
18、函数传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数传参数</title>
</head>
<body>
<script type="text/javascript">
// 做饭
// 封装重复性代码
function 做饭(isBad,a,b,c) { //isBad 形式参数 参数建议在1-5个，不能太多。
alert(isBad);
if(isBad){
alert('点个外卖');
}else{
// 买菜
// 洗菜
// 切菜
// 炒菜
// 吃菜
alert('做饭了');
}
}
var bad = true; //刀坏了
// 做饭(bad);
// 洗碗
// 睡觉.....
做饭(bad);
</script>
</body>
</html>
19、函数返回值和函数表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数返回值和函数表达式</title>
</head>
<body>
<script type="text/javascript">
// addition(加法) subtraction(减法) multiplicatio(乘法) division(除法)
function addition(a,b){
var sum = a + b;
return sum;//函数返回值。
}
function subtraction(a,b){
return a - b;
}
function multiplicatio(a,b){
return a * b;
}
/*
function division(a,b){
return a / b;
}
*/
// 函数表达式 ，这种是匿名函数。
var division = function(a,b){
return a / b;
}
var r = addition(3,2);
var r2 = subtraction(3,2);
var r3= multiplicatio(3,2);
var r4 = division(3,2);
console.log(r);
console.log(r2);
console.log(r3);
console.log(r4);
</script>
</body>
</html>
20、函数作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数作用域</title>
</head>
<body>
<!-- <script type="text/javascript">
var a = 1;
console.log(a);
function add(){
var b = 3;
console.log(a);
}
add();
// console.log(b);
</script>
-->
<script type="text/javascript" src="js/first.js"></script>
<script type="text/javascript" src="js/second.js"></script>
<!-- 全局作用域里面的函数，如果函数名相同，则下面的函数会覆盖上面的函数，即上面的函数不会执行。-->
<script type="text/javascript">
console.log(window);
first();
second();
</script>
<!-- var a = 3;相当于window.a = 3。是一个全局变量。-->
</body>
</html>
// first.js里面的内容。
(function(){
var name = 'mjj';
var hello = function (){
alert('hello ' + name);
}
window.first = hello;
})();
(function (){
// 这里面作用域
})();
// 上面这个函数叫作自执行函数。
// second.js里面的内容。
(function(){
var name = 'jack';
var hello = function (){
alert('hello ' + name);
}
window.second = hello;
})();
21、字符串的切片方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串的切片方法</title>
</head>
<body>
<script type="text/javascript">
console.log(str.length);//获取字符串的长度 11
console.log(str.charAt(1)); //e 获取指定的字符
console.log(str.charCodeAt(1)) //101 获取指定的字符对应的编码
console.log(str.concat(' mjj',' jack')); //拼接字符串 通常情况 不适用它来做拼接,使用 +来做多个字符的拼接
console.log(str.slice(2));//从第二个位置到结束。
console.log(str.substring(2));
console.log(str.substr(2));
// 第一个参数是起始的位置,第二个参数是结束的位置 顾头不顾尾
console.log(str.slice(2,4));
console.log(str.substring(2,4));
// 第一个参数是起始的位置,第二个参数是返回的字符数
console.log(str.substr(2,6));
console.log(str.slice(-3,-1)); //rld 等同于：slice(8,10)
console.log(str.slice(8,10));
</script>
</body>
</html>
22、object对象讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object对象讲解</title>
</head>
<body>
<script type="text/javascript">
/*
var name = '火腿肠';
function 老虎(){
alert(name);
}
function 企鹅(){
alert(name);
}
老虎();
*/
// 对象 (属性和方法)字面量创建 姓名,年龄,性别 ,爱好(动作)
var person = {
name : 'mjj',
age: 18,
sex:'女',
fav: function(a){
alert('爱好姑娘');
return '姑娘' + a + '岁';
}
}
// person是一个对象，里面包含了name,age,sex,fav几个参数。
console.log(person);
console.log(person.name);//调用name的属性。
console.log(person.fav(18));//调用对象里面的函数，这里输出：姑娘18岁
</script>
</body>
</html>
23、Javascript内置对象Array
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript内置对象Array</title>
</head>
<body>
<script type="text/javascript">
// 字面量创建一样
// var arr = [1,2,3];
// 内置对象 native object 对象 : 属性和方法
// document.write('呵呵呵');
// Array
// js提供构造函数
var colors = new Array();等价于：var colors2 = [];
if (Array.isArray(colors)) {
// Array.isArray(colors)是判断colors是否为数组，并且返回true或false。
// 对数组进行操作
colors[0] = 'red';
colors[1] = 'blue';
colors[2] = 'yellow';
var a = colors.toString();
// toString()将列表转换成字符串，如：['red','blue','yellow']转换成red,blue,yellow。
console.log(a);//这里输出red,blue,yellow
console.log(typeof a);
console.log(colors);
// console.log(colors[0]);
// console.log(colors.length);
}else{
// .....
}
</script>
</body>
</html>
24、数组join()的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组join()的方法</title>
</head>
<body>
<script type="text/javascript">
/*
var arr = [1,2,3];
var a = arr.toString();//输出：1,2,3
var b = arr.toLocaleString();//输出：1,2,3
console.log(a);
console.log(b);
var person1 = {
toLocaleString : function(){
return 'mjj';
},
toString: function(){
return '么吉吉';
}
}
var person2 = {
toLocaleString : function(){
return '隔壁老王';
},
toString: function(){
return '隔壁老李';
}
}
var people = [person1,person2];
console.log(people);
console.log(people.toString());//输出：'么吉吉','隔壁老李'
console.log(people.toLocaleString());//输出：'mjj','隔壁老王'
*/
// 分割字符串
var colors = ['red','blue','green'];
var a = colors.join('|');
console.log(a);//以|为分割线，输出：red|blue|green
</script>
</body>
</html>
25、数组的栈方法和队列方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组的栈方法和队列方法</title>
</head>
<body>
<script type="text/javascript">
/*
var arr = [1,2,3];
var a = arr.toString();
var b = arr.toLocaleString();
console.log(a);
console.log(b);
var person1 = {
toLocaleString : function(){
return 'mjj';
},
toString: function(){
return '么吉吉';
}
}
var person2 = {
toLocaleString : function(){
return '隔壁老王';
},
toString: function(){
return '隔壁老李';
}
}
var people = [person1,person2];
console.log(people);
console.log(people.toString());//输出：'么吉吉','隔壁老李'
console.log(people.toLocaleString());//输出：'mjj','隔壁老王'
*/
// 分割字符串
/*
var colors = ['red','blue','green'];
var a = colors.join('|');
console.log(a);//以|为分割线，输出：red|blue|green
*/
// 上面所有是数组join()的方法。
// 栈(lifo last - in- first - out)方法. push()添加 pop()移除 队列方法
// push() 往数组的最后一项添加内容
var newlength = colors.push('purple');
console.log(newlength);//输出：4，即这个新数组的长度。返回的是新数组的长度。
console.log(colors);//输出：['red','blue','green','purple']
// pop() 从数组末尾删除最后一项
var lastItem = colors.pop();
console.log(lastItem);//输出：purple。即删除的元素。返回的是删除的元素。
console.log(colors);//输出新的数组：['red','blue','green']。
// 队列 fifo 先进先出 unshift() shift()
newlength = colors.unshift('yellow');
console.log(newlength);//输出：4。返回新数组长度。
console.log(colors);//输出：['yellow','red','blue','green']
var firstItem = colors.shift();
console.log(firstItem);//输出：yellow。返回的是删除的数组的第一个元素。
console.log(colors);//输出：['red','blue','green']。返回新的数组。
</script>
</body>
</html>
26、数组排序的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组排序的方法</title>
</head>
<body>
<script type="text/javascript">
var values = [0,3,2,16,15,10];
// 数组倒序
// values.reverse();//数组倒过来排序。
// console.log(values);//输出：[10,15,16,2,3,0]。
// sort() 排序 升序 或者降序
// values.sort();//默认是按照x码排序的，不是我们想要的排序方法。
// console.log(values); //输出：[0,10,15,16,2,3]
function compare1(a,b){
/*
// a位于b之前
if (a < b ) {
return -1;
}else if(a > b){
return 1;
}else{
return 0;
}
*/
return a - b;
}
function compare2(a,b){
/*
// a位于b之前
if (a < b ) {
return 1;
}else if(a > b){
return -1;
}else{
return 0;
}
*/
return b - a;
}
values.sort(compare1); //升序
console.log(values);//输出：[0,2,3,10,15,16]
values.sort(compare2);//倒序
console.log(values);//输出：[16,15,10,3,2,0]
</script>
</body>
</html>
27、数组的操作方法，数组合并，插入，替换，删除等
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组的操作方法</title>
</head>
<body>
<script type="text/javascript">
// 操作方法 concat() slice() splice()
// 1.concat() 数组合并
var colors = ['red','blue'];
// var newColors = colors.concat('green');
newColors = colors.concat({name:'zhangsan'});//输出：['red', 'blue', {name:'zhangsan'}]
console.log(newColors);//输出：['red', 'blue', 'green']
//
// //2.slice() 将当前数组中的一个或者多个项创建一个新数组
var newcolors = colors.concat({name:"lisi"},['black','purple']);
//输出：['red', 'blue', {…}, 'black', 'purple']
// console.log(newcolors); //5
newcolors = newcolors.slice(1);//输出
// // newcolors = newcolors.slice(1,2);
newcolors = newcolors.slice(-2,-1); //相当于：slice(3,4)
console.log(newcolors);//输出：['black']
// // 3.splice() 删除 插入 替换
// // 3.1 删除
var names = ['张三','李四','mjj','alex'];
names.splice(0,2);//从0天始，删除两个元素。删除了，张三和李四。
console.log(names);//输出：['mjj', 'alex']
// // 3.2 插入
names.splice(1,0,'熊大大','jack');//1表示从位置1开始，0表示不删除元素，后面‘熊大大’,'jack'是要添加的元素，这里还可以再加。
console.log(names);//输出：['mjj', '熊大大', 'jack', 'alex']
// // 3.3 替换
names.splice(1,1,'xiongdada');//从1位置，删掉一个元素，把xiongdada添加进去。
console.log(names);//输出：['mjj', 'xiongdada', 'jack', 'alex']
</script>
</body>
</html>
28、数组的位置方法，查找元素的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组的位置方法</title>
</head>
<body>
<script type="text/javascript">
// 4.位置方法 indexOf()从前向后查找 lastIndexOf()从后向前查找。
var names = ['张三','mjj','王五','mjj','赵六'];
alert(names.indexOf('mjj')); //输出：1。返回的就是查找元素的序号。
alert(names.lastIndexOf('mjj')); //输出：3。
alert(names.indexOf('mjj',2)); //输出：3。从第二个位置（王五）开始向后查找。
alert(names.lastIndexOf('mjj',2)); //输出1。从第2个位置（王五）开始向前查找。
alert(names.lastIndexOf('mjjxxxx',2)); //输出：-1。如果查不到结果 返回-1
// 5.迭代方法
// 5.1 filter() 将数组的元素进行过滤
var numbers = [1,2,3,6,19,4,20];
var filterResult = numbers.filter(function(item,index,array){
console.log('item:'+ item);
console.log('index:'+ index);
console.log('array:'+ array);
return item > 10
});
console.log(filterResult);
// 5.2 map()方法
var mapresult = numbers.map(function(item,index,array){
return item * 2;
})
console.log(mapresult);
for(var i = 0; i < mapresult.length; i ++){
// console.log(mapresult[i]);
}
// 5.3 forEach()
mapresult.forEach(function(item,index){
console.log(item);
})
</script>
</body>
</html>
29、数组的迭代方法，过滤，遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组的迭代方法</title>
</head>
<body>
<script type="text/javascript">
// 5.迭代方法
// 5.1 filter() 将数组的元素进行过滤
var numbers = [1,2,3,6,19,4,20];
var filterResult = numbers.filter(function(item,index,array){
console.log('item:'+ item);
console.log('index:'+ index);
console.log('array:'+ array);
return item > 10
});
console.log(filterResult);//输出：[19,20]。遍历上面的数组，与10进行比较，把大于10的数组取出来，组成新的数组。
// 5.2 map()方法
var mapresult = numbers.map(function(item,index,array){ //array可选项，可写可不写。
return item * 2;
})
console.log(mapresult);//输出：[2, 4, 6, 12, 38, 8, 40]。将上面的数组都乘以2后组成新的数组。
for(var i = 0; i < mapresult.length; i ++){
console.log(mapresult[i]);
}
//输出：竖排的2 4 6 12 38 8 40。
// 5.3 forEach() 遍历的操作
mapresult.forEach(function(item,index){
console.log(item);
})
//输出：竖排的2 4 6 12 38 8 40。
</script>
</body>
</html>
30、map方法的应用，数组的遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map方法的应用</title>
</head>
<body>
<script type="text/javascript">
var oldArray = [
{
name:'张三',
age: 17
},
{
name:'mjj',
age: 29
},
{
name:'李四',
age: 30
}
];
/*
//方法一：
var newNames = [];
var newAges = [];
for(var i = 0; i < oldArray.length; i ++){
var myname = oldArray[i].name;
var myage = oldArray[i].age;
newNames.push(myname);//将遍历出来的姓名推到newNames列表里面。
newAges.push(myage);//将遍历出来的年龄推到newAges列表里面。
}
console.log(newNames);//输出：['张三', 'mjj', '李四']
console.log(newAges);//输出：[17, 29, 30]
*/
//方法二：
var newNames = oldArray.map(function(item,index){
return item.name
})
var newAges = oldArray.map(function(item,index){
return item.age
})
console.log(newNames);//输出：['张三', 'mjj', '李四']
console.log(newAges);//输出：[17, 29, 30]
</script>
</body>
</html>
31、字符串的常用方法 查找 清除空格 大小写转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串的常用方法</title>
</head>
<body>
<script type="text/javascript">
// 属性
// length
// 方法
/*
charAt()
charCodeAt()
concat()
slice()
substring()
substr()
indexOf()
lastIndexOf()
trim()
//常用
toLowerCase()
toUpperCase()
//转成当地的大小写
toLocaleLowerCase()
toLocaleUpperCase()
*/
/*
var str = 'hello world'; //切片
console.log(str.length);//获取字符串的长度 输出：11
console.log(str.charAt(1)); //输出：e 获取指定的字符
console.log(str.charCodeAt(1)) //输出：101 获取指定的字符对应的编码
console.log(str.concat(' mjj',' jack')); //输出：hello world mjj jack
//拼接字符串 通常情况 不使用concat来做拼接,使用 +来做多个字符的拼接
*/
// console.log(str.slice(2));
// console.log(str.substring(2));
// console.log(str.substr(2));
// // 第一个参数是起始的位置,第二个参数是结束的位置 顾头不顾尾
// console.log(str.slice(2,4));
// console.log(str.substring(2,4));
// // 第二个参数是返回的字符数
// console.log(str.substr(2,6));
// console.log(str.slice(-3,-1)); //rld slice(8,10)
// console.log(str.slice(8,10));
//字符串的查找方法
var str = 'hello world';
console.log(str.indexOf('o')); //输出：4。 输出从左向右第一个o的序号
console.log(str.lastIndexOf('o')); //输出：7 输出从右向左查第一个o的序号。
console.log(str.indexOf('o',6)); //输出：7 从左向右，第6个字符w开始查找，o在第7个序号。
console.log(str.lastIndexOf('o',6)); //输出：4 从右向左，第6个字符w开始向左查找，o在第4个序号。
// trim()清除当前 字符串的前后空格
var str = ' hello world ';
console.log(str.trim());//输出：hello world。 清除了hello world前后的空格。
console.log(str);
//字符的大小写转换
var str = 'Hello Mjj';
console.log(str.toUpperCase());//输出：HELLO MJJ
console.log(str.toLowerCase());//输出：hello mjj
</script>
</body>
</html>
32、查找当前字符e在字符串中的所有位置 实例操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找当前字符e在字符串中的所有位置</title>
</head>
<body>
<script type="text/javascript">
// 查找e 在str中的所有的位置
var str = 'He unfolded the map and set it on the floor.';
var arr = [];
var pos = str.indexOf('e'); //输出：1。 找到一个后停止，不再往下查找。
console.log(pos);
while(pos > -1){ //找到返回序号，找不到返加-1，根据这个设置条件pos>-1。
// 找到当前e字符对应的位置
arr.push(pos); //将找到的序号推到列表arr中。
pos = str.indexOf('e',pos+1); //从pos+1的位置继续往后查找e。
}
console.log(arr); //输出：[1, 9, 14, 25, 36]
</script>
</body>
</html>
33、Date日期对象 输出样式，格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date日期对象</title>
</head>
<body>
<script type="text/javascript">
// UTC 1970.1.1 到 285616年
// Date日期对象
// 1.四种方式创建
var now = new Date();
console.log(now); //输出：Sun Jan 02 2020 11:32:09 GMT+0800 (中国标准时间)
var xmas = new Date('December 25,1995 13:30:00');
console.log(xmas); //输出：Mon Dec 25 1995 13:30:00 GMT+0800 (中国标准时间)
var xmas = new Date(1995,11,25); //11，这里获取的是12月。
console.log(xmas); //输出：Mon Dec 25 1995 00:00:00 GMT+0800 (中国标准时间)
var xmas = new Date(1995,11,25,14,30,0);
console.log(xmas); //输出：Mon Dec 25 1995 14:30:00 GMT+0800 (中国标准时间)
var now = new Date();
// 常用方法
console.log(now.getDate()); //获取月份的第几天 (1~31)
console.log(now.getMonth()); //获取月份 (0~11)
console.log(now.getFullYear()); //获取年份
console.log(now.getDay()); //获取一星期中的第几天(0 ~ 6)，从星期天开始计算
console.log(now.getHours()); //获取小时(0~23);
console.log(now.getMinutes()); //获取分钟(0~59);
console.log(now.getSeconds()); //获取秒(0~59);
// 日期格式化方法
console.log(now.toDateString()); //输出：Sun Jan 02 2022 星期几 月 日 年
console.log(now.toTimeString()); //输出：14:29:32 GMT+0800 (中国标准时间) 时 分 秒 时区
// 常用
console.log(now.toLocaleDateString()); //输出：2020/1/2
console.log(now.toLocaleTimeString()); //输出：下午2:30:44
console.log(now.toLocaleString()); //输出：2020/1/2 下午2:31:06
console.log(now.toUTCString()); //输出：Sun, 02 Jan 2022 06:32:07 GMT
</script>
</body>
</html>
34、返回用数字时钟格式的时间 例如：3:02:51 P.M.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回用数字时钟格式的时间</title>
</head>
<body>
<script type="text/javascript">
// 6:27:35 P.M.
// 6:30:01 P.M.
// 6:04:01 A.M.
// :0 4
// : 30
function nowNumTime(){
var now = new Date();
var hour = now.getHours(); //获取小时：0 ~ 23.
var minute = now.getMinutes(); //获取分钟：0 ~ 59.
var second = now.getSeconds(); //获取秒：0 ~ 59.
// 18 > 12 ? 18-12 : 8 //意思是判断时间是否大于12，如果大于，则减去12，否则直接显示时间。
var temp = '' + (hour > 12 ? hour - 12 : hour);//如果hour>12，则显示hour-12，否则直接显示hour。
if(hour === 0){
temp = '12';
}
temp = temp +(minute < 10 ? ':0': ":")+ minute;
//如果minute<10，则显示:0，否则显示:。然后，temp+括号里面的内容+minute。下面两个同理。
temp = temp +(second < 10 ? ':0': ":")+ second;
temp = temp + (hour >= 12 ? ' P.M.': " A.M.");
return temp;
}
var nownum = nowNumTime();
console.log(nownum); // 输出：2:57:59 P.M.
</script>
</body>
</html>
35、字符串和数值相互转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串和数值相互转换</title>
</head>
<body>
<script type="text/javascript">
//字符串类型，在浏览器的控制台里面显示字体颜色为黑色。
//数值类型，在浏览器的控制台里面显示字体颜色为蓝色。
var str = '13131.9090013';
// 字符串转数值类型
console.log(parseInt(str)); //输出：13131
console.log(parseFloat(str)); //输出：13131.9090013
console.log(typeof parseFloat(str)); //输出：number
var str = '131lkla31.9090013';
var a = Number(str);
console.log(isNaN(a)); //输出：true 判断是否是数值类型
var num = 1313.179;
// 强制类型转换
console.log(num.toString()); //输出：1313.179
console.log(typeof num.toString()); //输出：string
console.log(String(num)); //输出：1313.179
// 隐式转换
console.log('' + num); //输出：1313.179 类型为：string 。数值加一个空的字符串，能将数值转化为字符串。
console.log(''.concat(num)); //输出：1313.179 同上
console.log(Number(num.toFixed(2))); //输出：1313.18 数值2是保留两位小数，第三位上四舍五入。
console.log(typeof (Number(num.toFixed(2)))); //输出：number
</script>
</body>
</html>
36、Global对象 uri 编码 解码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Global对象</title> </head> <body> <script type="text/javascript"> // URI 统一资源标识符（Uniform Resource Identifier，URI)是一个用于标识某一互联网资源名称的字符串。 var uri = 'http://www.apeland.cn/web index.html?name=zhangsan'; // encodeURIComponent()编码 使用最多的方法 console.log(encodeURI(uri));//输出：http://www.apeland.cn/web%20index.html?name=zhangsan console.log(encodeURIComponent(uri));//输出：http%3A%2F%2Fwww.apeland.cn%2Fweb%20index.html%3Fname%3Dzhangsan // 解码 decodeURIComponent() // decodeURI(); // decodeURIComponent();解码，使用最多的方法。 </script> </body> </html>
37、window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<script type="text/javascript">
//在JavaScript里面，window对象等同于global对象。
var a = 3;
console.log(window.a);//输出：3
function hello(){
alert(window.a);
}
window.hello();//输出：3
</script>
</body>
</html>
38、Math对象 查找列表最大数，最小数 取整，四舍五入，随机数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Math对象</title> </head> <body> <script type="text/javascript"> // Math // var a = 3; // 方法 min() max() var max = Math.max(3,34,56,21); var min = Math.min(3,34,56,21); console.log(max);//输出：56 找出最大值 console.log(min);//输出：3 找出最小值 var arr = [1,2,32,23,45,21]; var max = Math.max.apply(null,arr); var min = Math.min.apply(null,arr); // var max= Math.max(arr[0],arr[1],arr[2],arr[3],arr[4],arr[5]); 相当于遍历了列表arr，找到最大值。 console.log(max);//输出：45 console.log(min);//输出：1 // ceil() floor() round() var num = 24.8; console.log(Math.ceil(num)); //输出：25。 天花板函数 向上取整 console.log(Math.floor(num)); //输出：24。 地板函数 向下取整 console.log(Math.round(num)); //输出：25。 标准的四舍五入 // 随机数 random() 0 <= random < 1 console.log(Math.random()); //输出：0.09707070528033301 // 1.获取min到max之间的整数 // 2.获取随机颜色 rgb(0~255,0~255,0~255); // 3.随机验证码 四位 数字+ 字母 (大写) </script> </body> </html>
39、利用：Math.random() 获取min到max之间的整数 (1~100)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取min到max之间的整数 (1~100)</title>
</head>
<body>
<script type="text/javascript">
// 1.获取min到max之间的整数 (1~100)
//方法一：
var max = 100;
var min = 1;
var a = Math.floor(Math.random() * (max-min) + min);
//Math.random()获取0~1的随机数，然后乘以(max:100-min:1=99)，则为0~99的随机数，再加上min:1，则为1~100的随机数。
console.log(a);//输出：8 一个随机数。
//方法二：
function random(max,min){
return Math.floor(Math.random() * (max-min) + min);
}
b = random(100,1);
console.log(b);//输出：99 一个随机数。
</script>
</body>
</html>
40、利用：Math.random() 获取随机颜色 rgb(0~255,0~255,0~255); ( 模板字符串 `` var result = `rgb(${r},${g},${b})`) 使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取随机颜色 rgb(0~255,0~255,0~255);</title>
</head>
<body>
<script type="text/javascript">
// 2.获取随机颜色 rgb(0~255,0~255,0~255);
function random(max,min){
return Math.floor(Math.random() * (max-min) + min);
}
function randomColor(){
// var result
var r = random(0,256),g = random(0,256),b = random(0,256);
// 模板字符串 ``
var result = `rgb(${r},${g},${b})`;//目标：rgb(0~255,0~255,0~255)
//上面的一行代码相当于：result ='rgb'+'('+r+','+g+','+b+')'
return result;
}
var rc = randomColor();
console.log(rc);//输出：rgb(60,212,122) 这是一组随机数字。
document.body.style.backgroundColor = rc;//随机改变网页的颜色。
//document.write()，这是之前学的，在网页中写入。
</script>
</body>
</html>
41、利用：Math.random() 生成四位随机验证码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成四位随机验证码</title>
</head>
<body>
<script type="text/javascript">
// 3.随机验证码 四位 数字+ 字母 (大写) 65Yz
function random(max,min){
return Math.floor(Math.random() * (max-min) + min);
}
function creatCode(){
// 设置默认的空的字符串
var code = '';
// 设置长度
var codeLength = 4;//设置验证码的位数。
var randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
for(var i = 0; i < codeLength; i++){
// 设置随机范围 0~36
var index = random(0,36);//返回0~36的随机数字。
code += randomCode[index];//这里等同于：code = code + randomCode[index]
}
return code;
}
var rndcode = creatCode();//调用函数creatCode()。
console.log(rndcode);//输出：WD51 是一个随机验证码。
document.write(`<h1>${rndcode}</h1`)//以标签h1的格式写到网页。
</script>
</body>
</html>
作者：龙飞
-------------------------------------------
个性签名：独学而无友，则孤陋而寡闻。做一个灵魂有趣的人！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，博主在此感谢！
浙公网安备 33010602011771号