• JS基础知识

    目录

    一.JavaScript变量命名规则

    任务目标

    任务背景

    任务内容

    1、语法层面

    2、工程层面

    二.逻辑运算

    任务目标

    任务背景

    任务内容

    1、比较运算符

    2、逻辑运算符

    3、知识拓展

    4、示例

    三.隐式类型转换

    任务目标

    任务背景

    任务内容

    1、字符串和数字的运算

    2、各种值转换成布尔值

    四.条件分支

    任务目标

    任务背景

    任务内容

    1、if分支

    2、switch分支

    2.3 示例

    五.For循环

    任务目标

    任务背景

    任务内容

    1、for循环的使用方法

    2、使用示例

    六.Math内置对象

    任务目标

    任务背景

    任务内容

    1、Math对象的常用方法：

    七.对象属性

    任务目标

    任务背景

    任务内容

    1、对象定义(以下操作都基于这个对象)

    2、访问对象属性的语法

    3、添加对象的属性语法

    4、修改对象的属性语法

    5、删除对象的属性语法

    6、for循环遍历对象属性的语法

    八.函数定义与调用

    任务目标

    任务背景

    任务内容

    1、通过声明来定义函数

    2、通过表达式来定义函数

    3、函数调用

    九.常见内置函数

    任务目标

    任务背景

    任务内容

    1、eval

    2、isNaN

    3、parseFloat

    4、parseInt

    十.字符串定义与转义字符

    任务目标

    任务背景

    任务内容

    1、使用引号来定义字符串

    2、转义符

    十一.字符串常见方法与属性

    任务目标

    任务背景

    任务内容

    1、String对象属性

    2、String对象的常用方法

    十二.数组常见方法与属性

    任务目标

    任务背景

    任务内容

    1、数组定义

    2、数组中值的访问与修改

    3、数组常见属性

    4、数组常见方法

    一.JavaScript变量命名规则

    任务目标

    理解并掌握JavaScript中变量的命名规则

    任务背景

    某位大牛曾说：计算机科学领域有两个难题：一个是缓存失效，另一个就是命名。这里说到的命名不仅是要符合语法层面的规则，还要符合工程层面的规范。如果变量的命名不符合语法层面的规则，那么程序就会报错；如果变量的命名不符合工程规范，将会影响项目的开发与后续的维护。

    任务内容

    1、语法层面

    1.1 变量名不能以数字或者某些特殊字符开头

    1. 1 
    2. 1a 
    3. *a 
    4. (a 
    5. %a 
    6. <r
    7. // 以上都是非法的变量名，会直接报错

    1.2 变量名不能是关键字

    1. var 
    2. if 
    3. for 
    4. // 以上都是非法的变量名，会直接报错

    2、工程层面

    • 一般应当坚持使用拉丁字符(0-9,a-z,A-Z)和下划线字符。

    • 不应当使用规则之外的其他字符，因为它们可能引发错误，或对国际用户来说难以理解。

    • 变量名不要以下划线开头—— 以下划线开头的被某些JavaScript设计为特殊的含义，因此可能让人迷惑。

    • 变量名不要以数字开头。这种行为是不被允许的，并且将引发一个错误。

    • 一个可靠的命名约定叫做 "小写驼峰命名法"，用来将多个单词组在一起，小写整个命名的第一个字母然后大写剩下单词的首字符。

    • 让变量名直观，它们描述了所包含的数据。不要只使用单一的字母/数字，或者长句。

    • 变量名大小写敏感

    • 最后也是最重要的一点—— 你应当避免使用JavaScript的保留字给变量命名。保留字，即是组成JavaScript的实际语法的单词！因此诸如 var, function, let和 for等，都不能被作为变量名使用。浏览器将把它们识别为不同的代码项，因此你将得到错误。

    1. // 以下是一些好的命名，不仅不会报错，还便于理解 
    2. age 
    3. myAge 
    4. init 
    5. finalOutputValue 
    6. audio1 
    7.  
    8. // 以下是一些不好的命名，有些会报错，有些不便于理解 
    9. 1 
    10. a 
    11. _12 
    12. MYAGE
    13. var 
    14. Document 
    15. skjfndskjfnbdskjfb

    二.逻辑运算

    任务目标

    理解与灵活运用JavaScript的比较运算符

    理解与灵活使用JavaScript的逻辑运算符

    任务背景

    JavaScript比较运算符在逻辑语句中使用，以判定变量或值是否相等，返回true 或 false；逻辑运算符用于判定变量或值之间的逻辑。

    任务内容

    1、比较运算符

    我们假定 num = 5，下表中解释了比较运算符：

    运算符描述示例结果
    ==等于num == 6false
    ===值相等且类型相等num === "5"false
    !=不等于num != 7true
    !==值不相等或类型不相等num !== 5false
    >大于num > 9false
    <小于num < 9true
    >=大于或等于num >= 8false
    <=小于或等于num <= 7true

    2、逻辑运算符

    我们假定num = 5，下表中解释了逻辑运算符：

    运算符描述示例结果
    &&与（num%2==1 && num>1)true
    ||或(num%2==0 || num>1)true
    !非!(num%2==0)true

    3、知识拓展

    比较运算和逻辑运算大概率情况下都会配合【条件分支】(if 、三元运算、switch等)结合使用

    4、示例

    1. var age = 8
    2. if(age >= 60 || age <=12){
    3.     console.log("老人与儿童可以免票")
    4. } else {
    5.     console.log("您请购买全票")
    6. }

    【思路】

    已知预先给定age为8，判断条件为当age大于或等于60或者age小于或等于12时输出"老人与儿童可以免票"，否则"您请购买全票"

    三.隐式类型转换

    任务目标

    理解并掌握常见场景中隐式类型转换的规律

    任务背景

    每一个变量或者值都有其对应的类型，在JavaScript中如Number、String、Boolean、Array、Object等。在强类型的语言中，不同类型的变量或值之间不能进行运算；在弱类型的语言中，不同类型的变量或值可进行一些运算，这主要是因为解释器做了隐式类型转换的工作。

    任务内容

    1、字符串和数字的运算

    1.1 字符串和数字进行加运算时，会将数字转换成字符串，然后和另一个字符串进行拼接

    1. var num1 = '123' 
    2. var num2 = 12 
    3. var num3 = num1 + num2 
    4. console.log(num3) // 预期输出：'12312'

    1.2 字符串和数字进行减、乘、除运算，以及大小比较时，会将字符串转换成数字，再和另一个数字进行运算或比较

    1. var num1 = '123' 
    2. var num2 = 12 
    3. var num3 = num1 - num2 
    4. console.log(num3) // 预期输出：111 
    5. var num1 = '123' 
    6. var num2 = 12 
    7. var num3 = num1 * num2 
    8. console.log(num3) // 预期输出：1476 
    9. var num1 = '123' 
    10. var num2 = 12 
    11. var num3 = num1 / num2 
    12. console.log(num3) // 预期输出：10.25 
    13. var num1 = '123' 
    14. var num2 = 15 
    15. var t = num1 > num2 
    16. console.log(t) // 预期输出：true

    2、各种值转换成布尔值

    2.1 数字0，空字符串""，null，undefined 转成布尔值的时候都是false

    2.2 非0数字，非空字符串转成布尔值的时候都是true

    2.3 任何数组（即使是空数组），任何对象（即使是空对象） 转成布尔值的时候都是true

    1. var a = 0 
    2. if (a) { 
    3.     console.log('hello') 
    4. } else { 
    5.     console.log('world') 
    6. } 
    7. // 当a=0或""或null或undefined的时候，预期输出：world 
    8. // 当a=[]或空对象的时候，预期输出：hello 
    9. // 当a=-1或"abc"时候，预期输出：hello

    四.条件分支

    任务目标

    理解并掌握if分支

    理解并掌握switch分支

    任务背景

    条件分支是编程语言必备的流程控制之一。它能根据所给定值或表达式的真假来运行不同区块的代码。日常编码中，不可避免的要使用到它。

    任务内容

    1、if分支

    1.1 基本语法结构

    1. if (条件1) { 
    2.     // 代码块1 
    3. } else if (条件2) { 
    4.     // 代码块2 
    5. } else { 
    6.     // 代码块3 
    7. }

    1.2 说明

    • 如果条件1为真就会执行代码块1。即使条件2为真也不会去执行代码块2，更不会执行代码块3

    • 只有当条件1为假，并且条件2为真的时候，才会执行代码块2

    • 如果条件1和条件2都为假，才会执行代码块3

    • else if 和 else 部分不是必需的。

    • 可以有多个else if
       

    1.3 示例

    1. var x = 20 
    2. if (x > 5) { 
    3.     console.log('a') 
    4. } else if (x > 50) { 
    5.     console.log('b') 
    6. } else { 
    7.     console.log('c') 
    8. } 
    9. // 如果x=20，上述代码预期输出：'a' 
    10. // 如果x=100，上述代码预期输出也是：'a'

    2、switch分支

    2.1 基本语法结果

    1. switch (expression) { 
    2.     case value1: 
    3.         // 当 expression 的结果与 value1 匹配时，执行此处语句 	
    4.         [break;] 
    5.     case value2: 
    6.         // 当 expression 的结果与 value2 匹配时，执行此处语句 	
    7.         [break;] 
    8.     ... 
    9.     case valueN: 
    10.         // 当 expression 的结果与 valueN 匹配时，执行此处语句 	
    11.         [break;] 
    12.     [default: 
    13.         // 如果 expression 与上面的 value 值都不匹配，执行此处语句 
    14.         [break;]] 
    15. }

    2.2 说明

    • []表示这一部分语句是可选的，并不是说正常代码中要加[]

    • expression和value的是进行严格模式的匹配

    • 如果所有case都没有匹配到，将执行default分支的代码

    2.3 示例

    1. var expr = '樱桃' 
    2. switch (expr) { 
    3.     case '樱桃': 
    4.         // 代码块1
    5.         console.log('樱桃每斤7元'); 
    6.         break; 
    7.     case '芒果': 
    8.     case '木瓜': 
    9.         // 代码块2
    10.         console.log('芒果 和 木瓜 每斤10元'); 
    11.         break; 
    12.     default: 
    13.         // 代码块3
    14.         console.log('对不起，我们没有 ' + expr + '.'); 
    15. } 
    16. // 如果expr值为'樱桃'，则预期输出：'樱桃每斤7元' 
    17. // 当expr的值为'樱桃'时就会执行代码块1，且代码块1中有break，所有不会执行其他代码块 
    18. // 注意：如果expr匹配到某一个case，且这个case里面代码没有break，那么执行完这个代码块后，紧接着就会执行下一个case的代码，不管expr有没有匹配到下一个case的值 
    19. // 所以当expr的值为'芒果'的时候，代码块2也将被执行

    五.For循环

    任务目标

    理解JavaScript的for循环代码结构

    理解JavaScript的for循环对数字、数组、对象的操作

    掌握JavaScript的for循环的迭代器递增、递减的操作

    任务背景

    当我们在编写代码的时候，假如您需要运行代码多次，且每次使用不同的值，那么循环相当方便使用。

    任务内容

    1、for循环的使用方法

    • for：多次遍历代码块

    • for/in：遍历对象属性

    2、使用示例

    1. for (语句 1; 语句 2; 语句 3) {
    2.     要执行的代码块
    3. }

    2.1 for循环是您希望创建循环时经常使用的语法结构，代码结构如下：

    • 语句 1 在循环（代码块）开始之前执行。

    • 语句 2 定义运行循环（代码块）的条件。

    • 语句 3 会在循环（代码块）每次被执行后执行。

    2.2 for循环代码实例一（普通遍历）：

    1. for (var i = 0; i < 10; i++) {
    2.     console.log(i)
    3. }
    4. // 执行结果
    5. 0 1 2 3 4 5 6 7 8 9
    6.  
    7. for (var i = 0; i < 10; i+=2) {
    8.     console.log(i)
    9. }
    10. // 执行结果
    11. 0 2 4 6 8

    说明：

    • 语句1在循环之前设置一个变量(var i = 0),从0开始遍历

    • 语句2定义运行循环的条件(i必须小于10)，当i = 10的时候不满足循环条件

    • 语句3会在代码块每次执行之后对变量值i进行递增(i++)

    • 语句3 (i+=2) 相当于每次循环迭代器i+2，也可以这么写（i=i+2）

    2.3 for循环代码实例二（数组遍历）：

    1. var arr = [11, 22, 33, 44, 55]
    2. for (var i = 0; i < arr.length; i++) {
    3.     console.log(arr[i])
    4. }
    5. // 执行结果
    6. 11 22 33 44 55

    说明：

    • 语句1在循环之前设置一个变量(var i = 0),从0开始遍历(数组下标从0开始)

    • 语句2定义运行循环的条件(i必须小于arr的数组长度)，当arr下标正好是0-3，4的时候不满足循环要求

    • 语句3会在代码块每次执行之后对变量值i进行递增(i++)从arr[0]-arr[3]

    2.4 for循环代码实例三（对象遍历）：

    1. var obj = {name:"tom", gender:"man", age:32} 
    2. for (var key in obj) {
    3.     // 打印键
    4.     console.log(key)
    5.     // 打印值
    6.     console.log(obj[key])
    7. }
    8. // 执行结果
    9. name
    10. tom
    11. gender
    12. man
    13. age
    14. 32

    说明：
    JavaScript提供了一种特殊的循环（也就是for .. in循环），用来迭代对象的属性或数组的每个元素，for...in循环中的循环计数器是字符串，而不是数字。它包含当前属性的名称或当前数组元素的索引

    六.Math内置对象

    任务目标

    理解与灵活运用JavaScript的Math对象的常用方法

    任务背景

    Math对象的作用是：执行常见的算数任务。保存数学公式和信息，与我们在JavaScript直接编写计算功能相比，Math对象提供的计算功能执行起来要快得多。

    任务内容

    1、Math对象的常用方法：

    方法名称作用示例结果
    max()用于确定一组数值中的最大值Math.max(11,3,17,6)17
    min()用于确定一组数值中的最小值Math.min(11,3,17,6)3
    ceil()执行向上取整，即它总是将数值向上取整为最接近的整数Math.ceil(25.1)26
    floor()执行向下取整，即它总是将数值向下取整为最接近的整数Math.floor(25.8)25
    round()执行标准取整，即它总是将数值四舍五入为最接近的整数Math.round(25.8)26
    random()该方法返回介于 0 到 1 之间一个随机小数，包括 0 和不包含 1Math.random()例如0.3123868992708143
    abs()该方法返回参数的绝对值Math.abs(-9)9
    sqrt()该方法返回参数的平方根Math.sqrt(49)7

    2、实例一

    1. // 要想以下JavaScript代码符合预期，空格处应该填什么？
    2. var a = Math._____(-120.38)
    3. console.log(a)
    4. 预期输出结果：
    5. -121

    【思路】

    • 给出的数值-120.38 ，预期结果-121，说明是向下取整

    • Math.floor() 正是向下取整

    3、组合实例

    1. // 获取一个10-50的随机整数
    2. var num = Math.floor(Math.random()*40)+10
    3. Math.random()*40 //获取40以内的随机数（当前还是浮点数）

    【思路】

    • Math.random()*40；为获取一个40以内的随机数（浮点数）

    • Math.floor(Math.random()*40)；将这个浮点数舍1取整

    • 在最后加10则不管随机数是最小数还是最大数，都满足要求10-50

    七.对象属性

    任务目标

    理解并掌握JavaScript中如何查询对象的属性

    理解并掌握JavaScript中如何添加对象的属性

    理解并掌握JavaScript中使用for-in遍历对象属性

    任务背景

    对象属性指的是与JavaScript对象相关的值。JavaScript对象是无序属性的集合。属性通常可以被修改、添加和删除，但是某些属性是只读的。

    任务内容

    1、对象定义(以下操作都基于这个对象)

    1. // 定义一个对象
    2. var obj = { name: "李明", age: 18, gender: "man", city: "山东", hobby: "游泳" }

    2、访问对象属性的语法

    1. // 访问对象属性方式一
    2. obj.name
    3. // 访问对象属性方式二
    4. obj['name']
    5. // 访问对象属性方式三
    6. // 将对象属性赋值给一个变量，使用变量方式访问
    7. var key = 'name'
    8. obj[key]

    3、添加对象的属性语法

    1. // 添加一个属性方式一
    2. obj.nickName = "小明"
    3. // 添加一个属性方式二
    4. obj["nickName"] = "小明"
    5. console.log(obj)
    6. // {name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳', nickName: "小明"}

    4、修改对象的属性语法

    1. // 修改一个属性方式一
    2. obj.age = 19
    3. // 修改一个属性方式二
    4. obj["age"] = 19
    5. console.log(obj)
    6. // { name: '李明', age: 19, gender: 'man', city: '山东', hobby: '游泳'}

    5、删除对象的属性语法

    1. // 删除一个属性
    2. delete obj.age
    3.  
    4. console.log(obj)
    5. // {name:'李明', gender: 'man', city: '山东', hobby: '游泳'}

    6、for循环遍历对象属性的语法

    1. // for循环遍历对象，需要使用for ... in
    2. for (var key in obj) {
    3.     console.log(key)
    4.     console.log(obj[key])
    5. }

    八.函数定义与调用

    任务目标

    理解并掌握JavaScript中函数的定义的两种方式：声明式，表达式式

    理解并掌握JavaScript中函数的调用

    任务背景

    我们可以把一系列的代码封装成一个函数，然后在任意位置去调用它，从而执行这一系列的代码。使用函数是一种简单直观的复用代码的方式。合理的定义和使用函数能使得我们的代码结构更加清晰、更便于阅读和维护。

    任务内容

    1、通过声明来定义函数

    1.1 function关键字

    我们可以使用function关键字来定义一个具有名称的函数，其语法结构如下

    1. function name([param[, param[, ... param]]]) 
    2. { 
    3.     [statements] 
    4. }

    1.2 说明

    • []表示可选，并不是正常代码中需要使用[]

    • name表示函数名，()中的表示参数，{}中的表示函数体。在函数被调用的时候，会执行函数体中的代码。

    • 注意：函数被定义的时候，函数体中的代码并不会被执行。只有到函数被调用的时候，函数体中的代码才会被执行。

    • 对于使用函数声明这个方法定义的函数，函数调用可以在函数定义之前，如示例中的pri函数。

    1.3 示例

    1. pri(); // 预期输出："foo" 
    2. function pri() { 
    3.     console.log("foo"); 
    4. }

    2、通过表达式来定义函数

    2.1 表达式定义法

    我们还可以使用函数表达式的方式来定义一个函数，这时可以将函数直接赋值给一个变量，其语法结构如下

    1. var myFunction = function name([param[, param[, ... param]]]) { 
    2.     statements 
    3. }

    2.2 说明

    • []表示可选，并不是正常代码中需要使用[]

    • name表示函数名，可以省略，()中的表示参数，{}中的表示函数体。在函数被调用的时候，会执行函数体中的代码。

    • 注意：函数被定义的时候，函数体中的代码并不会被执行。只有到函数被调用的时候，函数体中的代码才会被执行。

    • 对于使用函数表达式这个方法定义的函数，函数调用必须在函数定义之后。

    • 如果省略name，我们称该函数为匿名函数。

    2.3 示例

    1. var myFunction = function foo() { 
    2.     // statements 
    3. } 
    4. myFunction() 
    5. foo() // 会报错，并不能调用成功。命名函数表达式的好处是当我们遇到错误时，堆栈跟踪会显示函数名，容易寻找错误。

    3、函数调用

    • 对于使用函数声明的方法定义的函数，可以使用函数名加括号的方式来调用；对于使用函数表达式定义的函数，可以使用表达式所赋值的变量名加括号来调用。如上述代码所示。

    • 在函数被执行的时候，会运行函数体中的代码。如果函数体中有return语句，则会在函数被调用处返回return出来的值，并结束函数的运行。return并不是必需的，没有return的话，函数会返回undefined。

    1. function add1(a, b) { 
    2.    return a + b; 
    3. } 
    4. var res = add1(4, 5) 
    5. console.log(res) // 预期输出：9 
    6.  
    7. function add2(a, b) { 
    8.    a + b; 
    9. } 
    10. var res = add2(4, 5) 
    11. console.log(res) // 预期输出：undefined

    • 函数在调用的时候，会将调用时给定的参数和定义时设定的参数依次绑定。如果调用时给定的参数个数不够，那么函数体中没有绑定的参数将被赋值为undefined

    1. function foo(a, b) { 
    2.     console.log(b) 
    3. } 
    4. foo(4) // 预期输出：undefined 
    5. foo(4,8) // 预期输出：8

    • 函数在调用时可以接受一个函数作为参数，也可以返回一个函数作为返回值。这是函数的高阶用法，暂不涉及，可自行查阅。

    九.常见内置函数

    任务目标

    理解并掌握JavaScript中常见的内置函数

    任务背景

    JavaScript是一个基于原型链的面向对象的语言，很多其他语言常见的函数会以对象上的各种方法存在，例如数组对象的各种方法，字符串对象的各种方法等。即便如此，JavaScript还是有一些顶层的内置函数，了解这些常见的内置函数对我们进行JavaScript编码有很大的帮助。

    任务内容

    1、eval

    eval函数会将传入的字符串当做 JavaScript 代码进行执行。这是一个十分危险的函数，一般情况不建议使用。

    1. var a = eval("2+2") 
    2. console.log(a) 
    3. // 预期输出：4 
    4. // 这里eval把字符串"2+2"，当成js代码执行，得到结果4 
    5.  
    6. eval("console.log('hello world')") 
    7. // 预期输出：hello world 
    8. // 这里eval把字符串"console.log('hello world')"，当成js代码执行，打印输出：hello world

    2、isNaN

    用来确定一个值是否为NaN。NaN表示不是一个数字。如果isNaN函数的参数不是Number类型， isNaN函数会首先尝试将这个参数转换为数值，然后才会对转换后的结果是否是NaN进行判断。因此，对于能被强制转换为有效的非NaN数值来说（空字符串和布尔值分别会被强制转换为数值0和1），返回false值也许会让人感觉莫名其妙。比如说，空字符串就明显“不是数值（not a number）”。这种怪异行为起源于："不是数值（not a number）"在基于IEEE-754数值的浮点计算体制中代表了一种特定的含义。isNaN函数其实等同于回答了这样一个问题：被测试的值在被强制转换成数值时会不会返回IEEE-754​中所谓的“不是数值（not a number）”。

    1. isNaN('abc') // 返回值：true 因为字符串'abc'不是一个数字 
    2. isNaN('12.23') // 返回值：false 因为字符串'12.23'是一个数字 
    3.  
    4. isNaN(NaN);       // true
    5. isNaN(undefined); // true
    6. isNaN({});        // true
    7.  
    8. isNaN(true);      // false
    9. isNaN(null);      // false
    10. isNaN(37);        // false
    11.  
    12. // strings
    13. isNaN("37");      // false: 可以被转换成数值37
    14. isNaN("37.37");   // false: 可以被转换成数值37.37
    15. isNaN("37,5");    // true
    16. isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
    17. isNaN("");        // false: 空字符串被转换成0
    18. isNaN(" ");       // false: 包含空格的字符串被转换成0
    19.  
    20. // dates
    21. isNaN(new Date());                // false
    22. isNaN(new Date().toString());     // true
    23.  
    24. isNaN("blabla")   // true: "blabla"不能转换成数值
    25.                   // 转换成数值失败， 返回NaN

    3、parseFloat

    根据给定的参数返回其对应的浮点数。

    1. parseFloat(3.14); 
    2. parseFloat('3.14'); 
    3. parseFloat(' 3.14 '); 
    4. parseFloat('314e-2'); 
    5. parseFloat('0.0314E+2'); 
    6. parseFloat('3.14some non-digit characters'); 
    7. // 以上的返回值都是3.14

    4、parseInt

    解析一个字符串并返回指定基数的十进制整数。

    1. parseInt("0xF", 16); 
    2. parseInt("F", 16); 
    3. parseInt("17", 8); 
    4. parseInt(021, 8); 
    5. parseInt("015", 10); // parseInt(015, 8); 返回 13 parseInt(15.99, 10); 
    6. parseInt("15,123", 10); 
    7. parseInt("FXX123", 16); 
    8. parseInt("1111", 2); 
    9. parseInt("15 * 3", 10); 
    10. parseInt("15e2", 10); 
    11. parseInt("15px", 10); 
    12. parseInt("12", 13); // 以上都返回15，第二个参数表示基数（可以理解为进制）

    十.字符串定义与转义字符

    任务目标

    理解并掌握JavaScript中字符串的定义方法

    理解并掌握JavaScript中常见的特殊字符的转义方法

    任务背景

    在各种编程语言中，字符串一直都是十分基础与重要的数据类型。在JavaScript中有多种定义字符串的方式，每种方式适合不同的应用场景。字符串中除了包含一般常见的字符外，可能还需要包含一些特殊字符（例如回车、制表符等），这时就需要转义字符的协助了。掌握字符串的常见定义方法，熟悉常见的特殊字符的转义方式，会提升我们的编码能力。

    任务内容

    1、使用引号来定义字符串

    我们可以使用一对单引号或者一对双引号来定义一个字符串

    1. var str1 = "这是双引号定义的字符串" 
    2. var str2 = '这是单引号定义的字符串' 
    3. // 1. 在JavaScript中双引号定义的字符串和单引号定义的字符串没有本质区别 
    4. // 2. 无论是单引号还是双引号，都必须配对使用，不能一个单引号和双引号配对 
    5. // 3. 单引号中的字符串中不能出现单引号，可以出现双引号；双引号中的字符串中不能出现双引号，可以出现单引号

    使用模板字符串的方式定义字符串：我们可以使用一对反引号来定义字符串

    1. var str1 = `这是一个普通的字符串` 
    2. var str2 = `这是一个换行的 
    3. 字符串` 
    4. var a = 2 
    5. var b = 3 
    6. var str3 = `这是一个可以解析变量的字符串，例如：${a + b}` 
    7. // 最终str3的值为： 
    8. // 这是一个可以解析变量的字符串，例如：5

    2、转义符

    在定义一个字符串的时候，有些特殊字符并不适合直接出现。例如：换行符、单引号（不能出现在单引号内）、双引号（不能出现在双引号内），这个时候可以我们需要使用\转义符，例如：

    1. var str1 = '这是一个换行的\n字符串' 
    2. console.log(str1) 
    3. // 预期输出： 
    4. // 这是一个换行的 
    5. // 字符串 
    6.  
    7. // 在这里使用了\n来代表换行符。如果直接在定义字符串的时候回车换行，将出现语法错误 
    8.  
    9. var str2 = "如何使用双引号\"" 
    10. console.log(str2) 
    11. // 预期输出： 
    12. // 如何使用双引号" 
    13. // 在这里使用了\"来代表双引号。如果在双引号定义的字符串中直接使用双引号，将出现语法错误。单引号同理。 
    15. // 如果使用模板字符串的方式定义字符串，可以直接使用回车换行。但是要在其中使用反引号`，也必须转义

    十一.字符串常见方法与属性

    任务目标

    理解与灵活运用JavaScript的String对象的常用属性

    理解与灵活使用JavaScript的String对象的常用方法

    任务背景

    字符串在JavaScript中几乎无处不在，在你处理用户的输入数据的时候，在读取或设置DOM对象的属性时，在操作cookie时，当然还有更多。JavaScript的核心部分提供了一组属性和方法用于通用的字符串操作，如分割字符串，改变字符串的大小写，操作子字符串等。

    任务内容

    1、String对象属性

    属性名称作用示例结果
    length获取字符串入的长度'abcd'.length4

    2、String对象的常用方法

    方法名称作用示例结果
    charAt()获取指定位置的字符'abcd'.charAt(2)c
    indexOf()检索指定的字符串值在字符串中首次出现的位置'abcd'.indexOf('a')0
    lastIndexOf()从后往前查询所要搜索的字符串在原字符串中第一次出现的位置（索引），找不到则返回-1'abcdabc'.lastIndexOf('a')4
    search()检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串'abcd'.search('c')2
    match()字符串内检索指定的值，或找到一个或多个正则表达式的匹配'abcdabc'.match('a')['a', index: 0, input: 'abcdabc']
    substring()字符串截取方法，它可以接收两个参数，分别是要截取的开始位置和结束位置，它将返回一个新的字符串'abcdabc'.substring(1, 4)bcd
    slice()与substring()方法非常类似，它传入的两个参数也分别对应着开始位置和结束位置。而区别在于，slice()中的参数可以为负值'abcdabc'.slice(1, 4)bcd
    replace()用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串，后者为用来替换的文本'abcd'.replace('a', 'A')Abcd
    split()于把一个字符串分割成字符串数组'abcd'.split('')['a', 'b', 'c', 'd']
    toLowerCase()可以把字符串中的大写字母转换为小写'Abcd'.toLowerCase()abcd
    toUpperCase()可以把字符串中的小写字母转换为大写'Abcd'.toUpperCase()ABCD

    十二.数组常见方法与属性

    任务目标

    理解并掌握JavaScript中数组定义

    理解并掌握JavaScript中数组中值的访问与修改

    理解并掌握JavaScript中数组常见属性

    任务背景

    数组是大多数编程语言的内置数据结构。我们可以利用数组顺序存储一系列的值，使用相关的函数或者方法可以对这些值进行处理。合理的使用数组能给我们编码带来很大的便利。

    任务内容

    1、数组定义

    1. // 直接使用中括号就能定义一个数组，数组中的值的类型不必相同，数组中可以嵌套数组 
    2. var arr = [1, 2, 5, 'init', ['apple', 2, 4]]

    2、数组中值的访问与修改

    1. var arr = [1, 2, 5, 'init', ['apple', 2, 4]] // 可以使用下标（或者叫索引）来取数组中的值。下标是从0开始的 
    2.  
    3. arr[0] // 取下标为0的值，即1 
    4.  
    5. arr[3] // 取下标为3的值，即'init' 
    6.  
    7. // 我们可以给数组中某一个下标的值进行重新赋值，即修改该下标的值 
    8. arr[0] = 'name' // 将字符串'name'赋值给数组arr下标为0的位置，此时arr[0]的值就为'name'了，而不是1了

    3、数组常见属性

    3.1 length

    访问一个数组的length属性，返回该数组的长度，即该数组元素的个数

    1. var arr = [1, 2, 5, 'init', ['apple', 2, 4]]
    2.  
    3. arr.length // 返回数组arr的长度，即5

    4、数组常见方法

    4.1 forEach()

    对数组的每个元素执行一次给定的函数

    1. var array1 = ['a', 'b', 'c'] 
    2.  
    3. array1.forEach( function(element) { 
    4. console.log(element) 
    5. }) 
    6. // 预期输出 
    7. // "a" 
    8. // "b" 
    9. // "c"

    4.2 indexOf()

    返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

    1. var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'] 
    2. console.log(beasts.indexOf('bison')) // 预期输出: 1 
    3. // start from index 2 
    4. console.log(beasts.indexOf('bison', 2)) // 预期输出: 4
    5. console.log(beasts.indexOf('giraffe')) // 预期输出: -1

    4.3 join()

    将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

    1. var elements = ['Fire', 'Air', 'Water'] 
    2. console.log(elements.join()) // 预期输出: "Fire,Air,Water" 
    3. console.log(elements.join('')) // 预期输出: "FireAirWater" 
    4. console.log(elements.join('-')) // 预期输出: "Fire-Air-Water"

    4.4 map()

    创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

    1. var array1 = [1, 4, 9, 16]; // 传入一个回调函数给map方法 
    2. var map1 = array1.map(function (x) { return x * 2 });
    3. console.log(map1); // 预期输出: Array [2, 8, 18, 32]

    4.5 pop()

    从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

    1. var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; 
    2. console.log(plants.pop()); // 预期输出: "tomato" 
    3. console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage", "kale"] 
    4. plants.pop(); 
    5. console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage"]

    4.6 push()

    将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

    1. var animals = ['pigs', 'goats', 'sheep']; 
    2. var count = animals.push('cows'); 
    3. console.log(count); // 预期输出: 4 
    4. console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows"] 
    5. animals.push('chickens', 'cats', 'dogs'); 
    6. console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

    4.7 reverse()

    将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

    1. var array1 = ['one', 'two', 'three']; 
    2. console.log('array1:', array1); // 预期输出: "array1:" Array ["one", "two", "three"] 
    3. var reversed = array1.reverse(); 
    4. console.log('reversed:', reversed); // 预期输出: "reversed:" Array ["three", "two", "one"] 
    5. // 注意：该方法会修改原数组 
    6. console.log('array1:', array1); // 预期输出: "array1:" Array ["three", "two", "one"]

    4.8 shift()

    从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

    1. var array1 = [1, 2, 3]; 
    2. var firstElement = array1.shift(); 
    3. console.log(array1); // 预期输出: Array [2, 3] 
    4. console.log(firstElement); // 预期输出: 1

    4.9 slice()

    返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

    1. var animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; 
    2. console.log(animals.slice(2)); // 预期输出: Array ["camel", "duck", "elephant"] 
    3. console.log(animals.slice(2, 4)); // 预期输出: Array ["camel", "duck"] 
    4. console.log(animals.slice(1, 5)); // 预期输出: Array ["bison", "camel", "duck", "elephant"] 
    5. console.log(animals.slice(-2)); // 预期输出: Array ["duck", "elephant"] 
    6. console.log(animals.slice(2, -1)); // 预期输出: Array ["camel", "duck"]

    4.10 sort()

    对数组的元素进行排序，并返回数组。

    1. var months = ['March', 'Jan', 'Feb', 'Dec']; 
    2. months.sort(); 
    3. console.log(months); // 预期输出: Array ["Dec", "Feb", "Jan", "March"] 
    4. var array1 = [1, 30, 4, 21, 100000]; 
    5. array1.sort(); 
    6. console.log(array1); // 预期输出: Array [1, 100000, 21, 30, 4]
    7.  
    8. // 如果sort()方法调用的时候没有传入回调函数，会将数组转成字符串然后进行大小比较并升序排列，字符串的大小比较是按照字典顺序进行的。所以10000会比21小。
    9.  
    10. // 如果sort()方法调用的时候传入了回调函数，会按回调函数的返回值来决定相邻两个元素的排序，例如：
    11. var array1 = [1, 30, 4, 21, 100000]; 
    12. array1.sort(function (item1, item2) {
    13. return item1 - item2
    14. }); 
    15. console.log(array1); // 预期输出: Array [1, 4, 21, 30, 100000]
    16.  
    17. // 这里面的item, item2参数就是array1里面相邻的两个元素
    18. // 如果这个回调函数返回的结果大于0，那么item2将排在item1的前面
    19. // 如果这个回调函数返回的结果小于0，那么item1将排在item2的前面
    20. // 如果这个回调函数返回的是0，那么item1和item2的位置不变

    4.11 unshift()

    将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

    1. var array1 = [1, 2, 3]; 
    2. console.log(array1.unshift(4, 5)); // 预期输出: 5 
    3. console.log(array1); // 预期输出: Array [4, 5, 1, 2, 3]

  • 相关阅读:
    Ubuntu18.04更改镜像源（网易，阿里，清华，中科大，浙大）
    一点一点学习C++之笔记005
    腾讯mini项目-【指标监控服务重构】2023-08-24
    Python绘图系统22：实现系统菜单
    一文搞懂static（一）
    递归&回溯&剪枝-括号生成
    stable diffusion在建筑行业应用
    接口开放太麻烦？试试阿里云API网关吧
    【Django多对多使用through自定义中间表详解】
    DataFrame数据透视表pd.pivot_table()
  • 原文地址：https://blog.csdn.net/ssss39/article/details/127988391