JavaScript笔记

第一章：初识JavaScript

 js语言由三部分组成：基本语法，浏览器对象模型，文档对象模型

1.1JavaScript初体验

script标签：在html中输入script可以编写JavaScript代码，如以下代码

1.2输入输出语句

输出语句

1. window.alert()：用于在浏览器中弹出警告框，如以下代码

2. document.write()：用于在网页中输出内容，如以下代码

3. console.log()用于在控制太中输出信息，如以下代码

输入语句

1. prompt()在浏览器中弹出输入框，用户可以输入内容，如以下代码

2. confirm()在浏览器中他弹出确认框，如以下代码

1.3JavaScript代码引入方式

1. 行内式，如下代码

2. 嵌入式

3. 外链式：外链式需要创建一个JavaScript文件

第二章：js的基语法

2.1变量

2.1.1变量声明与赋值

使用var关键字声明一个变量

为变量赋值

在声明的同时赋值

2.1.2let声明变量

let声明变量是ES6新语法，let在声明变量时，在一个代码块内，不允许变量取一样的名字，let变量可以被更改以最后一个为准

2.1.3const声明变量

使用var和let声明的变量可以多次被修改，其值只与最近一次赋值一致， 而使用const声明的变量，在一整个运行过程中不能被修改初值、

2.2数据类型

2.2.1基本数据类型分类

简单的数据类型储存在栈内存中，复杂的数据类型的内容存储在堆内存中，地址存储在栈内存中

2.2.2基本数据类型

boolean-布尔：

布尔型也被称为逻辑类型或者真假类型，布尔型只能够取真（true）和假（false）两种数值，除此之外，其它的值都不被支持

number-数字型：

Number 类型用来表示整数和浮点数，最常用的功能就是用来表示10进制的整数和浮点数。

Number表示的数字大小是有限的，如果超过了这个范围，则会返回 ±Infinity。

最大值：+1.7976931348623157e+308
最小值：-1.7976931348623157e+308
0以上的最小值：5e-324
特殊的数字：

Infinity：正无穷
-Infinity：负无穷
NaN：非法数字（Not A Number）
其它的进制：

二进制：0b 开头表示二进制，但是，并不是所有的浏览器都支持
八进制：0 开头表示八进制
十六进制：0x 开头表示十六进制

string-字符串类型：

String用于表示一个字符序列，即字符串。字符串需要使用 单引号 或 双引号 括起来。

转义字符：

undefined-未定义类型：

Undefined 类型只有一个值，即特殊的 undefined。

在使用 var 声明变量但未对其加以初始化时，这个变量的值就是 undefined。

null-空型：

空型只有一个特殊null值，表示变量没有指向任何对象

2.2.3数据类型检测

当不确定一个变量或值是一个什么类型的数据时，就用typeof操作符进行数据类型检测，如以下代码

2.2.4基本数据类型转换

1.将数据转换为布尔类型转换时，代表空(null)或者否定的值（空字符串、数字0、NaN、null和unfined）会转换成false。其他的值就会被转换成true，如以下代码

2.将数据转换为数字型数据number（） 如以下代码，NaN不是一个数

3.将数据转换为字符串类型string（）

将其它数值转换为字符串的方式有三种：toString()、String()、 拼串。

方式一：调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，但是注意：null和undefined这两个值没有toString()方法，如果调用它们的方法，会报错。

var a =123;
a = a.toString();
console.log(a);
console.log(trpeof a);

方式二：调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”。

var a = 123;
a = String(a);
console.log(a);
console.log(typeof a);

var b = undefined;
b = String(b);
console.log(b);
console.log(typeof b);

var c = null;
c = String(c);
console.log(c);
console.log(typeof c);

方式三：为任意的数据类型 +""

2.3运算符

运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果。

比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回（number string boolean undefined object）

2.3.1算术运算符

算术运算符用于表达式计算

加号运算符，如以下代码，c=30

let a = 10;
let b = 20;
let c = a+b;
console.log(c); //30

减法运算符，结合以上ab的值，c-a=20

console.log(c - a); //20

乘法运算符，结合以上的值，a*b=200

console.log(a * b); //200

除法运算符，b/a=2

console.log(b / a); //2

取模运算，c%b=10

console.log(c % b); //10

幂运算，2  ** 10=1024

 console.log(2 ** 10); //1024

自增运算 (前自增)

let m = 10;
let n = 20;
m = ++n;
console.log(m); //21
console.log(n); //21

自增运算 (后自增)，结合以上m    n值,m=21,n=22

m = n ++;
console.log(m);
console.log(n);

自减运算 (前自减),m=21,n=21

m = --n;
console.log(m); //21
console.log(n); //21

自减运算 (后自减)，m=21,n=20

m = n--;
console.log(m); //21
console.log(n); //20

2.3.2字符串运算符

隐式转换：

当两个数据类型不同时，js会按照规定的规则进行转换。

字符串运算符：

当加号遇见字符串，加号做拼接使用，如以下代码

2.3.3赋值运算符

加并赋值，等同于a = a + b

减并赋值，等同于a = a - b

乘并赋值，等同与a = a * b

除并赋值，等同于a = a / b

取模并赋值，等同于b = b % a

2.3.4比较运算符

比较运算符用来比较两个值是否相等，如果相等会返回true，否则返回false。

==相等运算符：当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后在比较，如下代码

console.log(5 == "5"); //true

===全等运算符：用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回false

console.log(5 === "5"); //false

!= 不相等：不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false，不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

console.log(5 != "5"); //false

!== 不全等：用来判断两个值是否不全等，它和不等类似，不同的是它不会做自动的类型转换，如果两个值的类型不同，直接返回true

console.log(5 !== "5"); //true

==和!=在比较不同数据类型时，会将比较的数据类型转换为同一类型

===和!==则不会转换

2.3.5逻辑运算符

&& 逻辑与运算符 一假则假、如下代码

console.log(true && true); //true
console.log(false && true); //false
console.log(true && false); //false
console.log(false && false); //false

|| 逻辑或运算符 一真则真

console.log(true || true); //true
console.log(true || false); //true
console.log(false || true); //true
console.log(false || false); //false

！ 逻辑非运算符也叫取反运算符 真作假来假亦真

console.log(!true); //false
console.log(!(100<0)); //true

2.3.6三元运算符

条件表达式 ? 表达式1 : 表达式2

如果条件表达式的值为true,则返回表达式1的执行结果

如果条件表达式的值为false,则返回表达式2的执行结果

2.3.7运算符优先级

小括号 > 一元运算符 > 比较运算符 > 逻辑运算符(逻辑与>逻辑或) > 赋值运算符

2.4流程控制

2.4.1选择结构

1.if语句（单分支语句），if(条件表达式){代码块}，代码如下

let age =  prompt("请输入你的年龄");
console.log(age);
if (age >= 18) {
document.write("恭喜你成年了")
}

2.if....else语句（双分支语句），if(条件表达式){代码块}else{代码块2}，代码如下

let score =  prompt("请输入你年龄");
console.log(score);
if (age >= 60) {
document.write('你及格了')
} else {
document.write('准备补考吧')
}

3.if...else if...else语句，代码如下

let cj = prompt("请输入成绩")
if (cj >= 90) {
document.write("优秀")
else if (cj >= 80) {
document.write("不错")
} else if (cj >= 70) {
document.write("还行")
} else if (cj >= 60) {
document.write("一般")
} else{
 document.write("废物")
}

4.switch语句  break：终止循环，代码如下

let subject = +prompt("请输入你想要选择的专业。1-区块链专业,2-ui专业,3-土木专业")
switch(subject){
case 1:
document.write('恭喜你选择了本世纪最伟大专业');
break;

case 2:
document.write('恭喜你和人工智能抢饭碗')
break;

case 3:
document.write('恭喜你一个女的看不见')
break;

default:
document.write("请重新选择")
}

2.4.2循环结构

1.for语句 

for(初始化变量;条件表达式;操作表达式){循环体}，代码如下

// 需求：打印0-100的数
for(let i = 0; i <= 100; i++){
console.log(i);
}

for(let i = 0; i <= 100; i++){
if(i % 2 == 0)
document.write(i)
}

2.while语句

while（条件表达式）{循环体}，代码如下

var i = 0;
while(i <=100 ){
document.write(i)
i++;
}

练习：

// 弹出一个确认框："我喜欢你，我们在一起好吗"
    
let res = confirm("我喜欢你,我们在一起好吗")
console.log(res); // 确定键为true    取消键为false
while(!res) {
confirm("我喜欢你,我们在一起好吗")
}
confirm("那我们什么时候结婚")

3.do...while语句

do {循环体} while {条件表达式}，代码如下

var i = 0;
do{
console.log(i);
i++
}while(
i <= 100
)

练习：

// 需求:通过do...while...循环语句求出2+4+6+...+100的值。
var i=2,sum =0;
do{
sum += i;
i = i+ 2;
}while(i<=100)
document.write(sum);

2.4.3跳转语句

 1.break，break语句用于跳出整个循环，代码如下

for(var i = 1; i<=5; i ++){

if (i==3){
console.log("白雪公主吃到了毒苹果");
break;
}
console.log("白雪公主吃了第"  + i + "个苹果");
}

2.continue 结束当前循环

for(var i = 1; i<=5; i ++){
if (i==3){
console.log("白雪公主吃到了虫苹果");
continue;
}
console.log("白雪公主吃了第"  + i + "个苹果");
}

2.4.4循环嵌套

1.需求：打印一排星星

for (let i = 1; i<5; i++){

for(let e = 1; e<=4; e++){
document.write('⭐')
}
document.write('</br>')
}

2.需求打印金字塔

let czq = +prompt("请输入金字塔层数")
for (let a=0;a<czq;a++){
for (let b=1;b<czq-a;b++){
document.write("&nbsp&nbsp&nbsp")
}
for (let c=0;c<2*a+1;c++){
document.write('❤')
}
document.write("</br>")
}

 3.需求：打印金字塔带空格的

if(isNAN(n)){
prompt('请输入行数')
}
var str =''
//循环了列数
for (var i = 1; i <= n; i++){

//循环了每一行星星前的空格
var black  = n-i
for(var k=0;k<black;k++)
str +='  '

//循环每一行的星星数
var h=2*i-1;
for(var j=1;j<=h;j++){
str +="⭐"
}
str += "\n"
}
console.log(str);

第三章：数组

3.1数组的基本操作

【创建数组】

1.以数组字面量创建数组

var array = [1,2,3,4,5]
console.log(array); //[1,2,3,4,5]

2.以new Array(方式创建数组)

var array1 = new Array(1,2,3,4,5)
console.log(array1); //[1,2,3,4,5]

【数组构成】

数组的值可以是任意类型的数据

 var array2 = ['string',123,null,undefined,NaN,array]
console.log(array2);  //['string',123,null.undefined, NaN,Array(5)]

【数组的长度】

数组名.length获取数组长度

console.log(array2.length);  // 6
console.log(array.length);  // 5

【访问数组】

 "数组的索引"也称为"数组的下标"，以数字表示，默认是从0开始以此递增

console.log(array[3]); //4
console.log(array[4]); //5
console.log(array[0]);

【更改数组】通过下标更改

var array4 = [1,2,3,4,5]
array4[0] = 0
console.log(array4); //[0,2,3,4,5]

【新增数组】通过下标新增

array4[7] = 10
console.log(array4);//[0,2,3,4,5, empty x  2,10]
console.log(array4.lenght); //8

【删除数组】利用delete关键字删除

delete array4[7]
console.log(array4); //[0,2,3,4,5,empty,empty,empty]
console.log(array4.length); // 8

【修改元素长度】

array4.length = 5
console.log(array4); //[0,2,3,4,5]
array4.length = 20
console.log(array4); //[0,2,3,4,5,empty x 15]

【新增数组方法】

在数组前新增元素unshift

var arr1 = [4,5,6]
arr1.unshift[1,2,3]
console.log(arr1); // [1,2,3,4,5,6]

在数组后新增元素push

arr1.push(7,8,9)
console.log(arr1);

3.2遍历数组

1.for(初始化变量;条件表达式;操作表达式){循环体}

var array = ["jack", "lily", "tom", "tony"]
for (var i = 0; i<array.length; i++) {
console.log(array(i));
// jack
// lily
// tom
// tony
}

2.列如：遍历[1,2,3,4,5,6,7,8,9,10]，代码如下

var array = [1,2,3,4,5,6,7,8,9,10]

for(var i = 0; i<array.length; i++){
console.log(array(i));
}

3.需求：求出数组最大值，最小值，代码如下

let scrore = [60,78,90,55,32,97,40,10,86]
let max = min =scrore[0] //假设最高分是60分
/ // 遍历数组
for(let i =1; i<scrore.length; i ++){
//求最大值
if(scrore[i]>max){ 
max = scrore[i]
}
//求最小值
if (scrore[i]<min) { 
 min = scrore[i] 
}
}
console.log(max);
console.log(min);

4.需求：将数组["一"、"二"、"三"、"四"、"五"]反转为["五"、"四"、"三"、"二"、"一"]

let arr  = ["一","二","三","四","五"]
let arr1 = []
for(let i =arr.length-1; i>=0; i--){
arr1.push(arr[i])
}
console.log(arr1);

3.3二维数组

二维数组：数组元素的值是一个一维数组，代码如下

 var arr2 =[
     [1,2,3],
     [4,5,6],
     [7,8,9],
]

练习：将数组arr2中的每一个元素一一打印出来

for(var i = 0; i<arr2.length; i++){
console.log(arr2[i]);
for(var j =0 ; j< arr2.length; j++)    
console.log(arr2[i][j]);
}

第四章：函数

 4.1初始函数

【函数定义】

 函数用于封装完成语段特定功能的代码，想当于将一条或多条语句组成的代码块封装起来，

 用户在使用时只需要关心参数和返回值，就能完成特定的功能。

【内置函数】

isNaN是判断内容是否位数字，非数字时取值为true，为数字时取值类型为false

console.log(isNaN("number")); //ture

Number()可以将字符串类型转换为数字类型

console.log(Number("15.99")); // 15.99

parseInt()将小数点前面的内容转化为数字类型

console.log(parseInt('15.99')); //15
console.log(parseInt('15.abc')); // 15

【自定义函数】

提高代码的复用性，减低程序维护的难度

【函数格式】

function name(params) {  
}

function指这是一个函数语句
name指函数名
）内放参数
{}内放函数的具体功能

【无参函数】

function demo() {
console.log('我是一个函数');
}

调用函数
demo()
demo()
demo()

【有参函数】

function sum(a,b){
console.log(a+b);
}
sum (100,200)

练习：定义一个函数total，调用函数时传入price价钱，num数量，就可以计算并在页面上打印函数的总价all。

function total(price,num) {
var all = price*num
document.write("价格为"+all+"元")
}
total(99,2)

【函数的返回值】

函数的返回值是指在函数调用后获得的数据,这个数据需要通过return关键字返回，让函数外可以拿到

function total(price,num) {
return price*num
}
console.log(total1(99,12));

函数total实在函数内部打印乘积，每次调用total函数就会执行一次打印的命令，函数total1是在函数内部生成一个新的数值并通过return返回，在函数外拿到return返回数据并打印

 练习：定义一个函数，maxNum，求出任意两个最大值

function maxNum(i,y) {
if (i>y) {
return i
} else{
return y
} 
}
console.log(maxNum(5,6));
console.log(maxNum(7,8));

argument对象

在开发时，如果不确定形参的个数，可以不设置形参，在函数体中直接通过argument对象获取函数调用时传递的形参

function num2() {
console.log(arguments);
}
num2(1,2,3,4,5) // [1,2,3,4,5]
num2(1,2,3) // [1,2,3]

4.2函数进阶

【函数表达式】

函数表达式是指函数值赋给变量的表达式

let num = 1;
console.log(num); // 1

let fun = function sum(num1,num2){
 console.log(num1+num2);
}

定义了函数表达式之后，不能函数名调用函数
sum(1,2)
需要通过变量名调用函数
fun(1,2) // 3

【匿名函数】

当使用函数表达式时，可以删除函数的名字

let fun1 = function (num1,num2){
            console.log(num1+num2);
        }
        fun1(1,2) // 3
        let fun2 = function(num1,num2){
            return num1+num2
        }
        console.log(fun2(1,2));

 【箭头函数】

删除function关键字，在参数()和函数体{}之间放上 =>

let fun3 = (num1,num2) => {
            return num1+num2
        }
        console.log(fun3(1,2));

 当函数体只有一句话时可以省略return返回值和大括号

let fun4 = (num1,num2) => num1+num2
console.log(fun4(1,2));

 当函数只有一个参数时，可以省略小括号

let demo = a => a+a
console.log(demo(1));

 4.3回调函数

回调函数，就是在a中，传入一个函数b作为参数，参数函数b就是回调函数，代码如下

function cal(num1,num2,fn) {
            return fn(num1,num2)
        }
        var num = cal(10,20,function(num1,num2){
            return num1+num2
        })
        console.log(num); // 30


        console.log(cal(30,40,function(num1,num2){return num1+num2})); // 70

4.4函数作用域

全局作用域：全局变量拥有全局作用域

 全局变量：在函数体外声明的变量或在函数体内省略var关键字声明变量

var name = "张三"
        let age = 18;
        function fun(){
            console.log(name);
            console.log(age);
        }
        fun()
        console.log(name);
        console.log(age);

局部作用域：局部变量或者函数变量拥有局部作用域

局部变量：在函数体内利用var关键字声明的变量

function fun1(){
            var sex = "men"
            console.log(sex); // men

            sex1 = "wowen" // sex是省略var声明的变量，属于全局变量
        }
        fun1()
        // console.log(sex); // not defined
        console.log(sex1);

块级作用域：被块级变量所拥有，在分支语句或循环大括号中定义的设置，一般一个花括号{}为一个代码块

块级变量：let关键字声明变量

 for(let i = 0; i < 5; i++){
            console.log("循环内部"+i);
        }
        console.log("循环外部"+i); //not defined

4.5定时函数

定时器函数是异步代码，需要等全部同步代码执行完执行

setTimeout(() => {}, timeout);

用来设置某个函数在多少毫秒之后执行

setInterval(() => {}, interval);

用来设置某个函数在多少时间间隔后反复执行

4.6嵌套函数与函数作用域链

var i = 10 // i是全局变量，全局变量可以在函数内外被访问到

function fn1() {

            console.log(i); // 函数内可以访问到全局变量i

            let n = 20; // n被声明在函数内部，属于函数变量

            console.log(n); // n是函数变量，在函数作用域里可以拿到n的值
        }

        console.log(i); // 函数外也可以访问到全局变量i

        // console.log(n); // 函数外部拿不到函数内部声明的变量

        console.log(n); // 函数外可以去得到全局变量n的值

        fnl()

let n = 30 // n是全局变量


function fn2() {
            let n = 40
            
            console.log(n); // 当既有全局变量n，又有局部变量n，就近取值

            // console.log(n); // 在函数内部可以拿到12行的值
        }
        fn2()

使用函数

func()

变量访问规则:就近原则(处于同一作用域)

当在一个作用域中访问变量时，首先看当前作用域有没有声明。

如果有则访问当前作用域的变量，如果没有则向上层作用域查找

直到达到顶层作用域没有变量声明时，则程序报错。

 4.7闭包函数

闭包（close）函数：是一种代码形式，内部函数访问外部函数的局部变量

举例：js函数outer中有一个函数inner，函数inner访问了函数outer定义局部变量demo，此时就产生了闭包

变量所在的函数就是闭包函数，在这里，outer是闭包函数

闭包的作用：可以将变量以函数的形式保护起来，解决变量污染问题。

 function fn(){
  let name = "zhangshan"
 }
  function fn1() {
  let name = "zhangsan"
 }

 let count = 20 
setInterval(function () {
 console.log(count++);
 },1000)

4.8递归函数

一个函数间接或直接地调用自身

递归写法：

function getsum2(n){
            //当n=1时
            if(n==1){
                return 1
            }
            return n + getsum2(n-1)
        }
        console.log(getsum2(6));

//递归过程
getsum = 5

return 5+getsum2(4)
 return 5 + 4 + getsum2(3)
return 5 + 4 + 3 +getsum2(2)
 return 5 + 4 + 3 + 2 + getsum2(1)

 第五章：对象

5.1介绍对象

对象：（dobject）是一种复杂数据类型

（简单数据类型存储再栈中，复杂数据的内同存储在栈中，地址存储在堆中）

对象形式：以链值对的形式储存多个数据

使用简单数据类型储存数据

1.使用简单数据类型储存数据

弊端：沉余 好处：阅读性高

 let name = "张三"
        let age = 18;
        let sex = "man"

2.数组

弊端：阅读性不高

let peple = ["张三",18,"man"]

3.对象

 let obj ={
            name : "张三",
            sex : "man",
            age : 18,
            gfs : ["小美","小丽","小爱"],
            func:function(){
                console.log("三个");
            }
        }

3.1对象查询

 console.log(obj);
console.log(obj.name);
console.log(obj.sex);
console.log(obj.age);
console.log(obj.gfs);
console.log(obj.func);//查询函数
console.log(obj.func());//打印内容

3.2对象新增

obj.bf = "李四"
console.log(obj);
console.log(obj);

3.3对象修改

如果对象原有属性名时修改，没有则是新增

obj.bf = "王五"
console.log(obj);

3.4对象删除

delete obj.gfs
console.log(obj);

3.5对象遍历

for (let key in 对象名){对象名[key]}

for(let key in obj){
console.log(key);//打印属性名
console.log(obj.name);//打印属性值
}

5.2Math对象

Math对象是js中的一个内置对象，提供了一些数学常数和函数

圆周率：Math.PI

console.log(Math.PI); // 31.400000000000002
const C = 2*Math.PI // 3.141592653589793
console.log(C); // 6.283185307179586

 绝对值：Math.abs()

console.log(Math.abs(-3)); //3
console.log(Math.abs(3)); //3

四舍五入：Math.round()

 console.log(Math.round(3.3)); // 3
console.log(Math.round(-3.3)); // -3
console.log(Math.round(-3.6)); // -4

向上取整：Math.ceil()

console.log(Math.ceil(1.4)); // 2
console.log(Math.ceil(-1.4)); // -1

向下取整：Math.floor()

console.log(Math.floor(1.4)); // 1
console.log(Math.floor(-1.4)); // -2

生成一个0-1之间的随机小数：Math.random()

console.log(Math.random());
console.log(Math.random());

console.log(Math.round(Math.random()*100)); // 随机生成一百以内整数

练习案例：

需求：由100个编码的双色球。

抽到的数字是1：是一等奖

抽到的数字是2，3：是二等奖

抽到的数字是4-7：是三等奖

抽到的数字是8-100：是谢谢参与

btn.onclick = function(){
            // 设置抽奖等级
            var level = 0;

            // 设置一个抽奖结果
            var number = Math.ceil(Math.random()*100)
            
            if (number == 1)
            level = 1;
            if (number == 2 || number ==3)
            level = 2;
            if (number > 3 && number < 8)
            level = 3;
            if (level){
                alert("恭喜你，获得了" +level + "等将")
            }alert("谢谢参与")
        }

5.3Date对象

Date对象用于处理日期和时间

获取年份

console.log(new Date().getFullYear()); // 2024

获取月份

console.log(new Date().getMonth()); // 范围是0-11

获取日期

console.log(new Date().getDate()); // 22

获取星期

console.log(new Date().getDay()); // 范围是0-6，0是星期天

获取小数

console.log(new Date().getHours()); // 17

获取分钟

console.log(new Date().getMinutes()); // 11

练习：在页面中显示“今天是2024年5月22日。星期三”

console.log("今天"+new Date().getFullYear()+"年"+
 (new Date().getMonth()+1) +"月"+
new Date().getDate()+"日"+"星期"+
new Date().getDay());

5.4Array对象

Array对象是js中用于构建和操作数组的基本操作数据结构

创建数组

var course = ["web","java"]

push[]:在数组末尾添加元素

course.push ["js"]
console.log(course); // ["web","java","js"]

unshift（）：在数组前添加元素

course.unshift ("计算机基础")
console.log(course); // ["计算机基础","web","java","js"]

pop():删除数组最后一个元素

 course.pop()
console.log(course); //["计算机基础","web","java"]

shfit()：删除数组中第一个元素

course.shift()
console.log(course); //["web","java"]
course .splice(1,1)
console.log(course);
course.splice(1,0,"js","vue","node")
console.log(course);

reverse():颠倒数组中元素的索引

var arr = [1,2,3,4,5,6]
// splice(startIndex,deleteCount) splice(起始下标，删除的树木)
arr .splice(3,3) //表示从下标3（数字4）开始，删除3个数字
console.log(arr); //[1,2,3,7]
arr.splice(2,3)
console.log(arr); //[1,2]
// splice(startIndex,deleteCount,addIteml,addItem2,addItem3)
arr.splice(2,0,3,4,5,6,7)
console.log(arr); //[1,2,3,4,5,6,7]

arr.reverse()
console.log(arr);

sort()：对数组进行排序

var demo =[23,57,21,35,64,54,6,7]

 // 升序排序
demo.sort(function(a,b){
return a-b
})
console.log(demo);

 // 降序排序
demo.sort(function(a,b){
return b-a
})

获取数组元素索引的方法

 var student = ["张三","李四","王五","赵六"]
       // indexof(element)返回指定元素的下标
       console.log(student.indexOf("李四")); // 1
       console.log(student.indexOf("懒洋洋"));  // -1
       // lastIndex0f(element)返回指定元素在数组中最后一次出现的下标，没有则返回-1
       console.log(student.lastIndexOf("张三")); // 0

将数组转化为字符串

toString()：用逗号分隔数组中每个元素

 oin()：将数组中所有元素连成一个字符串，默认用逗号隔开

console.log(student.toString()); //"张三","李四","王五","赵六"
console.log(student); //["张三","李四","王五","赵六"]
console.log(student.join()); //"张三","李四","王五","赵六"
console.log(student.join("")); //"张三李四王五赵六"
console.log(student.join("-")) //"张三-李四-王五-赵六"
console.log(student.join("/")) //"张三/李四/王五/赵六"

数组类型检测

console.log(Array.isArray(student)); // true
       var obj = {
        name:"张三"
       }
       console.log(Array.isArray(obj)); //false

5.5Sting对象

Sting对象在js中式用于处理文本数据的数据类型

根据字符串返回下标 （索引）

indexOf()：返回元素字符串中第一次出现的下标，没有则是-1

lastIndexOf()：返回元素在字符串中最后一次出现的下标，没有则是-1

console.log(str.indexOf("o")); // 4
console.log(str.lastIndexOf("0")); //-1
console.log(str.lastIndexOf("v")) // -1

chatAt(number)：根据索引（下标）返回字符串

console.log(str.charAt(7)); // "r"

slice（starIndex）：字符串获取,不改变原字符串

console.log(str.slice("5"));
console.log(str);

slice(startIndex，number) ：从第一个参数（下标），截取到end的下标前的元素

console.log(str.slice(4,7)); //owo

concat()：字符串连接

var str1 = "hello"
var str2 = "world"
console.log(str1.concat(str2)); // helloworld

大小写转化

oUpperCase() ：小写转化为大写

toLowerCase()： 大写转小写

console.log(str1.toUpperCase()); // HELLO
console.log("HELLO".toLowerCase()); // hello

replace(str1,str2)：字符串的替换

console.log(str);
console.log(str.replace("world","js")); // hellojs

split(分隔符)：字符串的分隔(将字符串转为数据)

  console.log(str.split()); // ['helloworld']
console.log(str.split("")); // ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

第六章：DOM

1.选择元素：

 document.getElementById(id) // 通过元素的ID获取元素

 document.getElementsByTagName(tagName) // 通过标签名获取元素集合

 document.getElementsByClassName(className) // 通过类名获取元素集合

 document.querySelector(selector) // 根据CSS选择器查询第一个元素

 document.querySelectorAll(selector) // 根据CSS选择器查询所有匹配的元素集合

元素对象.事件属性 = 事件处理函数

element.onclick(单击事件) = 事件处理函数

// 注册事件
btn.onclick = function(){

   // 事件处理
   for (let i = 0; i < lilist.length; i++) {
                     
     if(i % 2 == 0){
       console.log("黄色");
       lilist[i].style.backgroundColor = "yellow"
       }else{
         console.log("绿色");
          lilist[i].style.backgroundColor = "green"
            }
         }
      }

2.创建元素：

 document.createElement(tagName) // 创建一个新的元素节点

3.添加元素：

 element.appendChild(node) // 将一个节点添加到元素的子节点列表的末尾

 element.insertBefore(newNode, referenceNode) // 将一个新节点插入到参考节点前

4.删除元素：

 element.removeChild(node) // 从元素中删除一个子节点

5.替换元素：

 element.replaceChild(newNode, oldNode) // 用新节点替换旧节点

6.获取和设置属性：

 element.getAttribute(name) // 获取元素的属性值

 element.setAttribute(name, value) // 设置元素的属性值

7.获取和设置文本内容：

 element.textContent // 获取或设置元素的文本内容

 element.innerText // 获取或设置元素的可见文本内容，不包括HTML标签

8.获取和设置HTML内容：

 element.innerHTML // 获取或设置元素的HTML内容

9.样式操作：

 element.style.property // 获取或设置元素的CSS属性

10.事件监听：

 element.addEventListener(event, function, useCapture) // 为元素添加事件监听器

 element.removeEventListener(event, function, useCapture) // 移除元素的事件监听器

11.遍历DOM：

 element.parentNode // 获取父节点

 element.childNodes // 获取子节点集合

 element.firstChild // 获取第一个子节点

 element.lastChild // 获取最后一个子节点

 element.nextSibling // 获取下一个兄弟节点

 element.previousSibling // 获取上一个兄弟节点