Javascript初学者笔记篇

2021/02/08 08:04
阅读数 33

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 = 'xxxx@xx.com';

变量命名规范

  • 由字母(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]); // 输出的是属性值
}

内置对象

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

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部