请选择 进入手机版 | 继续访问电脑版
点击联系客服
客服QQ:509006671 客服微信:mengfeiseo
查看: 67|回复: 50

JavaScript默认启动

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-4-8 14:45:38 | 显示全部楼层 |阅读模式
JavaScript基础入门

1、快速入门

1.1 引入script

内部标签

脚本(脚本)

/脚本

外部应用程序

Aaa.js

//.

Test.html

Scriptsrc=' aaa.js'/脚本

测试代码

!DOCTYPE  html

Html  lang='en  '
>head>
    meta charset="UTF-8">
    title>Titletitle>

    script src="jk.js">script>
head>
body>
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))


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 严格检查格式
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    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(age100){
    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  
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 _

  • 回复

    使用道具 举报

    1

    主题

    194

    帖子

    46

    积分

    新手上路

    Rank: 1

    积分
    46
    发表于 2021-4-8 14:45:38 | 显示全部楼层
    真是 收益 匪浅
    回复

    使用道具 举报

    1

    主题

    199

    帖子

    11

    积分

    新手上路

    Rank: 1

    积分
    11
    发表于 2021-4-8 15:05:42 | 显示全部楼层
    帮帮顶顶!!
    回复

    使用道具 举报

    1

    主题

    183

    帖子

    12

    积分

    新手上路

    Rank: 1

    积分
    12
    发表于 2021-4-8 15:26:01 | 显示全部楼层
    路过,学习下
    回复

    使用道具 举报

    1

    主题

    187

    帖子

    35

    积分

    新手上路

    Rank: 1

    积分
    35
    发表于 2021-4-8 15:47:20 | 显示全部楼层
    好帖,来顶下
    回复

    使用道具 举报

    1

    主题

    198

    帖子

    -3

    积分

    限制会员

    积分
    -3
    发表于 2021-4-8 16:07:30 | 显示全部楼层
    有竞争才有进步嘛
    回复

    使用道具 举报

    1

    主题

    203

    帖子

    73

    积分

    注册会员

    Rank: 2

    积分
    73
    发表于 2021-4-8 16:27:40 | 显示全部楼层
    帮帮顶顶!!
    回复

    使用道具 举报

    1

    主题

    157

    帖子

    32

    积分

    新手上路

    Rank: 1

    积分
    32
    发表于 2021-4-8 16:48:09 | 显示全部楼层
    LZ真是人才
    回复

    使用道具 举报

    1

    主题

    189

    帖子

    24

    积分

    新手上路

    Rank: 1

    积分
    24
    发表于 2021-4-8 17:08:16 | 显示全部楼层
    帮帮顶顶!!
    回复

    使用道具 举报

    0

    主题

    214

    帖子

    94

    积分

    注册会员

    Rank: 2

    积分
    94
    发表于 2021-4-8 17:28:22 | 显示全部楼层
    学习了,谢谢分享、、、
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|无图版|手机版|小黑屋|汕头@IT精英团

    Powered by Discuz! X3.4 © 2021 Comsenz Inc.

    GMT+8, 2021-4-24 01:15 , Processed in 0.068719 second(s), 19 queries .

    快速回复 返回顶部 返回列表