js基础

风与月
278 阅读10分钟

js（javascript）

一、js的基本知识

1.js的介绍

计算机语言包括：机器语言、汇编语言和高级语言；编程语言包括汇编语言和高级语言

编程语言具有很强的逻辑和行为能力，而标记语言（html）不用于向计算机发出指令，常用于格式化和链接，是被动的。

js则是一门编程语言

2.js的组成

①ECMAscript（js语法）

②WebApi {webapi又分为DOM（页面文档对象模型）和BOM（浏览器对象模型）DOM属于BOM }

3.js的书写方式

①内部式

②外部式

③内联式

tips：js中推荐使用单引号，外部式script标签中间不允许写代码，写了也不会识别

4.js中的注释

①单行注释 ：//或crtl + /

②多行注释：/**/ 或 shift + alt + a

5.js的输入输出语句

①输入语句 prompt()

②输出语句 alert() 警示框 ； console.log() 控制台打印 ； document.write() 在浏览器文档内输出

二、js的变量

1.变量使用步骤

①声明变量

let num;

②赋值

num = 2;

将①②合起来就是变量的初始化

let num = 2;

2.更新变量

一个变量被重新赋值后，原有的值就会被覆盖，变量值以最后一次赋的值为准

let num = 10;
num = 5;
num = 8;
// 最后结果为8

tips: let关键字不可重复声明同一变量

let num = 2;
let num = 3;
//此时浏览器会报错

3.声明多个变量

同时声明多个变量时，只需写一个let ，多个变量名之间用英文逗号隔开

let num = 1,
    str = '123',
    flag = true;

4.变量声明三种特殊情况

①let age; 只声明不赋值，结果为undefined

②console.log(age); 不声明不赋值直接使用，结果为报错

③age = 10; 不声明直接赋值，结果为10，但是不符合规范，此时age变为全局变量;

5.变量命名规范

①变量由字母a-z ，A-Z，数字0-9，下划线_ ，美元符号$组成

②区分大小写

③不能以数字开头

④不能是关键字和保留字，如let for while等等

⑤变量名要做到见名知意

⑥长单词采用驼峰命名法，首字母小写，后续单词首字母大写，如userName

6.变量的数据类型

①简单数据类型

简单数据类型类型默认值
Number数字型0
Boolean布尔值型false
String字符串型''
undefined声明变量不给值undefined
null声明变量并赋值为nullnull

tips1: null值的typeof获取数据为对象

tips2: NaN用于判断一个数是否为非数字类型，是数字类型返回false，不是返回true

②复杂数据类型

对象，函数，数组；

简单数据类型（值类型）：在存储时变量存储的是值本身，存放在栈里

复杂数据类型（引用类型）：在存储时变量存储的仅仅是地址，存放在堆里

7.数据类型转换

①转换成字符串

方式说明语法
.toString() 显转换成字符串num.toString()
String() 显转换成字符串String(要转换的数字)
加号拼接字符串 隐转换成字符串num + ''

②转换成数字型

方式说明语法
parseInt() 显转换成整数parseInt('12')
parseFloat() 显转换成浮点型parseFloat('12')
Number() 显转换成数字Number('12')
用(- + *)进行隐式转换 隐转换成数字+'12'

tips:当'aabb'这类字符串 Number()转换时，输出的结果为NaN

tips:当'123px'用parseInt()转换时，会转换成123。

'12a25b'用parseInt()转换时，会转换成12，parseInt遇到整数外的数会直接返回。

解析：

语法为：parseInt( string, radix)

parseInt函数将其第一个参数转换为一个字符串，对该字符串进行解析，然后返回一个整数或 NaN。

如果不是NaN，返回值将是以第一个参数作为指定基数 radix 的转换后的十进制整数。(例如，radix为10，就是可以转换十进制数，为8可以转换八进制数"07"，16可以转换十六进制数"0xff"，以此类推)。对于 radix 为10以上的，英文字母表示大于9的数字。例如，对于十六进制数（基数16），则使用 A 到 F 。

如果 parseInt 遇到的字符不是指定 radix 参数中的数字，它将忽略该字符以及所有后续字符，并返回到该点为止已解析的整数值。 parseInt 将数字截断为整数值。 允许前导和尾随空格。

③转换为布尔型

方式说明语法
Boolean()转换成布尔值Boolean(要转换的数据)

tips:代表空，否定的值会变成false，例如0，null，undefined，NaN

其余的值则转为true

三、js的运算符与运算

1.算术运算符

运算符作用
+相加
-相减
*相乘
/相除
%求余，例如9%3=0

2.赋值运算符

运算符作用
+=先加后等于 例如num += 3 → num = num + 3
-=同理
*=同理
/=同理
%=同理

3.递增递减运算符

++num 表示
num = num + 1
num++ 表示
num = num + 1
二者在单独使用时没有区别
++num 先自加1，后返回运算后的值
num++ 先返回原值，后进行运算
例子：
let num = 10;
num++ + ++num + num // 表示10 + 12 + 12 = 34
工作中一般不会这样使用，都是单独使用前置或者后置

4.比较运算符

运算符作用
大于
>=大于等于
<小于
<=小于等于
==等于，数值相同即可。
!=不等于
===全等于，要求数值和数据类型都相等
!==不全等于，要求数值和数据类型都相等

tips：一个=表示赋值，注意和运算符区分开来

5.逻辑运算符

运算符作用
！取反
&&和，一假全假
||或，一真全真

6.短路运算

当有多个表达式，右边的表达式可以确定结果时，就不再继续运算右边表达式的值，否则将会输出最后一个表达式

（谁最终被运算，表达式就输出谁）

例如

let num = 10;
console.log(num>9&&30);//num>9为真，所以往右执行，输出30.若num>9为假，则输出false

console.log(num<9||30);//num<9为假，所以往右执行，输出30.若num>9为真，则输出false

let i = 5 && 'hello' //此时i的值为'hello',因为左边为真，最终'hello'被运算，所以i的值为'hello'

四、js的条件语句

1.if语句

语法

if(条件表达式) {
    条件成立时执行的代码
}
//if 单分支语句

if(条件表达式) {
    条件成立时执行的代码
} else {
    上述条件不成立时执行的代码
}
//if else 双分支语句

if(条件表达式) {
    条件成立时执行的代码
} else if(条件表达式) {
    条件成立时执行的代码
}else if(条件表达式) {
    条件成立时执行的代码
}
...
   else {
     上述条件不成立时执行的代码
}
//if else if 多分支语句

2.三元表达式

语法格式
条件表达式? 输出1 : 输出2
//如果条件表达式为真，则返回输出一，否则返回输出二
例子：
let num = 10;
num > 5 ? num = 1 : num = 2
//因为num>5为真，执行num = 1，所以输出结果为1

3.switch语句

语法结构：
switch (表达式) { // switch里的表达式经常写成变量
    case value1: // 表达式必须全等于value值才会执行下面的代码
        执行语句一;
        break;   // 不添加break将会继续执行下一个case
    case value2:
        执行语句二;
        break;    
    case value3:
        执行语句三;
        break;
      .......
      default:   // 以上条件都不满足，则执行default下面的语句
        执行最后的语句;
}

五、js的循环

1.while循环

语法结构
while(条件表达式) {
    //要循环的代码;
}

do while循环语法：
do {
    //要循环的代码
} while(条件表达式)

while循环和do while循环不同之处在于do while循环先执行一次循环代码，然后再判断条件

2.for循环

语法结构
for(初始化变量;条件判断;变量改变) {
    //要循环的代码;
}
例如 
for(let i = 1;i <= 100;i++) {
    console.log(i);
}

循环嵌套：循环里再嵌套循环
例如：双重for循环
let str = '';
for(let i = 1;i<=10;i++) {
    //外层循环控制有多少行
    for(let j = 1;j<=10;j++) {
        //里层循环控制一行有几个
        str += '🎆' // 累加
        console.log(str)
    }
    str += '\n' // 每打印一行就换行
}

3.关键字

① continue关键字：立刻跳出本次循环，然后继续下一次循环

② break关键字：立刻跳出整个循环

六、数组

1.数组的定义

数组是一组数据的集合，存储在单个变量的优雅方式，可以存放任意类型的数据。

数组存放数据的建议：最好存放相同类型的数据

创建数组
let arr = []

2.数组的索引

索引用于访问数组元素的序号，大小从0开始。格式为arr[i]

let arr = [1,2,4,5,6];
arr[0]  // 1
arr[1]  // 2
arr[2]  // 4

tips:当arr[index]里index大于数组长度时，输出这个元素会返回undefined；或者是将一个值赋值给这个元素，那么数组长度将会变成index + 1，而且其他未赋值的位置为空

3.数组遍历

let arr = [1,2,3,4,5]
for(let i = 0;i<arr.length;i++) {
    console.log(arr[i]);
}
// 其中arr.length为数组的长度，因为数组的下标从0开始，所以i从0开始循环，循环到数组的长度-1，所以循环条件为i < arr.length 或 i<= arr.length - 1

4.增删数组元素

方法名说明返回值
push() 增末尾添加一个或多个元素返回新的长度
unshift() 增开头添加一个或多个元素返回新的长度
pop() 减删除数组最后一个元素返回删除元素的值并返回新的长度
shift() 减删除数组第一个元素返回删除元素的值并返回新的长度
splice(index,number1，str) 增，减删除一个或多个元素,index表示要删除元素的下标；number1表示从index处往后删除几个元素；str表示在index位置添加的元素返回删除元素的值

5.快速清空数组

let arr = [1,2,3,4];
//1.
arr.length = 0;

//2
arr = [];

//tips:快速添加数组元素的操作
arr[arr.length - 1] = 5; //添加数组最后一个元素为5

七、函数

1.函数的定义及声明

函数就是封装了一段可被重复调用执行的代码块

声明函数方式一
function 函数名() {
    要执行的代码
}
函数名() // 调用函数，函数不调用，自己不执行

声明函数方式二（匿名函数）
let 变量名 = function() {
    要执行的代码
}
变量名() // 调用函数

函数内有变量声明顺序，例
let a = 10;
function fn() {
    console.log(a) // 此时会报错
    let a = 20;
}

函数调用则无顺序
fn();
function fn() {
    console.log('hello') // 正常输出hello
}

2.函数的参数

function 函数名(形参1,形参2....) {
    代码
}
函数名(实参1,实参2....)

当函数形参与实参数目不符合时

①形参个数>实参个数

 function text(a, b) {
            console.log(a); // 此时a = 10
            console.log(b); // 此时b = undefined
        }
        text(10);

②形参个数<实参个数

 function text(a, b) {
            console.log(a); // 此时a = 10
            console.log(b); // 此时b = 20
        }
        text(10, 20, 30);

3.函数的返回值

function 函数名() {
    return 需要返回的结果
}
函数名() // 输出return后面的值

注意事项

①return终止函数，return后的代码不会被执行

②return只能返回一个值，如果返回多个值会报错，多个值用逗号隔开的话，什么都不会返回

③如果一个函数内有多个return，以第一个return的值为准

④函数有return则返回return后的值，如果没有return则返回undefined

4.作用域

作用域分为全局作用域、局部作用域（函数作用域）和块级作用域

①全局作用域

整个script标签或者是一个单独的js文件

在全局作用域里声明的变量就叫做全局变量，在任意地方都可访问

②局部作用域

函数内部就是局部作用域，所以局部作用域又被称为函数作用域

在局部作用域里声明的变量就叫做局部变量，只有在局部作用域里才能访问

在函数内部没有声明就直接赋值的变量也属于全局变量

③块级作用域

if while for等大括号里就叫做块级作用域

用let声明变量
{
    let i = 9;
}
console.log(i) // 出错 

用var声明变量
{
    var i = 9;
}
console.log(i) // i = 9

es6之前js只有全局作用域和局部作用域，没有块级作用域，所以用{}限定不了var声明变量的范围。
所以现在采用let来声明变量

tips：作用域链采取就近原则

let i= 20;
function fun1() {
    let i = 10;
    fun2();
}
function fun2() {
    console.log(i);
}
fun1();
// 此时输出结果为20,就近原则只看从函数表达式出发的位置，而不是函数调用式出发的位置

5.自执行函数(了解)

语法结构
(function(){})() or (function(){}())

作用：创建一个独立的作用域，多个自执行函数用;隔开

八、对象

1.对象的创建与使用

// 创建对象
let obj = {
    name: '张三',
    sex: '男',
    sayHello: function() {
        console.log('hello')
    }
}

// 使用对象
console.log(obj.name)
console.log(obj['name'])
// 两种使用方法等价

tips1：

①中括号里没有引号表示的就是变量，如果里面的变量名是关键字,则输出undefined。 如果里面的变量名不存在，程序则会报错。

②中括号里加引号和正常引用一样，引号里变量名不存输出undefined

let x = 'name'
let obj = {
    name: '张三',
    sex: '男',
    sayHello: function() {
        console.log('hello')
    }
}
console.log(obj['named']) // 输出undefined
console.log(obj[name]) // 输出undefined，name是关键字
console.log(obj[named]) // 报错，因为不存在这个变量名
console.log(obj[x]) // 输出张三，因为没加引号，x是变量，x = 'name',所以输出的是张三

tips2：对象有序，不可以先声明属性再声明对象

obj.name = '李四'; // 此时会报错
let obj = {
    name: '张三',
    sex: '男',
    sayHello: function() {
        console.log('hello')
    }
}

2.对象的增加修改元素

let obj = {
    name: '张三',
    sex: '男',
    sayHello: function() {
        console.log('hello')
    }
}
obj.name = '李四' // 此时就是将name属性值修改成李四
obj.height = 180 // 此时就是添加新的属性值height为180

对象修改和增加的格式都是 对象名.属性名 = 修改或添加的值；当这个属性名原来就有时，就会修改里面的值；当这个属性名原来没有，就会添加这个属性名

3.对象删除元素

let obj = {
    name: '张三',
    sex: '男',
    sayHello: function() {
        console.log('hello')
    }
}
delete obj.name; // 此时就删除了name这个属性，再输出这个属性就是undefined

4.对象遍历

for ... in语句用于对数组或对象的属性进行循环操作

语法格式
for(let 变量 in 对象) {
    
}

例
let obj = {
    name: '张三',
    sex: '男',
    sayHello: function() {
        console.log('hello')
    }
}
for (let k in obj) {
    console.log(obj[k]);
}
k为属性名，obj[k]为属性值

5.内置对象

Math.PI 圆周率
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 就近取整，四舍五入
Math.abs() 绝对值
Math.max() 返回最大值
Math.min() 返回最小值
Math.pow() 求幂 // Math.pow(5,2) → 5^2
Math.random() 返回一个随机的小数，区间为[0,1)

tips:返回一个n到m范围内随机的数字写法

Math.round(Math.random() * (max - min) + min)

avatar
文章
阅读
粉丝