投稿
  1. 极客之音首页
  2. 技术随笔

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

飞熊 • • 技术随笔 • 阅读 179

梦想不抛弃苦心追求的人，只要不停止追求，你们会沐浴在梦想的光辉之中。再美好的梦想与目标，再完美的计划和方案，如果不能尽快在行动中落实，最终只能是纸上谈兵，空想一番。只要瞄准了大方向，坚持不懈地做下去，才能够扫除挡在梦想前面的障碍，实现美好的人生蓝图。【JavaScript详解】一文掌握JavaScript基础知识（上），希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

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全栈学习技术清单~

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/154220.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！