JavaScript的讲解

前言:

为什么学习JavaScript?
1.HTML定义了网页的内容
2.CSS描述了网页的布局
3.JavaScript网页的行为

1.JavaScript的概念:

JavaScript是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备、是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

2.JavaScript的结构:

alert('')的一个弹窗

1.内部标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
   //script标签必须成对出现,且语句在script标签里面
    <script>
        alert('没关系');
    </script>
</head>

2.外部标签

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //js目录下的命名为code的JavaScript File 内容为 alert('没关系')
<script src="js/code.js"></script>
</head>
  1. test.html

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"></script>
</head>

3.JavaScript的语法:

JavaScript提供了完整的基本编程语句,它们是:
赋值语句、switch选择语句、while循环语句、for循环语句、for each循环语句、do…while循环语句、break循环中止语句、continue循环中断语句、try…catch语句、if语句(if…else,if…else if…)。

  1. if判断

if (score > 60 && score < 70) {
alert(“60~70”);
}else if (score > 70 && score < 80) {
alert(“70~80”);
}else {
alert(“other”);
}

  1. while循环,避免死循环

while(num < 90) {
num = num + 1;
console.log(num)
}

do~while循环

do{
age = age + 1
console.log(age)
}while(age< 21)

for循环

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

forEach 循环

var age = [1,5,8,2,3,4];
//函数
age.forEach(function (value) {
console.log(value)
})

for…in

//for(var index in object){}
for(var num in age){
if (age.hasOwnProperty(num)){
console.log(“存在”)
console.log(age[num])
}
}

Map 和 Set
Map:

//学生的成绩,学生的名字
//var name = ["xiaoming","zhangsan","xiaohong"];
//var age = [85,100,96];
var map = new Map([["xiaoming",85],["zhangsan",100],["xiaohong",96]]);
map.get("xiaoming");
85
map.set("password",123456);
Map(4) {"xiaoming" => 85, "zhangsan" => 100, "xiaohong" => 96, "password" => 123456}
map.delete("xiaoming");
true
map
Map(3) {"zhangsan" => 100, "xiaohong" => 96, "password" => 123456}

Set:无序不重复的集合

set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素

interator
遍历数组

//通过for of / for in 下标
var arr = [3,4,5]
for (var x of arr) {
console.log(x)
}

遍历map

var map = new Map([[“lisi”,62],[“jack”,56]]);
for (let x of map) {
console.log(x)
}

遍历set

var set = new Set([5,6,7])
for (let x of set) {
console.log(x)
}

(1).变量

  1. 常用类型:
    object:对象

每个属性之间用逗号隔开,最后一个不需要添加

var person = {
    name: "xiaoming"
    age: 10	
    tags: ['js','java'] 
}

array:数组

//保证代码的可读性,尽量使用 []
var arr= [1,2,3,'nest']
//去数组下标越界,就会 undefined

number:数

整数 、浮点数、科学计数法(1.2e3 === 1.2*10^3)、 负数 、NaN (not a number)、infinity(表示无限大)

boolean:布尔值,只有true和false两个值,是所有类型中占用内存最少的
nll:一个空值,唯一的值是null
undefined:没有定义和赋值的变量2、命名形式

2.命名形式:
var 变量名 = 变量值
其中,var是javascript的保留字,表明接下来是变量说明,变量名表是用户自定义标识符,变量之间用逗号分开。和C++等程序不同,在javascript中,变量说明不需要给出变量的数据类型。此外,变量也可以不说明而直接使用。

(2).运算符

1.算数运算符
javascript中的算术运算符有单目运算符和双目运算符。双目运算符包括:+(加)、-(减)、*(乘)、/(除)、%(取模)、|(按位或)、&(按位与)、<<(左移)、>>(右移)等。单目运算符有:-(取反)、~(取补)、++(递加1)–(递减1)等。

2.逻辑运算符
关系运算符又称比较运算,运算符包括:<(小于)、<=(小于等于)、>(大于)、>=(大于等于)、=(等于)和!=(不等于)。
关系运算的运算结果为布尔值,如果条件成立,则结果为true,否则为false。

3.关系运算符
逻辑运算符有:&&(逻辑与 里两个都为真,结果为真)、||(逻辑或 一个为真,结果为真)、!(取反,逻辑非)、^(逻辑异或)

4.比较运算符
===是全同运算符,只有当值相等,数据类型也相等时才成立。
==是等同运算符,
当两个运算数的类型不同时:将他们转换成相同的类型。
1)一个数字与一个字符串,字符串转换成数字之后,进行比较。
2)true转换为1、false转换为0,进行比较。
3)一个对象、数组、函数与 一个数字或字符串,对象、数组、函数转换为原始类型的值,然后进行比较。(先使用valueOf,如果不行就使用toString)
4)其他类型的组合不相等。

5.字符串连接运算符
连接运算用于字符串操作,运算符为+(用于强制连接),将两个或多个字符串连结为一个字符串。

6.三目运算符
条件?表达式1:表达式2
三目操作符“?:”构成的表达式,其逻辑功能为:若操作数的结果为true,则表述式的结果为表达式1,否则为表达式2。例如max=(a>b)?a:b;该语句的功能就是将a,b中的较大的数赋给max。

(3).严格检查模式

‘use strict’; 严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议都使用 let 去定义

<script>
'use strict';
//全局变量
let i = 1;
</script>

(4).字符串

  1. 正常字符串我们使用 单引号,,或者双引号包裹
    2.注意转移字符
    3.多行字符串编写

var msg =
hello world 你好
4.字符串长度
str.length
5.字符串长度不可变
6.大小写转换
在这里插入图片描述

(5).数组

Array可以包含任意的数据类型

//可以通过下标赋值或者取值
var arr = [1,2,3.,4,5,6]

1.长度

arr.length

2.通过元素获得下标索引

arr.indexof(30)
6

3.slice() 截取Array 的一部分,返回一个新数组

arr.slice()
(6) [1,2,3,4,5,6]

4.push(可以添加元素)、pop()从最后一个索引处弹出每一个元素

arr.push(1)
7
//在尾部添加元素 数组的长度为7
arr.pop()
6
5
4
3
2
1

5.unshift()、shift()从第一个索引处弹出每一个元素至最后一个元素

arr.unshift(0)
7
//在头部添加元素,数组的长度为7
arr.shift()
1
2
3
4
5
6

升序sort() 数字只限于一百以内可以升序

var arr = [6,1,2,8,7,3];
arr.sort();
(6) [1, 2, 3, 6, 7, 8]

7.元素反转 reverse()

var arr = [“b”,“c”,“a”];
arr.reverse();
(3) [“a”, “c”, “b”]

8.元素的连接 concat()

var arr = [“b”,“c”,“a”];
undefined
arr.concat(1,2,3);
(6) [“b”, “c”, “a”, 1, 2, 3]
arr
(3) [“b”,“c”,“a”]

注意concat();连接在尾部,只是返回了一个新的数组,但是原数组没有变。
9.连接符 join()
打印拼接数组,使用特定的字符串连接

var arr = [“b”,“c”,“a”];
arr.join(’-’);
“b-c-a”
arr.join(’~’);
“bca”

10.多维数组

var arr = [[5,6],[2,63,30],[1,2]]
//如果取6,那么就是arr[0][1]
arr[0][1]
6

(6).对象

若干个键值对

var 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}

eg:
var person = {
name: “张三”,
age:26,
number:123
}
1.对象赋值

person.name = “黄灿灿”;
“黄灿灿”
person.name;
"黄灿灿

2.使用一个不存在的对象属性,不会报错!

person.tag;
undefined

3.动态的删减属性,通过delete 删除对象的属性

delete person.name;
true
person.name
undefined

4.动态的添加,直接给新的属性添加值即可

person.tag = “java”;
“java”
person.tag;
“java”
person
{age: 20, score: 10, tag: “java”}

5.判断属性值是否在这个对象中!xxx in xxx

“age” in person;
true
“name” in person;
false

6.判断一个属性是否是这个对象自身拥有的
hasOwnProperty()

person.hasOwnProperty(“age”);
true
person.hasOwnProperty(“name”);
false

(7).注释

1.单行注释以 // 开头
2.多行注释以 /* 开头 以*/ 结尾

(8).函数

函数是命名的语句段,这个语句段可以被当作一个整体来引用和执行。使用函数要注意以下几点:
1)函数由关键字function定义(也可由Function构造函数构造)
2)使用function关键字定义的函数在一个作用域内是可以在任意处调用的(包括定义函数的语句前);而用var关键字定义的必须定义后才能被调用
3)函数名是调用函数时引用的名称,它对大小写是敏感的,调用函数时不可写错函数名
4)参数表示传递给函数使用或操作的值,它可以是常量,也可以是变量,也可以是函数,在函数内部可以通过arguments对象(arguments对象是一个伪数组,属性callee引用被调用的函数)访问所有参数
5)return语句用于返回表达式的值。
6)yield语句扔出一个表达式,并且中断函数执行直到下一次调用next。

1)定义函数

定义方式一:

var abs = function(x) {
if(x>=0) {
return x;
}else{
return -x;
}
}

定义方式二:

function abs(x) {
if(x>0) {
return x;
}else{
return -x;
}
}
abs();//调用函数

==小结:==如果执行到return代表函数结束。返回结果!
如果没有执行return,函数执行完全也会返回结果,结果是undefined


 如果传入进来的参数不符合条件 如何规避?
function abs(x) {
    if (typeof x !== "number") {
        throw 'NOt a Number';
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}
2)arguments

arguments关键字传进来的所有参数,是一个数组!

var abs = function (x) {
    console.log("x=>" + x);

    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }

    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

在这里插入图片描述

问题: arguments 包含所有的参数,我们有时候想使用多余的参数来进行附加操作。需要排除已有参数

var abs = function (x) {
    console.log("x=>" + x);

    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
    if (arguments.length > 2) {
        for (var i = 2; i < arguments.length; i++) {
           console.log(arguments[i]);
        }
    }
}

在这里插入图片描述

ES6 引入的新特性,获取除了已经定义的参数之外的所有参数

function aaa(a, b,c, ...rest) {
    console.log("a=>" + a);
    console.log("b=>" + b);
    console.log("c=>" + c);
    console.log(rest);
}

在这里插入图片描述

3) 变量的作用域

作用域:
变量的作用域由声明变量的位置决定,决定哪些脚本命令可访问该变量。在函数外部声明的变量称为全局变量,其值能被所在HTML文件中的任何脚本命令访问和修改。在函数内部声明的变量称为局部变量。只有当函数被执行时,变量被分配临时空间,函数结束后,变量所占据的空间被释放。局部变量只能被函数内部的语句访问,只对该函数是可见的,而在函数外部是不可见的。

4) 同名变量函数体内、外的关系
function f() {
    var x = 1;
    x = x + 1;
    console.log(x);
}
x = x + 2;// Uncaught ReferenceError: x is not defined 函数体外的变量名不可以使用函数体内的值
5) 相同变量名,两个函数体内部关系
function ee() {
    var x = 1;
    x = x + 1;
    console.log("x=>"+x);
}
ee()

function ee2() {
    var x = 'A';
    x = x + 1;
    console.log("x=>"+x);
}
ee2()

在这里插入图片描述

6) 内部函数的访问
function aa() {
     var x = 1;
     function aa2() {
         var y = x + 1;
         console.log(y) // 2
     }
     aa2()
     console.log(x);// 1
     var z = y + 1;//Uncaught ReferenceError: y is not defined
 }
 aa()
7)内、外函数变量同名
function aa() {
    var x = 1;
    function aa2() {
        var x = 'A';
        console.log('inner' + x);
    }
    console.log('outer' + x);
    aa2()
}
aa()
结果是:outer1    
       innerA
function aa() {
    var x = 1;
    function aa2() {
        var x = 'A';
        console.log('inner' + x);
    }
    aa2()
    console.log('outer' + x);
}
aa()
结果是:innerA
       outer1

结论:如果aa2()在console.log('outer' + x)之前函数查找,从内向外查找,假设外部存在这个同名的函数变量,则内部函数屏蔽外部函数的变量。反之函数查找从外向内查找

8)提升作用域
function add() {
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}

结果是:xundefined

add()
变量的定义必须放在函数的头部
function add() {
    var y = 'y';
    var x = "x" + y;
    console.log(x);  //xy
}
add()
9) 全局函数

函数外部叫全局变量,函数内部叫局部变量 函数内部可以访问全局变量

x = 1;
y = 2
function f() {
    console.log(y);//2
}
f();
console.log(x);//1

全局对象 window

var x = 'xxx';
alert(x);
alert(window.x); // 默认所有的全局变量,都会自动绑定在 window对象下 函数体内不可以

alert() 这个函数本身也是一个 window 变量;

var x = 'xxx';

window.alert(x);

//alert() 这个函数本身也是一个 `window` 变量;
var old_alert = window.alert;

old_alert(x);

window.alert = function () {

};
//发现 alert() 失效了
window.alert(123);

//恢复
//window.alert = old_alert;
window.alert(456);`
10)局部作用域 let

function aaa() {
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i + 1); //问题? i 出了这个作用域还可以使用
}
aaa()

let 关键字,解决局部作用域冲突问题!

function aaa() {
    for (let i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i + 1); //Uncaught ReferenceError: i is not defined
}

(9).方法

1)定义方法

方法就是把函数放在对象的里面,对象只有两个东西,属性和方法

方式一:

var person = {
    name:'李四',
    birth:1998,
    age: function () {
        // 今年-出生年
      var now = new Date().getFullYear();
      return now - this.birth;
    }
}
//对象的属性如何在网页中打印
console.log(person.name);//对象的属性   李四
console.log(person.age());//方法一定要带()  22

方式二:

function getAge() {
     // 今年 - 出生的年
     var now = new Date().getFullYear();
     return now - this.birth;
 }
 var kuangshen = {
     name: '李四',
     birth: 2000,
     age: getAge
 };
console.log(kuangshen.age());// 20
 

(10).内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

(11).Date

let year = new Date().getFullYear();
console.log(year);//获得年份
let month = new Date().getMonth();
console.log(month);//获得月份 从0~11 月
let date = new Date().getDate();
console.log(date)//获得日期
let day = new Date().getDay();
console.log(day)//获得星期几

let time = new Date().getTime();//获得的是从元年到现在的毫秒值 1578724609222
now.toLocaleString();
"2020/2/8 下午7:49:08"
now.toGMTString();
"Sat, 08 Feb 2020 11:49:08 GMT"

4.JSON与JavaScript

简要历史
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。
JSON是Douglas Crockford在2001年开始推广使用的数据格式,在2005年-2006年正式成为主流的数据格式,雅虎和谷歌就在那时候开始广泛地使用JSON格式。

在 JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型:
对象表示为键值对
数据由逗号分隔
对象都用 {}
数组都用 []

JSON与JS的关系
很多人搞不清楚 JSON 和 Js 对象的关系,甚至连谁是谁都不清楚。其实,可以这么理解:JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串

JSON和JS对象互转
要实现从JSON字符串转换为JS对象,使用 JSON.parse() 方法:
要实现从JS对象转换为JSON字符串,使用 JSON.stringify() 方法:
比如:

var user = {
    name:"李四",
    age:21,
    sex:'男'
};

//JS对象转化为JSON字符串 结果为:{"name":"李瑞","age":3,"sex":"男"}
let jsonuser = JSON.stringify(user);
console.log(jsonuser);//{"name":"李瑞","age":21,"sex":"男"}

//json 字符串转化为对象 参数json 字符串
let obj = JSON.parse(jsonuser);//传入jsonuser 和 {"name":"李瑞","age":21,"sex":"男"} 效果一样的 因为此处需要的是一个字符串
console.log(obj);//Object user对象的超类是Object

(5).面向对象编程

var Student = {
    name: "李四",
    age: 12,
    sex: '男',
    run: function () {
        console.log(this.name + " run...")
    }
};
console.log(Student.run());
var xiaoming = {
    name: "小明"
};
//原型对象
xiaoming._proto_ = Student;
var Bird = {
    fly: function () {
        console.log(this.name + "fly...")
    }
};

//小明的原型 是 student
xiaoming._proto_ = Bird;

function Student(name) {
    this.name = name;
}

//给student 新增一个方法
Student.prototype.hello = function () {
    alert('hello')
};
//Uncaught TypeError: Cannot set property 'hello' of undefined at 7.Json02.html?_ijt=mjf0ihkj26f1253oqp57rupk83:36
<script>
    //定义一个学生的类 属性 方法
    class Student {
        constructor(name) {
            this.name = name;
        }
        hello() {
            alert('hello')
        }

    }
//继承
    class XiaoStudent extends Student {
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade() {
            alert('我是一名小学生')
        }
    }
    let xiaoming = new Student("小明");
    console.log(xiaoming.hello());

    let xiaohong = new XiaoStudent("小红",1);
    console.log(xiaohong.myGrade());
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值