JavaScript基础快速学习

最新推荐文章于 2024-04-09 20:37:48 发布

Alex Leon

最新推荐文章于 2024-04-09 20:37:48 发布

阅读量811

点赞数 4

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/weixin_45328190/article/details/104019953

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

JavaScript基础快速学习

JavaScript基础快速学习

第一章：JavaScript快速入门

返回目录

1.1 如何写一段js代码，并执行

JS的使用方式一共有三种

将js代码写在HTML行内
将js代码写在script标签中
将外部Js文件引入后执行

注意：使用外部引用的方式加载js代码时，script标签内不需要再写代码，写了虽不报错也不会运行

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 将js代码写在HTML行内 -->
    <input type="button" value="按钮" onclick="alert(123)"></input>

    <!-- 将js代码写在script标签中 -->
    <!-- <script >
        alert(345)
    </script> -->

    <!-- 将外部js文件引入后执行 -->
    <!-- 注意： -->
    <script src="./1.js"></script>
</body>
</html>

1.js

aler(567)

1.2 声明变量和赋值

<script>
    //声明一个变量
    var aa;
    //给变量赋值
    aa = 18;

    //声明一个变量并为其赋值
    var age = 20;

    //一次性声明多个变量并赋值
    var h1 = 12, h2 = 13, h3 = 15;

</script>

1.3 变量命名规则

变量的命名

变量的名字必须是数字、字母、下划线_、和 $ 组成
变量的名字不能以数字开头
变量的名字不能是关键字，如for while if
建议变量名必须有意义
js中变量是区分大小写的
命名尽量使用驼峰规则

1.3.1 练习：将两个变量的值交换

<script>
// 将两个变量的值交换
var a = 1;
var b = 2;

var c = a;
    a = b;
    b = c;
alert("a="+a);
alert("b="+b);

</script>

第二章数据类型简介

返回目录

简单数据类型
- 数值Number
- 字符串String
- 布尔Bolean
- undefined
- null
复杂数据类型
- 对象Object

2.1 简单数据类型

2.1.1 typeof获取变量的类型

typeof

var age = 18;
console.log(typeof age); //'Number'

2.1.2 数值和字符串

数值Number

var num = 12;
var num2 = 1.4;

String

<script>
    //这里的李四不是字符串
    // var str1 = 李四;
    
    //使用单/双引号的才是字符串
    // var str = '李四';
    // var str = '123';
</script>

2.1.2.1 转义字符

<script>
    //如果在字符串中要使用引号，需加转义字符
    var str1 = '你好，我是\'Alex\'';
    var str2 = '你好，我是"Alex"';
    var str3 = '你好，我是\"Alex\"\'程序员\' ';
    var str4 = '您好，我是\\ \"Alex\" \'程序员\'';
    alert(str1);
    alert(str2);
    alert(str3);
    alert(str4);
</script>

js_01

2.1.2.2 加号"+"的使用

+号既可以作为数学运算符，也可以作为字符串拼接符
从前往后进行运算，如果两个变量都是数值那么加号作为数学运算符
直到遇到一个字符串，此后所有的加号都作为字符串拼接符

<script>
 var s1 = '123';//字符串类型
 console.log(s1.length);
 var s2 = '456';//字符串类型
 var s3 = s1 + s2;//此时是字符串拼接
 console.log(s3);
 var s4 = 1;//数值类型
 console.log(s4+s3);//此时还是进行字符串拼接
 var s5 = 2;//数值类型
 console.log(s5+s4+s3);//此时s4和s5进行数学运算，之后和s3进行字符串拼接
 console.log(s3+s4+s5);//此时由于第一个s3是字符串，后面都是字符串拼接
</script>

2.1.3 其他数据类型

2.1.3.1 Boolean类型

Boolean字面量: true和false,区分大小写
计算机内部存储: 0为false, 1为true

2.1.3.2 Undefined和Null

undefined表示一个声明了但没有赋值的变量，变量只声明默认值是undefined
null表示一个空变量，变量的值如果想为null，必须手动设置。

后面高级课程详细讲解

2.2 复杂数据类型

2.2.1 Object

后面高级课程详细讲解

2.3 代码注释

//单行注释
/多行注释/

2.4 数据类型转换

2.4.1 其他数据类型转为字符串

利用toString()
利用String(n)
利用字符串拼接

var n = 5;
var b = true;
console.log(typeof n);//number
console.log(typeof b)//boolean

console.log(typeof n.toString());//string
console.log(typeof b.toString());//string

console.log(typeof String(n));//string
console.log(typeof String(b));//string

console.log(typeof (''+n));//string
console.log(typeof (''+b));//string

2.4.2 其他数据类型转换为数值类型

利用Number(n);
利用parseInt(n);
利用parseFloat(n);

var a = '1';
a = Number(a);
console.log(typeof a);//number

var b = Number('c');//NaN,表示无法转换
var c = Number(null);// 0 Number()方法可以将null转为0
var d = Number(undefined); //NaN
console.log(b,c,d);

var e = parseInt('2');// 2
var f = parseInt('k23');//NaN
var g = parseInt(null);//NaN
var h = parseInt(undefined);//Nan
console.log(e,f,g,h);

var i = parseFloat('1.25df');// 1.25，前面认识的会转换，不认识的不转换
var j = parseFloat('1.2.3.4.5.6');// 1.2 同上
var k = parseFloat('hs123');// NaN，一开始就不认识，所以不转换
var l = parseFloat(null);// NaN
var m = parseFloat(undefined);// NaN
console.log(i,j,k,l,m);

注：只有Number()方法可以将null转换为0

2.4.3 其他数据类型转换为布尔类型

利用Boolean(n);

var a = Boolean(0);//false
var b = Boolean(1);//true
var b2 = Boolean(12);//true
var c = Boolean('0');//true
var d = Boolean('2');//true
var e = Boolean('');//false
var f = Boolean(null);//false
var g = Boolean(undefined);//false
console.log(a,b,b2,c,d,e,f,g);

说明：

数值转boolean, 0为false，非0为true
字符串转boolean, 字符串有内容为true, ‘’ 为false
null和undefined转boolean都为false

第三章 JavaScript操作符与运算符

返回目录

表达式：值和操作符，运算会有个结果；

比如: var str = s1 + s2;

整体是一个表达式，s1和s2是子表达式

3.1 算术运算符(+ - * / %)

+ - * / %

3.2 一元运算符(++,–)

一个值进行自身的运算

和java一样：

操作符在变量前面，先进行自身运算，再进行其他运算。
操作符在后面，先进行其他运算，再进行自身运算。

var a = 1;
var b = ++a + a++;
console.log(b);// 4
console.log(a);//3

var c = 1;
var d = c++ + ++c;
console.log(d);//4
console.log(c);//3

var e = 1;
var f = ++e + ++e;
console.log(f); //5
console.log(e); //3

3.3 逻辑运算符

&& 逻辑与运算符，参与运算的数据必须同时为真，结果为真
|| 逻辑或运算符，参与运算的数据只要有一个为真，结果为真
! 逻辑非运算符，获取相反的结果

var a = 1;//非0逻辑判断为true
var b = 0;//0的逻辑判断为false
console.log(a && b);//两个同时都为真才为真，否则为假。所以这个是假，但这里打印的是0
console.log(a || b);//只要有一个为真则为真，所以这里打印的是1

注意：

运算符优先级：先运算&&后运算||
在js中，逻辑运算结果是决定整个表达式的子表达式的结果

var a = 1;
var b = 2;
var c = 0;
console.log(a || c && b);// 1, 先运算&&, 然后子表达式a起决定性作用

3.4 比较运算符

>, <, >=, <=, ==(等于), !=(不等), ===(全等于), !==(不全等)

他们比较后结果都是false或true

 var a = '2';
 var b = 2;
 console.log(a == b);//true
 console.log(a === b);//false

因为js是一种弱类型的语言，变量的数据类型存在自动转换，
使用==时，只比较值，不比较数据类型，结果为true
使用===时，时全等比较，即比较值也会比较类型，结果为false

3.5 赋值运算符

=, +=, -=, *=, /=, %=

a = a + 4;
a+=4;

b= a - 4;
b-=4

3.6 运算符的优先级

运算优先级从上往下

() 优先级最高，所以如果想优先执行，可以将该表达式放入()中
一元运算符 ++ – ！(逻辑非也算作一元)
算数运算符 + - * / % (先乘除取余，后加减)
关系运算符 > < >= <=
相等运算符 == === != !==
逻辑运算符先&& 后||
赋值运算 =

var s = 4>=6 || '人' !='哈哈' && !(12*2+3 == 122) && true;
console.log(s); //true

var n = 10;
var f = 5 == n / 2 && (2+2*n);
//化简后其实为 true && 22; 结果为22的表达式起到决定性作用
console.log(f); //22

第四章流程控制-JavaScript语句

返回目录

程序的三种结构：

顺序结构: 默认从上到下执行代码
分支结构：根据不同的条件情况进行判断，执行对应代码
循环结构：重复执行一段代码

代码的执行流程分为顺序，分支和循环三种结构，顺序结构是默认的，分支结构主要有if-else和switch-case两种，循环结构有while, do-while, 和for三种。continue和break是跳出循环。

4.1 分支结构

4.1.1 if判断

//if(判断条件)
if(condition1){
    //条件成立代码执行
    code1;
}else if(condition2){
    //if else if结构，前面哪一个条件先成立则执行哪一个的代码
    //如果有代码执行，那么后面的条件不管是否成立都不执行代码
    code2；
}else if(condition3){
    code3；
}else if(condition4){
    code4;
}else{//如果前面的所有条件都不成立，就执行else的代码
    code5;
}

例：判断是否是闰年

//闰年：能被4整除，但是不能被100整除。或能被400整除的年份
  var n = 2019;
  if(n%4==0){
      if(n%100!=0){
          console.log(n+"年是闰年");
      }else if(n%400==0){
          console.log(n+'年是闰年');
      }
  }else{
      console.log(n+"年是平年");
  }

4.1.2 switch-case的用法

switch(value){
    case value1:
        code1;
        break;
    case value2:
        code2;
        break;
    default:
        code3;
        break;
}

例：评级

var level = "B";
switch(level){
    case 'A': 
        console.log('90分以上');
        break;
    case 'B':
        console.log('80-90分');
        break;
    case 'C':
        console.log('70-80分');
        break;
    default:
        console.log('太差了');
        break;

}

4.2 循环结构

4.2.1 while循环

如果条件成立，代码会一直循环执行。
每次执行代码前都会对条件重新判断，直到条件不成立。

var i = 0;
while(i<10){
    console.log(i);
    i++;
}

例：请计算1-100之间所有数字的和

var i = 1;
var sum = 0;
while(i<=100){
    sum+=i;
    i++
}
console.log(sum);

例：请计算100以内的7的倍数有哪些

var i = 1;
while(i<=100){
    if(i%7==0){
        console.log(i);
    }
    i++;
}

例：请打印100以内所有偶数的和

var i = 1;
var sum = 0;
while(i<=100){
    if(i%2==0){
        sum+=i;
    }
    i++;
}
console.log(sum);

4.2.2 do-while循环

先执行一次代码，然后再进行条件判断
如果条件成立，代码继续执行，如果条件不成立代码不执行。

do{
    code1;
}while(condition);

4.2.3 for循环

for(初始表达式; 判断表达式; 自增自减运算){
    code;
}

例：打印1~100所有数的和

var sum = 0;
for(var i=0; i<=100; i++){
    sum+=i;
}
console.log(sum);

例：计算1~100之间所有偶数的和

var sum = 0;
for(var i=0; i<=100; i++){
    if(i%2==0){
        sum+=i;
    }
}
console.log(sum);

例：在浏览器控制台打印1010的’'号图样

var s = '';
for(var i = 1; i <= 10; i++){
    for(var j = 1; j<=10; j++){
        s+='* '
    }
    s+='\n'
}
console.log(s);

例：for循环打印三角形

var s = '';
for(var i = 1; i <= 10; i++){
    for(var j = 1; j<=i; j++){
        s+='* '
    }
        s+='\n'
}
console.log(s);

例：for循环打印反三角形

var s = '';
for(var i = 10; i > 0; i--){
    for(var j = i; j > 0; j--){
        s+= '* ';
    }
        s+='\n';
}
console.log(s);

var s = '';
for(var i = 0; i <= 10; i++){
    for(var j = i; j <= 10; j++){
        s+= '* ';
    }
        s+='\n';
}
console.log(s);

例：for循环打印九九乘法表

var s = '';
for(var i = 1; i < 10; i++){
    for(var j = 1; j<=i; j++){
        s+= j + 'x' +  i + '=' + i*j + ' '
    }
        s+='\n'
}
console.log(s);

4.2.4 continue 和 break

break: 立即跳出整个循环，即循环结束，开始执行循环后面的内容(直接跳到大括号)
continue: 立即跳出当前循环，继续下一次循环(跳到++的地方)

例：计算100以内不能被7整除的所有数的和(要求使用continue)

var sum = 0;
for(var i = 1; i<=100; i++){
    if(i % 7 == 0){
        continue;
    }else{
        sum+=i;
    }
}
console.log(sum);

例：打印200-300之间第一个能被7整除的数字(使用break)

for(var i = 200; i <= 300; i++){
    if(i % 7 == 0){
        console.log(i);
        break;
    }
}

第五章 JavaScript数组

返回目录

5.1 数组的基本概念

所谓数组，就是多个元素(通常是同一类型)按一定顺序放到一个集合当中，那么这个集合我们就称之为数组。
JavaScript数组里面可以存放任何类型的元素，混合的也行，而且数组里面可以有数组

5.1.1 声明数组的方式

5.1.1.1 字面量方式创建数组

var a = [];//空数组
var b = [1,2,3];
var c = ['a','b','c'];
console.log(a);

5.1.1.2 构造函数方式创建数组

var d = new Array();
var e = new Array(1,2,3,'a','b','c');
conslole.log(d);

5.1.2 数组长度的获取方式

var a = [1,2,3];
var l = a.length;

5.1.3多维数组

数组里面又有数组的情况，我们将这个数组称为多维数组、二维数组。

var a = [1,2,3,'a','b','c'];
var b = ['d','e','f',a];
var c = ['g','h',4,5,6,b]
console.log(c);

5.2 获取数组元素

5.2.1 通过下标获取元素

var a = ['red','blue','yellow'];
console.log(a[2]);

5.2.2 通过下标获取多维数组的元素

var b = ['路飞','娜美',['巴基','小丑',['乔巴','索隆']]];
console.log(b[2][2][1]);//索隆

5.3 循环遍历数组元素

for 循环遍历

var a = ['我','是','A','l','e','x'];
for(var i = 0; i<a.length; i++){
    console.log(a[i]);
}

例：将数组中的元素相加

var a = [12,8,7,4,5,3,9,6];
var sum = 0;
for(var i = 0; i<a.length; i++){
    sum+=a[i];
}
console.log(sum);

例：打印出数组中最大的元素

var arr = [12,26,1,7,8,4];
var max = 0;
for(var i = 0; i<arr.length; i++){
    if(max<arr[i]){
        max = arr[i];
    }
}
console.log(max);

例：打印出数组中所有的偶数

var arr = [12,26,1,7,8,4];
for(var i = 0; i<arr.length;i++){
    if(arr[i]%2==0){
        console.log(arr[i]);
    }
}

例：将数组中所有的元素以|为分割组成一个字符串

var arr = [12,26,1,7,8,4];
var s = '';
for(var i = 0; i<arr.length; i++){
    s+=arr[i]+'|';
}
console.log(s);

for…in 循环遍历

var arr = [1,2,3,4,5,6,7,8,9];
for(var k in arr){
    console.log(arr[k]);
}

第六章 JavaScript函数

返回目录

把一段相对独立的具有特定功能的代码块封装()起来，形成一个独立实体，就是函数，起个名字(函数名)，在后续开发中可以反复调用。

函数的作用就是封装一段代码，将来可以重复使用

6.1 函数的声明和调用

函数的声明方式

关键字声明

function 函数名 (){
    
}

表达式声明

var f = function(){
    
}
//变量f就相当于函数名

注意:

函数声明后，里面的代码不会自动执行的
函数中的代码想要执行，必须调用这个函数(函数只要不调用，代码一定不执行)

函数的调用方式

函数名();

var f1 = function(){
    console.log(哈哈);
}
//函数的调用
f1();
f1();

函数调用几次，里面代码就会执行几次。

6.2 形参与实参

形参是形式参数，是在函数声明的时候写的，多个形参使用","隔开，形参的值是不固定的，仅仅是一个占位，等待实参传入，与实参实际传入的值要一一对应。
实参是在函数调用的时候，实际传入函数的值。传入后，在函数中使用形参获取具体的值。

形参

在函数声明的时候，使用形参

function f(形参1, 形参2, 形参3, ...){//这里一般写的是变量名
    函数体;
}

实参

在函数调用的时候，使用实参。

f(实参1, 实参2, 实参3, ...);

例子:

function f(k){//形参
    var sum = 0;
    for(var i = 0; i<=k; i++){
        sum+=i;
    }
console.log(sum);
}
f(60);//实参
f(10);

6.3 函数的返回值

function f(形参1，形参2){
    代码;
    return 返回值;
}
//这时候调用的时候需要接收返回值
var re = f(实参1，实参2);

例：

function f(a,b){
    var c = a -b;
    //return c;
}
var c = f(10,6);
console.log(c);

注意:

如果函数中没有return,那么函数调用之后接收到的返回值是undefined
函数中return之后，不管有什么代码，均不执行。

6.4 匿名函数与自调用函数

匿名函数

函数本身是没有名字的。

表达式声明的函数

其实表达式声明方式创建的函数就是匿名函数

var fun = function(){
    代码;
}
//然后通过变量名进行调用
fun();

立即执行函数(自调用匿名函数)

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

自调用函数的作用：

1. 防止全局变量的污染
1. 封装一个局部作用域

6.5 函数当作值(函数也是一种数据类型)

数据类型中有一种数据是对象，而函数和数组就是属于对象类型。

回调(函数当作函数的参数传入)

function f1(s){
    s();//执行形参s
}
function f2(){
    console.log(222);
}
f1(f2);

如上，f2函数会被当作值，传入f1函数内。
这个就是回调，后面会继续学习。

闭包(函数当作函数的返回值传出)

不是所有函数当作值传出都是闭包，后面课程会详细讲解

function f1(){
var a = 10;
var f2 = function( ){
    alert(2)
}
return f2;//当作返回值传出
}
var k = f1();
k();//执行的是f2

第七章作用域与JS代码的运行

返回目录

作用域: 变量可以起作用的范围和区域

7.1 全局变量和局部变量*

全局变量与全局作用域

在任何地方都可以访问到的变量就是全局变量，全局变量所在的区域就是全局作用域。

局部变量

只在固定的代码片段内可以访问到的遍历，最常见的例如函数的内部，就是局部变量，局部变量所在的区域就是局部作用域。

不使用var声明的变量是全局变量，不推荐使用

变量退出作用域后会销毁，全局变量在关闭网页或者浏览器时才会销毁

<script>
var a = 1;
//函数里面就是局部作用域，函数外面就是全局作用域
function f1(){
    var a = 2;
}
</script>

例:

<script>
var a = 1;
var f = function(){
    var a = 2;
}
f();
console.log(a);//结果是1
</script>

7.2 变量提升及代码执行阶段

JS代码运行分为两个阶段

1. 解析(编译)阶段: 语法检查，将所有的变量、函数等等进行声明。
1. 运行阶段: 变量的赋值，代码流程的执行

例子

console.log(a);
var a = 2;

我们知道js代码是由上向下执行，上面这段代码执行结果是undefined，因为变量的声明在下面

但是如果直接不写变量的声明，那么这段代码执行会报错

所以虽然变量声明写在代码执行的下面会导致执行结果为undefined,但是var a = 2 写和不写，还是有很大区别的，这个就是变量提升

其实上面那段代码编译和执行情况实际上如下:

var a;
console.log(a);
a = 2;

在代码执行之前，已经在编译阶段进行了声明，所以结果才会是undefined。

练习1

var a = 12;
function abc(){
    alert(a);
    var a = 10;
}
abc();

执行结果是undefined, 首先alert(a)中的a应是局部变量,和函数外面的a没有关系，但是var a = 10在下面，由于代码提升，局部变量a只被声明但是还没有赋值，因此结果是undefined。

练习2

console.log(a)
function a(){
    console.log('aaaaaa');
}
var a = 1;
console.log(a);

执行结果如下

ƒ a(){
    console.log('aaaaaa');
}
1

注意：如果变量和函数重名，那么声明阶段，函数声明会替换变量声明

7.3 作用域及作用域链

只有函数可以制造作用域，那么只要是代码，就至少有一个作用域(全局作用域)。

凡是代码里有函数，那么这个函数就构成另一个作用域。

如果函数中还有函数，那么这个作用域中就又可以诞生一个作用域。

将这样的所有作用域列出来，可以有一个结构：函数内指向函数外的链式结构。就称作作用域链。

例:

var a = 3;
function f1(){
    //var a = 4;
    function f2(){
        //var a = 5;
        function f3(){
            //var a = 6;
            console.log(a);
        }
        f3();
    }
    f2();
}
f1();

js_02

注意:

当函数中使用某个变量时，优先在自己的作用域中查找，如果找不到就向上一层(函数)作用域，如果还找不到，继续往上一层查找，直到全局作用域。如果还找不到，直接报错。这就是作用域链。

第八章 JavaScript对象

返回目录

8.1 对象的概述

生活中的对象
万物皆对象

现实生活中万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。

举例:一部车，一个手机
车是一类事物，门口停着的那辆车才是对象
特征：红色，四个轮子
行为：驾驶、刹车

JavaScript中对象

JavaScript中的对象其实就是生活中对象的一个抽象
JavaScript的对象是无序属性的集合。
其属性可以包含基本值，对象，数组或函数。
对象就是一组没有顺序的值的集合。
我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数。
对象的行为和特征：
特征—属性
行为—方法

事物的特征在对象中用属性来表示。
事物的行为在对象中用方法来表示。

8.2 对象的声明及使用

对象的声明

字面量声明对象

var obj1 = {};
//对象里面的所有的东西都是键值成对存在
var obj2 =  {age:12, length:190, name:'Alex', fly:function(){}}

对象里面的所有数据都是键值成对存在
通常来时，值是函数则称为方法，其他类型的值都是属性。

实例化方式(内置构造函数) 声明对象

var obj = new Object();

实例化自定义构造函数方式声明对象

function fun(){
    
}
var f = new fun();

对象的使用

获取对象的属性或方法

对象.属性名;

var obj =  {
    name:'Alex', 
    age:12, 
    length:190, 
    fly:function(){
            console.log('飞');
    }
}
console.log(obj.age);
obj.fly();

8.3 this的指向

方法中的this指的就是这个方法所在的对象、

var obj1 =  {
    name:'Alex', 
    age:12, 
    length:190, 
    showAge:function(){
        var a = this.age;
        console.log(a);
    }
}
obj1.showAge();

普通的函数中也有this, this指向全局对象Window(当前运行的大环境)

function f(){
    console.log(this);
}
f();//undefined

总结：

this永远指向一个对象
this运行在哪个对象下，就指向那个对象。

例：

function fun(){
    var k = '89';
    console.log(this.k);
}
var o1 = {
    name: 'o1',
    k: '123',
    f:fun
}
var o2 = {
    name:'o2',
    k: '456',
    f:fun
}
o1.f();//123
o2.f();//456

为什么fun函数中var k = ‘89’没有被打印出来?
o1.f();执行时，fun函数在o1对象下运行，所以this指向的是o1, 而o1.k是’123’，所以打印123.
同理，o2.f();执行时，fun函数在o2对象下运行，所以this指向的是o2, 而o2.k是’456’，所以打印456.

this运行在哪个对象下，就指向那个对象

只需要弄清楚，函数到底是被谁调用了

例2:

var o1 = {
    age: 18,
    f:function(){
        console.log(this.age);
    }
}
var o2 = {
    age: 16,
    f:o1.f,
}
o2.f();

执行结果是16，为什么？
虽然这个函数是o1下的函数，但是它是通过o2进行调用的，o1.f已经作为属性传给o2,所以o2.f()中的this应当是运行在o2环境下的。

8.4 对象的遍历和删除

for in 循环遍历对象

语法:

for(键 in 对象)

for…in 循环不仅可以遍历数组，还可以循环遍历对象。

例：

var obj = {
    name: '路飞',
    age: 15,
    gender: '男'
}
for(var k in obj){
    console.log(obj[k]);
}

delete 删除对象属性

语法

delete 对象.属性

var obj = {
    name: '路飞',
    age: 15,
    gender: '男'
}
console.log(obj);
delete obj.age;
console.log(obj);

8.5 包装对象

JavaScript中数据类型有6中，其中有3种是原始数据类型，数值，字符串和布尔类型。

原始数据类型在一定的条件下可以自动转为对象，这就是包装对象。

var num = new Number(123);
console.log(typeof num);//object

原始值可以自动当作对象来使用，可以调用各种属性及方法。

如果包装对象使用完成，会自动立即销毁。

比如声明一个字符串后就可以直接使用它的属性

var a = `123`;
console.log(a.length);

这个属性并不是在包装对象身上，而是在原型身上。他们是类似继承关系。

8.6 标准库对象(内置对象)

Math数学对象

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）
LN2	返回 2 的自然对数（约等于0.693）
LN10	返回 10 的自然对数（约等于2.302）
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）
PI	返回圆周率（约等于3.14159）
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）
SQRT2	返回 2 的平方根（约等于 1.414）

方法	描述
abs(x)	返回数的绝对值
acos(x)	返回数的反余弦值
asin(x)	返回数的反正弦值
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）
ceil(x)	对数进行上舍入
cos(x)	返回数的余弦
exp(x)	返回 e 的指数
floor(x)	对数进行下舍入
log(x)	返回数的自然对数（底为e）
max(x,y)	返回 x 和 y 中的最高值
min(x,y)	返回 x 和 y 中的最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 [ 0 ~ 1 ) 之间的随机数
round(x)	把数四舍五入为最接近的整数
sin(x)	返回数的正弦
sqrt(x)	返回数的平方根
tan(x)	返回角的正切
toSource()	返回该对象的源代码
valueOf()	返回 Math 对象的原始值

//取绝对值
var n = -2;
console.log(Math.abs(n));
//取默认[0,1)之间的随机数
var r = Math.random();
console.log(r);
//规定范围的随机数公式: Math.random()*(上限-下限)+下限;
//取规定范围的随机整数,取[11-32)范围内的随机整数
var f = Math.floor(Math.random()*(32-11)+11);
console.log(f);

取绝对值 Math.abs();
取默认[0,1)之间的随机数 Math.random();
取[min,max)之间的随机数 Math.randowm()*(max-min)+min;
向下取整 Math.floor();

Date 日期对象

获取事件对象

var myDate=new Date();

注释：Date 对象会自动把当前日期和时间保存为其初始值。

Date对象属性

属性	描述
constructor	返回对创建此对象的 Date 函数的引用
prototype	使您有能力向对象添加属性和方法

Date对象方法

方法	描述
Date()	返回当日的日期和时间
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)
getMonth()	从 Date 对象返回月份 (0 ~ 11)
getFullYear()	从 Date 对象以四位数字返回年份
getYear()	请使用 getFullYear() 方法代替
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)
getTime()	返回 1970 年 1 月 1 日至今的毫秒数
getTimezoneOffset()	返回本地时间与格林威治标准时间 (GMT) 的分钟差
getUTCDate()	根据世界时从 Date 对象返回月中的一天 (1 ~ 31)
getUTCDay()	根据世界时从 Date 对象返回周中的一天 (0 ~ 6)
getUTCMonth()	根据世界时从 Date 对象返回月份 (0 ~ 11)
getUTCFullYear()	根据世界时从 Date 对象返回四位数的年份
getUTCHours()	根据世界时返回 Date 对象的小时 (0 ~ 23)
getUTCMinutes()	根据世界时返回 Date 对象的分钟 (0 ~ 59)
getUTCSeconds()	根据世界时返回 Date 对象的秒钟 (0 ~ 59)
getUTCMilliseconds()	根据世界时返回 Date 对象的毫秒(0 ~ 999)
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)
setMonth()	设置 Date 对象中月份 (0 ~ 11)
setFullYear()	设置 Date 对象中的年份（四位数字）
setYear()	请使用 setFullYear() 方法代替
setHours()	设置 Date 对象中的小时 (0 ~ 23)
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)
setTime()	以毫秒设置 Date 对象
setUTCDate()	根据世界时设置 Date 对象中月份的一天 (1 ~ 31)
setUTCMonth()	根据世界时设置 Date 对象中的月份 (0 ~ 11)
setUTCFullYear()	根据世界时设置 Date 对象中的年份（四位数字）
setUTCHours()	根据世界时设置 Date 对象中的小时 (0 ~ 23)
setUTCMinutes()	根据世界时设置 Date 对象中的分钟 (0 ~ 59)
setUTCSeconds()	根据世界时设置 Date 对象中的秒钟 (0 ~ 59)
setUTCMilliseconds()	根据世界时设置 Date 对象中的毫秒 (0 ~ 999)
toSource()	返回该对象的源代码
toString()	把 Date 对象转换为字符串
toTimeString()	把 Date 对象的时间部分转换为字符串
toDateString()	把 Date 对象的日期部分转换为字符串
toGMTString()	请使用 toUTCString() 方法代替
toUTCString()	根据世界时，把 Date 对象转换为字符串
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串
UTC()	根据世界时返回 1997 年 1 月 1 日到指定日期的毫秒数
valueOf()	返回 Date 对象的原始值

//获取事件对象
//默认当前时间为初始设置
var myDate = new Date();
console.log(myDate);

var now = Date.now();//可以直接获取当前时间戳
console.log(now);

console.log(myDate.getHours());//获取小时
console.log(myDate.getDate());//获取日
console.log(myDate.getFullYear());//获取年
console.log(myDate.getMoth()+1);//获取月

注意：

JS中获取的时间是计算机本地时间
JS中月份的数字是从0开始的

Array 数组对象

创建 Array 对象的语法：
- new Array();
- new Array(size);参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。
- new Array(element0, element0, ..., elementn);参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。
返回值
- 返回新创建并被初始化了的数组。
- 如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。
- 当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。
- 当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。
- 当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

属性	描述
constructor	返回对创建此对象的数组函数的引用
index
input
length	设置或返回数组中元素的数目
prototype	使您有能力向对象添加属性和方法。

方法	描述
concat()	连接两个或更多的数组，并返回结果
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度
reverse()	颠倒数组中元素的顺序
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素,返回的是新数组，是原数组的浅拷贝，不改变原数组
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素
toSource()	返回该对象的源代码
toString()	把数组转换为字符串，并返回结果
toLocaleString()	把数组转换为本地数组，并返回结果
unshift()	向数组的开头添加一个或更多元素，并返回新的长度
valueOf()	返回数组对象的原始值

var arr = [1,2,3,4,5];
//在末位添加元素
arr.push(10);
console.log(arr);
//删除末位元素
arr.pop();
console.log(arr);
//选取规定范围元素，返回新数组
console.log(arr.slice(2,4));
console.log(arr);
//合并两个或多个数组
var arr2 = ['A','l','e','x','p'];
var newArr = arr.concat(arr2);
console.log(newArr);
//将数组中的元素使用指定分隔符隔开，返回一个字符串，如果只有一个元素，不会添加分隔符。
var str = arr2.join('-');
console.log(str);

String 字符串对象

创建 String 对象的语法：

new String(s);
String(s);

参数
- 参数 s 是要存储在 String 对象中或转换成原始字符串的值。
返回值
- 当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。
- 当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。
String 对象属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

String 对象方法
FF: Firefox, IE: Internet Explorer

方法	描述
anchor()	创建 HTML 锚
big()	用大号字体显示字符串
blink()	显示闪动字符串
bold()	使用粗体显示字符串
charAt()	返回在指定位置的字符
charCodeAt()	返回在指定的位置的字符的 Unicode 编码
concat()	连接字符串
fixed()	以打字机文本显示字符串
fontcolor()	用指定的颜色来显示字符串
fontsize()	使用指定的尺寸来显示字符串
fromCharCode()	从字符编码创建一个字符串
indexOf()	检索字符串
italics()	使用斜体显示字符串
lastIndexOf()	从后向前搜索字符串
link()	将字符串显示为链接
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正在表达式的匹配
replace()	替换与正则表达式匹配的子串，返回新字符串，原字符串不会改变
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
small()	使用小字号来显示字符串
split()	把字符串分割为字符串数组
strike()	使用删除线来显示字符串
sub()	把字符串显示为下标
substr()	从起始索引号提取字符串中指定数目的字符，方法返回一个字符串中，从指定位置开始到指定字符数的字符
substring()	提取字符串中两个指定的索引号之间的字符
sup()	把字符串显示为上标
toLocaleLowerCase()	把字符串转换为小写
toLocaleUpperCase()	把字符串转换为大写
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
toSource()	代表对象的源代码
toString()	返回字符串
valueOf()	返回某个字符串对象的原始值

//打印字符串长度(元素个数)
var str = 'JavaScript';
console.log(str.length);
//打印某字符串在该字符串中第一次出现的位置(下标从0开始)
var n = str.indexOf('s');
console.log(n);
//截取一个字符串中，从指定位置开始到指定字符数的字符
var s1 = str.substr(2,5);
console.log(s1);
//全部转为小写
var s2 = str.toLowerCase();
console.log(s2);
//全部转为大写
var s3 = str.toUpperCase();
console.log(s3);
//将Java替换为Type,replace返回的是新字符串，原字符串不会改变
var s4 = str.replace('Java','Type');
console.log(s4);

第九章其他知识点

返回目录

9.1 JavaScript 消息框

可以在 JavaScript 中创建三种消息框：

警告框alert
确认框confirm
提示框prompt

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

警告框中的字符串可以通过+'\n'+的方式进行折行

语法：

alert("文本")

例:

<html>
<head>
</head>
<body>
    <input type="button" onclick="dis_alert()" value="展示警告框">
</body>
<script type="text/javascript">
    function dis_alert(){
        alert(
            "警告" + '\n' + "我是警告框"
        )
    }
</script>
</html>

确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

语法：

confirm("文本")

例：

<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("是否确认？");
if (r==true)
  {
  alert("您已确认！");
  }
else
  {
  alert("您已取消！");
  }
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="展示确认框" />
</body>
</html>

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：

prompt("文本","默认值")

例：

<html>
<head>
</head>
<script type="text/javascript">
function disp_prompt()
  {
  var name=prompt("请输入您的名字","Alex")
  if (name!=null && name!="")
    {
    document.write("你好！" + name + " 今天过得怎么样？")
    }
  }
</script>
<body>
<input type="button" onclick="disp_prompt()" value="显示提示框" />
</body>
</html>

9.2 JavaScript事件

事件是可以被 JavaScript 侦测到的行为。

事件

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。

JavaScript 事件参考手册

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

事件句柄

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

属性	当以下情况发生时，出现此事件
onabort	图像加载被中断
onblur	元素失去焦点
onchange	用户改变域的内容
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onfocus	元素获得焦点
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

onload 和 onUnload

当用户进入或离开页面时就会触发 onload 和 onUnload 事件。

onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼：“Welcome John Doe!”。

onFocus, onBlur 和 onChange

onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。

<input type="text" size="30" id="email" onchange="checkEmail()">

onSubmit

onSubmit 用于在提交表单之前验证所有的表单域。

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。

checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。

<form method="post" action="xxx.htm" onsubmit="return checkForm()">

onMouseOver 和 onMouseOut

onMouseOver 和 onMouseOut 用来创建“动态的”按钮。

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时，就会弹出一个警告框：

<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30">
</a>

返回目录

Alex Leon

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础快速学习

文章目录JavaScript基础快速学习第一章：JavaScript快速入门1.1 如何写一段js代码，并执行1.2 声明变量和赋值1.3 变量命名规则1.3.1 练习：将两个变量的值交换第二章数据类型简介2.1 简单数据类型2.1.1 typeof获取变量的类型2.1.2 数值和字符串2.1.2.1 转义字符2.1.2.2 加号"+"的使用2.1.3 其他数据类型2.1.3.1 Boolea...
复制链接

扫一扫