关于前端:想了解JavaScript基础这篇文章足够了

3次阅读

共计 12598 个字符，预计需要花费 32 分钟才能阅读完成。

自己无心看到的一篇文章，感觉写的很全面，简略概括了 Javascript 的一些常识，现分享如下：

原文地址：http://www.ppmy.cn/news/7295.html

更多具体内容，请 微信搜寻“前端爱好者 “， 戳我查看。

JavaScript 是一种运行在 客户端 的脚本语言 ，作为 web 规范的行为层，最后呈现时只是 为了实现网页端和用户之间的交互。

在正式学习 JavaScript 之前，咱们首先须要对 JavaScript 的产生和倒退历史有肯定的理解。

起源阶段：

1995 年，Netscape(网景)公司的 Brendan Eich(布兰登·艾奇)（伊利诺伊大学香槟分校），花了 10 天工夫为 Netscape Navigator2.0 开发了一个地位为LiveScript 的脚本程序，目标是在浏览器中执行预检测程序（表单校验）
起初 Netscape 在与 Sun 单干之后将其改名为 JavaScript, 目标是为了利用 Java 这个因特网时尚词汇。
微软公布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JavaScriptcript（这样命名是为了防止与 Netscape 潜在的许可纠纷）

三足鼎立阶段：

CEnvi 的 ScriptEase
Netscape 的 JavaScript
IE 的 JavaScriptcript

标准化阶段：

1997 年，ECMA（欧洲计算机制造商协会）邀请了 Netscape、Sun、微软、Borland 等公司的一些程序员组成了 TC39，最终锻炼进去了 ECMA-262，该规范定义了一门全新的脚本语言，名为ECMAScript。

ECMAScript : – JavaScript 的外围，ECMAScript 是一套规范，标准了语言的根本语法和数据类型，定义了一种语言的规范, 与具体实现无关
DOM：(Document Object Model)一套操作网页元素的 API (办法)
BOM：(Browser Object Model)一套操作浏览器性能的 API

JavaScript 的三种应用形式：和 CSS 的应用形式相似，JavaScript 也能够应用:

行内 JavaScript、
外部 JavaScript
内部 JavaScript

三种形式。

给标签增加事件属性，在事件的处理函数里，间接写 JavaScript 代码。

<!-- 给标签增加事件属性，应用 JavaScript 代码解决标签的事件 -->
<p onclick="javascript:alert('ok')"> 我是一个 p </p>

在 HTML 的 head 标签里增加 script, 再在 script 标签里些 JavaScript 代码。

<head><!-- 在 head 标签里增加 script 标签，再在 script 标签里编写 JavaScript 代码 --><script>console.log("hello world");</script>
</head>

单出编写一个 JavaScript 文件，在 HTML 文档的 head 标签里应用 script 标签，设置 script 标签的 src 属性，引入这个内部的 JavaScript 文件。

test.JavaScript

console.log("hello world");

test.html

<head><!-- 在 head 标签里增加 script 标签，给 script 标签设置 src 属性，引入一个内部 JavaScript 文件 --><script src="test.JavaScript"></script>
</head>

留神: 给 script 标签设置了 src 属性当前，如果再在 script 标签里编写 JavaScript 代码，script 标签里的 JavaScript 代码不会被执行。

JavaScript 里的正文也分为当行正文和多行正文两种:

单行正文应用 // 示意；
多行正文以 /* 开始，以*/ 完结。

<script>// 我是一个单行正文 /* 我是一个多行正文 */
</script>

alert: 正告框

alert("hello world");

prompt: 文本输入框

prompt("请输入您的银行卡明码:")

confirm: 确认弹窗

confirm("您确定要退出吗？")

document.write: 往页面里写入内容

document.write("你好世界");

console.log: 在控制台里输入内容

console.log("hello world");

和其余常见的编程语言一样，JavaScript 里也能够定义变量。

不同于 Java 语言，JavaScript 里在定义变量时，举荐应用 var 来对变量进行申明。

// 应用 var 申明一个变量 name, 并同时给 name 变量赋值
var name ="zhangsan";// 应用 var 申明一个变量，然而申明的时候不赋值，申明当前独自赋值
var age;
age = 18;// 不应用 var 关键字，间接对一个变量赋值(不举荐)
height = 178;// 应用一个 var 关键字，同时申明多个变量并赋值
var a = 12,b = 23;

规定：

由数字、字母、下划线和 $ 组成
不能以数字结尾
严格辨别大小写

var x = 3 - 'hello';
console.log(x); // NaN
console.log(typeof(x));  // number

不能应用关键字和保留字

关键字: 在 JavaScript 里有非凡含意的单词。

保留字: 可能在以后版本的 JavaScript 中还不是关键字，在当前的倒退中，可能会变成关键字的单词

标准:

变量名做到顾名思义
应用驼峰命名法

关键字

关键字：是指 JS 自身曾经应用了的字，不能再用它们充当变量名、办法名。

包含：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

保留字

保留字：实际上就是预留的“关键字”，意思是当初尽管还不是关键字，然而将来可能会成为关键字，同样不能应用它们当变量名或办法名。

包含：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

留神：如果将保留字用作变量名或函数名，那么除非未来的浏览器实现了该保留字，否则很可能收不到任何谬误音讯。当浏览器将其实现后，该单词将被看做关键字，如此将呈现关键字谬误。

Javascript 中的数据类型能够分为简略数据类型和简单数据类型。简略数据类型一共有以下五个:

number: 数字类型
string: 字符串类型
boolean: 布尔类型
undefined: 未定义类型
null: 空类型

不同于 Java 语言，JavaScript 里无论是整数还是浮点数，都是 number 类型。

var a = 12;  // 十进制的数字 a
var b = 017; // 八进制的数字 17, 转换成为十进制是 15
var c = 0x1A; // 十六进制的数字 1A, 转换成为十进制是 26
var d = 12.34; // 浮点数在 JavaScript 里也是 number 类型

在 number 类型里有一个非凡值 NaN(Not a Number), 他用来示意执行的后果不是一个数字。

var x = 3 - 'hello';
console.log(x); // NaN
console.log(typeof(x));  // number

JavaScript 里的字符串类型应用单引号或者双引号包裹，引号外部显示任意文字。

var x = 'hello world';
var y = "hello world";
console.log(x.length)  // 字符串的 length 属性能够获取到字符串的长度 // 能够应用转义字符 \ 对字符串里的内容进行本义
var a = "tom said \\"I'm tom\\"" 
var b = "hello \\nworld"

布尔类型只有两个值，true 示意成立正确，false 谬误不成立。

留神：这里的 ture 和 false 全部都是小写

console.log(1 > 2);  // false
console.log(2 > 1);  // true

undefined 类型里就只有一个值 undefined;null 类型里也只有一个值 null, 这两个类型的数据都示意的是非正常值。

当一个对象为空时，咱们能够应用 null 来示意，例如 DOM 查找元素失败的话，后果就是 null.

<body><p id="one"> 我是一个 p 标签 </p><script>var x = document.getElementById('two');console.log(x); // null</script>
</body>

undefined 常见的呈现状况:

当一个变量只申明然而未赋值时，这个变量的值为 undefined.

var a;
console.log(a);  // undefined

如果一个函数没有返回值，那么这个函数的执行就是 undefined.

// 定义了一个函数，这个函数没有返回值
function test(){console.log('haha');
}
x = test();
console.log(x);  // 执行函数并打印后果，是 undefined

应用 typeof 函数能够查看一个变量对应的数据类型。

typeof(12);  //number
typeof("hello");  //string
typeof(true);   //boolean
typeof(undefined);  //undefined
typeof(null);   // object

JavaScript 里同样反对各种运算符，然而运算的规定和 Java 里略微会有些差别。

console.log(12 + 2);  // 14
console.log(12 - 2);  // 10
console.log(12 * 3);  // 36
console.log(12 / 2);  // 6
console.log(12 % 5);  // 2

不仅数字之间能够应用算数运算，数字和字符串，甚至字符串和字符串之间也反对局部算数运算。

console.log(12 + '34');  // '1234'  数字和字符串做加法运算，会把数字转换成为字符串进行拼接 // 数字和字符串之间做除了加法以外的其余算数运算，会先尝试把字符串转换成为数字进行算数运算
// 如果字符串不能转换成为数字，后果会是 NaN
console.log(12 - '2');   // 10  
console.log(12 - 'ab');  // NaN
console.log(12 * '2');   //24
console.log(12 * 'ab');  //NaN
console.log(12 / '2');   //6
console.log(12 / 'ab');   //NaN

// 等号在编程里被称为赋值运算符，是将等号左边的值赋值给等号右边
// 等号的右边肯定不能是常量或者表达式
var a = 2;
a+=3;   // 5
a-=3;   // 2
a*=4;   //8
a/=2;   //4
a%=2;   //0

咱们常见的运算符个别都是二元运算符，即两个数字参加运算，例如 1+2. 除了这种运算符以外，还有一种运算符，它只须要一个数字就能够运算，咱们称它为一元运算符，最常见的是自增自减运算符。

自增 / 自减运算符分为先自增 / 自减和后自增 / 自减两种运算符。

var a = 1;
console.log(a++);  //1
console.log(a);   // 2var b = 1;
console.log(++b);  //2
console.log(b);   //2

5. 比拟运算符

var a = 5;
var b = 6;
console.log(a > b);// 大于
console.log(a < b);// 小于
console.log(a >= b);// 大于等于
console.log(a <= b);// 小于等于 console.log(a == b); // 相等，只比拟值，不比拟类型
console.log(a === b); // 全等，比拟类型和值
console.log(a != b); // 不等，只判断值，不判断类型
console.log(a !== b); // 不全等 判断值，且判断类型

字符串的比拟：

// 数字和字符串做比拟运算，会尝试将字符串转换成为数字
// 如果字符串不能被转换成为数字，做除了 != 和 !== 以外的比拟运算外，后果都是 false
console.log(5 > '3');  //true
console.log(5 > 'hello');  //false
console.log(5 < 'hello');  //false
console.log(5 != 'hello');  //true
console.log(5 !== 'hello');  //true// 如果是两个字符串做比拟运算符，会依照字符串的编码程序进行比拟
console.log('23' > '120'); //true

不同的数据类型进行运算的规定不同，为了满足不同的需要，在开发中常常须要让数据在不同的类型之间进行转化。

（1）Number()

console.log(Number('55'));
Number()能够把任意值转换成数值类型，然而如果字符串中有不是数字的字符，返回 NaN

（2）parseInt 和 parseFloat

- parseInt()  把整数或者小数都转化为整数;
- parseFloat() 把整数转化整数, 把小数转化为小数
var num1 = parseInt("12");  // 12
var num1 = parseInt("12.3"); //12
var num1 = parseFloat("12"); //12
var num1 = parseFloat("12.3");//12.3var width = '100px';
parseInt(width) => 100

（3）正负号(罕用)

var str = '500';
console.log(+str);        // 取正
console.log(-str);        // 取负
console.log(str - 0);  + 0 呢??? 拼接

在 JavaScript 中，NaN 用来示意一个非数字的非凡值，当发现无奈进行运算时，JavaScript 不会报错，而是会返回一个 NaN

NaN 的注意事项：

NaN 不是一种独立的数据类型，它是 Number 类型的一个非凡值！

typeof(NaN);  //number

NaN 不等于任何值，包含它自身。

console.log(NaN == NaN);  // false

查看一个变量是否是一个数字，能够应用 isNaN 内置函数来判断。

isNaN(123);     // false
isNaN('123');   //false
isNaN('hello');  //true

（1）String()

var num = 5;
num = String(num);
console.log(num);

（2）toString()

var num = 5;
console.log(num.toString());// 把数值 5 变成字符串 5
// 除了 null 和 undefined, 其余类型都有 toString()办法

（3）拼串，(最罕用)

var num = 5;
num = num + "";
console.log(num);

所有的值都能够转换成布尔类型，其中 0, "", undefined，null，false, NaN这几个值会转换成 false，其余值都会转换成true

（1）Boolean()

console.log(Boolean(1));
console.log(Boolean(0));

（2）!!

var a = "abc";
console.log(!!a);

JavaScript 里的流程管制语句也蕴含条件判断语句和循环语句两种：

条件判断语句(if/if…else/if…else if…/switch…case)
循环语句(while/do…while/for)

JavaScript 里的条件判断语句次要蕴含 if 语句，if…else 语句，if…else if…else if…else 语句和 switch…case 语句。

if 语句

var age = parseInt(prompt('请输入您的年龄:'))
if(age > 18) {alert("欢送来到我的网站");
}

if…else 语句

var age = parseInt(prompt('请输入您的年龄:'))
if(age > 18) {alert("欢送来到我的网站");
}else{alert("未成年禁止拜访");
}

if…else if…else if…else 语句

var score = parseInt(prompt('请输出你的问题:'))if (score < 60 && score >= 0) {alert('你个垃圾!')
} else if (60 <= score && score < 80) {alert('一般般')
} else if (80 <= score && score <= 100) {alert('真棒！')
} else {alert('输出的数字不非法')
}

switch…case 语句

var operation = prompt('请输出你的操作序号:')
switch(operation){case '1':console.log('增加用户');break;case '2':console.log('查问用户');break;case '3':console.log('删除用户');break;case '4':console.log('批改用户')break;case '5':console.console.log('退出');break;default:console.log('输出的不非法');break;
}

三元表达式

var num1 = parseFloat(prompt('请输出一个数字:'))
var num2 = parseFloat(prompt('请再输出一个数字:'))
var max = num1 > num2 ? num1:num2;
console.log(max);

注意事项:

JavaScript 里判断区间不容许相似于 12<a<20 这样的书写形式，如果想要实现这种性能，请应用逻辑与运算符 && 连贯。例如 12 < a < 20应该写成12 < a && a < 20.

JavaScript 里循环语句包含 while 循环,do…while 循环和 for 循环。

while 循环

var i = 0;
while(i < 10){console.log(i);i++;
}

do…while 循环

do{console.log('你好'); // 先执行一次 do 里的代码，而后再判断条件
}while(1 > 2);

for 循环

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

for…in 语句的应用

nums = \[1,2,3,4,5\]
for(var i in nums){console.log(i);
}

break 和 continue 的应用

和 Java 相似，在 JavaScript 里也有能够存储多个数据的构造。用来存储单个数据的构造在 JavaScript 里称为数组，和 Java 里的数组有点儿相像，但同时又有区别。

var nums = \[1,2,3,4,5\]  // 定义一个数组
nums.push(6);  // 在数组的最初增加元素
nums.unshift(100);  // 在数组的结尾增加元素
console.log(nums);  // \[100, 1, 2, 3, 4, 5, 6\]
nums.pop();
console.log(nums);  // \[100, 1, 2, 3, 4, 5\]
console.log(nums.length);  //6
console.log(nums\[0\]);  // 100var nums = \[6,5,3,1,8,7,2,4\];
nums.sort();

Java 里用来保留无序键值对的数据结构是 Map，对应到 JavaScript 里就是 JavaScript 的对象。在 JavaScript 里，对象就是一组无序的键值对组成的汇合。对象能够用来寄存一组无序的键值对，键对应的值能够是属性，也能够是一个行为(函数)。

var p = {'name':'zhangsan',  // 对应的 value 能够是字符串或者数字等 'age':18,'addr':'shanghai','sleep':function(){//value 也能够是一个函数 console.log(this.name+'正在睡觉');},
}
p.sleep();//zhangsan 正在睡觉。能够间接调用一个对象的函数 console.log(p.age);   //18  能够应用点语法获取一个对象的属性
console.log(p\['name'\]);  //zhangsan  还能够应用中括号语法来获取一个对象的属性。var x = 'addr';
console.log(p.x);  // undefined  对象没有 x 属性，这里的 x 不会被当做一个变量，会被当做一个属性名
console.log(p\[x\]);  //shanghai

JavaScript 里的函数作用和 Java 里的办法作用统一，都是为了进步代码的重用率，进步代码的维护性。区别在于，JavaScript 里的函数应用 function 关键字来申明。

无参数无返回值的函数

function test(){  // 应用 function 定义函数 console.log('hello');
}
test();  // 应用函数名 () 来调用函数

有参数无返回值的函数

function test(a,b){// 括号内定义函数的形式参数 console.log(a + b);
}
test(1,2);  // 调用函数时传入实参

有参数有返回值的函数

function test(a,b){return a + b;}
var result = test(1,2);  // 定义变量用来保留函数的执行后果
console.log(result);

在 JavaScript 里，调用函数时，实参的个数能够多于函数申明时定义的形参个数。然而，所有的参数都会被保留到函数的内置变量 arguments 这个伪数组里。

function test(a){// 函数在申明时，只须要一个形参 console.log(a);  // 1console.log(arguments);for(var i = 0; i < arguments.length;i++){console.log(arguments\[i\]);}
}
test(1,2,3,4,5,6,7);  // 调用时，能够传入多个实参

JavaScript 里函数名也不容许反复，如果存在重名的函数，后一个呈现的函数会笼罩前一个函数。

function test(a,b) {console.log('我是有两个参数的函数');
}
function test(a){console.log('我是只有一个参数的函数');
}
test(1,2);  // 我是只有一个参数的函数

JavaScript 里一个无序的键值对就是一个对象，这个值能够是一个字符串、数字等根本数据类型，同时也能够是一个函数。

var p = {"name":"zhangsan","age":18,"sleep":function(){console.log(this.name+"正在睡觉");}
}

上述代码可能创立一个对象，然而存在一个问题，就是一次只能创立一个对象，如果想应用模板来创立多个具备独特属性和行为的对象，须要用到构造函数。

function Person(name,age){// 构造函数其实就是一个一般的函数 this.name = name;this.age = age;this.sleep = function(){console.log(this.name+'正在睡觉');}
}
var p = new Person('zhangsan',18);  // 构造函数必须要配合关键字 new 应用能力创建对象
console.log(p.name);
p.sleep();

JavaScript 提供了有很多的内置对象，能够不便咱们实现某些操作。

Math 对象: 提供了很多与数学相干的办法和属性。

Math.PI;   // π
Math.max(1,2,3);  //3. 求最大数
Math.min(1,2,4);  //1. 求最小数
Math.ceil(12.3);  //13. 向上取整
Math.floor(12.9);  //12. 向下取整
Math.round(12.4);   //12. 四舍五入取到整数位
Math.random();  // 生成 \[0,1)的随机数
Math.abs(-10);  //10. 取绝对值
Math.pow(2,3);  //8. 求 2 的 3 次方
Math.sqrt(9);  //3. 9 开根号项

所以正则表达式有三个主要用途：

模式验证: 检测某个字符串是否合乎规定，例如检测手机号、身份证号等等是否符合规范
匹配读取: 将指标字符串中满足规定的局部读取进去，例如将整段文本中的邮箱地址读取进去
匹配替换: 将指标字符串中满足规范的局部替换为其余字符串, 例如将整段文本中的 ”hello” 替换成 ”haha”

对象模式：var reg = new RegExp("正则表达式")当正则表达式中有 ”/” 那么就应用这种
间接量模式：var reg = / 正则表达式 /个别应用这种申明形式

var reg1 = new RegExp("go{2}d");
var reg2 = /go{2}d/;var str = "hello".match(/e/);  // 返回匹配到的后果
var index = "hello494d".search(/\\d+/);  // 返回下标
var s = "g2353d".replace(/\\d/, 'x');  // 替换字符串 var tested = reg.test("good");  // 办法用来断定字符串是否匹配正则规定, 返回布尔类型的值

正则修饰符: 配合正则表达式应用，用来对正则规定进行补充阐明。

正则表达式次要有三大规定:

数字和字母示意它自身，没有非凡含意。
绝大多数标点符号都有非凡含意，如果想要示意标点符号自身，须要加 \
很多字母后面加 \ 会有非凡含意。

标点符号的非凡含意

字母后面加 \ 的非凡含意

JSON(JavaScript Object Notation, JavaScript 对象简谱)是一种轻量级的数据交换格局，易于人浏览和编写，次要用来实现跨平台的数据传输。

JSON 数据两端要么是{}，要么是[]

{}定义 JSON 对象
[]定义 JSON 数组
JSON 对象的格局是：{key:value,key:value,…,key:value}
JOSN 数组的格局是：[value,value,…,value]
key 的类型固定是字符串
value 的类型能够是：
根本数据类型
援用类型：JSON 对象或 JSON 数组

正因为 JSON 格局中 value 局部还能够持续应用 JSON 对象或 JSON 数组，所以 JSON 格局是能够『多层嵌套』的，所以 JSON 格局不管如许简单的数据类型都能够表白。

var p1 = '{"name":" 张三疯 ","age":189,"address":" 武当山 "}';var p2 = '{"name":" 张三疯 ","age":189,"address":" 武当山 ","wife":{"name":" 小花 ","age":18,"address":" 武当山下的小村庄 "}}';var p3 = '{"name":" 张三疯 ","age":189,"address":" 武当山 ","wife":{"name":" 小花 ","age":18,"address":" 武当山下的小村庄 "},"sons":\[{"name":" 奥巴马 ","age":1,"address":" 武当山 "},{"name":" 奥拉夫 ","age":2,"address":" 少林寺 "}\]}';

注意事项:

JSON 和 JavaScript 对象十分的相像，然而却不齐全是同一个货色。JSON 的实质是一个字符串!
JSON 这个字符串十分的非凡，它外面有数据类型的辨别，反对的数据类型和 JavaScript 数据类型统一。然而，须要留神的是，JSON 里的字符串须要应用双引号!

var s1 = '{name:zhangsan}';  // 非法的 JSON 格局，name 和 zhangsan 都是字符串类型，须要应用双引号
var s2 = "{'age':18}";  // 非法的 JSON 格局，age 是字符串类型，必须要应用双引号
var s3 = "{"name":"jack"}";  // 报错，双引号有问题
var s4 = '{"city":"shanghai"}';  // 正确，里面应用单引号，JSON 字符串内应用双引号
var s5 = "{\\"age\\":18}";  // 正确，里面应用双引号，JSON 字符串外部应用的转义字符 \

很多人搞不清楚 JSON 和 JavaScript 对象的关系，甚至连谁是谁都不分明。

其实，能够这么了解：JSON 是 JavaScript 对象的字符串表示法，它应用文本示意一个 JavaScript 对象的信息，JSON 的实质是一个字符串。

JavaScript 对象转 JSON 字符串

var obj = {"stuName":"tom","stuAge":20};  // JavaScript 里的对象
var str = JSON.stringify(obj);console.log(typeof obj); // object
console.log(typeof str); // string

JSON 字符串转 JavaScript 对象

var str = '{"stuName":"tom","stuAge":20}';
var obj = JSON.parse(str);
console.log(obj); // {stuName: "tom", stuAge: 20}

正文完

前端

发表至：前端

2023-05-04

0

关于前端:vitevue3下如何使用动态导入的svgsprite雪碧图

关于前端:程序INFS2044解说

关于前端:熬夜整理56个JavaScript高级的手写知识点专业扫盲

关于前端:Java的环境搭建的方法案例

关于tensorflow:TensorFlowCNN实战AI图像处理入行计算机视觉无密分享钟鼓馔玉不足贵

关于前端:想了解JavaScript基础这篇文章足够了

一、JavaScript 的介绍

1. JavaScript 倒退历史

2. JavaScript 的组成

二、JavaScript 的应用形式

1. 行内 JavaScript

2. 外部 JavaScript

3. 内部 JavaScript

三、JavaScript 根本语句

1. JavaScript 里的正文

2. JavaScript 常见的输入输出语句

四、变量

1. 变量

2. 变量的命名规定与标准

五、数据类型

1. number 类型

2. string 类型

3. boolean 类型

4. undefined 和 null 类型

5. typeof 函数的应用

六、运算符

1. 算数运算符

2. 赋值运算符

3. 一元运算符

4. 逻辑运算符

七、数据类型转换

1. 转换成为数字

2. 判断是否是数字

3. 转换成为字符串

4. 转换成布尔类型

八、流程管制语句

1. 条件判断语句

2. 循环语句

九、数组和对象

1. 数组

2. 对象

十、函数

1. 申明调用函数

2. 函数参数详解

十一、再议对象

1. 构造函数

2. 内置对象

十二、JavaScript 里的正则表达式

1. 正则表达式的用处

2. 正则表达式的应用形式

3. 正则规定

十三、JSON 字符串

JSON 的格局

JavaScript 对象和 JSON 转换

站内搜索