Day22 2021.4.8 javascript 上

最新推荐文章于 2024-07-11 17:41:38 发布

hc1235

最新推荐文章于 2024-07-11 17:41:38 发布

阅读量146

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/hc1235/article/details/115519232

版权

java 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

Day 22 2021.4.8

JAVAScript快速入门

一门脚本语言

1.基本使用

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

    <!--script标签内,写Javascript代码-->
<!--    <script>-->
<!--        alert("helloworld")-->
<!--    </script>-->
    <!--外部引入-->
    <script src="js1.js"></script>
</head>
<body>

<!--这里也可以存放-->
</body>
</html>

alert("helloworld")

2.浏览器控制台的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BQ0MFRQa-1617862503593)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210408100642094.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--javascript严格区分大小写-->
    <script>
        // 1.定义变量 变量类型 变量名 =  变量值
        var num = 1;
        // 2.条件控制
        if (2>1){
            alert("true")
        }
        //console.log(num) 在浏览器的控制台打印变量
        //alert("true")  弹出弹窗
        /*多行注释*/
    </script>
</head>
<body>

</body>
</html>

3.数据类型(var)

变量

var 变量名(不可以以数字开头) = 变量值

数值：number

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

字符串

‘ abc’ “abc”

布尔值

true false

逻辑运算

&&  两个为真,结果为真
||  一个为真,结果为真
！  取反

比较运算符

=		等于
==		等于(类型不一样,值一样,也会判断true 如 1和"1")
===		绝对等于(类型一样,值一样)

须知：

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

浮点数问题：

console.log((1/3) === (1-2/3))   //false 存在精度损失

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

console.log(Math.abs(1/3-(1-2/3))<0.000000001)  //true

null和undefined

null 空
undefined 未定义

数组

var arr = [1,2,3,4,5,'hello',null,true]

取数组下标若越界就会undefined

对象

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

//Person person = new Person();
var person = {
    name: "nihao",
    age: 1,
    tags: [1,2,3,4]
}

4.严格检查模式(strict)

//'use strict' 严格检测模式,预防JAVAScript的随意性导致的一些问题
//必须写在第一行 局部变量建议使用let
'use strict'
//全局变量
var i = 1 ;
//局部变量 ES6  let
let j  = 1;

数据类型

1.字符串

正常字符使用单引号,或者使用双引号
注意转移字符 \

\'
\n
\t
\u4e2d

多行字符串编写

//tab 上面 esc键下面
var mag =
    `hellos
nihao
haha`
console.log(mag)

模板字符串

let name = "你好";
var msg1 = `你好呀,${name}`
console.log(msg1)

字符串长度

var student = "student"
console.log(student.length)//字符串长度
console.log(student[0])//打印

字符串的可变性,不可变
substring

console.log(student.substring(1,3))//截取 [1,3)

2.数组

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

var arr = [1,2,3,4,5,6]

长度 (arr.length)

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

indexOf (通过元素获得下标索引)

注意：字符串的“1” 和数字 1 是不同的

slice() 截取Array的一部分，返回一个新的数组
push()，pop() 尾部

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

unshift()，shift() 头部

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

排序 sort()
元素反转 reverse()
拼接 concat()

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

连接符 join

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

多维数组

var arr = [[1,2],[3,4],[5,6]];

3.对象

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

js中的对象,｛…｝表示一个对象，键值对描述数学xxxx : xxxx，多个属性之间使用逗号隔开，最后一个熟悉不加逗号

1.对象赋值

person.name
"哈哈"
person.name = "你好"
"你好"

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

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

delete person.name
true
person
{age: 3, email: "sdasdasd", score: 12}

4.动态的添加

person.hh = "hh"
"hh"
person
{age: 3, email: "sdasdasd", score: 12, hh: "hh"}

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

'age' in person
true
'toString' in person
true

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

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

4.流程控制

if判断

var age = 3;
if (age > 3){
    alert("haha");
}else {
    alert("kuwa");
}

while循环

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

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

for循环

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

forEach循环

var age = [1,3215,12354,213256,1235];
age.forEach(function (value){
    console.log(value)
})

for…in循环

for (let value in age) {
    console.log(age[value])
}

5.Map和Set

Map：

//学生的成绩,学生的名字
//Map集合
let map = new Map([['tom',100]],['jack',81],['haha',62]);
let name = map.get('tom');//通过key可以获得value
map.set('adas',51);
map.delete('tom')
console.log(name);

Set:无序不重复的集合

let set = new Set([3,1,1,1,1,])//可以去重
set.add(2);
set.delete(1);
set.has(3)

6.iterator

//使用for of 遍历元素/ for in 遍历下标
for (var x of map) {
    console.log(x)
}

函数

1.定义函数

1.1定义方式一

绝对值函数

一旦执行到return 代表函数结束

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

1.2定义方式二

这是一个匿名函数，可以把结果赋值给abs

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

2.调用函数

可以传任意个参数也不会报错

abs(10);
abs(-10);

手动定义异常

function abs(x){
    //手动抛出异常
    if(typeof x!== 'number'){
        throw 'Not a number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }        
}

arguments

代表传递进来的所有的参数是一个数组

function abs(x){
    console.log("x=>"+x);
    for (let i =0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }        
}

新特性：rest

获得除了当前已经定义的参数的其它输入参数

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

3.变量的作用域

var定义变量实际是有作用域的

假设在函数中声明，则在函数体外不可以使用(除闭包)

'use strict'
function qj(){
    var x = 1;
    x = x + 1;
}
x = x + 2;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，则不报错

'use strict'
function qj(){
    var x = 1;
    x = x + 1;
}
function qj(){
    var x = 'a';
    x = x + 1;
}

内部函数可以访问外部函数的成员，反之则不行(就近原则)

'use strict'
function qj1(){
    var x = 1;
    function qj(){
        var y = x + 1;
    }
    var z = y + 1;
}//VM98:1 Uncaught ReferenceError: z is not defined

javascript实际上只有一个全局变量，任何变量（函数也可以视为变量），假设没有在函数作用域范围内找到，就会向外找。如果再找不读奥就会报错

降低全局命名冲突的问题

//唯一全局变量
var APP = {};

//定义全局变量
APP.name = 'hello';
APP.add = function (a,b){
    return a+b;
}

局部变量改进（let）

常量（const）

4.方法

'use strict'
var wo ={
    name: '你好',
    birth: 2019,
    age:function (){
        //今年-出生年
        var date = new Date().getFullYear();
        return date-this.birth;
    }
}

this

默认指向调用它的人

'use strict'
function getAge(){
        //今年-出生年
        var date = new Date().getFullYear();
        return date-this.birth;
}
var wo ={
    name: '你好',
    birth: 2019,
    age: getAge
}

apply

可以控制this的指向

'use strict'
function getAge(){
        //今年-出生年
        var date = new Date().getFullYear();
        return date-this.birth;
}
var wo ={
    name: '你好',
    birth: 2019,
    age: getAge
}
getAge.apply(wo,[]);//this指向了wo,参数为空

内部对象

1.Date

'use strict'
var now = new Date();
console.log(now);//Thu Apr 08 2021 13:45:39 GMT+0800 (中国标准时间)
console.log(now.getFullYear())//年：2021
console.log(now.getMonth())//月：3     外国记：0~11
console.log(now.getDate())//日：8
console.log(now.getDay())//星期：4
console.log(now.getHours())//小时：13
console.log(now.getMinutes())//分：47
console.log(now.getSeconds())//秒：6
console.log(now.getTime())//时间戳 全世界统一 1970.1.1 00:00:00开始 1617860826301
console.log(now.toLocaleString())//转换成本地时间

2.JSON

是一种轻量级的数据交换格式

格式：

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

var user = {
    name: 'hello',
    age: 3,
    set: '男'
}
//对象转化为JSON字符串
var jsonuser = JSON.stringify(user)
console.log(user)
console.log(jsonuser)
//JSON字符串转化为对象
var obj = JSON.parse(jsonuser)
console.log(obj)
nth())//月：3     外国记：0~11
console.log(now.getDate())//日：8
console.log(now.getDay())//星期：4
console.log(now.getHours())//小时：13
console.log(now.getMinutes())//分：47
console.log(now.getSeconds())//秒：6
console.log(now.getTime())//时间戳 全世界统一 1970.1.1 00:00:00开始 1617860826301
console.log(now.toLocaleString())//转换成本地时间

2.JSON

是一种轻量级的数据交换格式

格式：

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

var user = {
    name: 'hello',
    age: 3,
    set: '男'
}
//对象转化为JSON字符串
var jsonuser = JSON.stringify(user)
console.log(user)
console.log(jsonuser)
//JSON字符串转化为对象
var obj = JSON.parse(jsonuser)
console.log(obj)

hc1235

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day22 2021.4.8 javascript 上

Day 22 2021.4.8JAVAScript快速入门一门脚本语言1.基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--
复制链接

扫一扫