分类导航

程序笔记发布时间：2022-07-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了前端：js，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

前端：js

@H_489_2@1.JavaScript概述

1.1ECMAScript和JavaScript的关系

　　1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。

　　该标准一开始就是针对JavaScript语言制定的，但是没有称其@R_944_9478@Script，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。二是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。

　　因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。

1.2ECMAScript的历史

年份	名称	描述
1997	ECMAScript 1	第一个版本
1998	ECMAScript 2	版本变更
1999	ECMAScript 3	添加正则表达式添加try/catch
	ECMAScript 4	没有发布
2009	ECMAScript 5	添加"Strict mode"严格模式添加JSON支持
2011	ECMAScript 5.1	版本变更
2015	ECMAScript 6	添加类和模块
2016	ECMAScript 7	增加指数运算符（**）增加Array.prototype.includes

　　注：ES6就是指ECMAScript 6。

　　尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

　　简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

　　JavaScript 是脚本语言　　JavaScript 是一种轻量级的编程语言。后来出现了node.js，可以作为后端语言来开发项目，js是一个既能做前端又能做后端的语言，但是js这个作者用了10天就开发了这么个语言，所以写的不是很完善，这个语言有很多的槽点，后面学习起来大家就知道啦。

　　JavaScript 是可插入 HTML 页面的编程代码。

　　JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

　　JavaScript 很容易学习。

@H_489_2@2.JavaScript引入方式

2.1. Script标签内写代码

[

前端：js

](javascript:void(0)😉

在head标签里面可以写，在body标签里面也可以写，放到head标签里面和放到body标签里面到底有什么区别，我们后续在讲~<script>
  // 在这里写你的JS代码　//console.log('骑士计划！') #f12建打开浏览器的调试窗口，然后在console这个调试台就能看到这个内容了  //alert('骑士计划！')  #这个是浏览器窗口一打开咱们这个文件，就弹出一个窗口
</script>

[

前端：js

](javascript:void(0)😉

　　　　console：

前端：js

　　　　alert：

前端：js

　　2. 引入额外的JS文件

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

@H_489_2@3.JavaScript语言规范

　　注释（注释是代码之母）

[

前端：js

](javascript:void(0)😉

// 这是单行注释

/*
这是多行注释
*/

[

前端：js

](javascript:void(0)😉

　　结束符

　　JavaScript中的语句要以分号（;）为结束符。也就是说和缩进没关系了

@H_489_2@4.JavaScript语言基础

4.1变量声明

　　1.JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。

　　2.声明变量使用 var 变量名; 的格式来进行声明

var name = "Alex";也可以分两步，声明变量var name;然后name='Alex'，但是通常我们都是一步写完
var age = 18;

　　注意：

　　变量名是区分大小写的。

　　推荐使用驼峰式命名规则。首字母大写

　　保留字不能用做变量名。

　　补充：（ES6新特性，等咱们学到 VUE 在细说，简单了解一下就行了**）

　　ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。

for (let i=0;i<arr.length;i++){...}

　　ES6新增const用来声明常量。一旦声明，其值就不能改变。这个东西就是为了定义一个固定的常量，供大家使用，这个常量不会改变

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

　　再次补充：保留字列表，不用硬记，写多了自然就知道了

@H_489_2@5.JavaScript数据类型

JavaScript拥有动态类型（python也是动态的）

var x;  // 此时x是undefined  静态语言比如C：创建变量的时候，要指定变量的类型，
//python3.6也出现了类型注解的新特性def func(x:int,y:int) --> int: return x + y，意思是参数是int类型，返回值也是int类型的，就是个注释的作用
//声明变量前可以先不赋值
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

5.1数值(number)

　　JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

　　还有一种NaN，表示不是一个数字（Not a number），也就是说是一个值，但不是数字。

　　常用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

var a2 = 1.11
typeof(a2)
"number"

parseInt('123')
123

parseFloat('123.456')
123.456

a3 = parseFloat('123.123')
123.123

typeof(a3)
"number"

a4 = parseInt('123a')
123
typeof(a3)
"number"

a5 = parseInt('abc')
NaN

5.2字符串(String)

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

　　常用方法：

方法	说明
.length #不加括号的是属性	返回长度
.trim() #得到一个新值	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n) #n类似索引，从0开始，超过最大值返回''空字符串	返回第n个字符
.concat(value, ...) #s1='Hello';s.concat('xx');得到Helloxx	拼接
.indexOf(subString, start) #这个start是从索引几开始找，没有返回-1	返回子序列位置(下标)
.subString(from, to) #不支持负数，所以一般都不用它，了解一下就行了	根据索引获取子序列
.slice(start, end) #var s1='Helloworld';s1.slice(0,-5)看结果，就用它	切片
.toLowerCase() #全部变小写	小写
.toUpperCase() #全部变大写	大写
.split(delimiter, limit)#分隔,s1.splite(' '),后面还可以加参数s1.split(' '，2),返回切割后的元素个数	分割

indexOf实例：

前端：js

split实例：

前端：js

拼接字符串一般使用“+”

　　slice和subString的区别：

拼接字符串一般使用“+”

　　slice和subString的区别：



String.slice(start, stop)和String.subString(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过String的长度，这个参数会被替换为String的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)


slice和subString的区别



　　*补充：*

　　*ES6中引入了模板字符串。模板字符串（template  String）是增强版的字符串，用反引号（`）标识，ESC键下面那个键就是反引号。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。你使用chorme浏览器就行，chorme浏览器支持ES6*

// 普通字符串
`这是普通字符串！`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "q1mi", time = "today";
`Hello ${name}, how are you ${timE}?`

[

前端：js

](javascript:void(0)😉

　　上面的写法是ES6中的，并且在console中输入内容的时候，按着shift+回车来进行换行，就能够不执行代码直接换行了~~~

　　注意：

　　如果模板字符串中需要使用反引号，则在其前面要用反斜杠转义。

　　JSHint启用ES6语法支持:/* jshint esversion: 6 */

5.3布尔值(Boolean)

　　区别于Python，true和false都是小写。

var a = true;
var b = false;

　　""(空字符串)、0、null、undefined、NaN都是false。

5.4null和undefined

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。

　　　　null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

　　　　还不明白，上图吧！

前端：js

5.5对象(Object)

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

　　JavaScript 提供多个内建对象，比如 number、String、Date、Array 等等，通过new实例化的对象都是object类型(var s = new String('Hello')，var n = new number(12)等)，数组不需要new生命，类型就是object类型。

　　对象只是带有属性和方法的特殊数据类型。

前端：js

5.6数组

　　数组对象的作用是：使用单独的变量名来存储一系列的值。类似于Python中的列表。

var a = [123, "ABC"]; 
console.log(a[1]);  // 输出"ABC"

　　　　　常用方法：

方法	说明
.length	数组的大小
.push(elE)	尾部追加元素
.pop()	获取尾部的元素
.unshift(elE)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse() #在原数组上改的	反转
.join(seq)#a1.join('+')，seq是连接符	将数组元素连接成字符串
.concat(val, ...) #连个数组合并,得到一个新数组，原数组不变	连接数组
.sort()	排序
.forEach() #讲了函数再说	将数组的每个元素传递给回调函数
.splice() #参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)	删除元素，并向数组添加新元素。
.map() #讲了函数再说	返回一个数组元素调用函数处理后的值的新数组

　　　　　　concat示例：

前端：js

　　　　关于splice函数：　

前端：js

关于sort()需要注意：

　　如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

下面这个函数表示如果a-b>0则返回（b,a）,否则反之，降序反之b-a

前端：js

　　上面的这种比较方式不是我们想要的啊，怎么办？

　　如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

　　　　若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。　　　　若 a 等于 b，则返回 0。　　　　若 a 大于 b，则返回一个大于 0 的值。

　　示例：

function sortnumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortnumber)

关于遍历数组中的元素，可以使用下面的两种方式：

var a = [10, 20, 30, 40];#方式一
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}#方式二for (var i in a){  console.log(a[i])

5.7forEach()

　　语法：

　　　　forEach(function(currentValue, index, arr), thisvalue)

　　参数：

参数	描述
function(currentValue, index, arr)	必需。数组中每个元素需要调用的函数。函数参数: 参数描述 currentValue 必需。当前元素 index 可选。当前元素的索引值。 arr 可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值

splice()

　　语法：

　　　　splice(index,howmany,item1,.....,itemX)

　　参数：

参数	描述
index	必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX	可选。要添加到数组的新元素

　　　　　　看使用：

前端：js

5.8map()

　　语法：

　　map(function(currentValue,index,arr), thisvalue)

　　参数：

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数函数参数: 参数描述 currentValue 必须。当前元素的值 index 可选。当期元素的索引值 arr 可选。当期元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

　　补充：

　　ES6新引入了一种新的原始数据类型（Symbol），表示独一无二的值。它是JavaScript语言的第7种数据类型。

大佬总结

以上是大佬教程为你收集整理的前端：js全部内容，希望文章能够帮你解决前端：js所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：cap javascript load map php 参数开发排序文档正则表达式程序员索引遍历

上一篇: hal 编码器做用户输入时捕获初值... 下一篇:AI系统——梯度累积算法

猜你在找的程序笔记相关文章

You can't specify target table 'xxx' for update in FROM clause的解决 2022-07-21
【UNIAPP】上传视频，进度条的前台与后端 2022-07-21
十款代码表白特效，一个比一个浪漫！ 2022-07-04
作业3 2022-07-06
linux系统下部署项目访问报404错误的解决方法 2022-05-30
C++带有指针成员的类处理方式详解 2022-06-07
Linux——（1）基本命令 2022-07-21
JavaScript之正则表达式学习笔记 2019-11-07
Redux源码学习笔记 2019-11-07
Webpack学习笔记 2019-11-07