js捡漏

205 阅读4分钟

1.如何使用变量(声明+赋值)?

声明变量:

let 变量名;

为变量赋值:

变量名 = 某个值

声明变量相当于“设”。如设x为什么什么,设y为什么什么。虽然声明不是必须,但不建议省略。 例子:

let a; // 声明变量a
let b; // 声明变量b
let c, d, e; //声明变量c、d、e

console.log(a); // undefined
console.log(d); // undefined
console.log(f); // 报错

如果没有声明变量,执行时会报出错误信息:

image.png

声明变量但不赋值时,变量的默认值会是undefined便是没有赋值,我们声明了a和d但没有赋值,所以打印时会显示undefined。但打印f时,由于我们没有对其进行声明,所以会报出错误信息:f is not defined。

赋值操作就非常简单了,在js中变量是没有类型的,所以一个变量可以是任何的值而无需考虑类型。并且在使用过程中可以任意修改变量的值。

let a // 声明变量a
let b // 声明变量b
let c, d, e // 声明变量c、d和e

a = 10 // 为a赋值10
b = 100n // 为b赋值100n
console.log(a) // 输出:10
console.log(b) // 输出: 100n

a = 30 
console.log(a) // 输出:30

声明和赋值也可以同时进行(一般都这么做):

let 变量名 = 值

let a  = 100
let b = 0b11

console.log(a) // 输出100
console.log(b) // 输出3

这种使用方式同时也非常好理解let a = 100直接读取字面意思,就是让a等于100。日常开发中通常也是声明赋值同时进行,一步搞定。

2.字符串(String)

在字符串中使用\作为转义字符,当需要使用一些特殊符号时需要使用反斜杠来表示。

    \'   表示单引号'
    \"   表示双引号"
    \\   表示反斜杠\
    \n   表示换行
    \t   表示制表符(缩进)

console.log('--> \' <--') 运行结果: --> ' <--

console.log('--> \" <--') 运行结果: --> " <--

console.log('--> \\ <--') 运行结果: --> \ <--

console.log('--> \n <--') 运行结果:

--> 
<--

console.log('--> \t <--') 运行结果:

-->       <--

多行

方法1(拼接):
let s1 = "少小离家老大回" +
        "乡音未改鬓毛衰" +
        "儿童相见不相识" +
        "笑问客从何处来" 
   
方法2(转义字符\):
let s2 = "少小离家老大回\
          乡音未改鬓毛衰\
          儿童相见不相识\
          笑问客从何处来"
          
方法3(模板字符串):
let s3 = `少小离家老大回
          乡音未改鬓毛衰
          儿童相见不相识
          笑问客从何处来`
          
模板字符串中使用变量${变量}

3.其他值

空值(Null)

用来表示没有,不存在。程序凡是空的、没有的、不存在的都可以用null来表示。 let a = null

未定义(Undefined)

和空值类似,也可以理解为空的,不存在的。和null的区分,对于我们来讲要设置空的、不存在的都会使用null。而undefined都是由解析器总欧东设置的,像使用var声明但是没有赋值的变量、像是没有返回值的函数都会返回undefined。开发中,能避开就避开,不会主动去设置undefined。 let a = undefined // 一般不会这么写

4. 对象(Object)

对象在JS中实则就是一个容器,一个“值”的容器。在对象中可以存放不同类型的值,如此一来便可以在对象中存储多个值,从而表示出一些更加复杂的数据。

let a = {} //创建一个对象,赋值给变量

对象.属性名 = 属性值 // 添加属性

存值
let o = {}
o.name = 'Tom'
o.gender = '男'
o.age = 15
console.log(o)

image.png

对象.属性 //取值

console.log(o.name) // Tom
console.log(o.gender) // 男
console.log(o.age) // 15

对象字面量(用,隔开)

{属性名:属性值, 属性名:属性值, 属性名:属性值}

let o = {
    name:'Tom',
    age:15,
    gender:'男'
}

5. 运算符

算数运算符

% (两个数相除取余数) 9 % 4 // 结果1

** (求某个数的几次幂) 2 ** 3 // 结果8

一元运算符

只有一个操作数的运算符

delete 删除变量或属性 delete a 或 delete o.name

typeof 检查一个值的类型 typeof 123

image.png

相等运算符

image.png == 相等运算符会自动的类型转换。它会将不同类型的两个值转换成相同类型后然后再进行比较。通常情况下,不同类型的值都会转换成数值然后进行比较。

=== 全等运算符不会进行类型转换,如果两个值的类型不同,直接返回false。

逻辑运算符

image.png

会转换为false的情况: 0、-0、null、false、NaN、undefined、空字符串""

会转换成true的情况: 任意对象、数组、非空字符串(即使是字符串"false")

我们可以对一个值去两次取反,将其转换成布尔值

image.png

短路运算符:&&与,找false。当两个值都为true的时候返回true,否则返回false

特殊用法:多个条件都为true。有一个条件为false,那么后续不再判断。

条件1 && 条件2 && 条件3

image.png

image.png

参与运算的两个值中,如果第一个值可以转换成true,则返回第二个值,否则返回第一个

短路运算符:|| 或,找true。两个值有一个为true,则返回true,否则返回false。

特殊用法:只要有一个条件为true。一旦遇到一个条件为true,那么后面的条件不再判断

条件1 || 条件2 || 条件3

image.png

image.png

参与运算的两个值中,如果第一个可以转换成true,则返回第一个值,否则返回第二个值。

合并空值 ??

如果一个值是null或undefined 就返回第二个值,否则返回第一个值

?? 和 || 区别:

  • ?? 只会过滤null和undefined

  • || 会过滤掉所有转换为false的值

null ?? 10  // 10
undefined ?? 10 // 10
0 ?? 10 // 0
0 || 10 // 10