JavaScript学习笔记（一）

最新推荐文章于 2022-04-29 09:42:46 发布

周粥粥ya

最新推荐文章于 2022-04-29 09:42:46 发布

阅读量181

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/NITIQ/article/details/120646841

版权

本文介绍了JavaScript的基础语法，包括内联脚本、外部引用、数据类型（如数值、字符串、布尔值等）、流程控制、数组和对象的使用，以及变量作用域和函数的定义。重点讲解了变量操作、条件判断和数组方法等内容。

摘要由CSDN通过智能技术生成

1、引入JavaSciprt

1、内部标签

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

2、外部引用

test.html

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

zy.js

 alert('hello,world');

2、基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
var score=80;
if (score>60&&score<70){
alert("60~70")
}else if (score>70 && score<80){
alert("70~80")
}else {
alert("没有结果")
}
/*
* 在浏览器控制台中：console.log(score) 相当于java的sout
* */
</script>
</body>
</html>

3、数据类型

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

Number

js不区分小数和整数，Number

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

字符串

’abc‘ “abc”

布尔值

true false

逻辑运算符

&& 俩个为真，结果为真
|| 一个为真，结果为真
！ 真即假  假即真

比较运算符

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

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

智能通过isNaN(NaN)判断这个数是否为NaN

浮点数问题

    console.log((1/3)===(1-2/3))
结果为flase

避免出现精度问题使用以下方式

Math.abs(1/3-(1-2/3))<0.000000001
结果为true0

模板字符串

let name="zy"
let msg=`你好，${name}`

substring

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

null和undefined

null 空
undefined 未定义

数组

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

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

var person={
    name:"zy",
    tags:['js','java']
}

取对象的值

person.name
>"zy"
person.tags[1]
>java

3.2 数组

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

var arr =[1,2,3];
arr[0]
arr[0]=1

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
(7) ['21', 46, 1, 2, '5', 4, 5]
arr.sort()
(7) [1, 2, '21', 4, 46, '5', 5]

7、元素反转 reverse（）

arr
(7) [1, 2, '21', 4, 46, '5', 5]
arr.reverse()
(7) [5, '5', 46, 4, '21', 2, 1]

8、concat（）

(7) [5, '5', 46, 4, '21', 2, 1]
arr.concat(["23232"])
(8) [5, '5', 46, 4, '21', 2, 1, '23232']
arr
(7) [5, '5', 46, 4, '21', 2, 1]

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

9、连接符 join

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

(7) [5, '5', 46, 4, '21', 2, 1]
arr.join("--")
'5--5--46--4--21--2--1'

10、多维数组

arr=[[1,2],[2,3],[3,4]]
arr[1][0]
2

3.3 对象

var 对象名 ={
    属性名：属性值,
     属性名：属性值
}    
var person = {
        name:"zy",
        age:3
    }

1、对象赋值

person.name
'zy'
person.name="zpr"
'zpr'

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

person.haha
undefined

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

delete person.name
true
peron

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

person.haha="haha"
'haha'
person
{age: 3, haha: 'haha'}

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

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

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

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

3.4 流程控制

1、if判断

var a=3
if (a<3){
    alert("hah");
}else{
    alert("kuwa~");
}

2、循环判断

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

3、for循环

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

forEach循环

    var age=[1,23,4,5,6,7,8,9]
    age.forEach(function (value){
        console.log(value)
    })

for…in

    var age=[1,23,4,5,6,7,8,9]
    for (let ageKey in age) {
        console.log(age[ageKey])
    }

3.5 Map和Set

map:

    var map = new Map([["zy", 11], ["zpr", 9]]);
    var name = map.get('zy');//通过key 获得value
    map.set("zzz",23);//新增
    console.log(map);
	map.delete('zy')//删除

Set:无序不重复的集合

 	var set = new Set([3,2,1,1,1,1,1]);//可以去重
	set.add(2);//添加
	console.loh(set.has(3));//是否包含某个元素

3.6 iterator

4、严格检查模式

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

5、函数

5.1、定义函数

方式一

绝对值函数

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

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

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

方式二

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

function(x){…}这是一个匿名函数。把结果赋值给abs，通过abs调用函数。

方法一和方法二同理

调用函数

abs(10) //10
abs(-10) //10

参数问题：js可以传入任意参数也可以不传入

需要自己手动抛出异常

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

arguments是js免费送的关键字；

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

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

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

 'use strict'
    function  ab(a,b,...rest){
     console.log(rest);
    }

rest参数只能卸载最后面，必须用 … 标识

5.2、变量的作用域

在JavaScript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用

    function ab() {
        var x = 1;
        x = x + 1;
    }
    x=x+2//ReferenceError: x is not defined

如果俩个函数使用相同的变量名，只要在函数内部，就不冲突

    'use strict'

    function ab() {
        var x = 1;
        x = x + 1;
    }

    function abc() {
        var x = "a";
        x = x + 2;
    }

内部函数可以访问外部函数的成员，反之不行。

    function ab() {
        var x = 1;
        function abc() {
            var y =x +1;//2
        }
        var z = y+1;//Uncaught ReferenceError: y is not defined
    }

全局函数

//全局变量
    x = 1;

    function f() {
        console.log(x);
    }

    f();
    console.log(x);

全局对象 window

    'use strict'
    var x = 1;
    alert(x);
    alert(window.x);//默认所有的全局变量，都绑定在windo对象下;

alert()这个函数本身也是个windows变量；

规范

由于所有的全局变量都会绑定在window上。会导致不同js使用相同的全局变量产生冲突。

建议自己创建全局变量

把自己代码全部放入自己定义的唯一空间名字中，降低全局命名的冲突

    'use strict'
    //全局唯一变量
    var zy = {};

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

局部作用域let

    function a(){
        for (var i = 0; i <100 ; i++) {//'var' used instead of 'let' or 'const'
                console.log(i);
        }
        console.log(i+1);//i出了这个作用域还可以使
    }

es6 使用let关键字，解决局部作用域冲突问题！

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

常量const

ES6之前常量都是用大写字母去定义所以能改变这个值

//ES6以前
var A='3';
console.log(A);//3
A='3.2';
console.loh(A)//3.2

引入关键字const

const A='3.14';//只读常量
console.log(A);

6、方法

方法就是把函数放在对象的里面

    var zy = {
        name: 'zy',
        year: 2001,
        age: function () {
            var now = new Date().getFullYear();
            return now - this.year;
        }
    }

apply

在js中可以控制this指向

    function getAge() {
        var now = new Date().getFullYear();
        return now - this.year;
    }

    var zy = {
        name: "zy",
        year: 2001,
        age: getAge()
    }

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

7、内部对象

标准对象

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

7.1、Data

基本使用

   var time = new  Date();
    now.getFullYear();//年
    now.getMonth();//月
    now.getDate();//日
    now.getHours();//时
    now.getMinutes()//分
    now.getSeconds();//秒
    console.log(time);//Wed Sep 29 2021 16:19:54 GMT+0800 (中国标准时间)

转换

time.toGMTString()//'Thu, 30 Sep 2021 01:48:23 GMT'
time.toLocaleString()//'2021/9/30 上午9:48:23'

7.2、JSON

JSON字符串和JS对象的转化

    var user = {
        name: "zy",
        age: 3,
        sex:'男'
    }
    //对象转化为json字符串
    var jsonUser = JSON.stringify(user);

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