【JavaScript详解】一文掌握JavaScript基础知识（上）

已于 2022-10-20 19:51:38 修改
阅读量1.5k 收藏 4
点赞数 1
分类专栏： JavaWeb 文章标签： javascript 前端 开发语言
于 2022-09-28 08:53:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42146402/article/details/127082139
版权

JavaScript基础

前言

本文为JavaScript基础知识与语法介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

一、什么是JavaScript

1.JavaScript概述

  • JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言
  • JavaScript是世界上最流行的脚本语言
  • 外观看起来像Java，因此取名为JavaScript
  • JavaScript兼容于ECMA标准，因此也称为ECMAScript

2.javaScript有什么作用

  • 嵌入HTML中，与Css一样
  • 对浏览器事件作出响应
  • 操作HTML元素及节点
  • 可以动态操作CSS样式
  • 在数据被提交到服务器之前验证数据

二、JavaScript快速入门

1.引入JavaScript

  • 内部标签
<script>
    window.alert("你好，王先生！");
</script>
  • 外部引入
<script src="js/fistjs.js"></script>
  • 测试代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内写JavaScript代码，script标签必须成对出现，不用显式定义type，默认就是JavaScript-->
    <script type="text/javascript"></script>
    <!--第一种方式，内部引用
<script>
     window.alert("你好，王先生！");
 </script>-->
    <!--第二种方式，外部引用-->
    <script src="js/fistjs.js"></script>
</head>
<body>
</body>
</html>

2.基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var score = 71;
    if (score>=0&&score<=100){
        if (score>90&&score<100){
            alert("优秀");
        }else if (score>80&&score<90) {
            alert("良好");
        }else {
            alert("及格");
        }
    }
</script>
</body>
</html>

3.数据类型与运算

javascript中的数据包含：数值，文本，图形，音频，视频….

变量

var a = 1;

number

  • js不区分小数和整数，Number
123//整数
123.1//浮点数
-99//负数
NaN//not a number
Infinity//表示无限大

字符串

  • ‘abc’ 、“abc”

布尔值

  • true、false

逻辑运算符

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

比较运算符

=    //赋值预算法
==    //等于（类型不一致，值一样，也会判断为true  即判断1=='1'）
===    //    绝对等于（类型一样，值一样，结果为true），这是一个JS的缺陷，要坚持用===进行比较

注意：

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

浮点数问题

console.log(1/3)===(1-2/3) //结果为false
// 尽量避免使用浮点数进行运算，存在精度问题
Math.abs(1/3-(1-2/3))<0.00000001 //结果为true

null和undifined

  • null：空
  • undefined：未定义

数组

  • Java的数组必须是相同类型的对象，JS中不需要这样！
//保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];
//取数组下标：如果越界了，就会报undefined

对象

  • 对象是大括号，数组是中括号
  • 每一个属性之间使用逗号隔开，最后一个不需要加逗号
var person = {
  name: "王先生",
  age: 18,
  tags: ['高大','帅气', '才华横溢', '大眼睛']
}
  • 取对象的值
person.name
"王先生"
person.tags[0]
"高大"

4.严格检查格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
前提：Idea，设置支持ES6语法
'use strict';严格检查模式，预防JavaScript随意性导致产生的一些问题
必须写在script标签内的第一行！
局部变量建议都使用let去定义
-->
<script>
    'use strict';
    let i = 1;
</script>
</body>
</html>

三、数据类型

1.字符串

  • 正常字符串我们使用单引号或者双引号包裹
  • 注意转义字符 \
\'
\n
\t
\u4e2d   \u#### Unicode 字符
\x41       Ascll字符
  • 多行字符串编写
//tab 和ESC键中间的字符`` 包裹
var msg = `
        hello
        world
        你好
        `
  • 模板字符串
let name = '王先生';
let msg = `你好呀，${name}`;
  • 字符串长度
str.length
  • 字符串不可变
let student = "student"; student[1] = 1;
>1
console.log(student)
>student
  • 大小写转换
let student = "student";
console.log(student.toUpperCase());
console.log(student.toLowerCase());
  • 元素的索引
sutdent.indexOf(‘t’);
  • substring
let student = "student";
//左闭右开[0,3)，从第一个字符串取到第二个 stu;
console.log(student.substring(0,3));

2.数组

  • Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]
//通过下标取值和赋值
arr[0]
arr[0] = 1;
  • 长度
arr.length
// 注意：假如给arr.length赋值，数组的大小就会发生变化，如果赋值过小，元素就会丢失
  • indexOf：通过元素获得下标索引
arr.indexOf(2);
>1
// 注意：字符串的”1”和数字的1是不同的
  • slice() ：截取Array的一部分，返回一个新的数组，类似于String中的substring
arr.slice(2); //[3, 4, 5]  类似于String中的substring
arr.slice(2,4); //[3, 4]
  • push() ， pop() ：从数组尾部进行添加和删除元素
//push(); 压入到尾部
let arr = [1,2,3,4,5,"6","a"];
arr.push("b");
[1, 2, 3, 4, 5, "6", "a", "b"];
//pop();删除尾部
arr.pop();
[1, 2, 3, 4, 5, "6", "a"];
  • unshift() ，shift() ：从数组头部进行添加和删除元素
//unshift() 头部增加
let arr = [1, 2, 3, 4, 5];
arr.unshift(0);
[0, 1, 2, 3, 4, 5];
//shift(),删除头部
arr.shift();
[1, 2, 3, 4, 5];
  • sort()：排序
let arr = [6, 2, 8, 4, 5];
arr.sort();
[2, 4, 5, 6, 8];
  • reverse()：元素反转
let arr = [2, 4, 5, 6, 8];
arr.reverse();
[8, 6, 5, 4, 2];
  • concat()：拼接
let arr = [8, 6, 5, 4, 2];
arr.concat(['a','b','c']);
//返回一个新的数组 [8, 6, 5, 4, 2, "a", "b", "c"];
//并未改变原来的数组arr
[8, 6, 5, 4, 2];
  • join：连接符
// 打印拼接数组，使用特定的字符串连接
let arr = [8, 6, 5, 4, 2];
arr.join("-");
"8-6-5-4-2";
  • 多维数组
let arr = [[1,2], [3,4], ['a','b']];
arr[1][1];
4;

3. 对象

  • 对象定义
// 若干个键值对
// js中的对象， {…..}表示一个对象，键值对描述属性xx : xx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
// JavaScript 中的所有键都是字符串，值是任意对象！
/*var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}*/
var person = {
    name : "王先生",
    age : 16,
    email : "summer@qq.com",
    score : 100
}
  • 对象赋值
var person = {
    name : "",
    age : 16,
    email : "summer@qq.com",
    score : 100
}

person.name="王先生";
>"王先生"
person.name;
>"王先生"
  • 使用一个不存在的对象属性，不会报错！但会提示undefined
var person = {
    name : "",
    age : 16,
    email : "summer@qq.com",
    score : 100
}

person.dog;
undefined
  • 动态的删减属性，通过delete删除对象的属性
var person = {
    name : "",
    age : 16,
    email : "summer@qq.com",
    score : 100
}
delete person.score;
person
>{name: "王先生", age: 16, email: "summer@qq.com"}
  • 动态的添加，直接给新的属性添加值即可
var person = {
    name : "",
    age : 16,
    email : "summer@qq.com",
    score : 100
}
person.dog = "tom";
person.tom;
>tom
  • 判断属性值是否在这个对象中！（包含继承的属性） xx in xx
var person = {
    name : "王先生",
    age : 16,
    email : "summer@qq.com",
    score : 100
};
"age" in person;
>true;
//继承
'toString' in person
>true;
  • 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
var person = {
    name : "王先生",
    age : 18,
    email : "summer@qq.com",
    score : 100
};
person.hasOwnProperty("toString");
>false
person.hasOwnProperty("age");
>true

4.流程控制

  • if判断
var age = 3;
if(age > 3){
    alert("哈哈");
}else if(age < 5){
    alert("kuwa~");
}else{
    alert("heihei");
}
  • while循环，注意避免程序死循环
while(age<100){
    age = age+1;
    console.log(age);
}
do{
    age = age+1;
    console.log(age);
}while(age<100);
  • for循环
for(let i = 0; i < 100; i++){
    console.log(i);
}
  • forEach循环
var age = [12,3,4,22,23,55];
//传一个函数
age.forEach(function (value,index) {
    console.log(value);
    console.log(index);
})
  • fo…in
//for(var index in object)
var age = [12,3,4,22,23,55];
for (var num in age){
    console.log(age[num]);
}

5.Map 和 Set

  • Map
var map = new Map([['tom',100],['jack',90],['tim',80]]);
var name = map.get('tom');//通过key获取value
map.delete('tom');//删除元素
map.set('kate',70);
  • Set：无序不重复的集合
var set = new Set([3,2,1]);
set.add(5);//增加元素
set.delete(3);//删除元素
set.has(1);//判断是否包含元素
set.size;//长度

6.iterator

  • 遍历数组
//通过for of遍历值 / for in 遍历下标
var array = [1,2,3];
for (let x of array){
    console.log(x);
}
  • 遍历map
var map = new Map([['tom',100],['jack',90],['tim',80]]);
for (let x of map){
    console.log(x);
}
  • 遍历set
var set = new Set([3,2,1]);
for (var x of set){
    console.log(x);
}

四、函数

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
// 参数问题：JavaScript 可以传任意多个参数，也可以不传

// 参数传多个的问题
function abs (x){
    if(typeof x!== "number"){
        throw "Not A Number";
    }
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}
  • arguments
// arguments 是一个JS免费赠送的关键字
// 代表传递进来的所有参数，是一个数组！
function abs(x){
    for(let i = 0;i < arguments.length;i++){
        console.log(arguments[i]);
    }
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}
// arguments 包含所有的参数，想使用多余的参数操作，需要排除已有参数
  • rest
// 获取除了已定义的参数之外所有的参数 …
function abs (x,y...rest){
   console.log(rest);
}

2. 变量的作用域

  • 作用域
// 在JavaScript中， var 定义的变量实际上有作用域的
// 若设在函数体中声明，则在函数体外不可以使用
function abs(x){
    var a = 1;
}
a = a + 2;//Uncaught ReferenceError: a is not defined

// 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function abs(){
    var x = 1;
    x = x +1;
}
function ab(){
    var x ="a";
    x = x + 1;
}

// 内部函数可以访问外部函数的成员，反之则不行
function abs(x) {
    var a = 1;
    function f(a) {
        var b =a+1;
    }
    var c = b+1;//Uncaught ReferenceError: b is not defined
}

// 假设，内部函数变量和外部函数的变量重名
function abs(x){
    var a = 1;
    function ab(y){
        var a ="A";
        console.log("内部"+a);
    }
    console.log("外部"+a);//输出外部1
}
  • 全局函数
//全局变量
var a =1；
function f(){
    console.log(a);
}
f();
console.log(a);
  • 全局对象 window

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

  • 规范
// 由于我们所有的全局变量都会绑定到我们的window 上，如果不同的js文件，使用了相同的全局变量，冲突~> 如何减少冲突

//唯一全局变量
var xxlApp={};
//定义全局变量
xxlApp.name = "王小姐";
xxlApp.age = function (a,b){
    return a + b;
}

// let关键字，解决局部作用域冲突问题
function ab(){
    for(let i = 0;i<100;i++){
        console.log(i);
    }
    console.log(i);//报错
}

// 怎么定义常量：ES5规定只有用全部大写字母命名的变量就是常量，建议不要修改这样的值
var PI = 3.14
console.log(PI);
PI = 123;//可以修改
console.log(PI);
//在ES6引入了常量关键字 const
const PI = 3.14; //只读变量
PI = 123; //报错 Attempt to assign to const or readonly variable
console.log(PI);

五、内部对象

1.Date

let date= new Date();
console.log(date);//Sun Dec 26 2021 22:12:50 GMT+0800 (中国标准时间)
//获取年
date.getFullYear();
//获取月(从0开始)
date.getMonth();
//获取日
date.getDate();
//获取时
date.getHours();
//获取分
date.getMinutes();
//获取秒
date.getSeconds();
//获取毫秒
date.getMilliseconds();
//getDay():获取星期几（从0开始）
//getTime():获取1970年1月1日到当前时间的毫秒数
  • 转换
data.toLocaleDateString();//'2021/12/26'
data.toJSON();//'2021-12-26T14:12:50.650Z'

2.JSON

  • 早期，所有的数据传输习惯都使用XML文件！
  • JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
  • 在JavaScript 中 一切皆为对象，任何js支持的类型都可以用JSON来表示。
  • 格式：对象都用{}，数组都用[]，所有的键值对都用key:value。

JSON字符串和JSON对象的转换

var user = {
    name: "张三",
    tags: ['学习','吃饭', '打豆豆']
}
//JSON对象转换字符串
JSON.stringify(user);//'{"name":"张三","tags":["学习","吃饭","打豆豆"]}'
//字符串转JSON对象
JSON.parse(jsonUser);//{name: '张三', tags: Array(3)}

JSON和JS对象的区别

var obj = {name:"王小姐",age:16};
var json = '{"name":"王小姐","age":"16"}';

3.Ajax

  • 原生的js写法 xhr 异步请求
  • jQuery 封装好的方法 $(“#name”).ajax(“”)
  • axios 请求

后记

本文下接：【JavaScript详解】一文掌握JavaScript基础知识（下）
Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

小新要变强
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript基础知识整理
02-26
什么是JavaScript JavaScript一种直译式脚本语言，一种基于对象和事件驱动并具有安全性的客户端脚本语言； 也是一种广泛应用客户端web开发的脚本语言。 简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言...
JavaScript基础与案例开发详解
07-22
资源名称：Javaｓｃｒｉｐｔ基础与案例开发详解内容简介：《Java ｓｃｒｉｐｔ基础与案例开发详解》根据Javaｓｃｒｉｐｔ在各种类型的应用开发中(如B2B、B2C、C2C)的使用情况，有针对性地安排了丰富的案例，从基本的...
快速掌握 JavaScript 库必备的 5 大技巧！
CSDN资讯
04-14 939
作者 |Kevin Peters译者 | 弯月出品 | CSDN（ID：CSDNnews）以下为译文：在担任软件工程师的那几年里，我研究了很多代码库，可能有数百个之多。大多数时候，我都很...
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 6万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
JavaScript看这一篇就够了，简单全面一发入魂
学Java，找哪吒
03-09 3万+
文档对象模型（DOM,Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的HTML。DOM将整个页面抽象为一组分层节点。 DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API可以轻松地删除、添加、替换、修改节点。 对浏览器而言，DOM就是使用ECMAScript实现的，如今已经成为JavaScript语言的一大组成部分。 言而言之，DOM提供与网页内容交互的方法和接口。
前端基础--JavaScript
qq_50048558的博客
08-22 2437
HTML HTML介绍 & 规范 介绍 HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language). 专门制作网页的计算机语言. 超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。 记事本开发第一个网页 <html> <head> <title>第一个网页</title> </head> <body> Hello World! </body>
javaScript简介
weixin_69252724的博客
04-16 3012
它是一种直译式的语言, 用来为网页添加各种各样的动态功能不需要编译直接通过浏览器直接运行, 通常javaScript脚本是通过嵌入HTML里来实现功能的。
Javascript基础知识整理.doc
最新发布
11-27
Javascript基础知识整理.doc
javascript学习笔记（一）基础知识
10-25
本文是学习笔记系列的第一篇，跟以前一样，介绍些基础知识，包括js基本概念、 JScript 的变量、js的数据类型、3.JScript 的运算符、js流程控制、js函数。有需要的朋友可以参考下
JavaScript基础知识总结.xmind
02-23
通过思维导图的方式，快速了解掌握JavaScript的基本内容
JavaScript基础（超详细全文约一万字）
bguihiub的博客
02-10 5705
回顾整个JavaScript的发展历程, 实际上就是Web发展的历程从最开始的拨号上网方式到现在的100M光纤, 4G/5G移动Web的发展在近20年, 上网的方式发生了翻天复地的变化, 可以说是科技大爆炸.人们在享受越来越便捷的上网的同时, 对Web产品的需求越来越高从单纯的对访问速度的需求, 越来越多的转移到视觉美感, 智能操作交互, 沉浸式虚拟现实, 这些需求又反过来推动了技术的不断创新与进步.
JavaScript入门
08-27
从浅入深的JavaScript的教学Javascript是Web编程语言，所有的现代的Web浏览器都含有JavaScript解释器，JavaScript是部署最广泛的编程语言，无论你是从头开始还是有一定的基础，都可以帮助更好的掌握这门编程语言
JavaScript 入门(简单易懂) 看这一篇就够了
2301_77638787的博客
08-06 6671
尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习。
JS（JavaScript）详解
weixin_53455615的博客
09-19 7177
JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。JavaScript组成ECMAScript：JavaScript的核心，语法格式，使用方法文档对象模型（DOM，document object model）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。
JavaScript 概述
Dailyblue的专栏
04-13 2248
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。
JavaScript初识及基本语法详解
小小码农
03-13 1790
JavaScript初识及基本语法详解
JavaScript(引用方式，基础语法，常用对象）
lmj19929的博客
03-11 813
JavaScript
转：最详细的JavaScript 教程，入门级都能看懂
LlanyW的专栏
05-30 1万+
介绍 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript特点 JavaScript 是一门脚本语言。 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码。 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 很容易学习。 JavaScript 已经由 ECMA（欧洲电脑..
JavaScript基础知识
08-02
回答: JavaScript是一门最流行的运行在浏览器的脚本语言，它与Java是两种完全不同的语言，无论在概念还是设计上。 JavaScript是一种轻量级的编程语言，可由所有的现代浏览器执行。它最早是在HTML网页上使用，用来给...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小新要变强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值