前端技术（3）— JavaScript（上篇）

最新推荐文章于 2024-06-26 17:13:32 发布

USTC_SC

最新推荐文章于 2024-06-26 17:13:32 发布

阅读量192

点赞数

分类专栏：前端技术篇文章标签： javascript java js 前端 jquery

本文链接：https://blog.csdn.net/USTC_SC/article/details/109082841

版权

前端技术篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、概述

1.1 前端技术：

HTML： 定义了网页的内容
CSS： 描述了网页的布局
JavaScript： 网页的行为

1.2 JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

二、快速入门

2.1 引入JavaScript

1.内部标签

<script>
	// ...
 </script>

2.外部引入

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

【代码演示】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    在script标签内写JavaScript代码-->
<!--    方法一：内部标签-->
<!--    <script>-->
<!--        alert("hello World !")-->
<!--    </script>-->

<!--    方法二：外部引入，注意script标签必须成对出现-->
<!--    不用显示定义type，默认就是JavaScript-->
<!--    <script type="text/javascript"></script>-->
    <script src="js/qj.js"></script>
</head>
<body>

</body>
</html>

在这里插入图片描述

浏览器调试

console.log(score):在浏览器控制台打印变量，相当于System.out.println();

在这里插入图片描述

2.2 数据类型

number

js不区分小数和整数，Number

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

字符串

“abc” ‘abc’

布尔值

true ，false

逻辑运算

&&  与
||  或
！  非

比较运算符

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

tips

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

浮点数问题：

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

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

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

数组

Java的数值必须是相同类型的对象，JavaScript不需要这样,如果取数组下标越界，就会undefined

//保证代码的可读性，尽量使用[]
var arr =[1,2,3,4,5,"hello",null,true]
new Array(1,12,3,4,"hello")

对象

对象是大括号，数组是中括号，每个属性之间用逗号隔开，最后一个不需要添加。

var person ={
    name:"suc",
    age:18,
    target:["AI","CV","RS"]
}
/*
输出测试：
    person.target
    >(3) ["AI", "CV", "RS"]
    person.name
    >"suc"
    person
	>{name: "suc", age: 18, target: Array(3)}
*/

严格检查格式

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

'use strict'
let i=1;

三、字符串

3.1 字符串

正常字符我们使用单引号或者双引号包裹
注意转义字符\

代码	输出
’	单引号
"	双引号
\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

3.多行字符串编写

var msg = `
hello
world
你好`

3.2字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

3.3 字符串的方法

Method	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将指定的 Unicode 值转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

在这里插入图片描述

四、数组

4.1 数组的定义

数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示

var arr = ['a', 'b', 'c'];

除了在定义时赋值，数组也可以先定义后赋值

var arr = [];

arr[0] = 'a';
arr[1] = 'b';
arr[2] = 'c';

任何类型的数据，都可以放入数组。

var arr = [
  {a: 1},
  [1, 2, 3],
  function() {return true;}
];

arr[0] // Object {a: 1}
arr[1] // [1, 2, 3]
arr[2] // function (){return true;}

4.2 length属性

数组的length属性，返回数组的成员数量。

['a', 'b', 'c'].length // 3

只要是数组，就一定有length属性。该属性是一个动态的值，等于键名中的最大整数加上1。

var arr = ['a', 'b'];
arr.length // 2

arr[2] = 'c';
arr.length // 3

arr[9] = 'd';
arr.length // 10

arr[1000] = 'e';
arr.length // 1001

length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值。当length属性设为大于数组个数时，读取新增的位置都会返回undefined。

var arr = [ 'a', 'b', 'c' ];
arr.length // 3

arr.length = 2;
arr // ["a", "b"]

数组本质上是对象的一种，所以我们可以为数组添加属性，但是这不影响length属性的值。如果数组的键名是添加超出范围的数值，该键名会自动转为字符串。

var arr = [];
arr['p'] = 'abc';
arr.length // 0

arr[-1] = 'a';
arr[Math.pow(2, 32)] = 'b';

arr.length // 0
arr[-1] // "a"
arr[4294967296] // "b"

4.3 数组的遍历

遍历类似数组的对象，可以采用for循环，也可以采用数组的forEach方法。

// for循环
function logArgs() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(i + '. ' + arguments[i]);
  }
}

// forEach方法
function logArgs() {
  Array.prototype.forEach.call(arguments, function (elem, i) {
    console.log(i+'. '+elem);
  });
}
//数组遍历
// for循环
for(var i = 0; i < a.length; i++) {
  console.log(a[i]);
}

// while循环
var i = 0;
while (i < a.length) {
  console.log(a[i]);
  i++;
}

4.4 in 运算符

检查某个键名是否存在的运算符in，适用于对象，也适用于数组。如果数组的某个位置是空位，in运算符返回false

var arr = [];
arr[100] = 'a';

100 in arr // true
1 in arr // false

在这里插入图片描述

五、对象

5.1基本概念

JavaScript 对象：对象只是一种特殊的数据。对象拥有属性和方法。

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数… 此外，JavaScript 允许自定义对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。

布尔型可以是一个对象。
数字型可以是一个对象。
字符串也可以是一个对象
日期是一个对象
数学和正则表达式也是对象
数组是一个对象
甚至函数也可以是对象

5.2对象的创建

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


//定义了一个person对象，含有四个属性
var person ={
    name:"suc",
    age:18,
    email:suc@mail.ustc.edu.cn
}

1.对象赋值

person.age
>18
person.age=15
>15

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

person.girlfriend
>undefined

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

delete person.name
>true
person
>{name: "suc", email: "suc@mail.ustc.edu.cn"}

4.动态的添加

person.age=18
person
>{name: "suc", email: "suc@mail.ustc.edu.cn", age: 18}

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

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

6.判断方法和属性是否是这个对象自身拥有 hasOwnProperty()

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

六、流程控制

6.1 If…else 语句

请使用 if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

if (condition1)       
  {        
  当条件 1 为 true 时执行的代码       
  }       
else if (condition2)       
  {        
 当条件 2 为 true 时执行的代码      
  }        
else        
  {        
  当条件 1 和 条件 2 都不为 true 时执行的代码        
  }

6.2 三目运算

(condition1) ? ture-doing : else-doing; 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码

5 > 3 ? alert("5大于3") : alert("5小于3");

6.3 for 循环

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

forEach 循环

var age=[7,2,4,6,3,9,2];
//函数
age.forEach(function(value){
    console.log(value)
})

for…in

var age=[7,2,4,6,3,9,2];
for (var num in age){
    console.log(age[num])
}

6.4 思维导图

在这里插入图片描述

七、Map和Set

7.1 Map

Map的创建

//空map设值key-value
var m = new Map();
m.set("cv",18);
m.set("nlp",19);
//构造参数传key-value
var m = new Map([['cv', 18], ['nlp', 19]]);

Map中的方法

var m = new Map(); // 空Map
m.set('cv', 18); // 添加新的key-value
m.has('cv'); // 是否存在key 'cv': true
m.get('cv'); // 18
m.delete('cv'); // 删除key 'cv'
m.get('cv'); // undefined

对一个key重复设值，后面的值会将前面的值覆盖。

var m = new Map();
m.set('cv', 18);
m.set('cv', 19);
m.get('cv'); // 19

7.2 Set

Set和Map类似，但set之存储key，且key不重复。

Set的创建。

//方法一：
var s1 = new Set(); // 空Set
s1.add(1);
s1.add(2);
s1.add(3);
//方法二：
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

Set的方法

var s = new Set([1, 2, 3]);
s.add(3);
>>s; // Set{1,2,3}
s.delete(3);>>s;
// Set([1,2]);
s.has(1)//true 判断是否包含元素

7.3 Map及Set的遍历

Array可以采用下标进行循环遍历，Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了iterable类型，Array、Map、Set都属于iterable类型。

具有iterable类型的集合可以通过新的for … of循环来遍历。

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    alert(x);
}
for (var x of s) { // 遍历Set
    alert(x);
}
for (var x of m) { // 遍历Map
    alert(x[0] + '=' + x[1]);
}

遍历：forEach

forEach是iterable内置的方法，它接收一个函数，每次迭代就自动回调该函数。

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    alert(element);
});

Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    alert(element);
});

Map的回调函数参数依次为value、key和map本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    alert(value);
});

八、函数

8.1 定义函数

定义方式一：

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

定义方式二：

var abs1 = function (x) {
        if (x>10){
            return x;
        }else{
            return -x;
}

function（x）{ … }是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

8.2 arguments和rest

由于JavaScript的特性，函数传递过程中，传递的参数的个数可以小于或者大于规定的个数，并不会报错，然后对于这个问题有arguments关键字代表进来的所有参数，是一个数组。

arguments包含所有参数，有时候想使用多余的参数进行附加操作，需要排除已有的参数。

ES6引入新特性，获取除了已经定义的参数外的所有参数，rest参数只能写在最后面，必须使用…表示

var f1 = function (a,b) {
    console.log("a->" + a);
    console.log("b->" + b);

    for(var i =0;i<arguments.length;i++)
        console.log(arguments[i]);
}
function f2(a,b,...rest) {
    console.log('a->'+a);
    console.log('b->'+b);
    console.log('rest->'+rest);
}

在这里插入图片描述

我们所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就会产生冲突

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

//定义局部变量
SucApp.name='suc';
SucApp.add =function (a,b) {
    return a+b;
}

8.3 JavaScript中的var 关键字

1. var定义的变量没有块作用域

for( let i = 0;i<10;i++){
    console.log(i);
}
console.log("循环体之外" + i);//会报错

for( var i = 0;i<10;i++){
    console.log(i);
}
console.log("循环体之外" + i);//依旧可以用

2. var定义的全局变量会自动添加全局window对象的属性

下面程序使用let定义变量name，这个变量不存在任何函数内，属于全局变量，但是与var定义全局变量不同，使用let定义的全局变量不会变成window对象的属性，因此上面的程序访问window.name将会看不到任何输出。

let name = "gg" ;
console.log(name);
console.log(windos.name);//报错

3. 使用var定义的变量会提前加载，而使用let定义的变量要等到程序流执行到定义变量的代码时才会加载。

var name ='gg';
function func(){
    console.log(name);//undefined，如果下面name用let定义就会出错
    var name = 'jj';
    console.log(name);//jj
}
func();

8.4 函数作为方法调用

1.在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

2.this 关键字

当函数没有被自身的对象调用时， this 的值就会变成全局对象。在 web 浏览器中全局对象是浏览器窗口（window 对象）。

上面代码中fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。this对象，拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

function myFunction() {
    return this;
}
console.log(myFunction());                // 返回 window 对象

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
console.log(myObject.fullName());       //实例中 this 的值为 myObject 对象

3.call() 和 apply()

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。两个方法都使用了对象本身作为第一个参数。两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）

通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

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

var suc={
    name:'苏',
    birth:2000,
    age: getAge
};
console.log(getAge.apply(suc,[])); //20
console.log(getAge.call(suc));		//20

九、内部对象

9.1 标准对象

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

9.2 Data

1.Date 对象

Date 对象用于处理日期和时间。

创建 Date 对象：

var myDate=new Date()  //Tue Oct 13 2020 15:26:49 GMT+0800 (中国标准时间)
myDate.getTime()
now =new Date(1602574009709)  //时间戳转时间

2. Date 对象方法

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数,时间戳

9.3 JSON

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

在JavaScript中一切皆对象，一切js支持的类型都可以用JSON来表示。

格式：

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

var user ={
    name:'suc',
    age:18,
    sex: 'male'
};//
//对象转json字符串
var jsonUser = JSON.stringify(user);
//json字符串转对象
var obj=JSON.parse('{"name":"suc","age":18,"sex":"male"}');

在这里插入图片描述

格式比较

var user ={name:'suc',age:18,sex: 'male'}
var jsonuser ="{"name":"suc","age":18,"sex":"male"}"

USTC_SC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端技术（3）— JavaScript（上篇）

文章目录一、概述1.1 前端技术：1.2 JavaScript 简介二、快速入门2.1 引入JavaScript2.2 数据类型三、字符串3.1 字符串3.2字符串属性3.3 字符串的方法四、数组4.1 数组的定义4.2 length属性4.3 数组的遍历4.4 in 运算符五、对象5.1基本概念5.2对象的创建六、流程控制6.1 If...else 语句6.2 三目运算6.3 for 循环6.4 思维导图七、Map和Set7.1 Map7.2 Set7.3 Map及Set的遍历八、函数8.1 定义函数8.
复制链接

扫一扫