Javascript初学者笔记篇
初识JavaScript
- JS作用
- JS的组成
- JS书写位置
- 注释
- 输入输出语句
- 变量
- 变量命名规范
- 变量类型
-
- 简单数据类型
- 进制
- 获取数据类型
- 数据类型转换
-
- 数字转换成字符串
- 字符串转换成数字
- 转换成布尔值
- 运算符
-
- 算术运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
- 运算符的优先级
- 流程控制
- 数组
-
- 创建数组
- 冒泡排序
- 函数
JavaScript最初命名LiveScript，它是一种脚本语言，运行在客户端。也可以基于Node.js技术进行服务端编程。
JS作用
- 表单验证
- 网页特效
- 服务端开发（Node.js）
- 桌面程序（Electron）
- App（Cordova）
- 控制硬件-物联网（Ruff）
- 游戏开发 （cocos2d-js）
JS的组成
- ECMAScript - Javascript语法
- DOM - 页面文档对象模型
- BOM - 浏览器对象模型
JS书写位置
- 行内式
<input type="button" value="行内式" onClick="alert('Hello World!')" >
- 内嵌式
<script>
alert('Hello World!');
</script>
- 外部
<script src="xxx.js">这里不允许写任何代码</script>
注释
- 单行注释
// 这是单行注释
- 多行注释
/*
这是多行注释
*/
输入输出语句
- alert(msg) - 浏览器弹出警示框
alert('警示框');
- console.log(msg) - 浏览器控制台打印输出信息
// 在浏览器开发者工具(F12)的Console中查看
console.log('测试使用')
- prompt(info) - 浏览器弹出输入框，用户可以输入
prompt('输入框');
变量
// 声明变量
var age;
// 给变量赋值
age = 18;
// 变量的初始化
var myname = '落叶';
// 声明多个变量
var employeename = 'Kevin',
phonenumber = 186,
address = 'xxxx';
// 声明变量的特殊情况
// 1. 只声明不赋值，结果是undefined未定义的
var sex;
// 2. 不声明不赋值，会报错
console.log(tel);
// 3. 不声明直接使用，是可以的，但是不提倡使用。
email = '[email protected]';
变量命名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成，如：usrAge, num01, _name
- 严格区分大小写。var app；和var App；是两个变量
- 不能以数字开头。18age 是错误的
- 不能是关键字、保留字。如：var、for、while
- 变量名必须有意义，最好是英文单词。
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。如：myFirstName
变量类型
Javascript是一种弱类型或者说动态语言。变量的类型在程序运行过程中被自动确定。
var age = 18; // 这是一个数字型
var myName = 'Pianpianluoye'; // 这是一个字符串
// JavaScript 拥有动态类型，相同变量可以作用不同类型
var x = 6; // x 为数字
var x = 'Material'; // x 为字符串
简单数据类型
- Number - 数字型，包含整型值和浮点型值，默认值为0
// 数字型最大值
console.log(Number.MAX_VALUE);
// 数字型最小值
console.log(Number.MIN_VALUE);
// 无穷大
alert(Infinity);
// 无穷小
alert(-Infinity);
// Nan - 代表一个非数值
alert(NaN);
// 判断非数字,非数字为true，数字为false
console.log(isNaN(12)); // false
- Boolean - 布尔类型，默认值false
// Boolean类型参与运算预算时 true = 1 false = 0
console.log(true + 1); // result: 2
console.log(false + 1); // result: 1
- String - 字符串类型，默认值""
// 字符串类型必须要加引号，因为HTML中使用的是双引号，建议JS里使用单引号
var strName = 'Pianpianluoye';
var strAddress = "Pianpianluoye";
// 如果引号嵌套，可以外双内单或外单内双的规则
var strProject = '这是一个"项目"描述';
var strType = "这是一个'类型'描述";
字符串转义符
- \n - 换行
- \\ - 斜杠
- \’ - 单引号
- \" - 双引号
- \t - 缩进
- \b - 空格
字符串拼接
// 字符串拼接 +
// 只要有字符串类型和其他类型的拼接，结果一定是字符串拼接，数字相加，字符相连口诀。
console.log('str1' + 'str2');
console.log('我' + 18 + '岁');
// 含有变量的字符串拼接
var age = 18;
console.log('我' + age + '岁');
- Undefined - 未定义类型，默认值undefined
// 如果一个变量声明未赋值，就是undefined未定义数据类型
var str;
console.log(str);
var variable = undefined;
console.log(variable + '未定义类型'); // result:undefined未定义类型
console.log(variable + 1); // result:NaN
- Null - 空值，默认值为null
// Null 代表空值
var space = null;
console.log(space + '空值'); // result:null空值
console.log(space + 1); // result:1
进制
- 八进制：数字前加0，表示八进制
// 八进制表示 0 ~ 7
var num = 010;
- 十六进制：数字前加0x，表示十六进制
// 十六进制表示 0 ~ 9 a ~ f
var = 0x9;
获取数据类型
// 获取变量的数据类型
var num = 10;
console.log(typeof num);
var date = null;
console.log(typeof date); // 结果输出类型为 object！！！
数据类型转换
数字转换成字符串
// 数字转换成字符串 toString()
var num = 1;
alert(num.toString());
// 数字转换成字符串 String()
var num = 1;
alert(String(num));
// 加号拼接字符串，也称隐士转换
var num = 1;
console.log(num + '');
字符串转换成数字
var age = '18';
var price = '18.88'
// parseInt(string)函数，将string类型转换为整数数值型
console.log(parseInt(age)); // 18
console.log(parseInt(3.14)); // 3，取整
console.log(parseInt(3.94)); // 3，取整不进位
console.log(parseInt(120px)); // 120，会去掉单位
// parseFloat(string)函数，将string类型转为成浮点数数值型
console.log(parseFloat(price)); // 18.88
// Number()强制转换函数，将string类型转换为数值型
console.log(Number(age)); // 18
console.log(Number(price)); // 18.88
// js隐士转换(-*/) 利用算术运算隐士转换为数值型
console.log('18' - 0); // 18
console.log('15' * 1); // 15
console.log('16' / 1); // 16
转换成布尔值
// 代表空、否定的值会被转换成false，如：''、0、NaN、null、undefined。其余值都会转换成true。
console.log(Boolean('')); //false
console.log(Boolean('true')); //true
运算符
算术运算符
// + 加
// - 减
// * 乘
// / 除
// % 取余
// 不要直接判断两个浮点数是否相等
// 因为浮点数精度，运算时会出问题
表达式和返回值
// 任何表达式都会有一个返回值
var num = 1 + 1;
递增和递减运算符
var num = 1;
// 前置递增,先自加1后返回值
// ++num; 等同于 num = num + 1;
console.log(++num + 15); // 17
// 后置递增,先返回原值后自加
// num++; 等同于 num = num + 1;
console.log(num++ + 15); // 16
// 此时num的值已从1自加成2
console.log(num); // 2
var num1 = 5;
// 前置递减,先自减1后返回值
// num1; 等同于 num1 = num1 - 1;
console.log(--num1 + 15); // 19
// 后置递减，先返回原值后自减
// num1--; 等同于 num1 = num1 - 1;
console.log(num-- + 15); // 20
// 此时num1的值已从5自减成4
console.log(num1--); // 4
var num2 = 20;
var result = num2++ + ++num2; // 42
// num++ 和 ++num 单独使用时没有任何区别
// num-- 和 --num 单独使用时没有任何区别
比较运算符
// 比较运算符中的等于是 ==
console.log(25 == '25'); // true == 会默认转换数据类型
// 比较运算符中的不等于是 !=
console.log(25 != '25'); // false != 会默认转换数据类型
// 比较运算符中的全等是===
console.log(18 === 18); // true
console.log(18 === '18'); // false 要求值和数据类型完全一致
// 比较运算符中的不全等于是!==
console.log(18 !== 18); // false
console.log(18 !== '18'); // true
逻辑运算符
- && - 与
// 两边都为true才为true
console.log(3 > 5 && 6 > 4); // false
console.log(3 < 5 && 6 > 4); // true
- || - 或
// 两边都为false才为false，否则就是true
console.log(3 > 5 || 6 > 4); // true
console.log(3 > 5 && 6 < 4); // false
- ! - 非
console.log(!true); // false
console.log(!(3 > 5)); // true
短路运算（逻辑中断）
当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。
// 为值的时候，除了0 '' null undefined NaN全是真
// 如果第一个表达式的值为真，则返回表达式2
// 如果第一个表达式的值为假，则返回表达式1
console.log(123 && 456); // 456
console.log(0 && 456); // 0
console.log(0 && 1 + 2 && 342 * 523); // 0
// 如果第一个表达式的值为真，则返回表达式1
// 如果第一个表达式的值为假，则返回表达式2
console.log(123 || 456); // 123
console.log(0 || 456); // 456
console.log(0 || 1 + 2 || 342 * 523); // 3
var num = 0;
console.log(123 || num++);
console.log(num); // 0 , 逻辑中断，num++不运算。
赋值运算符
var num = 10;
num = num + 1; num++;
num = num + 2; num += 2;
num = num - 2; num -= 2;
num = num * 2; num *= 2;
num = num / 2; num /= 2;
num = num % 2; num %= 2;
运算符的优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ - - ! |
| 3 | 算术运算符 | 先* / 后 + - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先 与 后 或 |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
流程控制
流程控制 顺序结构 分支结构 循环结构
IF语法结构
if (条件表达式) {
// 执行语句1;
};
if (条件表达式) {
// 执行语句1;
} else {
// 执行语句2;
};
if (条件表达式1) {
// 执行语句1;
} else if (条件表达式2) {
// 执行语句2;
} else {
// 执行语句3;
};
三元表达式
// 如果表达式条件为真，则返回表达式1的值，如果表达式条件为假，则返回表达式2的值
var num = 10;
var result = num > 5 ? 'Yes' : 'No';
SWITCH 语句
// 表达式条件值 和case后面的值是全等条件
switch (表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
};
循环
for 循环
for (初始化变量; 条件表达式; 操作表达式) {
// 循环体
};
for (var i = 1; i<=100; i++) {
console.log('Hello World!');
};
//------------------------------------------
var sum = 0
for (var i = 1; i <= 100; i++) {
sum += i;
};
console.log(sum)
while 循环
// 当条件表达式为真时执行循环体
while (条件表达式) {
// 循环体代码
}
do while 循环
// 先执行一次循环体，在判断条件
do {
// 循环体代码
} while (条件表达式)
Continue
用于立即跳出本循环，继续下一循环。
Break
用于立即跳出整个循环。
数组
一组数据的集合。
创建数组
// new 关键字创建数组
var arr1 = new Array();
// 利用数组字面量创建数组
var arr2 = [];
var arr3 = [1,2,3,4,5,true,'P']; // 元素用逗号分开，元素的类型可以是任意类型。
数组的索引
用来访问数组元素的序号(数组下标从0开始)
// 访问数组元素
var arr3 = [1,2,3,4,5,true,'P'];
console.log(arr3[3]);
// 遍历数组
// arr3.length 数组的长度是元素的个数
for (i = 0; i < arr3.length; i++) {
console.log(arr[i]);
}
新增数组元素
可以通过修改length长度
var arr = [1,2,3,4,5,true,'P'];
arr.length = 10;
可以通过修改索引号
var arr = [1,2,3,4,5,true,'P'];
arr[8] = 'R';
arr[13] = 'U';
冒泡排序
冒泡排序是一种简单的排序算法，它重复的走过要排序的数列，一次比较两个元素，如果他们的顺序错误就把它们交换过来。走访数列的工作是重复的进行直到没有再需要交换，也就是说该数列已经排序完成。这个算法的名字由来是因为越小的元素会经由交换慢慢"浮"到数列的顶端。
var arr = [4, 3, 5, 1, 7];
for (var i = 0; i <= arr.length - 1; i++) {
// 外循环，用来确定比较几轮
// arr.length - i 内循环都走完之后会确定一个最大值，
// 所以下一轮的内循环不需要arr.length - 1的次数，
// 只需要arr.length - 1再减去外循环的次数i即可，不需要做无用的比较。
for (var j = 0; j <= arr.length - i - 1; j++) {
// 内循环，用来做每轮的交换次数
if (arr[j] > arr[j + 1]) {
var tmp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = tmp;
}
}
}
console.log(arr);
函数
- 声明函数
function 函数名() {
// 函数体
}
- 调用函数
function sayHello() {
console.log('Hello World!');
sayHello();
}
- 函数的参数
// 1. 形参
function 函数名(形参1, 形参2, 形参3) {
// 函数体
}
// 2. 实参
函数名(实参1, 实参2, 实参3);
// 形参无实参传递值时，为undefined类型。
// 3. 函数的返回值
function 函数名() {
// return 需要返回的结果;
}
function getAge (age) {
return age;
}
console.log(getAge(18));
// return 后面的代码不会执行，并且只能返回一个值(最后一个值)
// 返回多个值可以放到数组里实现 return [1,2,3,4];
// 没有写return的话函数就返回undefined
arguments
函数的一个内置对象，所有函数都有，arguments对象存储了传递的所有实参。
arguments是一个伪数组（具有数组的length属性、按照索引的方式进行存储、它没有真正数组的一些方法）
function arg(){
console.log(arguments);
}
arg(1,2,3);