目录
计算机两大难题缓存失效和命名规范
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 == 6 | false |
=== | 值相等且类型相等 | num === "5" | false |
!= | 不等于 | num != 7 | true |
!== | 值不相等或类型不相等 | num !== 5 | false |
> | 大于 | num > 9 | false |
< | 小于 | num < 9 | true |
>= | 大于或等于 | num >= 8 | false |
<= | 小于或等于 | num <= 7 | true |
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 和不包含 1 | Math.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
科学计数
来想想为什么
放大点看: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'.length | 4 |
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认证,放心食用,搭配官方专门学习视频效果更佳