变量 #
声明格式:var name = value;
var、let、const #
ES6引入let、const之前,JavaScript 只有两种类型的作用域:全局作用域和函数作用域
const #
const声明的变量不可以进行修改,而且声明的时候必须赋值,和java的final相似
const声明的变量对象,可以修改对象的属性
let #
let声明的作用域为块级作用域,即只作用于{},如果在函数外(全局作用域)和函数内(函数作用域)使用和var没有区别。
区别在于,函数(块)外声明后,再在函数(块)内声明并赋值的区别
var a = 5
for(var a = 0;a <= 10;a++){}
console.log(a)
//11
let a = 5
//如果在循环中用 let 声明了变量 a,那么只有在循环内,变量 a 才是可见的。
for(let a = 0;a <= 10;a++){}
console.log(a)
//5
数据类型 #
可以使用函数typeof(obj),查看一个变量或值的数据类型
| 表达式 | 返回值 | 说明 |
|---|---|---|
typeof undefined |
“undefined” | 未定义的值 |
typeof true |
“boolean” | 布尔值 |
typeof 42 |
“number” | 所有数字类型 |
typeof "text" |
“string” | 字符串 |
typeof {a:1} |
“object” | 对象、数组、null |
typeof function(){} |
“function” | 函数 |
typeof Symbol() |
“symbol” | ES6新增符号类型 |
typeof BigInt(10) |
“bigint” | ES2020新增大整数类型 |
Number #
JavaScript不区分整数和浮点数,统一用Number表示,以下都是合法的Number类型
var a = 10;
var b = 20.2;
var c = 12e2;
var d = -30;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
// 10
// 20.2
// 1200
// -30
字符串 #
字符串是以单引号'或双引号"括起来的任意文本
var a = 'abc';
var b = "def";
var c = `
你好呀,
这是一个多行字符串
`
console.log(a);
console.log(b);
console.log(c);
// abc
// def
// 你好呀,
// 这是一个多行字符串
模板字符串 #
ES6新增模板字符串,可以使用变量作为替换
注意:使用${}作为模板,该字符串需要使用多行字符串的符号反引号
var name = 'lucy';
var age = 18;
var msg = `我叫${name},今年${age}岁了`
console.log(msg)
// 我叫lucy,今年18岁了
常用api #
var str = 'abcdef'
//获取字符串长度
len = str.length
//获取指定索引的字符,字符串是不可变的!这个方法不可以用来赋值
b = str[1]
//将字符串全大写并返回
upStr = str.toUpperCase()
//将字符串全小写并返回
lowStr = str.toLowerCase()
//返回指定字符串所出现的索引,未找到返回-1
i = str.indexOf('bc')
//返回指定区间的字符串,左开右闭
s1 = str.substring(3)
s2 = str.substring(3,5)
| 方法 | 描述 |
|---|---|
charAt() |
返回指定索引位置的字符 |
charCodeAt() |
返回指定索引位置字符的 Unicode 值 |
concat() |
连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() |
将 Unicode 转换为字符串 |
indexOf() |
返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() |
返回字符串中检索指定字符最后一次出现的位置 |
localeCompare() |
用本地特定的顺序来比较两个字符串 |
match() |
找到一个或多个正则表达式的匹配 |
replace() |
替换与正则表达式匹配的子串 |
search() |
检索与正则表达式相匹配的值 |
slice() |
提取字符串的片断,并在新的字符串中返回被提取的部分 |
split() |
把字符串分割为子字符串数组 |
substr() |
从起始索引号提取字符串中指定数目的字符 |
substring() |
提取字符串中两个指定的索引号之间的字符 |
toLocaleLowerCase() |
根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLocaleUpperCase() |
根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 |
toLowerCase() |
把字符串转换为小写 |
toString() |
返回字符串对象值 |
toUpperCase() |
把字符串转换为大写 |
trim() |
移除字符串首尾空白 |
valueOf() |
返回某个字符串对象的原始值 |
布尔 #
var a = true;
var b = false;
console.log(a);
console.log(b);
// true
// false
数组 #
数组是一组按顺序排列的集合,集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。
//建议使用这种声明方式
var arr1 = [1,2,'lucy',3]
var arr2 = new Array(1,2,'lucy',3)
console.log(arr1)
console.log(arr2)
// [ 1, 2, 'lucy', 3 ]
// [ 1, 2, 'lucy', 3 ]
常用api #
var a = ['lucy','lily','tom']
//获取数组的长度,这个长度是可以进行赋值的
//如果赋值,多出来的会用undefined表示,如果长度变短,会截取
a.length
//获取指定索引的元素
a[1]
//修改指定索引元素
a[1] = 'james'
//获取元素所在索引
a.indexOf('tom')
//截取数组,返回截取后的数组,左开右闭
a.slice(1,2)
//向数组末尾添加一个两个元素,返回新的长度,参数可变
a.push('mo','monkey')
//删除最后一个元素,并返回
a.pop()
//向数组开始添加一个元素,返回新的长度,参数可变
a.unshift('timi')
//删除第一个元素,并返回
a.shift()
//对数组进行排序,可传入函数自定义规则
a.sort()
//反转数组
a.reverse()
//从数组的第2位开始删除3个元素,再添加两个元素到这个位置,并返回删除的元素
a.splice(2,3,'lulu','gogo')
//从数组的第2位开始删除3个元素
a.splice(2,3)
//连接两个数组,并返回新的数组
b = ['haha','yiyi']
a.concat(b)
//将数组的所有元素使用指定分隔符连接后,返回字符串lucy-lili-tom
a.join('-')
//返回数组符合要求的元素组成的新数组
a.filter(name => {
return name.length > 3
})
对象 #
JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成
注意,最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。
对象的key只可以是字符串
var lucy = {
name : 'lucy',
age : 18,
sex : '女'
};
console.log(lucy)
console.log(lucy.age)
// { name: 'lucy', age: 18, sex: '女' }
// 18
如果key含有特殊字符,那么必须使用引号包起来,说明是一个字符串,而且在获取对象属性值的时候,不可以使用obj.value的方式,所以命名属性的时候一定要规范
var lucy = {
name : 'lucy',
age : 18,
'sex-name' : '女'
};
console.log(lucy)
console.log(lucy['sex-name'])
// { name: 'lucy', age: 18, 'sex-name': '女' }
// 女
判断属性是否存在 #
var lucy = {
name : 'lucy',
age : 18,
'sex-name' : '女'
};
console.log('name' in lucy)
//js的所有对象最终原型链指向object,toString是object的
console.log('toString' in lucy)
//hasOwnProperty是判断对象本身有没有这个属性
console.log(lucy.hasOwnProperty('toString'))
// true
// true
// false
this #
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。
- 在方法中,this 表示该方法所属的对象。
- 如果单独使用,this 表示全局对象。
- 在函数中,this 表示全局对象。
- 在函数中,在严格模式下,this 是未定义的(undefined)。
- 在事件中,this 表示接收事件的元素。
- 类似
call()和apply()方法可以将 this 引用到任何对象。
JSON #
JSON 格式在语法上与创建 JavaScript 对象代码是相同的。
| 函数 | 描述 |
|---|---|
JSON.parse() |
用于将一个 JSON 字符串转换为 JavaScript 对象。 |
JSON.stringify() |
用于将 JavaScript 值转换为 JSON 字符串。 |
类型转换 #
JavaScript 变量可以转换为新变量或其他数据类型:
- 通过使用 JavaScript 函数
- 通过 JavaScript 自身自动转换
数字转换为字符串 #
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
Number 方法 toString() 也是有同样的效果。
x.toString()
(123).toString()
(100 + 23).toString()
布尔值转换为字符串 #
String(false) // 返回 "false"
String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 "false"
true.toString() // 返回 "true"
字符串转换为数字 #
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99abc") // 返回 NaN
布尔值转换为数字 #
Number(false) // 返回 0
Number(true) // 返回 1
特殊值 #
NaN和Infinity #
//表示Not a Number,即无法计算出结果
var a = NaN;
//表示无限大,超出Number能表示的最大值
var b = Infinity;
NaN和任何数值都不相等,和自己也不相等,要判断是否是NaN,需要使用函数isNaN()
null和undefined #
null表示一个空的值,它和0以及空字符串''不同,0是一个数值,''表示长度为0的字符串,而null表示空。
JavaScript的设计者希望用null表示一个空的值,而undefined表示值未定义。事实证明,这并没有什么卵用,区分两者的意义不大。大多数情况下,我们都应该用null。undefined仅仅在判断函数参数是否传递的情况下有用。
null 和 undefined 的值相等,但类型不等
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
运算符 #
算术运算符 #
y = 5
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 减法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取模(余数) | x=y%2 | 1 | 5 |
| ++ | 自增,前后和java的逻辑一样 | x=++y | 6 | 6 |
| – | 自减,前后和java的逻辑一样 | x=–y | 4 | 4 |
赋值运算符 #
x = 10,y = 5
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
比较运算符 #
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | x==8 | false |
| === | 绝对等于(值和类型均相等) | x===“5” | false |
| != | 不等于 | x!=8 | true |
| !== | 不绝对等于(值和类型有都不相等) | x!==“5” | true |
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
逻辑运算符 #
x = 6,y = 3
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | `(x==5 |
| ! | not | !(x==y) 为 true |