一、变量
1.双标签
<!-- 外部js script 双标签 --><script src='my.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老师18'console.log('pink' + true); // pinktrueconsole.log(12 + 12); // 24console.log('12' + 12); // '1212'console.log('pink老师' + 18 + '岁');var age = 19;console.log('pink老师' + age + '岁');案例：var age=prompt('请输入您的年龄');var str1='您已经'+age+'岁了';alert(str1)4.boolean 及undefined 和null
var flag=true;//flag 布尔型var flag1=false;console.log(flag+1);//true参与加法运算当成1console.log(flag1+1);//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); // 15.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 num=10;console.log(num);var str=num.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] 得到的是属性值，i=0时是判断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);//411.字符串操作方法
// 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 = 'red&pink&blue';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); // false2.逻辑运算符
// 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); // false3.短路逻辑
// 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); // 04.运算符优先级
- 流程控制
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;
raw=prompt('输入打印行数');
for(var i=0;i<=raw;i++){
for(var j=0;j<=i;j++){
str=str+'*';
}
str=str+'\n';
}
console.log(str);
//打印乘法表
var str='';
var raw;
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
str=str+i+'*'+j+'='+i*j;
str=str+'\t';
}
str=str+'\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('&')); // green&blue&pink
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();
