JavaScript学习

最新推荐文章于 2024-09-26 01:42:12 发布

m0_58433070

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量74

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/m0_58433070/article/details/131800762

版权

本文详细介绍了JavaScript的核心概念，包括显示方案如alert和console.log，关键词如break和continue，变量命名规则，块级作用域的let和const，以及类型运算符。还深入讲解了函数的调用和对象的访问方式，字符串操作如concat和trim，数组的方法如toString、join、push和pop，以及数组的排序和迭代方法如forEach和reduce。

摘要由CSDN通过智能技术生成

1.JavaScript显示方案

· 使用window.alert()写入警告框

· 使用document.write()写入html输出

· 使用innerHTML写入html元素

· 使用console.log()写入浏览器控制台

2.JavaScript关键词

break 终止switch或循环

continue 跳出循环并在顶端开始

debugger 停止执行JavaScript，并调用调试函数

do...while 执行语句块，并在条件为真时重复代码块

for 标记需被执行的语句块，只要条件为真

function 声明函数

if...else 标记需被执行的语句块，根据某个条件

return 退出函数

switch 标记需被执行的语句块，根据不同的情况

try...catch 对语句块实现错误处理

var 声明变量

3.构造变量名称（唯一表示符）通用规则：

· 名称可包含字母、数字、下划线和美元符号

·名称必须以字母开头

·名称也可以以$和_开头

·名称对大小写敏感

·关键字无法工作变量名称

4.let（块作用域）变量和const常量

var关键词声明的变量没有块作用域，在块{}内声明的变量可以从块之外进行访问

let关键词声明拥有块作用域的变量，在块{}内声明的变量无法从块外访问

5.JavaScript类型运算符

typeof 返回变量的类型

instanceof 返回true，如果对象是对象类型的实例

6.js函数

（）运算符调用函数

比如：toCelsius引用的是函数对象，而toCelsius()引用的是函数结果

例如：

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript 函数</h2>

<p>不使用 () 访问函数将返回函数声明而不是函数结果：</p>

</body>
</html>

结果是：

Javascript 函数

不使用 () 访问函数将返回函数声明而不是函数结果：

function toCelsius(f) { return (5/9) * (f-32); }

7.js对象

访问对象属性有两种方式：

ObjectName.propertyName

ObjectName["propertyName"]

8.js特殊字符

代码	结果	描述
\'	'	单引号
\"	"	双引号
\\	\	反斜杠

代码	结果
\b	退格键
\f	换页
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符

字符串可以是对象

通常，JavaScript 字符串是原始值，通过字面方式创建：

var firstName = "Bill"

但是字符串也可通过关键词 new 定义为对象：

var firstName = new String("Bill")

实例：

var x = "Bill";
var y = new String("Bill");

// typeof x 将返回 string
// typeof y 将返回 object

当使用 == 相等运算符时，相等字符串是相等的：

var x = "Bill";             
var y = new String("Bill");

// (x == y) 为 true，因为 x 和 y 的值相等

当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等。

var x = "Bill";             
var y = new String("Bill");

// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）

对象无法比较：

var x = new String("Bill");             
var y = new String("Bill");

// (x == y) 为 false，因为 x 和 y 是不同的对象

var x = new String("Bill");             
var y = new String("Bill");

// (x === y) 为 false，因为 x 和 y 是不同的对象

请注意 (x==y) 与 (x===y) 的区别。

JavaScript 对象无法进行对比，比较两个 JavaScript 将始终返回 false。

`9.js字符串方法`

`提取部分字符串`

slice(start, end) 提取字符串的某个部分并在新字符串中返回被提取的部分
substring(start, end) 类似于slice(),不同之处无法接受负的索引
substr(start, length) 类似于slice()不同之处第二个参数规定被提取部分的长度

替换字符串内容

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

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

转换为大写和小写

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

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

concat() 方法

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

String.trim()

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

提取字符串字符

这是两个提取字符串字符的安全方法：

charAt(position)
charCodeAt(position)

把字符串转换为数组

可以通过 split() 将字符串转换为数组

10.字符串搜索

String.indexOf()方法返回指定文本在字符串中第一次出现（的位置）的索引

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

如果未找到文本，indexOf()和lastIndexOf()都返回-1

lastIndexOf() 方法向后搜索（从末尾到开头），意思是：如果第二个参数是 15，则从位置 15 开始搜索，一直搜索到字符串的开头。

let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("locate", 15)    // 返回 7

search()方法在字符串中搜索指定值并返回匹配的位置

indexOf() 和 search() 这两个方法，相等吗？

它们接受相同的参数，并返回相同的值？

这两种方法并不相等。差别如下：

search() 方法不能接受第二个起始位置参数。
indexOf() 方法不能采用强大的搜索值（正则表达式）。

String.match()方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为Array对象返回。

String.includes()如果字符串包含指定值，includes()方法返回true

11.js数组方法

把数组转换为字符串

toString()把数组转换为数组值（逗号分隔）的字符串

实例：

var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits.toString();

结果：

Banana,Orange,Apple,Mango

join()方法也可将所有数组元素结合为一个字符串

它的行为类似toString(),但是可以规定分隔符

实例：

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");

结果：

Banana * Orange * Apple * Mango

pop()方法从数组中删除最后一个元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop()方法返回“被弹出”的值

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

push()方法（在数组结尾处）向数组添加一个元素

push()方法返回新数组的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

位移元素

位移与弹出等同，但处理收个元素而不是最后一个

shift()方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

shift()方法返回被“位移出”的字符串

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"

unshift()方法（在开头）向数组添加新元素，并“反向位移”旧元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

unshift()方法返回数组的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 返回 5

删除元素delete

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

拼接数组

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

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

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

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

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

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

结果：Banana,Orange,Lemon,Kiwi,Apple,Mango

通过splice()来删除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

第一个参数（0）定义新元素应该被添加（接入）的位置。

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

其余参数被省略。没有新元素将被添加

合并（连接）数组

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

剪裁数组

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

实例：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);

结果：Apple,Mango

slice()方法创建新数组。它不会从源数组中删除任何元素。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。

实例：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

结果：Orange,Lemon

12.js数组排序

数组排序

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

反转数组

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

数字排序
默认地，sort()函数按照字符串顺序对值进行排序

因此，sort()方法在对数值排序时会产生不正确的结果

实例：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

结果：1,5,10,25,40,100

13.js数组迭代

Array.forEach()

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

Array.map()

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

map()方法不会对没有值得数组执行函数

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

实例：

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

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

结果：90,8,18,32,50

Array.filter()

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

实例：

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

结果：45,25

Array.reduce()

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

reduce() 方法在数组中从左到右工作。

reduce() 方法不会减少原始数组。

实例：

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

function myFunction(total, value, index, array) {
  return total + value;
}

结果：99

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