文章目录
目录
前言
大家好,我是ice三分颜色。个人主页:ice三分颜色的博客
本文讲了C1认证之JS基础相关知识,篇幅很长,建议收藏。
走过路过的小伙伴们点个赞和关注再走吧,欢迎评论区交流,努力什么时候开始都不算晚,那不如就从这篇文章开始!
大家一起成长呀!笔芯
二十九、JavaScript变量命名规则
知识点
变量名不能以数字或者某些特殊字符开头(*、(、%、<等)非法的变量名,会直接报错
变量名不能是关键字(var 、if 、for 等关键字)
工程层面
一般应当坚持使用拉丁字符(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
习题
变量命名规则-01
在JavaScript中以下,以下哪些变量名是非法的(会导致程序报错)?
1person
name
var
$orderwera23
uiuiuqwer4_23aser2
A. 1person,name
B. name, var
C. $orderwera23,uiuiuqwer4_23aser2
D. 1person,var
答案:D
变量命名规则-02
在JavaScript中,以下哪些变量名不建议使用?
1person
name
var
$orderwera23
uiuiuqwer4_23aser2
A. 1person,var,$orderwera23,uiuiuqwer4_23aser2
B. 1person,name
C. name,var
D. uiuiuqwer4_23aser2, name
题解:1person,var,数字开头和关键字会报错;$orderwera23,uiuiuqwer4_23aser2,意义不明不建议使用。
答案:A
变量命名规则-03
在JavaScript中,以下字符串中那些不能被作为变量名使用?(使用了,程序就会报错)
for
function
var
myName
owefsdfwef2
A . owefsdfwef2, var, for, myName
B. for, function, var
C. owefsdfwef2,var,function
D. myName, var,function
题解:关键字(保留字)不能作为变量名使用。在JS语法中,for是用来定义循环结构的关键字;function是用来定义函数的关键字;var是用来定义变量的关键字。
owefsdfwef2虽然意义不清,但是一个合法的变量名,使用它并不会报错;myName是一个合法且意义清晰的变量名
答案:B
变量命名规则-04
在JavaScript中,以下代码运行会报错
var 1_person = "Hello world!"
console.log(1_person)
题解:会报错,因为声明的变量名是以数字开头的
答案:对
变量命名规则-05
在JavaScript中,从代码易于维护的角度来看,以下哪些变量名比较合适?
a1
b2
n234oouj
name
number
age
schoolName
A. a1, n234oouj, age,number
B. b2, number, name
C. age,schoolName,n234oouj
D. name,age,number, schoolName
题解:代码要易于后续的维护,在变量命名方面要易于理解,而不能是一些无意义的字符串
答案:D
三十、逻辑运算
知识点
JavaScript比较运算符在逻辑语句中使用,以判定变量或值是否相等,返回true 或 false;逻辑运算符用于判定变量或值之间的逻辑。
比较运算符
运算符
描述
==
等于
===
值相等且类型相等
!=
不等于
!==
值不相等或类型不相等
>
大于
<
小于
>=
大于或等于
<=
小于或等于
逻辑运算符
我们假定num = 5,下表中解释了逻辑运算符:
运算符
描述
示例
结果
&&
与
(num%2==1 && num>1)
true
||
或
(num%2==0 || num>1)
true
!
非
!(num%2==0)
true
详细知识可参考:
https://blog.csdn.net/qq_46007633/article/details/123885831?spm=1001.2014.3001.5501
习题
逻辑运算-01
要想以下JavaScript代码符合预期,空格处应该填什么运算符?
var a = 11
var b = 6
if(__(a<b)) {
console.log(a)
} else {
console.log(b)
}
预期输出结果:
11
题解:if(){}else{}语句中的内容若符合(即为true),则执行if后{}内容,若不符合则执行else后{}内容
答案:!
逻辑运算-02
以下JavaScript代码运行的预期输出结果是?
var num = 55
var str = "55"
if(num === str) {
console.log("Yes")
} else {
console.log("No")
}
预期输出结果:
____
题解:===是数值相同且类型相同
答案:No
逻辑运算-03
以下JavaScript代码运行的预期输出结果是?
var res1 = 5 > 8
var res2 = true
if(res1 && res2) {
console.log("Yes")
} else {
console.log("No")
}
预期输出结果:
____
题解:&&两个都对才执行if下的,有其中一个错或两个都错则执行else下的
答案:No
逻辑运算-04
以下JavaScript代码运行的预期输出结果是?
var res1 = 6 > 3
var res2 = 8 >= 8
var res3 = false
if(res1 || res2 && res3) {
console.log("Yes")
} else {
console.log("No")
}
预期输出结果:
____
题解:这里涉及到与运算和或运算的优先级。与的优先级比或的高。所以res1 || res2 && res3的运算循顺序是先计算res2 && res3,然后再将其结果(false)和res1做或运算。
答案:Yes
逻辑运算-05
以下JavaScript代码运行的预期输出结果是?
var num = 8
if(true || (num = 9)) {
console.log(num)
}
预期输出结果:
____
题解:这里涉及到逻辑运算的短路机制,对于或运算,当第一个操作数是true时,该运算的结果是true,第二个操作数不会被求值(如果是表达式的话就不会被执行)
答案:8
三十一、隐式类型转换
知识点
字符串和数字的运算
字符串和数字进行加运算时,会将数字转换成字符串,然后和另一个字符串进行拼接
字符串和数字进行减、乘、除运算,以及大小比较时,会将字符串转换成数字,再和另一个数字进行运算或比较
各种值转换成布尔值
数字0,空字符串"",null,undefined 转成布尔值的时候都是false
非0数字,非空字符串转成布尔值的时候都是true
任何数组(即使是空数组),任何对象(即使是空对象) 转成布尔值的时候都是true
习题:
隐式类型转换-01
以下代码的预期输出是?
var arr = []
var str
if (arr) {
str = 'hello'
}
console.log(str)
预期输出:
____
题解:if分支语句中的条件部分若true则执行其后结构体。空数组转换成布尔值为true,所以变量str会被赋值为hello。
答案:hello
隐式类型转换-02
要想是一下JavaScript代码运行符合预期,空格处应该填什么运算符?
var a = true
var b = 2
var c = a ___ b
console.log(c)
预期输出:
2
题解:b为2,1*2会得到2,或者0+2会得到2。空格处应该填*,true会被隐式转换成1参入运算
答案:*
隐式类型转换-03
以下JavaScript代码运行的预期输出结果是?
var res = 567 + '1' - 89
console.log(res)
预期输出:
____
题解:数字类型和字符串类型的值进行+运算,会把数字类型的值转成字符串类型的值然后再和另一个字符串进行拼接操作,最后得到一个拼接后的字符串。字符串和数字进行-运算,会把字符串转成数字,然后和另一个数字相减。
答案:479
隐式类型转换-04
以下JavaScript代码运行的预期输出结果是?
if (null) {
console.log('Hello')
} else {
console.log('World')
}
预期输出:
____
题解:null布尔值是false
答案:World
隐式类型转换-05
以下JavaScript代码运行的预期输出结果是?
var a = {}
if (a) {
console.log('Hello')
} else {
console.log('World')
}
预期输出:
____
题解:{}表示一个空的对象,在这里会被转成布尔值。在JS中,空对象转成布尔类型的话,其值为true。任何数组(即使是空数组),任何对象(即使是空对象) 转成布尔值的时候都是true
答案:Hello
三十二、条件分支
知识点
if分支的基本语法结构
if (条件1) {
// 代码块1
} else if (条件2) {
// 代码块2
} else {
// 代码块3
}
如果条件1为真就会执行代码块1。即使条件2为真也不会去执行代码块2,更不会执行代码块3
只有当条件1为假,并且条件2为真的时候,才会执行代码块2
如果条件1和条件2都为假,才会执行代码块3
else if 和 else 部分不是必需的。
可以有多个else if
switch分支基本语法结构:
switch (expression) {
case value1:
// 当 expression 的结果与 value1 匹配时,执行此处语句
[break;]
case value2:
// 当 expression 的结果与 value2 匹配时,执行此处语句
[break;]
...
case valueN:
// 当 expression 的结果与 valueN 匹配时,执行此处语句
[break;]
[default:
// 如果 expression 与上面的 value 值都不匹配,执行此处语句
[break;]]
}
[]表示这一部分语句是可选的,并不是说正常代码中要加[]
expression和value的是进行严格模式的匹配
如果所有case都没有匹配到,将执行default分支的代码
习题:
条件分支-01
以下JavaScript代码的预期输出是?
var a = 8
if (a > 7) {
a = 3
}
if (a > 4) {
a = 5
}
console.log(a)
答案:3
条件分支-02
要想以下JavaScript代码符合预期,空格处应该填什么(表达式除外)?
var expr = ____
switch (expr) {
case 1:
// 代码块1
console.log(111);
case 2:
// 代码块2
console.log(222);
case 3:
// 代码块3
console.log(333);
break;
case 5:
// 代码块5
console.log(111);
case 6:
// 代码块6
console.log(222);
break;
default:
// 代码块7
console.log(111);
}
预期输出:
111
222
题解:如果case的代码块里面最后没有break,那么当前case被执行后,会立即执行下一个case(不管值是否匹配),直到有一个case的代码块有break为止。以此类推,只有当expr为5时,会执行代码块5、代码块6,从而打印111, 222 符合预期输出
答案:5
条件分支-03
以下JavaScript代码运行的预期输出结果是?
var num = 89
if (num < 89) {
console.log('a')
} else if (num > 89) {
console.log('b')
} else {
console.log('c')
}
预期输出: ____
答案:c
条件分支-04
以下JavaScript代码运行的预期输出结果是?
if (8 > 7) {
console.log('Hello')
} else {
console.log('World')
}
预期输出:
____
答案:Hello
条件分支-05
以下JavaScript代码运行的预期输出结果是?
if (78 < 67) {
if (45 > 23) {
console.log('a')
} else {
console.log('b')
}
} else {
if (89 > 45) {
console.log('c')
} else {
console.log('d')
}
}
预期输出:
____
答案:c
三十三、for循环
知识点
for循环的使用方法
for:多次遍历代码块
for/in:遍历对象属性
使用示例
for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
for循环是您希望创建循环时经常使用的语法结构,代码结构如下:
语句 1 在循环(代码块)开始之前执行。
语句 2 定义运行循环(代码块)的条件。
语句 3 会在循环(代码块)每次被执行后执行。
说明:JavaScript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,for...in循环中的循环计数器是字符串,而不是数字。它包含当前属性的名称或当前数组元素的索引
习题:
For循环-01
想要以下代码运行符合预期则空格处应该填什么整型数字?
for (var i=0; i <= ___; i++) {
console.log(i)
}
预期输出结果: 0 1 2 3 4 5
题解:从i=0开始,i<=___是循环条件,i++是语句执行完再加
答案:5
For循环-02
想要以下代码运行符合预期则空格处应该填什么整型数字?
for (var i=1; i <= ___; i+=1) {
console.log(i)
}
预期输出结果:1 2 3 4 5 6 7 8 9
答案:9
For循环-03
想要以下代码运行符合预期则空格处应该填什么整型数字?
var arr = ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1']
for (var i=0; i < arr.length; i+=___) {
console.log(arr[i])
}
预期结果:a1 d1 g1
题解:数组的for循环遍历arr[i]指向的就是数组的每一个key所在的值,从a1跳到d1中间跳了3个值(a1是arr[0] d1是arr[3] g1是arr[6]),通过规律主要也是看语句三的迭代器+3
答案:3
For循环-04
想要以下代码运行符合预期则空格处应该填?
var obj = {
realName:'张三',
phone:13344556789,
email:'zhangsan@163.com',
created_at:'2021-06-12 10:00:00'
}
for (var k in obj) {
if(k === _______ ){
console.log(obj[k])
}
}
预期结果:zhangsan@163.com
题解:对象遍历,赋值的k指向obj的各个键,从realName开始循环,判断k这个键等于什么的时候,打印的obj的值是zhangsan@163.com 主要看哪个键指向的是这个邮箱。因为===是内容和类型都要相同,不要忘记引号。
答案:'email'
For循环-05
想要以下代码运行符合预期则空格处应该填什么整数?
for (var i=4; i<9; i+=___) {
console.log(i)
}
预期输出:
4
7
答案:3
三十四、Math内置对象
知识点
Math对象的作用是:执行常见的算数任务。保存数学公式和信息,与我们在JavaScript直接编写计算功能相比,Math对象提供的计算功能执行起来要快得多。
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 |
习题:
Math内置对象-01
表达式 Math.____(13.6589)计算结果为13,则空格处应该填?
答案:floor
Math内置对象-02
要想以下JavaScript代码符合预期,空格处应该填什么(表达式除外)?(使用中文逗号「,」隔开)
var a = -14.4
var b = 10
var c = Math.____ (a*b)
var d = Math.____ (c)
console.log(d)
预期输出结果:
12
答案:abs,sqrt
Math内置对象-03
要想以下JavaScript代码符合预期,空格处应该填什么整数?
console.log(Math.sqrt(____))
预期输出结果:
9
答案:81
Math内置对象-04
要想以下JavaScript代码符合预期,空格处应该填什么(表达式除外)?
console.log(Math.____(3, 4, 89))
预期输出结果:
89
答案:max
Math内置对象-05
要想以下JavaScript代码符合预期,空格处应该填什么(表达式除外)?
console.log(Math.____(8.01))
预期输出结果:
9
答案:ceil
三十五、对象属性
知识点
对象属性指的是与JavaScript对象相关的值。JavaScript对象是无序属性的集合。属性通常可以被修改、添加和删除,但是某些属性是只读的。
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])
}
习题
对象属性-01
要想以下JavaScript代码符合预期,空格处应该填什么(表达式除外)?
var obj = {name: 'lisi', city: '北京', age: 21}
console.log(obj._______)
// 预期输出结果:21
答案:age
对象属性-02
要想以下JavaScript代码符合预期,空格处应该填什么字符串?
var obj = {id: 1, title: 'React-JSX语法', lengtth: "120", created_at: "2021-07-01", created_staf: "张三"}
var adminName = '_______'
console.log(obj[adminName])
预期输出结果:
张三
题解:空缺处是要求把一个字符串赋值给adminName变量。打印处是对象查询变量Key的值,值为张三,那么我们只需要把它对应的key填入即可满足条件
答案:created_staf
对象属性-03
要想以下JavaScript代码符合预期,空格处应该填什么?
var obj = {
name: '李四',
school: '北京大学',
age: 23
}
console.log(obj.____)
预期输出结果:
北京大学
请在以下方框中填写题目的答案
school
对象属性-04
要想以下JavaScript代码符合预期,空格处应该填什么整数?
var obj = {
name: '王五',
friends: ['张三', '李四'],
age: 23
}
console.log(obj.friends[____])
预期输出结果:
李四
题解:obj这个对象的friends属性是一个数组,现在要打印这个数组的某一个索引上的值,打印结果是李四,该索引就是李四这个值的索引。数组从0开始,李四是第二个,则索引为1
答案:1
对象属性-05
要想以下JavaScript代码符合预期,空格处应该填什么?
var obj = {
name: '小明',
friends: ['张三', '李四'],
hobby: ['篮球', '足球', '游泳', '看书'],
age: 23
}
console.log(obj.name + '喜欢' + obj.____[1])
预期输出结果:
小明喜欢足球
答案:hobby
三十六、函数定义与调用
知识点
JavaScript中函数的定义的两种方式:声明式,表达式式。我们可以把一系列的代码封装成一个函数,然后在任意位置去调用它,从而执行这一系列的代码。使用函数是一种简单直观的复用代码的方式。
通过声明来定义函数
function关键字:我们可以使用function关键字来定义一个具有名称的函数,其语法结构如下
function name([param[, param[, ... param]]])
{
[statements]
}
通过表达式来定义函数
表达式定义法:我们还可以使用函数表达式的方式来定义一个函数,这时可以将函数直接赋值给一个变量,其语法结构如下
var myFunction = function name([param[, param[, ... param]]]) {
statements
}
说明
[]表示可选,并不是正常代码中需要使用[]
name表示函数名,()中的表示参数,{}中的表示函数体。在函数被调用的时候,会执行函数体中的代码。
注意:函数被定义的时候,函数体中的代码并不会被执行。只有到函数被调用的时候,函数体中的代码才会被执行。
对于使用函数声明这个方法定义的函数,函数调用可以在函数定义之前。
对于使用函数表达式这个方法定义的函数,函数调用必须在函数定义之后。
如果省略name,我们称该函数为匿名函数。
函数调用
对于使用函数声明的方法定义的函数,可以使用函数名加括号的方式来调用;对于使用函数表达式定义的函数,可以使用表达式所赋值的变量名加括号来调用。
在函数被执行的时候,会运行函数体中的代码。如果函数体中有return语句,则会在函数被调用处返回return出来的值,并结束函数的运行。return并不是必需的,没有return的话,函数会返回undefined。
函数在调用的时候,会将调用时给定的参数和定义时设定的参数依次绑定。如果调用时给定的参数个数不够,那么函数体中没有绑定的参数将被赋值为undefined
函数在调用时可以接受一个函数作为参数,也可以返回一个函数作为返回值。这是函数的高阶用法,暂不涉及。
习题
函数定义与调用-01
要想以下JavaScript代码符合预期,空格处应该填什么整型数字?
function foo(a, b) {
return a * b
}
console.log(foo(8, ___))
预期输出:
32
答案:4
函数定义与调用-02
要想以下JavaScript代码符合预期,空格处应该填什么整型数字?
function foo(a) {
return a * a * a
}
console.log(foo(___))
预期输出:
27
答案:3
函数定义与调用-03
要想以下JavaScript代码符合预期,空格处应该填什么?
var obj = {
name: '小明',
friends: ['张三', '李四'],
hobby: ['篮球', '足球', '游泳', '看书'],
age: 23,
getNewFriend: function (newFriend) {
this.friends.push(newFriend)
}
}
obj._______('王五')
console.log(obj.friends[2])
预期输出:
王五
题解:这里定义了一个obj对象,其中一个属性的值是一个函数,那么在取这个属性值的时候,后面加上()就代表调用这个函数。这个函数(我们可以称之为这个对象的方法)的作用是将它的参数追加到该对象的friends属性值(数组)的末尾。我们看预期输出的打印是obj这个对象的friends属性值的索引为2的值,而friends属性在这个对象被定义的时候最大索引是1,显然它被push进了一个值。添对象时,是obj.对象名(’内容’),对象名是getNewFriend。
答案:getNewFriend
函数定义与调用-04
以下的JavaScript代码的预期输出是?
var checkNum = function (num) {
return num % 2 === 0
}
if (checkNum(8)) {
console.log('Hello')
} else {
console.log('World')
}
预期输出:
____
题解:我们将一个函数表达式赋值给了checkNum变量,后面就可以使用checkNum来调用这个函数了。这个函数接受一个参数并返回一个布尔值(真假值),这个布尔值取决于传进来的参数对2取余是否等于0。简单来说,这个函数的作用是判断参数是否是一个偶数。
答案:Hello
函数定义与调用-05
以下的JavaScript代码的预期输出是?
var checkNum = function (num, divisor) {
return num % divisor === 0
}
if (checkNum(27, 5)) {
console.log('Hello')
} else {
console.log('World')
}
预期输出:
____
答案:World
三十七、常见内置函数
知识点
JavaScript是一个基于原型链的面向对象的语言,很多其他语言常见的函数会以对象上的各种方法存在,例如数组对象的各种方法,字符串对象的各种方法等。即便如此,JavaScript还是有一些顶层的内置函数,了解这些常见的内置函数对我们进行JavaScript编码有很大的帮助。
eval
eval函数会将传入的字符串当做 JavaScript 代码进行执行。这是一个十分危险的函数,一般情况不建议使用。
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)”。包含空格的字符串被转换成0,,true和null都是false
// dates
isNaN(new Date()); // false
isNaN(new Date().toString()); // true
isNaN("blabla") // true: "blabla"不能转换成数值
// 转换成数值失败, 返回NaN
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
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,第二个参数表示基数(可以理解为进制)
习题
常见内置函数-01
要想以下JavaScript代码运行符合预期,空格处应该填什么?
if (isNaN('.67') === ___) {
console.log('hello')
}
预期输出:
hello
答案:false
常见内置函数-02
要想以下JavaScript代码运行符合预期,空格处应该填什么整数?
console.log(parseInt("21", ____))
预期输出:
17
题解:parseInt这个内置函数会把第一个参数按照第二个参数指定的基数(或者说是进制)转成一个十进制整数,并返回。现在第一个参数是"21",最终转成的10进制数是17,看多少进制下的21是10进制下的17即可
答案:8
常见内置函数-03
以下的JavaScript代码的预期输出是?
console.log(parseFloat('8.9a89bd'))
预期输出:
____
题解:parseFloat内置函数是将给定的字符串转成一个浮点数。它会从给定的字符串的左边开始,一个一个字符的比对,直到不能构成一个有效的浮点数为止。
答案:8.9
常见内置函数-04
以下的JavaScript代码的预期输出是?
if (isNaN('3e4') === false) {
console.log('Hello')
} else {
console.log('World')
}
预期输出:
____
题解:isNaN内置函数是判断一个字符串是否不是一个数字。在JavaScript中数字的表示有很多种,例如十进制的整数,十进制的小数,科学计数法(例如:4e20表示4 乘以 10的20次方),十六进制表示法(例如:0x13af),八进制表示法(例如:012)等。
答案:Hello
三十八、字符串定义与转义字符
知识点
字符串的定义方法,常见的特殊字符的转义方法。
在各种编程语言中,字符串一直都是十分基础与重要的数据类型。在JavaScript中有多种定义字符串的方式,每种方式适合不同的应用场景。字符串中除了包含一般常见的字符外,可能还需要包含一些特殊字符(例如回车、制表符等),这时就需要转义字符的协助了。掌握字符串的常见定义方法,熟悉常见的特殊字符的转义方式,会提升我们的编码能力。
使用引号来定义字符串
我们可以使用一对单引号或者一对双引号来定义一个字符串
var str1 = "这是双引号定义的字符串"
var str2 = '这是单引号定义的字符串'
// 1. 在JavaScript中双引号定义的字符串和单引号定义的字符串没有本质区别
// 2. 无论是单引号还是双引号,都必须配对使用,不能一个单引号和双引号配对
// 3. 单引号中的字符串中不能出现单引号,可以出现双引号;双引号中的字符串中不能出现双引号,可以出现单引号
使用模板字符串的方式定义字符串:我们可以使用一对反引号来定义字符串
var str1 = `这是一个普通的字符串`
var str2 = `这是一个换行的
字符串`
在定义一个字符串的时候,有些特殊字符并不适合直接出现。例如:换行符、单引号(不能出现在单引号内)、双引号(不能出现在双引号内),这个时候可以我们需要使用\转义符,例如:
var str1 = '这是一个换行的\n字符串'
console.log(str1)
// 预期输出:
// 这是一个换行的
// 字符串
// 在这里使用了\n来代表换行符。如果直接在定义字符串的时候回车换行,将出现语法错误
var str2 = "如何使用双引号\""
console.log(str2)
// 预期输出:
// 如何使用双引号"
// 在这里使用了\"来代表双引号。如果在双引号定义的字符串中直接使用双引号,将出现语法错误。单引号同理。
// 如果使用模板字符串的方式定义字符串,可以直接使用回车换行。但是要在其中使用反引号`,也必须转义
习题
字符串定义与转义字符-01
要想以下JavaScript代码运行符合预期,空格处需要填写什么?
var str = ________
console.log(str)
预期输出:
小明说:"吃饭吗?"
我说:"已经吃过了"
题解:\”表示双引号,\n换行符
答案:"小明说:\"吃饭吗? \"\n我说:\"已经吃过了\""
字符串定义与转义字符-02
以下的JavaScript代码的预期输出是?
var str = '\'这是为什么呢?\''
console.log(str)
预期输出:
____
答案:'这是为什么呢?'
字符串定义与转义字符-03
以下的JavaScript代码的预期输出是?
var str = '\"这是为什么呢?"'
console.log(str)
预期输出:
____
题解: 在单引号定义的字符串中出现了双引号,可以直接使用,不会报语法错误。并且双引号前加转义符(\)和不加效果一样。
答案:"这是为什么呢?"
字符串定义与转义字符-04
以下的JavaScript代码的预期输出是?
var str = '\\n这是为什么呢?"'
console.log(str)
预期输出:
____
题解:转义符本身也能被转义,转义后就被当成一个普通的反斜杠字符(\)使用,不再具有转义的效果了。
答案:\n这是为什么呢?"
三十九、字符串常见方法与属性
知识点
String对象的常用属性和方法。字符串在JavaScript中几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,在操作cookie时,当然还有更多。JavaScript的核心部分提供了一组属性和方法用于通用的字符串操作,如分割字符串,改变字符串的大小写,操作子字符串等。
String对象属性
属性名称 | 作用 | 示例 | 结果 |
length | 获取字符串入的长度 | 'abcd'.length | 4 |
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 |
习题
字符串方法与属性-01
要想以下JavaScript代码符合预期,空格处应该填什么?
var a = "abccba"._______("b")
console.log(a)
预期输出结果:
4
题解:从后往前数第一个b字符所在位置,从0开始的,所以输出结果是4
答案:lastIndexOf
字符串方法与属性-02
要想以下JavaScript代码符合预期,空格处应该填什么?
var str = "a1-b2-c3-d4"
console.log(str._____('-'))
预期输出结果:
['a1', 'b2', 'c3', 'd4']
题解:把字符串分割成数组
答案:split
字符串方法与属性-03
要想以下JavaScript代码符合预期,空格处应该填什么整数?
var str = "JavaScript是一门动态类型的语言"
console.log(str.substring(4, ____))
预期输出结果:
Script
题解:字符串的substring方法是截取原字符串的一部分。截取的规则是从第一个参数表示的索引位置开始(包含该字符),到第二个参数表示的索引为止结束(不包含该位置字符)。
如果 第一个参数 等于 第二个参数,substring 返回一个空字符串。
如果省略 第二个参数,substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN,则被当作 0。
如果任一参数大于 str.length,则被当作 str.length。
如果 第一个参数 大于 第二个参数,则 substring 的执行效果就像两个参数调换了一样。
答案:10
字符串方法与属性-04
以下的JavaScript代码的预期输出是?
var str = "AbcDe"
console.log(str.toUpperCase())
预期输出结果:
____
答案:ABCDE
字符串方法与属性-05
以下的JavaScript代码的预期输出是?
var str = "Chinese"
console.log(str.charAt(3))
预期输出结果:
____
答案:n
四十、数组常见方法与属性
知识点
数组是大多数编程语言的内置数据结构。我们可以利用数组顺序存储一系列的值,使用相关的函数或者方法可以对这些值进行处理。合理的使用数组能给我们编码带来很大的便利。
数组定义
// 直接使用中括号就能定义一个数组,数组中的值的类型不必相同,数组中可以嵌套数组
var arr = [1, 2, 5, 'init', ['apple', 2, 4]]
、数组中值的访问与修改
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了
数组常见属性
length
访问一个数组的length属性,返回该数组的长度,即该数组元素的个数
var arr = [1, 2, 5, 'init', ['apple', 2, 4]]
arr.length // 返回数组arr的长度,即5
数组常见方法
forEach()
对数组的每个元素执行一次给定的函数
var array1 = ['a', 'b', 'c']
array1.forEach( function(element) {
console.log(element)
})
// 预期输出
// "a"
// "b"
// "c"
indexOf()
返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
join()
将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。
map()
创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
pop()
从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
push()
将一个或多个元素添加到数组的末尾,并返回该数组的新长度。
reverse()
将数组中元素的位置颠倒,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。该方法会改变原数组。
shift()
从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
slice()
返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。
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的位置不变
unshift()
将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。
习题
数组方法与属性-01
要想以下JavaScript代码符合预期,空格处应该填什么(表达式除外)?
var arr = ['e', 'd', 'f']
var str = arr.___()
console.log(str)
预期输出结果: e,d,f
题解:在数组上调用一个方法,返回一个字符串,并且这个字符串是数组里面的每个元素以逗号相连。就是将数组的每个元素连接起来,join方法正好能实现此功能。join方法在不给参数的时候就是以英文的逗号连接数组的每个元素
答案:join
数组方法与属性-02
要想以下JavaScript代码符合预期,空格处应该填什么(表达式除外)?
var arr = ['tree', 795, [0, 1, 2]];
arr.______([4,9,10])
console.log(arr[0][1])
预期输出结果: 9
题解:arr[0][1]是指数组arr索引为0的值,再取其索引为1的值。如果arr[0]的值为[4,9,10],则arr[0][1]的值为9。所以该数组方法就是将参数[4,9,10]加到数组arr的开头,unshift能实现此功能。
答案:unshift
数组方法与属性-03
要想以下JavaScript代码符合预期,空格处应该填什么(表达式除外)?
var arr = [1,2,3,'a','t',45,'r',9];
var newArr = arr.slice(____, 6)
console.log(newArr[2])
预期输出结果:
45
题解:数组的slice方法会截取原数组的一部分并返回出来。从slice的第一个参数所表示的索引位置的元素(包含该元素)开始,到第二个参数所代表的索引位置的元素(不包含该元素)结束。该题中newArr[2]的值为45,又因为newArr是从arr中截取出来的,所以newArr应该为['a', 't', 45]
答案:3
数组方法与属性-04
要想以下JavaScript代码符合预期,空格处应该填什么(表达式除外)?
var arr = ['a', 'b', 'c', 'd'];
var str = arr.______().join('')
console.log(str)
预期输出结果:
Dcba
题解:最终输出的是一个字符串,而join方法就是将数组中的元素用该方法的参数作为分隔符链接起来形成一个新的字符串。由此可见,空格处的方法将数组arr进行了反转操作。
答案:reverse
数组方法与属性-05
要想以下JavaScript代码符合预期,空格处应该填什么整数?
var arr = [
{
name: '张三',
age: 24
},
{
name: '李四',
age: 32
},
{
name: '王五',
age: 19
}
]
arr.sort(function (item1, item2) {
return item1.age - item2.age
})
console.log(arr[____].name)
预期输出结果:
李四
题解:数组的sort方法会接受一个回调函数作为参数,并且会给这个回调函数传两个值,这两个值即为数组中相邻两个元素,如果这个回调函数返回的是一个小于0的数,那么第一个值就在第二值的前面,等于0的话就不变,大于0的话,第一个值就在第二个值的后面。题中的回调函数的返回值是第一个值的age属性减去第二个值的age属性,如果小于0,item1就在item2前面,反之就在后面。由此可见,就是按照该数组中每一个元素的age的值做升序排列。所以,排序后的数组,0索引位置的值是王五这个对象,1索引位置的值是张三这个对象,2索引位置的值是李四这个对象
答案:2