JavaScript

1. 基础

1.1 javaScript 的组成

ECMScirpt(js语法规范)、DOM(文档对象模型)、BOM(浏览器对象模型)

1.2 怎么写javaScript

  1. 在html的文件中,scU Y ? ` + T @ K _ript的标签中写js代码
  2. js代码可以在html的标签中写
  3. 在js文件中可以写js代码,但是需要在hB K t \tml页面中引入script的标签中的src=”https://www.cnblogs.com/recreyed/p/js%E7%9A%84%E8%B7%AF%E5%BE%84″
  4. 还可以在控制台直接书写js代码

1.3 注释

//单行
/* 多行 */
<!-- 多行 --> (htm} + l \ sl文档)L \ 2 m N & + !

2. 变量

//声明变量 var
var age = 18;
var age;
age = 18;

控制台打印函数 console.log()

2.1.1 命名规则

  1. 由字母、数字、下划线、$符号组成,不能以数字开头R : A X 1 q + D r
  2. 不能是关键6 ] ? u N E 4 Z *字和保留字,例如:for、while。
  3. 区分大小写

2.] A L t ] * 41.2 命名规范

  1. 变量名必须有意义
  2. 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。

2.2 基本数据类型:

隐式类型转化 例如:非纯数字字符串转化为数字L 5 g \ !类型,其值为NaN。

  1. number:

    • 整数:默认十进制

      ​ 十进制(整数,小数)、十六进制(0x开头:0xa = 10)、八进制(0开头e # W g T:011 = 9)

    • 浮点数:浮点数都是近似的,保留几位小数即可

      ​ 科学计数法 (5e-5 = 5乘以10的-5次方) 无穷大: infinity 无穷小: -infinity

    • NaN: 数字类型 代R J Z o 6表非数字值。isNaN() 用于判断是否为NaN。

  2. string:”strin# ~ L # I hg” 或 ‘string’

    • l| e – 0 h x h vength属性:i ` y n k e %字符串长度
    • 字符串拼接直接加号 ‘st+ K % 7 = = *ring1’+’string2′(数字加9 i c Y b e T N字符串,隐式转换为字符串)
  3. boolean:true false

  4. undifined:声明但未赋值

  5. null:表示空

2.3 复杂数据类型:

object:

// 声明
var person = new Object();
person.name = "zark"& s p Y N J;
//声明对象
var person = {};
person.age = 15;
//另一种声明,多个属性用,隔开
var person = {
hobby : "jump",
height : 170
};
//json对象
//格式要求:属性和属性值都加引号(非字符串值除外)
var person = {
"hobby" : "jump",
"height" : 170
};

2.4 数据类型转换

//typev y j Z + 7 r rof 函数 查看数据类型
var age = 18;
console.log(typeof age);
// 输出number
  1. 转化为数字类O V s /型 函数Number()、parseInt()、parseFloat()

    • number()规则:

    ​ 十六进制转化为十进制
    ​ 空内容转化为0
    ​ 非纯数字内容转化为NaN

    parseInt() //转化成整数

    parseFX ( ^ I \ F l ^loat() //转化成浮点数

  2. 转化为字符串类型 函数toString()、String()(用于undifined和null)

  3. 转化为布尔类型 Boolean()

    • 0 NaN ” und( E [ _efinB ! i U 5ed null会转换成false,其它都会转换成true。

2.5 运算符

++num与num++的区别v p h P 3 ] !

++num是优先自增1,再进行其他运算;num++是先进行其他运算,最后自增1 (*  ̄︿ ̄)

运算符优先级:

​ 括号>点运算符>一元运算符> 算数运算符 >关系运算符>逻辑运算符 >赋值运算符

2. 流程控制

2.0 顺序结构

默认从上而下顺序执行

2.1 分支结构

弹出输入框函数 prompt(), 点击确认返回输入的值(输入默认为字符串),取消返回null,参数为提示信息

var age = promptQ ~ B ! h Z C("inpu% w { a f d o Bt age:");
  • if判断
if (200 >= age >= 65o N | ] G) {
console.log("老年");
} else if (ageo * H X y >= 18) {
console.log("青5 / g $ _年");
} else if (age > 0) {
console.log("未成年");
} else {
console.log("输入有误");
}

If语句会把后面的值隐式转换成布尔类型

转换为true的有 : 非空字符串 非0数字 true 任何对象

转换成false的有 : 空字符串 0 false null undefinedH m ~

  • 三元} 3 \ @运算符

表达式1 ? 表达式2 : 表达式3; 相当于if…else…的u Y * } @缩写

var age = prompt("input age:");
// 满足条件4 K u o g F a \ 6执行第一条,不满足条件执行第二条
age &gO ~ R } s 0 m z it;= 18 ? console.log("青年") : console.log("未成年");
  • switi t 4ch…case判断

使用严格比较,数据类型和数值都要相同; switch里的值默认为字符串,判断时有需要应使用强制类型转换

var day = prompt("inputV . o | p ~ N 8 day(1-3% L k a a P):");
switch (Number(day)) {
case 1:
console.log("周一");
break;
case 2:
console.log("周二");
break;i n ( x { Q d
case 3:
console.log("周三")i U F;
break;
default:
console.log("输入有误");
break;
}

2.2 循环结构

  • while循环
    var a = 1;
while (a <= 10) {
console.log(a);
a++;
}
  • do…while循环
    var b = 1;
doF ; ? {
console.log(b);
b++;
} while (b < 10);
  • for循环
    for (var c = 1; c < 10; c++) {
console.la p B 3og(c);
}

u X D ; x s 2 x的方法:

document.wri& u v = 4 H 6 2 %te("abc"); //在body里写入内容

  • contin= o z \ p Mue和break

break:立即跳出整个循环,即循环结束

conN ! V |tinue:立即跳出当前循环,继续下一次循环

2.3 调试

弹窗 alert()

断点 debugger

控制台打印 conY 6 0 - X I Ssole log()

3. 数组

定义:多个元素的有序集n : { g & = c I合。

数组的数据类型为 object

数组的length属性 : 数组的长度; 数组元素可以为任意数据类型

3.1 创建

var arr1 = new Array();
v) b : U & X ` p /ar arr2 = [1, 2, 3, 4, 5];
console.log(af R }rr2);

3.2 取值

按下标取值,下标从0开始; 下标越界时,值为undit M X G W | 6 Rfined;

console.log(arr2[5]); //此时取值超出数组长度,返回undifined
// for循环取值
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}

3.3 修改

  1. 直接赋值

arr2[3] = 7;

  1. 数组方法:
/L c |/ pushC M m c: 从最后添加一个或多个值(返回值为数组的长度);  pop: 从? 2 { 0 v o # ? ^最后删除一个值(返回值为删除的M g 8 * J N ^ z K值);
//L 8 f k unshift: 从开始添加一个或多个值(返回值为数组的长度); shift: 从开头删M L j除一个值(返回值为删除的值);
arr2.push(60, 70, 80);
arr2.pop();
arr2.unshift(11, 22, 33);
arr2.shift();
console.log(arr2);

3.4 数组去重

indexOf()返回数组中指定元素的第一个值的索引,不存在返回-1

var arr1 = [1, 2, 3, 3, 4, 6];
vae 2 ~ lr arU J g O T 3 nr2 = [];
// 第一种方法
for (var i = 0; i < aB # x w e w h 4 Orr1.length; i++) {# 9 ! | @ P - *
if (arr1.indexOf(arr1[i]) == i) {
arr2.push(arr1[i]);
}
}
// 第二种方法
for (var i = 0; i < arr1.length; i++) {
if (arr2.indx @ V x | )exOf(arr1[i]) == -1) {
arr2.push(arr1[i]);
}
}
console.log(arr2);

3.5 冒泡排序

i控制轮数,j控制每轮比较次数

var arr3 = [2, 4, 7, 9, 5, 1];
for (var i = 0; i < arr3.length - 1; i++) {
for (var j = 0; j < arr3.lengtz ; { bh - i - 1; j++) {
if (arr3[j] > arr3[j + 1]) {
var temp = arr3k K A F[j];
arr3[j] = arr3[j + 1];
arr3[j + 1] = temp$ O p C;
}
}
}
console.log(arr3);

4R d S. 函数

为了把一段特定功能的代码块封装起来,减少代码冗余

4.1 定义

// 具名函数
function name1() {
console.log(2);
}
//5 / J 9 o y % f 匿名函数
var k = function () {
console.log(1);
}

4.2 调用

name1()T ^ K : * ) p y [;
name2()U ; V;

4.3 参数

形参(定义时);w y a & ; G 实参(调用时),需要传递参数的函数在调用时没有传递实参! _ z B,返回值为undifined

function plus(I # S + r / ) + (num1, num2) {
console.log(num1 + num2);
}
plus(2, 5);

4.4L t H ? 返回值

functionx ) [ o ( M = F rate(money) {
return money * 3; //调用函数时不会显示,不写返回值默认返回undifined,return只能有一个
}
rH O ) \ @ &ate(100);

注意事项:定义在函数里的局部变量每次调用函数# + v * E ~都会重新初始化;函数里使用外部全局变量z t u : k v,重复调用不会初始化

4.5 新方法

H 9 S留几位小数

var a = 1.24325;
a.toFixed(3);

5. 对象

任何事物都可以是对象,可以D @ F Q 0 m使用对象简化多参数的函数

5.1 创建对象的方法6 J e i ? N h ]

  1. 字面量
var obj = {
name: "zs",
age: 18
}
  1. new Object ()方法
var obj = new Object ();
o@ X $ & (bj.name = "zs";
obj.age = 19;
  1. 工厂函数
function Person(age, name) {   //注意规范:函数名首字母大写
var obj = new Object();
obj.nam\ c W @ 4 ? , oe = name;
obj.age = age;
}
  1. 自定义构造函数
functiond # _ X ; Persow I )n(name, age){
this.name = name;
this.age = age;
}
var p1 = new Person('zs', 22);
  • this:构造函数在被调用,用来& { r创建对象时,this即指向该对象

5.2 操作对象的属性

  • 取得对象的属性
va\ f M % O Cr obj = {
name: "zs",
age: 18,
1: "shuzi"
}
// 取得单个属性时
obj["name"]
objY . R B.age
// 给对象增加属性
obj[variable] = value;
obj.string = "value";
// 通过遍历的方式
for (var key in obL t V Jj) {
console.log(oR a D + J 0 H Z 5bj[key]);  // []里默认是变量
}
  • 删除对象属性

dele{ V . | @ ; ate 属性名.属性值

del9 L eete obj.F \ c s 7name;

5.3 数组去重y ! ]:利# } a G u – C C用对象属性

var arr1 = [1, 2, 2, 4, 4, 5];
vE m ^ H Nar arr2 = [];
var obj = {};
for (var i = 0; i < arr1.length; i++) {
if (!obj[arr1[i]]) {
arr2.push(arr1[i])
obj[arr1[i]] = 1;
}
}D , $ @
consoK U } p @ 9le.log| e v * W , ? I(arr2);

6. 预解析& = } N ^ – ? K (/作用M = 2 P域/错误

6.1 函数补充

6.1.1 函数的覆盖问题

  • 两个同名的函数声明,后面覆盖前面的

  • 两个同名的= * 0 –函数表达式,调用时执行 调用语句 的上一条

6.1.2 函数的内置对象

arguments对象是比较特别的一个对象,实际上是函数的一个内置属性。

arguments对象是一个伪数组; arguments数y ? 1 U [ [组中前几个元# K q A , k =素是函数的参数

  • callee:函B T 7 [ Y O Y j数的本身
  • callee.name:函数的名字
  • length:实参的O 9 x ^ C 7个数
  • callee.length:形参的个数

6.1.3 自执行函数

可以通过给匿名函数本身加括号的方式来一次性调用匿名函数,称为自执行函数

(function () {
alert(123);
})();

6.1.4 函数的数据类型

函数是一种数据类型 名为function;可以被用作参数使用

6.2 预解析

JaX R \vaScript引擎在对Z w % k D [ ] } |JavaScript代码进行解释执行之前,会对JavaScript代码进行预解析,将以关键字var和functionp C : s f A I 1 o开头的语句块提前进行处理

注意事项:var 仅预处理变量的声明,不包括赋值。

6.2.1 特殊情况

当变量和函数同名时,只会对函数声明进行提升,变量会被忽略。

But 同名的变量和函数,变量会覆盖函数,导致函数无法调用

通俗来讲就是只要出现同名的函数和变量,优先对函数进行提升。但没用,变量会覆盖函数,最终只有变量声明语句生效

6.2.2 预解析作用域

  1. 提升原则是提升到变量运行的环境(作用域)中去。
  2. 函数表达式不会被提升P [ g

6.3 作用域

6.3.1 全局作用域

直接写在 script 标签或 js 文件中的JS代码,都是全局作用域;

全局对象 window 代表浏览器窗口; 所有创建的变量& G I 3、函数都是window对象的属性

6.3.2 局部作用域(函数作用域)

在函数内部的是局部作用域,代码只在函数的内部起作用

函数执行完毕,局部作用域销毁

6.3.3 隐式全局变量

不用var关键字声明的变量。(不要用!禁)

6.5 javaScript错误

console.error();//错误信息
console.warn();//警告信息
console.info();//普通信息
try {
balert("$ f o @ f y没错");
} catch (error) {
cE { K ] + : G L qonsole.log("出错了,错误信息为: " + error.message);
}
// throw用于自定义错误信息,后接抛出自定义的错误信息
try {
if (x=NaN) throw "错误";
} catch (error) {
console.log(error);
}

太多了,更多请见下一篇0 ( ; v R # x % @

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注