当前位置：主页 > 查看内容

JavaScript基础入门

发布时间：2021-05-11 00:00| 有位朋友查看

简介：JavaScript基础入门 1、快速入门 1.1 引入script 内部标签 script / script 外部应用 aaa.js //...... test.html script src aaa.js / script 测试代码 !DOCTYPE html html lang en head meta charset UTF-8 title Title / title !--外部引入-- !-- 注意scri……

JavaScript基础&入门

1、快速入门

1.1 引入script

内部标签
```
<script>
    
</script>
```
外部应用

aaa.js

//......

test.html

<script src="aaa.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--外部引入-->
<!--  注意：script标签必须成对出现  -->
    <script src="jk.js"></script>
</head>
<body>
<!-- script标签内  JavaScript代码 一般会放在bady内的最底部 -->

<script>
    alert('hello world');
</script>

</body>
</html>

1.2基本变量

基本变量只有一个var

    <script>
        //1 定义变量  变量类型  变量名 = 变量值
        var num =1;
        //2.条件控制
        if(2>1){
            alert("true")
        }
    </script>

1.3 数据类型

数值，文本，图形，音频，视频…

变量

var a = 1 //不能以数字开头

number

js不区分小数和整数，Number

123//整数
123.123//浮点数
1.223e3//科学计数法
-9932//复数
NaN  //not a number

字符串

‘abc’ “abc”

布尔值

true , false

逻辑运算

&&  两个都为证，结果为真
||  一个为真，结果为真
！  真即假，假即真

比较运算符

=
1 "1"
==  等于（类型不一样，值一样，也会判断为true）
===  绝对等于(类型一样，值一样，结果为true)

这是一个JS的缺陷，坚持不要使用 == 比较

须知：

NaN === NaN , 这个与所有的数值都不相等，包括自己

只能通过isNaN(NaN)来潘多这个数是否是NaN

浮点数问题：

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题

Math.abc(1/3-(1-2/3))<0.000000000001

null 和 undefined

null 空

nudefined 未定义

数组

Java中一些列相同类型的对象~，js中不需要这样

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',true,null];

new Array(1,2,3,4,5,'fdsa');

取数组下标：如果越界了，就会

undefined

对象

对象是大括号，属猪是中括号

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

//Person person = new Person(1,2,3,4,5)
var person = {
    name: "hello",
    age: 3
}

取对象的值

person.name
> "hello"

1.4 严格检查格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
    前提：IDEA需要支持ES6语法
    'use strcit';严格检车模式，预防JavaScript的随意性导致产生的一些问题
    必须写在JavaScript的第一行
    局部变量都建议使用 let
-->

    <script>
        'use strcit'
        //全局变量
        var i = 1;
        //ES6  let
        let a = 1;
    </script>
</head>
<body>

</body>
</html>

2、数据类型

2.1 字符串

1、正常字符串我们使用单引号或者双引号包裹

*2、注意转义字符 *

\`
\n
\t
\u4e2d  \u#####  Unicode字符
\x41             Ascll字符

3、多行字符串编写

//tab 上面  esc下面
var msg = 
`
hello
world
dfdsa
12435
`

4、模板字符串

let name = "hello world"
let age = 3;

let msg = `你好, ${name}`

5、字符串长度

console.log(str.length)

6、字符串的可变性，不可变

在这里插入图片描述

7、大小写转换

//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

8、substring

[)
student.substring(1)//从第一个字符串截取到最后一个字符串
 student.substring(1,3)  //[1,3)

2.2 数组

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

var arr = [1,2,34,45,5,]  //通过小标取值和赋值
arr[0]
arr[0] = 3

1、长度

arr.length

假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

2、indexOf，通过元素获得下标索引

arr.indexOf(2)
1

字符串的"1" 和数字1是不一样的

3、slice() 截取Array的一部分，返回一个新数组，类似于string中的substring

4、push,pop（）

push: 压入尾部
pop:  弹出尾部的一个元素

5、unshift(),shift() 头部

unshift: 压入到头部
shift： 弹出头部的一个元素

6、排序sort

arr.sort()

7、元素反转

arr.reverse()
[1,2,3] → [3,2,1]

8、concat()

(3)["c","b","a"]
arr.concat([1,2,3])
(6)["c","b","a",1,2,3]
arr
(3)["c","b","a"]

注意：concat（）并没有修改数组，只是会返回一个新的数组

9、链接符join

打印拼接数组，使用特定的字符串连接

10、多维数组

arr = [[1,2],[3,4],["13","14"]]
arr[1][1]
4

数组：存储数据(如何存，如何取，方法都可以自己实现)

2.3 对象

若干个键值对

var 对象名 = {
    属性名：属性值，
    属性名：属性值，
    属性名：属性值，
    属性名：属性值  
}

var person = {
            name: "zhb",
            age : 18,
            email : "3187311481@qq.com",
            score: 0
        }

js中对象，{……}表示一个对象，键值对描述属性xxx:xxxxxxx,多个属性之间用逗号隔开，最后一个逗号不加逗号哦

JavaScript中的所有键都是字符串，值是任意对象

1、对象赋值

person.name = "zhb"
"zhb"
person.name
"zhb"

2、使用一个不存在的对象属性，不会报错！undefined

person.haha
undefined

3、动态的删减属性

delete person.name
true
person

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

person.haha = "haha"
"haha"
person

5、判断属性值是否在这个对象中！

'age' in person
true
//继承
'toString' in person
true

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

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

2.4流程控制

if判断

        var age = 3;
        if(age > 3){
            alert("haha");
        } else{
            alert("┭┮﹏┭┮");
        }

while循环,避免程序死循环

var age = 3
while(age<100){
    age = age + 1
    console.log(age)
}
//避免while(true) 死循环

for循环

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

forEach循环

var h = [1,23,32,45,324,53,53,2]

h.forEach(function (value) {
    console.log(value)
})

2.5 Map 和 Set

ES6新特性

Map:

var map = new Map([['tom',100],['jack',97]]);
var name = map.get('tom');//通过key获得value
map.set('haha',13245);//添加值
map.delete("haha");//删除
console.log(name)

Set:无序不重复的集合

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

2.6 iterator

遍历map

var map = new Map([['tom',100],['jack',97]]);
for (let x of map){
    console.log(x)
}

遍历数组

var map = [1,23,4,]
for (let x of map){
    console.log(x)
}

遍历set

var set = new set ([1,23,4,])
for (let x of set){
    console.log(x)
}

3、函数

3.1定义函数

定义方式一

绝对值方法

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

一旦执行到return代表函数结果，返回结果

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

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

这是一个匿名函数，但是可以吧结果赋值给a，通过a就可以调用函数

方式一和方式二等价

调用函数

a(10)  //10
a(-10) //10

参数问题：JavaScript可以串任意个参数也可以不传递参数

rest

以前：

if(argument.length>2){
    for(var i = 2; i < arguments.length;i++){
        //.........
    }
}

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

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

rest 参数只能写在最后，不许使用…标识

3.2 变量的作用域

局部作用域

function f() {
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);// i出了作用于还可以使用
}

function f() {
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);// i出了作用于还可以使用
    
}

ES6 let关键字，结局了局部作用域的冲突问题！

建议大家都使用let去定义局部作用域

常量 const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

var pi='3.14'
console.log(pi);
pi = '242'//可以改变这个值
console.log(pi);

在ES6引入了常量关键字const

const pi='3.14'//只读变量
console.log(pi);
pi = '242'//可以改变这个值
console.log(pi);

3.3 方法

var yehl = {
    name:"叶鸿凌",
    bitrh: 2002,
    //方法
    age : function () {
        // 今年 - 出生年月
        var now = new Date().getFullYear();
        return now - this.bitrh;
    }
}
//属性
yehl.name
//方法,一定要带括号()
yehl.age()

this.代表什么？把代码拆分开如下

function getAge() {
    // 今年 - 出生年月
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var yehl = {
    name:"叶鸿凌",
    bitrh: 2002,
    age: getAge
}

//yehl.age()  可以  是yehl调用的他
//getAge()    NaN   window是调用他的

this是无法指向的，是默认指向调用它的对象；

apple

在js中可以控制this的指向

function getAge() {
    // 今年 - 出生年月
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var yehl = {
    name:"叶鸿凌",
    bitrh: 2002,
    age: getAge
}

getAge.apply(yehl,[]);//this，指向了yehl，参数为空

4、内部对象

标准对象

typeof 123
"number"
typeof "13"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"

4.1 Date

基本使用

var now = new Date();
now.getFullYear();//年
now.getMonth();//月  0~11 月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一  1970 1.1 0:00:00  毫秒数

4.2 JSON

json是什么

早期，所有的数据传输习惯使用XML文件！

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象，任何s支持的类型都可以用son来表示；

格式

对象都用{}
数组都用[]
所有的键值对都是用key.value

JSON 字符串和JS对象的转化

var user = {
    name:"jfdlksa",
    age: 3,
    sex: "男"
}

//对象转化为json字符串
var jsonUser = JSON.stringify(user);

//json 字符串转化为对象  参数为json字符串
JSON.parse('{name: "jfdlksa", age: 3, sex: "男"}')

4.3Ajax

原生的js写法 xhr异步请求
jQuery封装号的方法his ${"#name"}.agaj("")
axios请求

5、面向对象编程

5.1 什么事面向对象

javascript、 java、 c#、 … 面向对象：javascript有些区别

类：模板

对象：具体的实例

在JavaScript这个需要大家换一下思维方式

原型：

var user = {
    name:"jfdlksa",
    age: 3,
    run : function () {
        console.log(this.name + "run");
    }
}

var xm = {
    name : "xm";
}

//小明的原型是user
xm._proto_ = user;

ES6之前的

function student(name) {
    this.name = name;

}

//给student新增一个方法
student.prototype.hello = function () {
    alert("hello")
}

class继承

class 关键字实在ES6引入的

//ES6
//定义一个学生的类
class student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert("hello");
    }
}

var  xiaoming = new student("小明");
var  xiaoming = new student("小红");
xiaoming.hello()

继承

<script>



    //ES6
    //定义一个学生的类
    class student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert("hello");
        }
    }

    class xiaoxue extends student{
        constructor (name,grade){
            super(name)
            this.grade = grade;
        }

        mygrade(){
            alert("我是一个小学生");
        }
    }

    var  xiaoming = new student("小明");
    var  xiaohong = new xiaoxue("小红",1);
</script>

原型链

_ proto _