c认证JavaScript基础

目录

计算机两大难题缓存失效和命名规范

JavaScript命名规范

1、语法层面

2、工程层面

缓存失效

1、比较运算符

2、逻辑运算符

3、知识拓展

4、示例

隐士类型转换

1、字符串和数字的运算

2、各种值转换成布尔值

条件分支

1、if分支

2、switch分支

2.3 示例

for循环遍历

1、for循环的使用方法

2、使用示例

Math对象的常用方法

对象属性

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

2、访问对象属性的语法

3、添加对象的属性语法

4、修改对象的属性语法

5、删除对象的属性语法

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

思考:会做但你会写吗?

函数调用

1、通过声明来定义函数

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

3、函数调用

常见内置函数

1、eval

2、isNaN

3、parseFloat

4、parseInt

parseInt

字符串定义和转义字符

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

2、转义符

字符串常见方法与属性

1、String对象属性

2、String对象的常用方法

数组

1、数组定义

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

3、数组常见属性

4、数组常见方法


计算机两大难题缓存失效和命名规范

JavaScript命名规范

和其他高级程序语言(c)变量命名规范无太大差别

1、语法层面

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

1 
1a 
*a 
(a 
%a 
<r
// 以上都是非法的变量名,会直接报错

1.2 变量名不能是关键字

var 
if 
for 
// 以上都是非法的变量名,会直接报错

2、工程层面

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

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

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

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

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

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

  • 变量名大小写敏感

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

// 以下是一些好的命名,不仅不会报错,还便于理解 
age 
myAge 
init 
finalOutputValue 
audio1 
​
// 以下是一些不好的命名,有些会报错,有些不便于理解 
1 
a 
_12 
MYAGE
var 
Document 
skjfndskjfnbdskjfb 

缓存失效

缓存失效的三种情况:缓存穿透、缓存雪崩、缓存击穿_book&sword的博客-CSDN博客_缓存失效

逻辑运算

常看常新

因为一开始用不到,必然不可能熟练,也就谈不上理解

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

与要求:同时满足为true

或:任意一个满足为true

3、知识拓展

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

4、示例

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

【思路】

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

隐士类型转换

很好的教程内容,值得收藏反复观看

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

1、字符串和数字的运算

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

var num1 = '123' 
var num2 = 12 
var num3 = num1 + num2 
console.log(num3) // 预期输出:'12312'

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

var num1 = '123' 
var num2 = 12 
var num3 = num1 - num2 
console.log(num3) // 预期输出:111 
var num1 = '123' 
var num2 = 12 
var num3 = num1 * num2 
console.log(num3) // 预期输出:1476 
var num1 = '123' 
var num2 = 12 
var num3 = num1 / num2 
console.log(num3) // 预期输出:10.25 
var num1 = '123' 
var num2 = 15 
var t = num1 > num2 
console.log(t) // 预期输出:true 

2、各种值转换成布尔值

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

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

2.3 任何数组(即使是空数组),任何对象(即使是空对象) 转成布尔值的时候都是true

var a = 0 
if (a) { 
    console.log('hello') 
} else { 
    console.log('world') 
} 
// 当a=0或""或null或undefined的时候,预期输出:world 
// 当a=[]或空对象的时候,预期输出:hello 
// 当a=-1或"abc"时候,预期输出:hello

条件分支

1、if分支

1.1 基本语法结构

if (条件1) { 
    // 代码块1 
} else if (条件2) { 
    // 代码块2 
} else { 
    // 代码块3 
}

1.2 说明

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

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

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

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

  • 可以有多个else if

1.3 示例

var x = 20 
if (x > 5) { 
    console.log('a') 
} else if (x > 50) { 
    console.log('b') 
} else { 
    console.log('c') 
} 
// 如果x=20,上述代码预期输出:'a' 
// 如果x=100,上述代码预期输出也是:'a' 

2、switch分支

2.1 基本语法结果

switch (expression) { 
    case value1: 
        // 当 expression 的结果与 value1 匹配时,执行此处语句  
        [break;] 
    case value2: 
        // 当 expression 的结果与 value2 匹配时,执行此处语句  
        [break;] 
    ... 
    case valueN: 
        // 当 expression 的结果与 valueN 匹配时,执行此处语句  
        [break;] 
    [default: 
        // 如果 expression 与上面的 value 值都不匹配,执行此处语句 
        [break;]] 
}

2.2 说明

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

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

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

2.3 示例

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

for循环遍历

1、for循环的使用方法

  • for:多次遍历代码块

  • for/in:遍历对象属性

2、使用示例

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

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

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

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

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

2.2 for循环代码实例一(普通遍历):

for (var i = 0; i < 10; i++) {
    console.log(i)
}
// 执行结果
0 1 2 3 4 5 6 7 8 9
​
for (var i = 0; i < 10; i+=2) {
    console.log(i)
}
// 执行结果
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循环代码实例二(数组遍历):

var arr = [11, 22, 33, 44, 55]
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}
// 执行结果
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循环代码实例三(对象遍历)**:

var obj = {name:"tom", gender:"man", age:32} 
for (var key in obj) {
    // 打印键
    console.log(key)
    // 打印值
    console.log(obj[key])
}
// 执行结果
name
tom
gender
man
age
32

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

对象遍历案例

关于for首尾

第一次和最后一次都直接输出,不进行循环

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

对象属性

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

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

2、访问对象属性的语法

// 访问对象属性方式一
obj.name
// 访问对象属性方式二
obj['name']
// 访问对象属性方式三
// 将对象属性赋值给一个变量,使用变量方式访问
var key = 'name'
obj[key]

3、添加对象的属性语法

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

4、修改对象的属性语法

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

5、删除对象的属性语法

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

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

// for循环遍历对象,需要使用for ... in
for (var key in obj) {
    console.log(key)
    console.log(obj[key])
}

思考:会做但你会写吗?

函数调用

1、通过声明来定义函数

1.1 function关键字

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

function name([param[, param[, ... param]]]) 
{ 
    [statements] 
}

1.2 说明

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

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

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

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

1.3 示例

pri(); // 预期输出:"foo" 
function pri() { 
    console.log("foo"); 
}

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

2.1 表达式定义法

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

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

2.2 说明

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

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

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

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

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

2.3 示例

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

3、函数调用

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

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

function add1(a, b) { 
   return a + b; 
} 
var res = add1(4, 5) 
console.log(res) // 预期输出:9 
​
function add2(a, b) { 
   a + b; 
} 
var res = add2(4, 5) 
console.log(res) // 预期输出:undefined 
  • 函数在调用的时候,会将调用时给定的参数和定义时设定的参数依次绑定。如果调用时给定的参数个数不够,那么函数体中没有绑定的参数将被赋值为undefined

function foo(a, b) { 
    console.log(b) 
} 
foo(4) // 预期输出:undefined 
foo(4,8) // 预期输出:8
  • 函数在调用时可以接受一个函数作为参数,也可以返回一个函数作为返回值。这是函数的高阶用法,暂不涉及,可自行查阅。

高级函数

高阶函数——函数作为函数的参数、函数作为函数的返回值_程序媛啊啊啊的博客-CSDN博客函数在调用时可以接受一个函数作为参数,也可以返回一个函数作为&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-103167630.142^v50^control,201^v3^control_1&spm=1018.2226.3001.4187

含闭包

函数表达式_佛曰小希希的博客-CSDN博客_函数表达式表达式定义函数&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-106206307.142^v50^control,201^v3^control_1&spm=1018.2226.3001.4187

案例

 

常见内置函数

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

1、eval

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

var a = eval("2+2") 
console.log(a) 
// 预期输出:4 
// 这里eval把字符串"2+2",当成js代码执行,得到结果4 
​
eval("console.log('hello world')") 
// 预期输出:hello world 
// 这里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)”。

isNaN('abc') // 返回值:true 因为字符串'abc'不是一个数字 
isNaN('12.23') // 返回值:false 因为字符串'12.23'是一个数字 
​
isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true
​
isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false
​
// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0
​
// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true
​
isNaN("blabla")   // true: "blabla"不能转换成数值
                  // 转换成数值失败, 返回NaN

3、parseFloat

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

。。。。

parseFloat(3.14); 
parseFloat('3.14'); 
parseFloat(' 3.14 '); 
parseFloat('314e-2'); 
parseFloat('0.0314E+2'); 
parseFloat('3.14some non-digit characters'); 
// 以上的返回值都是3.14

4、parseInt

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

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

基于原型链

下面解释有点冗杂:深究建议配合高阶的文献

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

parseInt

https://blog.csdn.net/weixin_40688217/article/details/89070641?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166441586816781432946553%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166441586816781432946553&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-89070641-null-null.142^v50^control,201^v3^control_1&utm_term=parseInt&spm=1018.2226.3001.4187

科学计数

来想想为什么

 放大点看:ctrl+鼠标滚动

字符串定义和转义字符

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

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

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

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

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

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

2、转义符

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

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

单引号内使用双引号和转义字符/''定义出来的效果一样

关于转义字符自己被转义

字符串常见方法与属性

字符串在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

数组

多用,随用随看吧,这块五刷都不为过

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

1、数组定义

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

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

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

3、数组常见属性

3.1 length

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

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

4、数组常见方法

4.1 forEach()

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

var array1 = ['a', 'b', 'c'] 
​
array1.forEach( function(element) { 
console.log(element) 
}) 
// 预期输出 
// "a" 
// "b" 
// "c"

4.2 indexOf()

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

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

4.3 join()

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

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

4.4 map()

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

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

4.5 pop()

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

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

4.6 push()

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

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

4.7 reverse()

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

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

4.8 shift()

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

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

4.9 slice()

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

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

4.10 sort()

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

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

4.11 unshift()

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

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

本系列所有内容选自官方C1认证,放心食用,搭配官方专门学习视频效果更佳

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白村第一深情

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值