JavaScript学习Day01(狂神说Java)

行为层(JavaScript)

1.什么是JavaScript

JavaScript是一门世界上最流行的脚本语言

Java,JavaScript

一个合格的后端人员,必须精通JavaScript

1.1 历史

ECMAScript它可以理解是JavaScript的一个标准

最新版本已经到es6版本

但是大部分浏览器还只是停留在es5代码上

开发环境-线上环境,版本不一致

2.快速入门

2.1 引入JavaScript

  1. 内部标签使用
<script>
//……
</script>
  1. 外部引入

ads.js

//...

test.html

<script sre="abc.js"></script>

2.2 基本语法入门

浏览器必备调试:

在这里插入图片描述

<!--    JavaScript严格区分大小写-->
    <script>

        //1. 定义变量  变量名称 变量名=变量值;
        var score=88;
        //alert(num);
        //2.条件控制
        if(score>60 && score<70){

            alert("60~70")
        }else if(score>70 &&score<80){

            alert("70~80")
        }else{
            alert("other");
        }

        //console.log(score)在浏览器的控制台打印变量!System.out.println();
        /*
        *asdasdasd
         */
    </script>

2.3 数据类型

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

变量

var a=1;

number

js不区分小数和整数,Number

123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//复数
NaN//not a number
Infinity//表示无限大

字符串

‘abc’ “abc”

布尔值

true,false

逻辑运算

&&  两个都为真结果为真
||  一个都为真结果为真
!   真即假,假即真

比较运算符

=
==    等于(类型不一样,值一样,也会判断为true)
===   绝对等于(类型一样,值一样,结果为true)

这是js的缺陷,坚持不要使用 ==比较

须知:

  1. NaN==NaN,这个与所有的数值都不相等,包括自己
  2. 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题:

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

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

Math.abs(1/3-(1-2/3))<0.000001

null和Undefined

  • null空
  • Undefined未定义

数组

Java的数值必须是相同类型的对象,Js中不需要这样

<!--        保证代码的可靠性,尽量使用[]-->
        var arr=[1,2,3,4,5,'hello',null,true]
        new Array(1,22,3,4,'hello');

取数组下标:如果越界了,就会

Undefined

对象

对象是大括号,数组是中括号

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

 //Person person=new Person(1,2,3,4,5);
        var person={
            name:"qinjiang",
            age:3,
            tags:['js','java','wed','……']

取对象的值

person.name
>"qinjiang"
person.age
>3

2.4 严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
前提:idea需要设置支持es6语法
 'user strict':严格检查模式,预防JavaScript的随意性导致产生的一些问题
 必须写在JavaScript第一行
 局部变量建议都使用let去定义
-->
    <script>
        'user strict';
        //全局变量

        //es6 let

    </script>
</head>
<body>

</body>
</html>

3.数据类型

3.1 字符串

  1. 正常字符串我们使用单引号或者双引号包裹
  2. 注意转义字符\
\'
\n
\t
\u4e2d   \u### Unicode字符
\x41 ASCII字符
  1. 多行字符串编写
 //tab键上面,esc键下面
        'use strict ';

        var msg=`hello
                 world
                 nihaoya
                 你好 `
  1. 模板字符串
//tab键上面,esc键下面
        'use strict ';

        let name="qinjiang";
        let age=3;
        let msg=`你好呀,${name}`
  1. 字符串长度
str.length
  1. 字符串的可变性,不可变

在这里插入图片描述

  1. 大小写转换
//注意:这里是方法,不是属性
student.toUpperCase()
student.toLowerCase()
  1. student.index(‘t’)
  2. substring
[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

3.2 数组

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

var arr=[1,2,3,4,5,6]//通过下标取值和赋值
arr[0]
arr[0]=1
  1. 长度
arr.length

注意:加入给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失

  1. indexOf,通过元素获得下标索引
arr.indexOf(2)
1

字符串的"1"和数组1是不同的

  1. slice()截取Array的一部分,返回一个新数组,类似于String中的substring
  2. push(),pop()尾部
push:压入尾部
pop:弹出尾部的一个元素
  1. unshift(),shift()头部
push:压入头部
pop:弹出头部的一个元素
  1. 排序sort()
(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
  1. 元素反转reverse()
(3)["C","B","A"]
arr.reverse()
(3)["A","B","C"]
  1. concat()
(3)["C","B","A"]
arr.concat()
(3)["C","B","A",1,2,3]
arr
(3)["C","B","A"]

注意:concat()并没有修改数组,只是会返回一个新的数组

  1. 连接符join

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

(3)["C","B","A"]
arr.jion('-')
"C-B-A"
  1. 多维数组
arr=[[1,2],[3,4],["5","6"]];
arr[1][1]
4

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

3.3 对象

若干个键值对

var 对象名={
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
}
//定义了person对象,拥有四个属性
var person{
    name:"qinjiang",
        age:3,
            email:"231",
                score:0
}

Js中对象,{……}表示一个对象,键值对描述属性XXX:XXXX,多个属性之间使用逗号隔开,最后一个属性不用加逗号!

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

  1. 对象赋值
person.name="qinjaing"
"qinjiang"
person.score
0
  1. 使用一个不存在的对象属性,不会报错!undefined
person.haha
undefined
  1. 动态的删减属性,通过delete删除对象的属性
delete person.name
true
person
  1. 动态的添加,直接给新的属性添加值即可
person.haha="haha"
"haha"
person
  1. 判断属性值是否在对象中! XXX in XXX!
'age' in person
true
//继承
'toString in person'
true
  1. 判断一个属性是否是这个对象自身拥有的hasOwnproperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4 流程控制

if判断

var age=3;
if(age>3){//第一个判断
    alert("haha");
}else if(age<5){//第二个判断
    alert("kuwa");
}else{//否则
    alert("kuwa")
}

while循环,避免程序死循环

while(age<100){
    age=age+1;
    console.log(age)
}

for循环

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

for-each循环

var age=[12,2,3,24,21,23,21]
//函数
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])
    }
}

3.5 Map和Set

es6的新特性

Map:

//学生的成绩,学生的名字
        //var names=["tom","jack","haha"];
        //var scores=[100,90,80];
        var map=new Map([['tom',100],['jack',90],['haha',80]]);
        var name=map.get('tom');//通过key获得value
        map.set('admin',123456);//新增或者修改
        map.delete("tom");//删除

Set:无序不重复的集合

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

3.6 iterator

es6新特性

作业:使用iterator来遍历迭代我们Map,Set!

遍历数组

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

遍历Map

var map=new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of mao){
    console.log(x);
}

遍历Set

var set=new Set([5,6,7]);
for(let x of set){
    console.log(x)
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值