Javascript初学者笔记篇

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';  // 这是一个字符串
var a = b = c = 9; //等同于 var a = 9; b = 9; c = 9;
var e = 9 , f = 9 , g = 9; // 等同于 var e = 9; var f = 9; var g = 9;

// 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);

函数

1. 声明函数

function 函数名() {
   
   
	// 函数体
}

1. 调用函数

function sayHello() {
   
   
	console.log('Hello World!');
	sayHello();
}

1. 函数的参数

// 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);

函数表达式声明函数，由于函数没有名字也叫匿名函数。

var 变量名 = function (){
   
   
	console.log('函数表达式');
};
// 调用
变量名();

函数的形参可以看成是局部变量
如果函数内部没有声明直接赋值的变量也属于全局变量
在JS中，es6中才增加的块级作用域，es6之前是没有块级作用域的。
块级作用域 {} , if {} 、 for {} 作用域链，内部函数可以访问外部函数的变量。

预解析

JS引擎运行js分两步：预解析、代码运行
JS引擎会把js里面所有的var还有function提升到当前作用域的最前面

变量预解析

又叫变量提升，就是把所有的变量声明提升到当前作用域的最前面，不提升赋值操作。

函数预解析

又叫函数提升，就是把所有的函数声明提升到当前作用域的最前面，不调用函数。

对象

创建对象

字面量创建

// var obj = {};
var obj = {
   
   
	uname: '',
	age: 20,
	sex: '男'
	sayHello: function () {
   
   
		console.log('Hello World!');
	}
};

// 调用对象方法
console.log(obj.uname); 
console.log(obj['sex']);
obj.sayHello();

new Object创建对象

var obj = new Object();
obj.uname = 'Pianpianluoye';
obj.age = 20;
obj.sex = '男';
obj.sayHello = function() {
   
   
	console.log('Hello World!');
}

利用构造函数创建对象

构造函数，是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。

// 构造函数名，首字母大写。因为new会返回这个新对象，所以构造函数里不需要return。
function Employees(uname, age, sex) {
   
   
	this.name = uname;
	this.age = age;
	this.sex = sex;
	this.sayHello = function(say) {
   
   
		console.log(say);
	}
}
var pply = new Employees('Pianpianluoye', 25, '男');
console.log(pply.name);
console.log(pply['age']);
pply.sayHello('Hello World!');

遍历对象

for (var k in obj) {
   
   
	console.log(k); // 输出的是属性名
	console.log(obj[k]); // 输出的是属性值
}

内置对象

对象分为：自定义对象、内置对象、浏览器对象