JavaScript语法知识总结

1、基础知识

1、一些注意的知识点

• 结尾记得写分号
• 区分大小写
• 会忽略连续的空格和回车
• \作为转义字符
• typeof 变量 用于检查变量类型
• 输出unicode编码，js中用"\u编码"（16进制)来输出，网页中用"&#编码"（10进制）来输出

2、六种数据类型

1、数据类型

• number

  Number.MAX_VALUE(JS中数字表示的最大值)，

  Infinity表示无穷大，类型也为number

  NaN,not a number，类型也为number

  使用浮点数进行运算，可能得到一个不精确的结果

  JavaScript 数值始终以双精度浮点数来存储

  toString(),参数中加2，8，10，16，可以将数字转化为相应的进制

  小数位

  • toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

  • toFixed() 返回字符串值，它包含了指定位数小数的数字

  • toPrecision() 返回字符串值，它包含了指定长度的数字

  • ValueOf() 以数值返回数值(所有 JavaScript 数据类型都有 valueOf() 和 toString() 方法。)

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1LeJDkz-1629271799090)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813101353065.png)]

  • Number() 还可以把日期转换为数字

    Number(new Date("2019-04-15"));    // 返回 1506729600000
    

  • POSITIVE_INFINITY ===>溢出时返回这个

• string

length

查找字符串的方法：

indexOf() 返回字符串中指定文本首次出现的索引（如果未找到文本， indexOf() 和 lastIndexOf() 均 返回 -1。）（可以设置第二个值，表示开始搜索的地方）

lastIndexOf() 返回指定文本在字符串中最后一次出现的索引

search() 搜索特定值的字符串，并返回匹配的位置（无法设置第二个值）

提取字符串的方法

• slice(start, end)

如果某个参数为负，则从字符串的结尾开始计数。

提取字符串的某个部分并在新字符串中返回被提取的部分。

如果省略第二个参数，则该方法将裁剪字符串的剩余部分

• substring(start, end)

substring() 类似于 slice()。

不同之处在于 substring() 无法接受负的索引。

• substr(start, length)

substr() 类似于 slice()。

不同之处在于第二个参数规定被提取部分的长度。

替换字符串中的内容

• replace()

  replace() 方法不会改变调用它的字符串。它返回的是新字符串。

  默认地，replace() 只替换首个匹配

  replace() 对大小写敏感

  如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）

  如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索

• toUpperCase()

  过 toUpperCase() 把字符串转换为大写

  toLowerCase() 把字符串转换为小写

• contact()

  concat() 连接两个或多个字符串：

• trim()

方法删除字符串两端的空白符

提取字符串字符

• charAt(position) //返回字符
• charCodeAt(position) //返回unicode编码

把字符串转换为数组

• split()

• boolean

• null

  用typeof来检查null时，其类型会返回object

• undefined

  声明但是未赋值

• object

2、类型转换的方法

• 转成string类型 =====> toString()

  toString方法不会影响原变量的值，只会返回一个新的值

  null和undefined没有toString()方法

• 调用String()函数

  对于number和boolean，底层依然是调用toString()

• 转换为number====> **Number()**函数

  字符串中是纯数字，正常转换

  字符串中非数字，转换为NaN类型

  字符串为空串或者空格，转换为0

  null ==============>0

  undefined ===========>0

• parseInt() parseFloat() ============>专门针对string类型

可以将一个字符串中的有效数字解析出来去使用转换

底层原理:先转换成字符串，再转换

• 转成boolean==========>Boolean()

3、运算

1、undefined衍生自null，所以null==undefined为true

2、NaN不等于任何值，包括它本身

3、可以通过isNaN来判断一个值是否是NaN

4、=== 全等，不会自动做类型转换，类型不同，则值完全不同

3、对象

1、对象的一些基本操作

delete 对象名.属性 ==================> 删除对象属性

对象的属性名不强制要求遵守标识符的命名规则

4、事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nR1mlUdC-1629271799093)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210812184257416.png)]

5、数组

没有必要使用 JavaScript 的内建数组构造器 new Array()

Array.foreach()

Array.isArray() 判断是否是数组

把数组转换为字符串

join(),可以规定分隔符

delete fruits[0]; 通过delete 运算符来删除数组元素

splice() 方法可用于向数组添加新项

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

concat() 方法通过合并（连接）现有数组来创建一个新数组

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

slice() 方法用数组的某个片段切出新数组

数组排序

sort() 方法以字母顺序对数组进行排序

reverse() 方法反转数组中的元素。

由于sort等方法是按照字母顺序排序的，因此对数字排序可能会产生错误，因此，用一下修正函数来排序

//数字排序
points.sort(function(a, b){return a - b});

//随机排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()}); 

Math.max.apply 来查找数组中的最高值

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

排序数组对象

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];

cars.sort(function(a, b){return a.year - b.year});

数组迭代

forEach() 方法为每个数组元素调用一次函数（回调函数）。

 testList.forEach(myfunction)

 function myfunction(value){
     console.log(value)
 }

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
return value * 2;
}

请注意，该函数有 3 个参数：

• 项目值
• 项目索引
• 数组本身

filter() 方法创建一个包含通过测试的数组元素的新数组。

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

var numbers1 = [45, 4, 9, 16, 25];var sum = numbers1.reduce(myFunction);function myFunction(total, value, index, array) {return total + value;}

请注意此函数接受 4 个参数：

• 总数（初始值/先前返回的值）

• 项目值

• 项目索引

• 数组本身

  reduce() 方法能够接受一个初始值：

  var numbers1 = [45, 4, 9, 16, 25];var sum = numbers1.reduce(myFunction, 100);function myFunction(total, value) {return total + value;}
  

reduceRight() 方法在数组中从右到左工作。另请参阅 reduce()

every() 方法检查所有数组值是否通过测试。

var numbers = [45, 4, 9, 16, 25];var allOver18 = numbers.every(myFunction);function myFunction(value, index, array) {return value > 18;}//返回allOver18 为 false

some() 方法检查某些数组值是否通过了测试。（用法同上）

indexOf() 方法在数组中搜索元素值并返回其位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTbsrdTa-1629271799102)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813135236971.png)]

lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

find() 方法返回通过测试函数的第一个数组元素的值。

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

2、进阶

1、Date()对象

创建日期对象

• new Date()
• new Date(year, month, day, hours, minutes, seconds, milliseconds)
• new Date(milliseconds)
• new Date(date string)

new Date() 用当前日期和时间创建新的日期对象：

注释：JavaScript 从 0 到 11 计算月份。一月是 0。十二月是11。

您不能省略月份。如果只提供一个参数，则将其视为毫秒。

var d = new Date(2018);

一位和两位数年份将被解释为 19xx 年

var d = new Date(99, 11, 24);

new Date(milliseconds) 创建一个零时加毫秒的新日期对象

//1970年 1 月 1 日加上100 000 000 000毫秒，大约是 1973 年 3 月 3 日：var d = new Date(100000000000);

toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）

toDateString() 方法将日期转换为更易读的格式

//**toUTCString()** Fri, 13 Aug 2021 06:07:00 GMT//toDateString()Fri Aug 13 2021

日期格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yawgQx8Q-1629271799105)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813140918861.png)]

写日期也可以添加时、分和秒 (YYYY-MM-DDTHH:MM:SS)

var d = new Date("2018-02-19T12:00:00");

日期和时间通过大写字母 T 来分隔。

UTC 时间通过大写字母 Z 来定义。

如果您希望修改相对于 UTC 的时间，请删除 Z 并用 +HH:MM 或 -HH:MM 代替：

var d = new Date("2018-02-19T12:00:00-08:30");

JavaScript 短日期

短日期通常使用 “MM/DD/YYYY” 这样的语法：

var d = new Date("02/19/2018");

JavaScript 长日期

长日期通常以 “MMM DD YYYY” 这样的语法来写：

var d = new Date("Feb 19 2018");

月和天能够以任意顺序出现

并且，月能够以全称 (January) 或缩写 (Jan) 来写：

逗号会被忽略，且对大小写不敏感：

JavaScript 完整日期

JavaScript 接受“完整 JavaScript 格式”的日期字符串

var d = new Date("Mon Feb 19 2018 06:55:23 GMT+0100 (W. Europe Standard Time)");

日期获取方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gwQc2ML3-1629271799106)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813142104860.png)]

getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数(时间戳)

getFullYear() 方法以四位数字形式返回日期年份

getMonth() 以数字（0-11）返回日期的月份

getDate() 方法以数字（1-31）返回日期的日

getHours() 方法以数字（0-23）返回日期的小时数

getMinutes() 方法以数字（0-59）返回日期的分钟数：

getSeconds() 方法以数字（0-59）返回日期的秒数：

getMilliseconds() 方法以数字（0-999）返回日期的毫秒数

getDay() 方法以数字（0-6）返回日期的星期名（weekday）：、

设置日期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kiKQDz92-1629271799107)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813143422700.png)]

setFullYear() 方法设置日期对象的年份。这个例子设置为 2020 年：

var d = new Date();d.setFullYear(2020);//setFullYear() 方法可以*选择*设置月和日var d = new Date();d.setFullYear(2020, 11, 3);

setMonth() 方法设置日期对象的月份（0-11）

setDate() 方法设置日期对象的日（1-31）

//setDate() 方法也可用于将天数添加到日期var d = new Date();d.setDate(d.getDate() + 50);

setHours() 方法设置日期对象的小时（0-23）

setMinutes() 方法设置日期对象的分钟（0-59）

setSeconds() 方法设置日期对象的秒数（0-59)

2、Math对象

Math.round(x) 的返回值是 x 四舍五入为最接近的整数

Math.pow(x, y) 的返回值是 x 的 y 次幂

Math.sqrt(x) 返回 x 的平方根

Math.abs(x) 返回 x 的绝对（正）值

Math.ceil(x) 的返回值是 x 上舍入最接近的整数 (3.1返回4)

Math.floor(x) 的返回值是 x 下舍入最接近的整数 (3.9返回3)

Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ep0ZS0SP-1629271799108)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813144115261.png)]

随机数

Math.random() 返回 0（包括） 至 1（不包括） 之间的随机数

Math.random() 与 Math.floor() 一起使用用于返回随机整数

Math.floor(Math.random() * 10);

返回介于 min（包括）和 max（不包括）之间的随机数：

function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min) ) + min;}//返回介于 min 和 max（都包括）之间的随机数function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min;}

3、正则表达式

https://www.w3school.com.cn/js/js_regexp.asp

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jgh38eeb-1629271799109)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813150804594.png)]

4、异常处理

try 语句允许您定义一个代码块，以便在执行时检测错误。

catch 语句允许你定义一个要执行的代码块，如果 try 代码块中发生错误

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1fVpUSc-1629271799110)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813152010457.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8bkuSet7-1629271799111)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813152708672.png)]

5、一些知识点

Hoisting

Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）

JavaScript 只提升声明，而非初始化。

通过 let 定义的变量不会被提升到顶端。

通过 const 定义的变量不会被提升到顶端。

严格模式

• 在不声明变量的情况下使用变量，是不允许的：
• 在不声明对象的情况下使用对象也是不允许的：
• 删除变量（或对象）是不允许的 (delete x);
• 删除函数是不允许的
• 重复参数名是不允许的：
• 八进制数值文本是不允许的：
• 转义字符是不允许的：
• 写入只读属性是不允许的：
• 写入只能获取的属性是不允许的：
• 删除不可删除的属性是不允许的
• 字符串 “eval” 不可用作变量
• 字符串 “arguments” 不可用作变量
• with 语句是不允许的
• 处于安全考虑，不允许 eval() 在其被调用的作用域中创建变量
• 在类似 f() 的函数调用中，this 的值是全局对象。在严格模式中，现在它成为了 undefined。

JSON

JSON 名称需要双引号。JavaScript 名称不需要

JSON.parse() 把这个字符串转换为 JavaScript 对象：

数据约束

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EByLpieR-1629271799112)(D:\Users\changyinghuang\AppData\Roaming\Typora\typora-user-images\image-20210813172905884.png)]

6、对象

如果 person 是一个对象，下面的语句不会创建 person 的副本：

// x 和 person指向同一个对象var x = person;  // 这不会创建 person 的副本。

delete 关键词会同时删除属性的值和属性本身。

删除完成后，属性在被添加回来之前是无法使用的。

2、对象访问器

Getter 和 Setter 允许您定义对象访问器（被计算的属性）。

var person = {firstName: "Bill",lastName : "Gates",language : "en",get lang() { return this.language;}};// 使用 getter 来显示来自对象的数据：document.getElementById("demo").innerHTML = person.lang;

var person = {firstName: "Bill",lastName : "Gates",language : "",set lang(lang) { this.language = lang;}};// 使用 setter 来设置对象属性：person.lang = "en";// 显示来自对象的数据：document.getElementById("demo").innerHTML = person.language;

为什么使用 Getter 和 Setter？

• 它提供了更简洁的语法
• 它允许属性和方法的语法相同
• 它可以确保更好的数据质量
• 有利于后台工作

Object.defineProperty()

Object.defineProperty(obj, "reset", {  get : function () {this.counter = 0;}});

3、构造器

用大写首字母对构造器函数命名是个好习惯。

在构造器函数中，this 是没有值的。它是新对象的替代物。 当一个新对象被创建时，this 的值会成为这个新对象。

1、为对象添加方法

myFather.name = function () { return this.firstName + " " + this.lastName;};

2、prototype 属性允许您为对象构造器添加新属性

Person.prototype.nationality = "English";

4、ES5新对象方法

// 添加或更改对象属性Object.defineProperty(object, property, descriptor)// 添加或更改多个对象属性Object.defineProperties(object, descriptors)// 访问属性Object.getOwnPropertyDescriptor(object, property)// 以数组返回所有属性Object.getOwnPropertyNames(object)// 以数组返回所有可枚举的属性Object.keys(object)// 访问原型Object.getPrototypeOf(object)// 阻止向对象添加属性Object.preventExtensions(object)// 如果可将属性添加到对象，则返回 trueObject.isExtensible(object)// 防止更改对象属性（而不是值）Object.seal(object)// 如果对象被密封，则返回 trueObject.isSealed(object)// 防止对对象进行任何更改Object.freeze(object)// 如果对象被冻结，则返回 trueObject.isFrozen(object)

7、函数

1、函数的定义

1、函数表达式

var x = function (a, b) {return a * b};var z = x(4, 3);//上面的函数使用分号结尾，因为它是可执行语句的一部分。

2、函数构造器

var myFunction = new Function("a", "b", "return a * b");var x = myFunction(4, 3);

3、普通定义

var myFunction = function (a, b) {return a * b};var x = myFunction(4, 3);

4、函数提升

JavaScript 函数能够在声明之前被调用

5、自调用函数

自调用表达式是自动被调用（开始）的，在不进行调用的情况下。

函数表达式会自动执行，假如表达式后面跟着 ()。

您无法对函数声明进行自调用。

(function () { var x = "Hello!!";      //我会调用我自己})();

6、函数是对象，拥有属性和方法

function myFunction(a, b) { return arguments.length;}function myFunction(a, b) { return a * b;}var txt = myFunction.toString();

为创建新对象而设计的函数，被称为对象构造函数（对象构造器）

7、箭头函数

// ES5var x = function(x, y) {return x * y;}// ES6const x = (x, y) => x * y;

箭头函数没有自己的 this。它们不适合定义对象方法。

箭头函数未被提升。它们必须在使用前进行定义。

使用 const 比使用 var 更安全，因为函数表达式始终是常量值。

如果函数是单个语句，则只能省略 return 关键字和大括号。因此，保留它们可能是一个好习惯：

2、函数的参数

1、参数命名区别

函数参数（parameter）指的是在函数定义中列出的名称。

函数参数（argument）指的是传递到函数或由函数接收到的真实值。

2、参数规则

JavaScript 函数定义不会为参数（parameter）规定数据类型。

JavaScript 函数不会对所传递的参数（argument）实行类型检查。

JavaScript 函数不会检查所接收参数（argument）的数量。

如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined

3、arguments 对象

JavaScript 函数有一个名为 arguments 对象的内置对象。

arguments 对象包含函数调用时使用的参数数组。

x = findMax(1, 123, 500, 115, 44, 88);function findMax() { var i; var max = -Infinity; for (i = 0; i < arguments.length; i++) {     if (arguments[i] > max) {         max = arguments[i];     } } return max;}

4、参数通过值传递

如果函数改变了参数的值，它不会改变参数的原始值。

参数的改变在函数之外是不可见的。

5、对象是由引用传递的

如果函数改变了对象属性，它也改变了原始值。

对象属性的改变在函数之外是可见的。

6、构造器

构造器调用会创建新对象。新对象会从其构造器继承属性和方法。

构造器内的 this 关键词没有值。

3、call()方法

通过 call()，您能够使用属于另一个对象的方法。

var person = { fullName: function() {     return this.firstName + " " + this.lastName; }}var person1 = { firstName:"Bill", lastName: "Gates",}var person2 = { firstName:"Steve", lastName: "Jobs",}person.fullName.call(person1);  // 将返回 "Bill Gates"

带参数的 call() 方法

var person = {fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country;}}var person1 = {firstName:"Bill",lastName: "Gates"}person.fullName.call(person1, "Seattle", "USA");

4、apply()方法

通过 apply() 方法，您能够编写用于不同对象的方法。

var person = { fullName: function() {     return this.firstName + " " + this.lastName; }}var person1 = { firstName: "Bill", lastName: "Gates",}person.fullName.apply(person1);  // 将返回 "Bill Gates"

call() 和 apply() 之间的区别

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

应用

数组没有 max() 方法，因此您可以应用 Math.max() 方法。

Math.max.apply(null, [1,2,3]); // 也会返回 3