成都网站设计制作工作室,wordpress chastity,百度新闻排行榜,网站301检测一、变量
1.双标签 !-- 外部js script 双标签 --script srcmy.js/script
在新文件my.js里面写#xff1a; 2.字符串定义#xff1a;
//外单内双var str 我是一个高富帅的程序员;console.log(str);// 字符串转义字符 都是用 \ 开头 …一、变量
1.双标签 !-- 外部js script 双标签 --script srcmy.js/script
在新文件my.js里面写 2.字符串定义
//外单内双var str 我是一个高富帅的程序员;console.log(str);// 字符串转义字符 都是用 \ 开头 但是这些转义字符写在引号里面//外双引号内单引号var str1 我是一个高富帅的\n程序员;// \n 是换行console.log(str1); 3.字符串拼接 // 1. 检测获取字符串的长度 length var str my name is andy;console.log(str.length); // 15// 2. 字符串的拼接 只要有字符串和其他类型相拼接 最终的结果是字符串类型console.log(沙漠 骆驼); // 字符串的 沙漠骆驼console.log(pink老师 18); // pink老师18console.log(pink true); // pinktrueconsole.log(12 12); // 24console.log(12 12); // 1212console.log(pink老师 18 岁);var age 19;console.log(pink老师 age 岁);案例var ageprompt(请输入您的年龄);var str1您已经age岁了;alert(str1)
4.boolean 及undefined 和null var flagtrue;//flag 布尔型var flag1false;console.log(flag1);//true参与加法运算当成1console.log(flag11);//false参与加法运算当成0// 如果一个变量声明未赋值 就是 undefined 未定义数据类型var str;console.log(str);var variable undefined;console.log(variable pink); // undefinedpinkconsole.log(variable 1); // NaN undefined 和数字相加最后的结果是 NaN// null 空值var space null;console.log(space pink); // nullpinkconsole.log(space 1); // 1
5.typeof检测变量数据类型 var num 10;console.log(typeof num); // numbervar str pink;console.log(typeof str); // stringvar flag true;console.log(typeof flag); // booleanvar vari undefined;console.log(typeof vari); // undefinedvar timer null;console.log(typeof timer); // object// prompt 取过来的值是 字符型的var age prompt(请输入您的年龄);console.log(age);console.log(typeof age); 6.字符串的不可变性 var str andy;console.log(str);str red;console.log(str);// 因为我们字符串的不可变所以不要大量的拼接字符串var str ;for (var i 1; i 1000000000; i) {str i;}console.log(str);
7.数据类型转换
1.转为字符串 //toString()var num10;console.log(num);var strnum.toString();console.log(str);console.log(typeof str);//String(变量)console.log(String(num));//拼接字符串方法console.log(num);
黑字体是字符串 2.转为数字 // var age prompt(请输入您的年龄);// 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数// console.log(parseInt(age));console.log(parseInt(3.14)); // 3 取整console.log(parseInt(3.94)); // 3 取整console.log(parseInt(120px)); // 120 会去到这个px单位console.log(parseInt(rem120px)); // NaN// 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数console.log(parseFloat(3.14)); // 3.14console.log(parseFloat(120px)); // 120 会去掉这个px单位console.log(parseFloat(rem120px)); // NaN// 3. 利用 Number(变量) var str 123;console.log(Number(str));console.log(Number(12));// 4. 利用了算数运算 - * / 隐式转换console.log(12 - 0); // 12console.log(123 - 120);console.log(123 * 1);案例1计算年龄// 弹出一个输入框prompt)让用户输入出生年份 用户输入// 把用户输入的值用变量保存起来然后用今年的年份减去变量值结果就是现在的年龄 程序内部处理// 弹出警示框alert) 把计算的结果输出 输出结果var year prompt(请您输入您的出生年份);var age 2021 - year; // year 取过来的是字符串型 但是这里用的减法 有隐式转换alert(您今年已经 age 岁了);
3.转换为布尔型 //代表空、否定的值会被转换为false//如、0、NaN、null、undefinedconsole.log(Boolean()); // falseconsole.log(Boolean(0)); // falseconsole.log(Boolean(NaN)); // falseconsole.log(Boolean(null)); // falseconsole.log(Boolean(undefined)); // false//其余都是trueconsole.log(------------------------------);console.log(Boolean(123));console.log(Boolean(你好吗));console.log(Boolean(我很好));
8.返回字符串和位置
1.根据位置返回字符 // 1. charAt(index) 根据位置返回字符 var str andy; console.log(str.charAt(3)); // 遍历所有的字符 for (var i 0; i str.length; i) { console.log(str.charAt(i)); } // 2. charCodeAt(index) 返回相应索引号的字符ASCII值 目的 判断用户按下了那个键 console.log(str.charCodeAt(0)); // 97 // 3. str[index] H5 新增的 console.log(str[0]); // a
2.根据字符返回位置 //str.indexOf(要查找的字符, [起始的位置])var str 改革春风吹满地春天来了;console.log(str.indexOf(春));//2console.log(str.indexOf(春, 3)); //8 、从索引号是 3的位置开始往后查找
9查找字符串中某个字符出现的次数 var str oaoefoxyozzop;var index str.indexOf(o);var num 0;// console.log(index);while (index ! -1) {console.log(index);num;index str.indexOf(o, index 1);//从下一个o开始再找}console.log(o出现的次数是: num);
10. 判断一个字符串中出现次数最多的字符并统计其次数。
// 有一个对象 来判断是否有该属性 对象[属性名]var o {age: 18}if (o[sex]) {console.log(里面有该属性);} else {console.log(没有该属性);}// 核心算法利用 charAt( 遍历这个字符串// 把每个字符都存储给对象 如果对象没有该属性就为1如果存在了就 1// 遍历对象得到最大值和该字符var str aboooo;var obj {};for (var i 0; i str.length; i) {var chars str.charAt(i); // chars 是字符串的每一个字符if (obj[chars]) { // o[chars] 得到的是属性值i0时是判断o里面是否有a这个属性值obj[chars];//当o里面有a这个属性时就将a这个属性的值加1} else {obj[chars] 1;}//当o里面没有a这个属性时就将a这个属性的值赋值为1最后的结果a:1,b:1,o:4 }console.log(obj);//{a:1,b:1,o:4}// 2. 遍历对象var max 0;var ch ;for (var k in obj) {// k 得到是 属性名// o[k] 得到的是属性值if (obj[k] max) {max obj[k];ch k;}}console.log(max);console.log(最多的字符是 ch);alert(a的值为obj.a);//1alert(b的值为obj.b);//1alert(o的值为obj.o);//4
11.字符串操作方法 // 1. concat(字符串1,字符串2....) var str andy; console.log(str.concat(red)); // 2. substr(截取的起始位置, 截取几个字符); var str1 改革春风吹满地; console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始 第二个2 是取几个字符 // 1. 替换字符 replace(被替换的字符, 替换为的字符) 它只会替换第一个字符 var str andyandy; console.log(str.replace(a, b)); // 有一个字符串 abcoefoxyozzopp 要求把里面所有的 o 替换为 * var str1 abcoefoxyozzopp; while (str1.indexOf(o) ! -1) { str1 str1.replace(o, *); } console.log(str1); // 2. 字符转换为数组 split(分隔符) 前面我们学过 join 把数组转换为字符串 ar str2 [red, pink, blue];console.log(str2.join());//redpinkbluevar str3 redpinkblue;console.log(str3.split());// [red, pink, blue]
运算符
算数运算符
1.基本运算
console.log(1 1); // 2console.log(1 - 1); // 0console.log(1 * 1); // 1console.log(1 / 1); // 1// % 取余 取模 console.log(4 % 2); // 0console.log(5 % 3); // 2console.log(3 % 5); // 3// 浮点数 算数运算里面会有问题console.log(0.1 0.2); // 0.30000000000000004console.log(0.07 * 100); // 7.000000000000001// 我们不能直接拿着浮点数来进行相比较 是否相等var num 0.1 0.2;console.log(num 0.3); // false
2.逻辑运算符 // 1. 逻辑与 and 两侧都为true 结果才是 true 只要有一侧为false 结果就为false console.log(3 5 3 2); // falseconsole.log(3 5 3 2); // true// 2. 逻辑或 || or 两侧都为false 结果才是假 false 只要有一侧为true 结果就是trueconsole.log(3 5 || 3 2); // true console.log(3 5 || 3 2); // false// 3. 逻辑非 not console.log(!true); // false
3.短路逻辑 // 1. 用我们的布尔值参与的逻辑运算 true false false // 2. 123 456 是值 或者是 表达式 参与逻辑运算 // 3. 逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1console.log(123 456); // 456console.log(0 456); // 0console.log(0 1 2 456 * 56789); // 0为假‘1 2 456 * 56789’不再参与运算console.log( 1 2 456 * 56789); // // 如果有空的或者否定的为假 其余是真的 0 null undefined NaN// 4. 逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1 如果表达式1 结果为假 则返回表达式2console.log(123 || 456); // 123console.log(123 || 456 || 456 123); // 123console.log(0 || 456 || 456 123); // 456// 逻辑中断很重要 它会影响我们程序运行结果思密达var num 0;console.log(123 || num);console.log(num); // 0
4.运算符优先级 流程控制
1.分支
if和else和c一样
1.三元表达式 var num 10; var result num 5 ? 是的 : 不是的; // 我们知道表达式是有返回值的 console.log(result);
1.switch语句 switch (3) { case 1: console.log(这是1); break; case 2: console.log(这是2); break; case 3: console.log(这是3); break; default: console.log(没有匹配结果); } 循环
1.for循环 //打印三角形 var str; var raw; rawprompt(输入打印行数); for(var i0;iraw;i){ for(var j0;ji;j){ strstr*; } strstr\n; }
console.log(str); //打印乘法表 var str; var raw; for(var i1;i9;i){ for(var j1;ji;j){ strstri*ji*j; strstr\t; } strstr\n; } console.log(str);
2.do while // 1.do while 循环 语法结构 do { // 循环体 } while (条件表达式) // 2. 执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真则继续执行循环体否则退出循环 // 3. 代码验证 var i 1; do { console.log(how are you?); i; } while (i 100) // 4. 我们的do while 循环体至少执行一次
continue // continue 关键字 退出本次当前次的循环 继续执行剩余次数循环 for (var i 1; i 5; i) { if (i 3) { continue; // 只要遇见 continue就退出本次循环 直接跳到 i } console.log(我正在吃第 i 个包子); } 数组
数组对象的创建 // 1. 利用数组字面量 var arr [1, 2, 3]; console.log(arr[0]); // 2. 利用new Array() // var arr1 new Array(); // 创建了一个空的数组 // var arr1 new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素 var arr1 new Array(2, 3); // 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2和3 console.log(arr1);
检测是否是数组 // (1) instanceof 运算符 它可以用来检测是否为数组 var arr []; var obj {}; console.log(arr instanceof Array); console.log(obj instanceof Array); // (2) Array.isArray(参数); H5新增的方法 ie9以上版本支持 console.log(Array.isArray(arr)); console.log(Array.isArray(obj));
数组元素的增删 // 1. push() 在我们数组的末尾 添加一个或者多个数组元素 push 推 var arr [1, 2, 3]; // arr.push(4, pink); console.log(arr.push(4, pink)); console.log(arr); // (1) push 是可以给数组追加新的元素 // (2) push() 参数直接写 数组元素就可以了 // (3) push完毕之后返回的结果是 新数组的长度 // (4) 原数组也会发生变化 // 2. unshift 在我们数组的开头 添加一个或者多个数组元素 console.log(arr.unshift(red, purple)); console.log(arr); // (1) unshift是可以给数组前面追加新的元素 // (2) unshift() 参数直接写 数组元素就可以了 // (3) unshift完毕之后返回的结果是 新数组的长度 // (4) 原数组也会发生变化 // 3. pop() 它可以删除数组的最后一个元素 console.log(arr.pop()); console.log(arr); // (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素 // (2) pop() 没有参数 // (3) pop完毕之后返回的结果是 删除的那个元素 // (4) 原数组也会发生变化 // 4. shift() 它可以删除数组的第一个元素 console.log(arr.shift()); console.log(arr); // (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素 // (2) shift() 没有参数 // (3) shift完毕之后返回的结果是 删除的那个元素 // (4) 原数组也会发生变化 4.数组排序 // 冒泡排序 // var arr [5, 4, 3, 2, 1]; var arr [4, 1, 2, 3, 5]; for (var i 0; i arr.length - 1; i) { // 外层循环管趟数 for (var j 0; j arr.length - i - 1; j) { // 里面的循环管 每一趟的交换次数 // 内部交换2个变量的值 前一个和后面一个数组元素相比较 if (arr[j] arr[j 1]) { var temp arr[j]; arr[j] arr[j 1]; arr[j 1] temp; } } } console.log(arr); // 1. 翻转数组 var arr [pink, red, blue]; arr.reverse(); console.log(arr); // 2. 数组排序冒泡排序 var arr1 [13, 4, 77, 1, 7]; arr1.sort(function(a, b) { // return a - b; 升序的顺序排列 return b - a; // 降序的顺序排列 }); console.log(arr1);
获取数组元素索引 // 返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找 // 它只返回第一个满足条件的索引号 // 它如果在该数组里面找不到元素则返回的是 -1 // var arr [red, green, blue, pink, blue]; var arr [red, green, pink]; console.log(arr.indexOf(blue)); // 返回数组元素索引号方法 lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找 var arr [red, green, blue, pink, blue]; console.log(arr.lastIndexOf(blue)); // 4 /script
数组去重 // 封装一个 去重的函数 unique 独一无二的 function unique(arr) { var newArr []; for (var i 0; i arr.length; i) { if (newArr.indexOf(arr[i]) -1) { newArr.push(arr[i]); } } return newArr; } // var demo unique([c, a, z, a, x, a, x, c, b]) var demo unique([blue, green, blue]) console.log(demo);
6.数组转换为字符串 // 1. toString() 将我们的数组转换为字符串 var arr [1, 2, 3]; console.log(arr.toString()); // 1,2,3 // 2. join(分隔符) var arr1 [green, blue, pink]; console.log(arr1.join()); // green,blue,pink console.log(arr1.join(-)); // green-blue-pink console.log(arr1.join()); // greenbluepink
7.基本包装类型 var str andy; console.log(str.length); // 对象var obj{}才有 属性和方法 复杂数据类型才有 属性和方法 // 简单数据类型为什么会有length 属性呢 // 基本包装类型 就是把简单数据类型 包装成为了 复杂数据类型 // (1) 把简单数据类型包装为复杂数据类型 //相当于执行以下操作 var temp new String(andy); // (2) 把临时变量的值 给 str str temp; // (3) 销毁这个临时变量 temp null; 函数
1.语法 function sayHi() { console.log(hi~~); } // (1) function 声明函数的关键字 全部小写 // (2) 函数是做某件事情函数名一般是动词 sayHi // (3) 函数不调用自己不执行 // 2. 调用函数 // 函数名(); sayHi(); // 调用函数的时候千万不要忘记加小括号
2.参数
1.实参和形参 function cook(aru) { // 形参是接受实参的 aru 酸辣土豆丝 形参类似于一个变量 console.log(aru); } cook(酸辣土豆丝); cook(大肘子); // 4. 函数的参数可以有也可以没有个数不限 2.参数匹配 // 函数形参实参个数匹配 function getSum(num1, num2) { console.log(num1 num2); } // 1. 如果实参的个数和形参的个数一致 则正常输出结果 getSum(1, 2); // 2. 如果实参的个数多于形参的个数 会取到形参的个数 getSum(1, 2, 3); // 3. 如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是 NaN // 形参可以看做是不用声明的变量 num2 是一个变量但是没有接受值 结果就是undefined getSum(1); // NaN // 建议 我们尽量让实参的个数和形参相匹配
3.复杂的数据类型传参
// 复杂数据类型传参
function Person(name) { this.name name; } function f1(x) { // x p console.log(x.name); x.name 张学友; console.log(x.name); // 3. 这个输出什么 ? 张学友 } var p new Person(刘德华); console.log(p.name); // 1. 这个输出什么 ?刘德华 f1(p); // 2. 这个输出什么 ?刘德华 张学友 console.log(p.name); // 4. 这个输出什么 ?张学友 p-x-张学友 返回值 // 函数返回值注意事项 // 1. return 终止函数 function getSum(num1, num2) { return num1 num2; // return 后面的代码不会被执行 alert(我是不会被执行的哦) } console.log(getSum(1, 2)); // 2. return 只能返回一个值 function fn(num1, num2) { return num1, num2; // 返回的结果是最后一个值 } console.log(fn(1, 2)); // 3. 我们求任意两个数的 加减乘数结果 function getResult(num1, num2) { return [num1 num2, num1 - num2, num1 * num2, num1 / num2]; } var re getResult(1, 2); // 返回的是一个数组 console.log(re); // 4. 我们的函数如果有return 则返回的是 return 后面的值如果函数么有 return 则返回undefined function fun1() { return 666; } console.log(fun1()); // 返回 666 function fun2() { } console.log(fun2()); // 函数返回的结果是 undefined arguments
当我们不确定有多少个参数传递的时候可以用arguments来获取。在JavaScript中arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象arguments对象中存储了传递的所有实参。 // arguments 的使用 只有函数才有 arguments对象 而且是每个函数都内置好了这个arguments
function fn() { // console.log(arguments); // 里面存储了所有传递过来的实参 arguments [1,2,3] // console.log(arguments.length); // console.log(arguments[2]); // 我们可以按照数组的方式遍历arguments for (var i 0; i arguments.length; i) { console.log(arguments[i]);}} fn(1, 2, 3); fn(1, 2, 3, 4, 5); // 伪数组 并不是真正意义上的数组 // 1. 具有数组的 length 属性 // 2. 按照索引的方式进行存储的 // 3. 它没有真正数组的一些方法 pop() push() 等等 函数声明 // 函数的2中声明方式 // 1. 利用函数关键字自定义函数(命名函数) function fn() { } fn(); // 2. 函数表达式(匿名函数) // var 变量名 function() {}; var fun function(aru) { console.log(我是函数表达式); console.log(aru); } fun(pink老师); // (1) fun是变量名 不是函数名 // (2) 函数表达式声明方式跟声明变量差不多只不过变量里面存的是值 而 函数表达式里面存的是函数 // (3) 函数表达式也可以进行传递参数 作用域 1基本作用域 // 1.JavaScript作用域 就是代码名字变量在某个范围内起作用和效果 目的是为了提高程序的可靠性更重要的是减少命名冲突 // 2. js的作用域es6之前 全局作用域 局部作用域 // 3. 全局作用域 整个script标签 或者是一个单独的js文件 var num 10; var num 30; console.log(num); // 4. 局部作用域函数作用域 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用 function fn() { // 局部作用域 var num 20; console.log(num); } fn(); // js中没有块级作用域 js的作用域 全局作用域 局部作用域 现阶段我们js 没有 块级作用域 // 块级作用域 {} if {} for {} // java // if(xx) { // int num 10; // } // 外面的是不能调用num的 if (3 5) { var num 10; } console.log(num); //外面是可以调用num的
2.作用域链
·只要是代码就至少有一个作用域
·写在函数内部的局部作用域
·如果函数中还有函数那么在这个作用域中就又可以诞生一个作用域
·根据在内部函数可以访问外部函数变量的这种机制用镇式查找决定哪些数据能被内部函数访问就称作作用域链 // 作用域链 内部函数访问外部函数的变量采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链 就近原则 var num 10; function fn() { // 外部函数 var num 20; function fun() { // 内部函数 console.log(num); } fun(); } fn(); 一层一层向上找 3.案例
案例1. // 案例1 结果是几 function f1() { var num 123; function f2() { console.log(num); // 站在目标出发一层一层的往外查找 } f2(); } var num 456; f1(); 案例2.
// 案例2 结果是几 var a 1; function fn1() { var a 2; var b 22; fn2(); function fn2() { var a 3; fn3(); function fn3() { var a 4; console.log(a); //a的值 ? console.log(b); //b的值 ? } } } fn1();
