wb前端（第五，六天）

1.js引入方式

内部

外部

 

2.输入输出语句：

输入语句：

prompt（'请输入您的密码：'）

打印到页面：（可以识别标签）

document.write('内容')

document.write('<strong>内容<strong>')（可以识别标签）

控制台输出语句：

conso.log('输出内容')

3.变量

盒子---存储数据的容器  数据本身不是变量

变量的声明：

let 变量名

var 变量名

变量的初始化：

let uname=prompt（'请输入你的用户名：'）

console.log(uname)

同时定义多个变量：

let uname='zs'，age=21

console.log(uname,age)

4.变量命名规范：

1、有效符号（大小写字母、数字、下划线、$）

2、关键字、保留字不能用于变量命名

3、不以数字开头

4、尽量用有意义的变量名

5、驼峰命名法  userName

let和var的区别

1、let声明的变量不能重复声明，var可以

2、let声明的变量不能变量提升，当使用var声明变量时，改变量会被提升到作用域的顶端，但是赋值部分不会提升。

3、let是块状作用域，var是函数作用域，在函数里使用var声明了一个变量，那么这个变量在整个函数内都是有效的，let只在作用域里有效。例如在for循环里用var声明一个变量，在for循环外也是可以使用的，用let声明一个变量，在for循环外面是不能被访问的。

6.const常量

常量名大写  常量无法更改

 

7.数据类型

js是弱数据类型语言，只有赋值之后，才知道是什么数据类型

数据类型

字符串类型

字符串拼接用”+“

模板字符串

布尔类型

只有两个值，true和false

.运算符

赋值运算符

let a=21

a=33

a +=4  -- a=a+4    a -=3 -- a=a-3

a *=2 -- a=a*2       a /=2 -- a=a/2

比较运算符

==（隐式转换）只比较数值，将字符串转换为数字类型后进行比较

=== 即比较数值，也比较类型

逻辑运算符

&&    ||    ！

.单分支语句

if（条件）{

执行的代码

}

双分支语句

if（条件）{

执行的代码

}

else {

执行的代码

}

多分支语句

.三元运算符

判断条件 ？ 条件成立时执行的语句：条件不成立时执行的语句

switch

continue，break

continue：跳出本次循环

break：跳出循环

 

数组遍历

数组的操作

通过索引下标给对应元素重新赋值

concat合并数组

push：在数组末尾添加元素

arr.push('内容')

unshift：在数组首部添加元素

语法：数组.unshift(元素, 元素, ...) - 返回新数组的长度

let arr = ['a', 'b', 'c'];

let l = arr.unshift('d')     arr.unshift('d')表示添加元素

console.log(arr);

console.log(l);             检查数组长度            

如果需要添加多个元素直接在括号内添加用逗号隔开即可

shift：将数组开头的元素删掉

语法：数组.shift() - 返回被删掉的元素

let arr = ['a', 'b', 'c'];

let ele = arr.shift()

console.log(arr);

console.log(ele);

pop：将数组的最后一个元素删除

语法：数组.pop() - 返回被删掉的元素

 let arr = ['a', 'b', 'c'];

 let ele = arr.pop()

 console.log(arr);

 console.log(ele);

splice：给数组的任意一个位置添加 、修改、删除

添加

语法：数组.splice(开始下标, 删除个数, 新元素, 新元素, ...) - 返回所有被删掉的元素组成的新数组

let arr = ['a', 'b', 'c', 'd'];

let brr = arr.splice(1, 0, 'e', 'f')

console.log(arr);  此处输出结果为'a', 'e', 'f'， 'b', 'c', 'd'

console.log(brr);  此处返回值为删除元素个数，因未删除任何元素，所以返回值是0

修改

语法：数组.splice(开始下标, 删除个数, 新元素, 新元素, ...) - 返回所有被删掉的元素组成的新数组

let arr = ['a', 'b', 'c', 'd'];

let brr = arr.splice(1, 2, 'e', 'f')

console.log(arr);

console.log(brr);  此处返回值为删除元素个数，所以返回值是2

删除

语法：数组.splice(开始下标, 删除个数) - 返回所有被删掉的元素组成的新数组

let arr = ['a', 'b', 'c', 'd'];

let brr = arr.splice(1, 2)

console.log(arr);

console.log(brr);  此处返回值为删除元素个数，所以返回值是2

// 语法：数组.splice(开始下标, 删除个数, 在删除位置放入的1个或多个元素) - 返回所有被删除元素组成的新数组

reverse：翻转数组

语法：数组.reverse() - 返回当前数组

let arr = ['a', 'b', 'c']

let brr = arr.reverse()

console.log(arr);  输出结果为 ['c', 'b', 'a']

console.log(brr);

console.log(arr === brr); // true

join：将数组中所有元素通过指定的链接符，连接成一个字符串

语法：数组.join(连接符) - 返回连接后的字符串

let arr = ['a', 'b', 'c']

let str = arr.join('-')

let str = arr.join('') // 将所有元素直接拼接在一起

let str = arr.join() // 如果省略连接符，默认使用逗号连接

console.log(str);

slice：截取数组

语法：数组.slice(开始下标, 结束下标) - 返回被截取出来的一段组成的数组，结果不包含结束下标对应的字符

let arr = ['a', 'b', 'c', 'd', 'e', 'f']

let brr = arr.slice(2, 5)

let brr = arr.slice(2) // 如果省略结束下标，就截取到数组的末尾

let brr = arr.slice() // 在省略结束下标的基础上，还可以省略开始下标 - 从开头截取到末尾

console.log(brr);

console.log(arr);

console.log(arr === brr); // false

20.二维数组

函数

函数必须进行调用，才会执行

函数要有返回值，一定要添加return关键字，否则返回值为undefined

匿名函数

函数可以分为具名函数和匿名函数

匿名函数：没有名字的函数，无法直接使用

函数表达式

立即执行函数

值传递，引用传递

值传递

按值传递，传递完后俩个变量各不相干！

此返回值为10--20

引用传递

地址传递、两个变量共享堆地址、相互影响

箭头函数

语法：（参数1，参数2）=>{函数体}

箭头函数可以没有函数名，可以将箭头函数赋值给一个变量，通过变量名调用函数；也可以直接使用箭头函数。

.递归

递归是解决问题的方式，将大问题分解为小问题，直到问题无法进行分解，再进行问题的解决

递归式函数的两个条件

1、基线条件：问题分解为最小问题时

2、递归条件：将问题继续分解

数组遍历

字符串的常见方法

split（）：把字符串分割成一个字符串数组，从参数指定的地方分割字符串

substring（x，y）：从中截取一段字符串，在组成一个新的字符串

截取方式：顾头不顾尾，以下标零开始计数，包含x，不包含y

startsWith：用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false

endsWith：用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false

includes：用于判断字符串是否包含指定的子字符串，如果找到匹配的字符串则返回 true，否则返回 false。

Math内置对象

Math拥有一些数学常数属性和数学函数方法，Math不是一个函数对象

Math.E：欧拉常数也是自然对数的底数（或称为基数），约等于2.718

Math.PI：表示一个圆的周长与半径的比例，约为3.14159

Math.ceil：向上取整

Math.floor：向下取整

Math.abs：返回指定数字的绝对值

Math.pow（x，y）：返回x的y次幂

Math.sqrt:开平方根

Math.random：随机数

Math.floor(Math.random()*(max-min+1))+min  //得到一个两数之间的随机整数，包括两个数在内

日期内置对象

Date（）对象是一个构造函数，创建一个新的Date对象唯一方法是通过new操作符

如果没有参数，返回当前系统的时间

date.getFullYear(）：获取当年

date.getMonth()：获取当月（0-11）

date.getdate()：获取当天日期

date.getDay：获取星期几（周日0-周六6）

date.getHours()：获取当前小时

date.get.Minutes()：获取当前分钟

date.getSeconds()：获取当前秒钟

通过css选择器获取（'字符串'）

2、document。querySelectorAll将所有匹配的元素全部获取到，并存放到伪数组

3、其他

修改元素内容

1、获取元素

2、操作

.innerHTML=内容（可识别标签）

.innerText=内容（只识别文本）

修改元素属性

1、获取对象

2、改元素属性 -- 对象.属性=值

修改元素样式属性

1、获取元素

2、通过style修改样式

定时器

setTimeout\setInterval --- 定时器

setTimeout：某段代码或函数在多久后执行

语法：setTimeout(code || function,time(ms)) 返回值是一个整数，代表定时器码

clearTimeout：清除定时器

setInterval：间隔一段时间，将代码或者函数执行一次

clearInterval：清除定时器