JS基础部分知识

JS基础部分

四种引入方式

// 1.内嵌方式
<script>
    alert("hello world");
</script>
// 2.外联方式
<script src="./01.js"></script>
// 3.行内标签方式
<button onclick="alert(666)">点我呀</button>
// 4.协议方式
<a href="javascript: alert('就知道百度')">百度一下</a>

三种输出方式

// 1.网页输出
document.write("hello world");
document.write("<h1>hello world</h1>");
// 2.弹出框输出
alert("你好世界！");
// 3.控制台输出【重点】
console.log("你好世界！");

变量的三种声明方式

// es5
var a = 10 // 1.var可以被重新定义，可以被修改
// es6
let b = 10 // 2.let不可以被重新定义，可以修改
const c = 10 // 3.const不可以被重新定义，不可以修改

模板字符串

ES6，模板字符串
let num = 10
let str = `test${num}`  //test10

数据类型的划分

1.基本数据类型

​ 存放于栈区。存放在栈区的还有引用数据类型的指针

​ 基本数据类型有：

• String

• Number

• Boolean

• Null

• Undefined

• Symbol （ES6中新加的类型）一种实例是唯一且不可改变的数据类型

  ​ 声明方式 let string = Symbol(‘test’)

• BigInt 可以安全地存储和操作大整数，甚至可以超过数字的安全整

  ​ 数限制

​ Null和undefined的区别：

• Null类型的值只有一个，就是null,null这个值专门用来表示一个为空的对象, 针对引用数据类型为空时
• Undefined类型的值只有一个，就undefined当声明一个变量，但是并不给变量赋值时，它的值就是undefined

2.引用数据类型

​ 存放于堆区。引用数据类型有：对象，数组，函数

输出数据类型

let num = 10;
let str = 'aaa';
let boo = true;
let un;
let nu = null;
console.log(typeof num) // number
console.log(typeof str) // string
console.log(typeof boo) // boolean
console.log(typeof un) // undefined
console.log(typeof nu) // object

注意：typeof NaN 输出为 number

​ 使用typeof Null 判断类型时返回object 这是因为但是最后null的类型为object，它不正确地表明null是一个对象，这是一个错误，而且无法修复，因为它会破坏现有的代码。在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它判断为 object 。

类型转换

1.强制转换

• Number()

• parseInt()

• parseFloat()

• String()

• Boolean() 当值为0、NaN、‘’、undefined、null这5种时，布尔值为

  ​ false，其他为true

2.自动类型转换

let num = 1
let str = '李白'
console.log( '数字加字符串', num + str ); // 将数字转换为了字符串进行拼接
let str2 = 22
let str3 = '33'
// 进行加法运算时（JS会理解为拼接运算），将数字转换为字符串进行拼接
console.log(str2 + str3);
// 进行减法运算时，字符串转换为了数字
console.log(str3 - str2);

运算符

常见的一些运算符

运算符类型	符号
算术运算符	+ ，- ，* ，/ ，% ，++ ，–
比较运算符	> ，< ，>= ，<= ，== ，!= ，=== ， !==
逻辑运算符	与（并且）&&， 或（或者）
字符串拼接符	+
赋值运算符	= ，+=，-=，*=，/=

注意：++,–分为前后
放在前面: 先自身+1运算,再和其他的运算数计算
放在后面: 先和其他的运算数计算,再自身+1运算

三元运算符

​ (expr1) ? (expr2) : (expr3)

​ 当表达式1为真时，输出表达式2，否则输出表达式3；

流程控制划分

1.默认流程控制

​ 代码逐行执行，最基本的流程

2.分支流程控制

​ 代码执行到某一段的时候，会根据条件判断，如果条件成立则相关执行任务；

3.循环流程控制

​ 代码根据条件，重复的执行，但是条件应该保证会执行到某个时间点时不成立（false），或者任务就不会停止。

​ switch之后必须是case或者是default

​ break可以不要,但是后面的case就不在判断,直到遇到break或者switch语句执行完毕才结束

​ default可以出现在switch的任何位置.但还是其他没有匹配上才执行default

状态分支语句

switch(表达式){
case 表达式1:
    语句1;
    break;
case 表达式2:
    语句2; ...
    break;
case 表达式n:
    语句n;
    break;
default:
    语句n+1;
    break;
}
// default:默认语句，如果switch中的表达式与case后面的值都不同等，那么默认执行default后面的语句，default不是必须的。

if****中条件可以是一个范围；

switch****条件只能某个值判断；

函数

​ 对一段代码进行封装，被封装的代码总是能完成某个功能。

1.函数定义的两种方式

// 1.函数声明
function 函数名(){
    函数体
}
// 2.函数表达式（函数字面量）
const 变量名 = function(){
    函数体
} 

函数三部曲

​ 从大局入手 根据需求分析语义 函数的名字 add

​ 从功能内部 未知数据是否参与运算 参数个数 num1,num2

​ 从功能外部 是否需要功能使用后的结果 返回值 return;

2.函数的参数

形参

function 函数名(形式参数1, 形式参数n){
    函数体;
} 

实参

函数名(实际参数1, 实际参数n);
// 实际参数多于形式参数时，多于的实际参数不会被接受
// 实际参数少于形式参数时，多于的形式参数会被系统默认赋值为undefined

调用

let 变量名=函数名(实际参数1, 实际参数n);
console.log(变量名);
//函数调用用变量名接并且输出

3.函数的默认值

// es5 
function fn(a, b){
    a = a || 默认值 // 设置默认值
}
// es6
function fn(a = 默认值, b){}

4.变量的作用域

​ 全局变量：函数外定义的变量
​ 局部变量：函数内定义的变量

系统函数

​ 在浏览器已经定义好的函数， 我们无需定义直接使用即可。

函数名	用法
parseInt()	转换为整数
parseFloat()	转换为浮点数
Number()	转换为数字
String()	转换为字符串
Boolean()	转换为布尔值
isNaN()	判断是否为NaN，是数字返回false，否则返回true

数组

// 1.实例化的方式
let array = new Array();
let array = new Array(5);
//结果为[empty*5]
//当实例化只有一个参数数字是会实例化出lenght为这个数字的empty乘5
// 2.字面量的方式（常用）
let array = [];

数组的基本操作

 let array1 = ['长胡子', '短胡子', '红胡子', '黑胡子', ];
        console.log('原数组>>>', array1);
        //访问最后一个数据
        console.log(array1[array1.length - 1]);
        // 新增数据
        // array1[新索引] = 值;
        array1[array1.length] = '彩虹胡子';
        console.log('新增后数组>>>', array1);
        // 删除
        delete array1[1];
        console.log('删除后数组>>>', array1);
        // 修改
        // array1[旧索引] = 值;
        array1[1] = '短胡子变新胡子';
        console.log('修改后数组>>>', array1);

遍历数组的两种方式

for循环

for(let i = 0; i < array.length; i++){
    i // 数组索引
    array[i] // 数组元素
}

forEach

array.forEach(function(value, index){
    index // 数组索引
    value // 数组元素
})

常见的数组方法

方法名	方法作用	是否会修改原数组
array.concat()	拼接数组（一个或者多个）	否
array.join()	将数组的元素根据指定的分隔符进行拼接，返回一个新的字符串	否
array.includes()	判断数组中是否存在指定的元素，返回布尔值	否
array.indexOf()	判断(从前往后)数组中是否存在指定的元素，有返回位置，无返回-1	否
array.lastindexOf()	判断(从后往前)数组中是否存在指定的元素，有返回位置，无返回-1	否
array.pop()	删除数组最后一个元素并返回	是
array.shift()	删除数组第一个元素并返回	是
array.push()	在数组末尾新增一个或多个元素并返回数组长度	是
array.unshift()	在数组首位新增一个或多个元素并返回数组长度	是
array.splice()	在数组任意位置新增、删除、修改元素 返回被删除元素的数组，新增就是返回空数组	是
array.slice()	截取两个下标之间的数据，包前不包后
array.reverse()	翻转数组	是
array.sort()	数组排序	是

遍历数组方法

1. 不影响原数组 (8个)

   方法	理解	返回值
   join()	拼接为字符串	字符串
   indexOf()	返回元素索引	索引值
   lastIndexOf()	返回元素索引	索引值
   includes()	是否含有指定元素	布尔值
   slice()	截取数组	数组
   flat()	数组降维 数组扁平化 拉平数组	一维数组
   toString()	变为字符串	字符串
   concat()	合并数组	数组

2. 影响原数组 (7个)

   方法	理解	返回值
   push()	数组末尾添加元素	新数组的长度
   unshift()	数组开头添加元素	新数组的长度
   pop()	删除数组最后一个元素	删除的元素
   shift()	删除数组第一个元素	删除的元素
   splice()	删除 添加 替换元素	删除元素组成数组
   reverse()	数组逆序排列	逆序后的数组
   sort()	数组排序	排序后的数组

3. 遍历数组( 7个 )

   方法	理解	返回值
   forEach()	遍历数组,处理数据	没有
   find()	筛选出第一个满足条件的值	数组元素
   findIndex()	筛选出第一个满足条件值的索引	索引
   map()	遍历数组,处理数据	数组
   filter()	过滤数组	数组
   every()	是否每个元素都满足条件	布尔值
   some()	是否有一个元素满足条件	布尔值

数组方法

1.数组转字符串

1.1 toString() 方法

​ toString() 在把数组转换成字符串时，首先要将数组的每个元素都转换为字符串。当每个元素都被转换为字符串时，才使用逗号进行分隔，以列表的形式输出这些字符串。

let arr = ['red', 'green', 'blue', 'pink'];
let str = '';
str = arr.toString();
console.log(typeof str, str);

1.2 toLocaleString()

​ toLocalString() 方法与 toString() 方法用法基本相同，主要区别在于toLocalString() 方法能够使用用户所在地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

str = arr.toLocaleString();

1.3 join()

​ join() 方法可以把数组转换为字符串，不过它可以指定分隔符。在调用 join() 方法时，可以传递一个参数作为分隔符来连接每个元素。如果省略参数，默认使用逗号作为分隔符，这时与 toString() 方法转换操作效果相同。

let arr = ['red', 'green', 'blue', 'pink'];
let str = '';
str = arr.join()                  // red,green,blue,pink
str = arr.join('');               // redjoinbluepink
str = arr.join('=');             // red=join=blue=pink
console.log(typeof str, str);   

2.数组遍历

map() 函数

​ map函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新的数组，原数组不变。

let array = [1, 2, 3, 4, 5];
let Array = [];
Array = array.map((item) => {
  return item *= 2
});
console.log(Array);   // [2, 4, 6, 8, 10]

map((element, index, array) => { 
/* … */ 
})  
// element：元素的值  index：元素的索引  array：被遍历的数组本身

​ map 不会改变原数组。返回一个新数组，每个元素都是回调函数的返回值。用map时改变原数组时需要定义一个新数组接收。

filter() 函数

​ 不会改变原数组

​ filter() 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback
返回 true 或等价于 true 的值的元素创建一个新数组。callback只会在已经赋值的索
引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通
过 callback测试的元素会被跳过，不会被包含在新数组中。

​ 遍历数组，过滤出符合条件的元素并返回一个新数组，没有符合条件的元素则返回空数组

let arr = [1, 2, 0, 0, 3, 4, 0, 5, 6, 0, 7, 8, 9];
let len = arr.length;
let Array = [];
Array = arr.filter(item => item != 0)  // 过滤所有不为0的数字
console.log(Array);   // [1,2,3,4,5,6,7,8,9]

filter(function(element, index, array) { 
    /* … */ 
}, thisArg)  
// element：元素的值  index：元素的索引  array：被遍历的数组本身

some（ES6）

​ 不会改变原数组

​ 遍历数组中是否有符合条件的元素，返回值为Boolean值。这个它只要找到一个符合条件的，就返回 true，否则返回false。如果用一个空数组进行测试，在任何情况下它返回的都是false。

let arr = [
    { id: 001, name: 'ling', done: false },
    { id: 002, name: 'ling', done: false },
    { id: 003, name: 'ling', done: true },
];
let Array = arr.some(item => item.done);

console.log(Array);  // true

some(function(element, index, array) {
    /* … */ 
}, thisArg) 
// element：元素的值 index：元素的索引 array：被遍历的数组本身

every (ES6)

​ 不会改变原数组

​ 遍历数组中是否有符合条件的元素，返回值为Boolean值。全部都符合条件，则返回true，否则返回false。若收到一个空数组，此方法在任何情况下都会返回 true。

let arr = [
    { id: 001, name: 'ling', done: false },
    { id: 002, name: 'ling', done: false },
    { id: 003, name: 'ling', done: true },
];
let Array = arr.every(item => item.done);

console.log(Array);  // false

find (ES6)

​ 不会改变原数组

​ 遍历数组，返回符合条件的第一个元素，如果没有符合条件的元素则返回 undefined

let arr = [1, 2, 3, 4, 5]; 
let element = arr.find(item => item == 3);
console.log(element);

findIndex

​ 不会改变原数组

​ findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

let arr = [1, 2, 3, 4, 5]; 
let element = arr.find(item => item == 3);
console.log(element);

3.数组的增删改查

3.1 增 (源码分析)

3.1.1 从尾部增加

arr[arr.length]
//         0  1  2  3  4  5
var arr = [1, 2, 3, 4, 5];
// 如何往数组的末尾添加数据  我们可以利用数组的长度
// 因为数组的下标是从0开始的 我们获取的长度 永远都是下一个元素 
arr[arr.length] = 6;
console.log(arr);

3.1.2 从头部添加

var arr = [1, 2, 3, 4, 5];
let len = arr.length;
for (let i = len - 1; i >= 0; i--) {
    arr[i + 1] = arr[i];
}
arr[0] = 6;
console.log(arr);   // [6,1,2,3,4,5]

3.1.3 从中间增加

​ 只需要修改 i >= ( 这个数字 ) 即可，这个写法只是把我们客观认为的第几项作为插入的第几位。

let num = prompt('从第几位插入');
let number = Number(prompt('请输入数字'));
let array = [1, 2, 3, 4, 5, 6, 7];
for (let i = array.length - 1; i >= num - 1; i--) {
    array[i + 1] = array[i];
}
array[num - 1] = number;
console.log(array);

3.1.4 push() 方法

​ push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

let arr = [1, 2, 3, 4, 5];
let a = arr.push(6,7,8,9,10);
console.log(arr, a);  // [1,2,3,4,5,6,7,8,9,10]  10

3.1.5 unshift() 方法

​ unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。

let arr = [5, 6, 7, 8, 9, 10];
let a = arr.unshift(1, 2, 3, 4);   // a = 10
console.log(arr, a);         // [1,2,3,4,5,6,7,8,9,10]  10

3.2 删

3.2.1 从尾部删除

修改数组长度从而删除尾部的元素

尾部删除

let arr = [1,2,3,4,5];
arr.length--;
console.log(arr);

3.2.2 从头部删除

​ 让后边的元素依次覆盖前面的元素，使元素整体前移一个长度，再length-- 即可。

从头部删除

let arr = [1,2,3,4,5];
let len = arr.length;
for (let i = 0; i < len - 1; i++) {
  arr[i] = arr[i + 1];
}
arr.length--;
console.log(arr);    // [2,3,4,5]

3.2.3 从中间删除

​ 修改一下 i 的起始值即可

从中间删除

let arr = [1,2,3,4,5];
let num = prompt('请输入要删除第几项');
let len = arr.length;
for (let i = num; i < len - 1; i++) {
    arr[i] = arr[i + 1];
}
arr.length--;
console.log(arr);    // 

3.2.4 shift() 方法

​ shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

let arr = [1, 2, 3, 4, 5];
let a = arr.shift();  //  a = 1
console.log(arr, a);  // [2,3,4,5]  1

3.2.5 pop() 方法

​ pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

let arr = [1, 2, 3, 4, 5];
let a = arr.pop();    //  a = 5
console.log(arr, a);  // [1,2,3,4]  5

3.2.6 slice()

​ slice() 方法返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

let arr = [1,2,3,4,5];
// let array = arr.slice(2,4);  // array = [3,4]
let array = arr.slice(1,-1);   // array = [2,3,4]
console.log(array, arr);

slice(start, end) 
start: 起始位置，如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取。数值超出原数组的索引范围，则会返回空数组。
end： 终止位置，如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。如果 end 被省略或者大于数组长度，则会一直提取到原数组末尾。

3.3 改

let arr = [1,2,3,4,5];
arr[5] = 6;
console.log(arr);       // [1,2,3,4,5,6]

3.3.1 splice() 可以增删改

​ splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

​ 返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

// 只写一个起始值 
let arr = [1,2,3,4,5];
let array = arr.splice(2);
console.log(array);         // [3,4,5]

// 写两个值   
let arr = [1,2,3,4,5];
let array = arr.splice(2,2);
console.log(array);         // [3,4]

// 三个值
let arr = [1,2,3,4,5];
let array = arr.splice(2,2,6,6);
console.log(array,arr);         // [3,4]  [1,2,6,6,5]

splice(start, deleteCount, item1, item2, itemN)
start 指定修改的开始位置（从 0 计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位；如果负数的绝对值大于数组的长度，则表示开始位置为第 0 位。
deleteCount 整数，表示要移除的数组元素的个数。省略或者数值大于start之后的元素的总数就会删除开始位置之后的全部元素。
item 要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

3.4 查

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

3.4.1 indexOf()

​
​ 返回首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1。

let arr = [1, 2, 3, 4, 5, 6, 1, 2, 5];
console.log(arr.indexOf(1)); // 0
console.log(arr.indexOf(1, 1)); // 6
console.log(arr.indexOf(1, 10)); // -1
console.log(arr.indexOf(1, -3)); // 6
console.log(arr.indexOf(1, -10)); // 0

indexOf(searchElement, fromIndex)    
searchElement  要查找的元素
fromIndex: 开始查找的位置。
如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回 -1。
如果参数中提供的索引值是一个负值，则将从数组最后一个元素往前开始推算，即 -1 表示从最后一个元素开始查找，-2 表示从倒数第二个元素开始查找 ，以此类推。 
注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果提供的索引值为负且绝对值大于数组长度，则整个数组都将会被查询。其默认值为 0。

4.数组的合并

concat()

​ concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

let arr1 = [1,2,3,4,5];
let arr2 = [5,6,7,8,9];
let arr3 = arr1.concat(arr2);
console.log(arr3);                 // [1,2,3,4,5,6,7,8,9]

合并多个数组用逗号分隔

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];
let arr = arr1.concat(arr2, arr3);
console.log(arr);                  // [1,2,3,4,5,6,7,8,9]

5 数组去重

5.1 利用新数组来实现去重

5.1.1

let arr = [1,1,2,2,3,3,4,4,5,5];
let array = [];
for (let i = 0; i < arr.length; i++) {
    let flag = true;
    for (let j = 0; j < array.length; j++) {
        if (arr[i] == array[j]) {
            flag = false;
            break;
        }
    }
    if (flag) {
        array[array.length] = arr[i];
    }
}
console.log(array);

5.1.2 indexOf

let arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
let array = [];
for (let i = 0; i < arr.length; i++) {
    if (array.indexOf(arr[i]) == -1) {
        array[array.length] = arr[i];
    }
}
console.log(array);

5.1.3 for in

let arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
let array = [];
for (let key in arr) {
    if (key == arr.indexOf(arr[key])) {
        array[array.length] = arr[key];
    }
}
console.log(array);

5.1.4 forEach

let arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
let array = [];
arr.forEach((item,index) => 
            arr.indexOf(item) == index ? array[array.length] = item : ''
           )
console.log(array);

5.1.5 filter

let arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
let array = [];
array = arr.filter((item,index) => 
                   arr.indexOf(item) == index
                  )
console.log(array);

5.1.6 includes

let arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
let array = [];
arr.forEach((item,index) => 
            array.includes(item) ? '' : array[array.length] = item
           )
console.log(array);

5.1.7 Set

let arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
let array = [...new Set(arr)];
console.log(array);

5.2 不使用新数组实现去重

5.2.1 前（了解）

let arr = [1,1,2,2,3,3,4,4,5,5];
for (let i = 0; i < arr.length; i++) {
    for(let j = 0; j < i; j++) {
        if (arr[i] == arr[j]) {
            for (let z = i; z < arr.length -2; z++) {
                arr[z] = arr[z + 1];
            }
            arr.length--;
            i--;
        }
    }
}
console.log(arr);

5.2.2 后（了解）

let arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
        if (arr[i] == arr[j]) {
            for (let z = i; z < arr.length - 2; z++) {
                arr[z] = arr[z + 1];
            }
            arr.length--;
            i--;
        }
    }
}
console.log(arr);

5.2.3 splice

let arr = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5];
for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
        if (arr[i] == arr[j]) {
            arr.splice(i, 1);
        }
    }
}
console.log(arr);

对象

​ 对象就是一组属性与方法的集合

​ 对象是一种复合数据类型，或者称为引用类型

1、定义对象

实例化方式

let user = new Object(); //创建了一个对象
user.name = '王花花'; // 为对象添加属性（特征）
user.sex = true; 
user.showInfo = function(){
    //this指向user.  this===user;
    console.log('我是：'+this.name);
}

字面量方式

let myGirl = {  
    name:'小花花', 
    age:18, 
    height:2.8,
    run:function(){
        //方法
        alert('跑步走...');
    }
}

2、对象的属性和方法操作

2.1 添加属性

obj.新属性='值';
obj['新属性']='值';//动态属性

2.2 修改属性

obj.属性名='新的值';
obj['属性名']='新的值';//动态属性

2.3 使用属性

consol.log(obj.属性名)
consol.log(obj['属性名']);//动态属性

2.4 删除属性

delete.obj.属性名;
delete.obj['属性名']

3、遍历对象

let user = {  
    name:'貂蝉', 
    age:18, 
    email:'123456@qq.com',
    run:function(){
        alert('跑步走...');
    }
}
//遍历对象：把遍历到的属性名赋值给key
for(let key in user){
    console.log('键名：', key);
    console.log('键值：', user[key]); //通过key获取到值
}

4、String对象

let s1 = 'aaa'; //基本数据类型
let s2 = new String('bbb'); //引用数据类型 
console.log( s1.length ); //基本类型可以调用属性
console.log( s2.length ); //引用类型也可以调用属性

4.1、字符串的属性和方法

属性	方法作用
str.length	字符串对象字符串长度
str.indexOf()	检索的字符串值没有出现，有字符串值在字符串中首次出现的位置，无则该方法返回 -1。
str.slice()	截取字符串，
str.replace(substr,replacement)	拆分字符串的间隔符,返回数组
str.toLowerCase()	把字符串转换为小写
str.toUpperCase()	把字符串转换为大写
str.trim ()	移除字符串两边的空格
str.substr(start,length)	在字符串中抽取从 start 下标开始的指定数目的字符
str.split(separator)	拆分字符串的间隔符，可以是普通字符串，也可以是空字符串，或者是正则表达式，返回数组

string方法

str.length

let s1 = 'aaa';
console.log( s1.length );
console.log( 'hello'.length );

str.indexOf(searchvalue,fromindex)

searchvalue	必需。规定需检索的字符串值。
fromindex	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

方法可返回某个指定的字符串值在字符串中首次出现的位置。

注意：indexOf() 方法对大小写敏感！

注意：如果要检索的字符串值没有出现，则该方法返回 -1。

let str = 'hello world';
console.log( str.indexOf('o') ); //4
console.log( str.indexOf('o', 6) ); //7
console.log( str.indexOf('a') ); //-1

str.slice(start, end)

start:起点下标如是负数则从字符串尾部开始计算位置，-1指最后一个字符

end: 结束下标 左闭右开（包前不包后）如省略则表示最后结尾

let str = 'hello world';
let str2 = str.slice(1,3); //el
console.log( str2 );

str.replace(substr,replacement)

substr ：必需。需要被替换的字符串值.

replacement ： 必需。替换后的字符串值。

字符串中用一些字符替换另一些字符.

默认情况下使用replacement替换找到的第一个substr的值. 需要全部替换需要加上全局标志 g

str.replaceAll(substr,replacement);全部替换

不会改变原字符串，返回新字符串

 let str='abcdefgabcdefg';
    let str2=str.replace('a', '123'); //123bcdefgabcdefg
    let str3=str.replace(/a/g, '123'); //123bcdefg123bcdefg
    let str4=str.replace('a', '123'); //123bcdefg123bcdefg
    console.log( str2 );
    console.log( str3 );
    console.log( str4 );

str.substr(start,length)

Start：必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

Length： 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

可在字符串中抽取从 start 下标开始的指定数目的字符。

 let str='abcdefgabcdefg';
    let str2=str.substr(0,3); //abc
    let str3=str.substr(3); //defgabcdefg
    console.log( str2 );
    console.log( str3 );

str.split(separator)

separator: 用于拆分字符串的间隔符，可以是普通字符串，也可以是空字符串，或者是正则表达式

let str='张三,李四,王五';
    let arr=str.split(','); //['张三', '李四', '王五']
    console.log( arr );

str.toLowerCase()

把字符串转换为小写

let str='Hello World';
    let str2=str.toLowerCase(); //hello world
    console.log( str2 );

str.toUpperCase()

把字符串转换为大写。

let str='Hello World';
    let str2=str.toUpperCase(); //HELLO WORLD
    console.log( str2 );

5、Number 对象

toFixed把数字转换为字符串，结果的小数点后有指定位数的数字。

6、Math 对象

6.1. Math.ceil(x)

​ 对一个数x进行向上取整

console.log( Math.ceil(88.2) ); //89
console.log( Math.ceil(9.9) ); //10
console.log( Math.ceil(-9.9) ); //9

6.2. Math.floor(x)

对一个数x进行向下取整

console.log( Math.ceil(88.2) ); //89
console.log( Math.ceil(9.9) ); //10
console.log( Math.ceil(-9.9) ); //9

6.3 Math.max(x…)

返回指定数中带有较大的值的那个数

let r = Math.max(6, 15, 11);
console.log( r ); //15

6.4 Math.min(x…)

返回指定数中带有较小的值的那个数

let r = Math.min(6, 15, 11);
console.log( r ); //6

6.5 Math.random()

返回介于 0 ~ 1 之间的一个随机数，包含0不包含1

console.log( Math.random() ); //0.8650919576695115
console.log( Math.random() ); //0.988522494873816
console.log( Math.random() ); //0.5464342439561889
console.log( Math.random() ); //0.7967688725727986
console.log( Math.random() ); //0.8993774234107785

6. .5.1获取指定范围的随机整数

function randomInt(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

7、Date对象

 var myDate = new Date();
        myDate.getYear(); //获取当前年份(2位)
        myDate.getFullYear(); //获取完整的年份(4位,1970-???)
        myDate.getMonth(); //获取当前月份(0-11,0代表1月)输出当前月需要加一
        myDate.getDate(); //获取当前日(1-31)
        myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        myDate.getTime(); //获取当前时间(从1970.1.1开始到现在的毫秒数)
        myDate.getHours(); //获取当前小时数(0-23)
        myDate.getMinutes(); //获取当前分钟数(0-59)
        myDate.getSeconds(); //获取当前秒数(0-59)
        myDate.getMilliseconds(); //获取当前毫秒数(0-999)
        myDate.toLocaleDateString(); //获取当前日期
        var mytime = myDate.toLocaleTimeString(); //获取当前时间
        myDate.toLocaleString(); //获取日期与时间

DOM浏览器对象模型

1、JavaScript 组成

1.1核心( ECMAScript)：

JavaScript语言的核心，包含基本语法、数据类型、关键字…

1.2文档对象模型( DOM)

访问和操作网页内容的方法和接口

1.3浏览器对象模型( BOM)

提供与浏览器交互的方法和接口

2、BOM

1. 反映了BOM中各对象之间的层次关系

2. 在BOM中，window对象是顶层对象，其它对象均是其子对象

3. history浏览器的浏览历史

4. location对象代表当前显示的文档的地址

5. navigator对象提供有关浏览器的各种信息

6. screen对象提供显示器屏幕相关的一些信息

7. frames[]为window对象的数组型属性，每一个数组元素对应框架集(frameset)中的一个框架(frame)所对应的窗口

8. document对象是对DOM的引用，代表了当前浏览器窗口中的网页文档

3、window对象

Window对象是脚本中的全局对象

document 也是 window 对象的属性之一

//全局变量是 window 对象的属性
//变量a就是全局变量，也是window对象上的属性
var a = 12;
	//调用
    console.log(window.a);//12
    
//全局函数是 window 对象的方法。
	//定义全局函数
    function box(){
        console.log("全局方法");
    }
    //调用
    window.box();

3.1. window对象的属性和方法

方法
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
clearInterval()	取消由 setInterval() 设置的 timeID。
clearTimeout()	取消由 setTimeout() 方法设置的 timeID
scrollTo()	浏览器滚动到指定的位置

返回顶部

 //点击 回到顶部 按钮时，滚动条滚动到顶部
        btn.onclick = function() {
            //回到顶部
            window.scrollTo(0, 0);
            //判断滚动高度隐藏按钮
            if (window.scrollY <= 0) {
                btn.style.opacity = '0'
                btn.style.transition = 'opacity 1s'
            }

        }

3.1.1. 定时器函数

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval****语法

setInterval(code,millisec);

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setTimeout****语法

setTimeout(code,millisec);

3.1.2. 清除计时器

clearInterval(timeId) 取消由 setInterval() 设置的 timeId。

clearTimeout(timeId) 取消由 setTimeout() 方法设置的 timeId。

定时器一般用于制作动画效果，比如每隔一段时间就移动某个元素的位置

let i = 0;
        let timr = setInterval(function() {
            let a = `${arr[i].name}爱${arr[i].like}`;
            console.log(a);
            i++;
            if (i >= arr.length) {
                clearInterval(timr);
            }
        }, 1000)

4、BOM其他对象

4.1 screen对象

availWidth	显示器屏幕可用宽度，除任务栏外
availHeight	显示器屏幕可用高度，除任务栏外
Width	实际宽
Height	实际高

4.2 history对象

该对象记录了浏览器的浏览历史，并提供一组方法访问曾经访问过的历史页面。

length	整数值，表示浏览器历史列表中的URL的个数
back()	返回到浏览器列表中当前页面之前的页面，与浏览器的“返回”功能相同
forward()	前进到浏览器中当前页面之后的页面，与浏览器的“前进”按钮功能相同
go(1)	访问浏览器列表中指定的页面，该方法接受一个参数。参数可正可负。

4.3 location对象

hash	表示URL地址中的锚点部分，包括前导符“#”。可读可写
href	表示当前页面完整的URL地址，可读可写。

4.4 navigator对象

该对象提供有关浏览器的各种信息，所有浏览器都支持该对象

userAgent	返回由客户机发送服务器的 user-agent 头部的值。

DOM

DOM(文档对象模型)

1、DOM节点操作

document.documentElement -> html标签

document.body -> body标签

了解：NODE对象属性与方法 操作

查询节点
方法	getElementById();	返回对拥有指定 id 的第一个对象的引用。
	getElementsByName()	返回带有指定名称的对象集合。
	getElementsByTagName()	返回带有指定标签名的对象集合。
	getElementsByClassName();	返回带有指定类名的对象集合
	querySelector();	html5新增，返回选择器匹配到的第1个元素
	querySelectorAll();	html5新增，返回选择器匹配到的元素集合
属性	parentNode	父节点
	firstElementChild	列表中的第一个节点
	lastElementChild	列表中的最后一个节点
	childNodes	所有子节点的列表
	children	所有元素子节点的列表
	previousElementSibling	上一个兄弟节点
	nextElementSibling	下一个兄弟节点
增加节点
	append()	在节点内容后追加节点
	insertBefore()	指定节点前插入节点
修改节点
	replaceChild()	替换节点
删除节点
	removeChild()	删除子节点
	remove()	删除当前节点
创建节点
	createElement()	创建一个元素节点
	setAttribute()	给某个节点添加一个属性
	getAttribute()	获取某个节点属性的值

2、文本操作

innerHTML	可以操作元素对象中的HTML代码（带有标签的文本）
innerText	可以操作元素对象中文本（不带标签的纯文本）
textContent	可以操作文本节点或元素节点中的文本（推荐使用）

3.className 类名

获取类名：node.className

设置类名:node.className=‘类名’;

4、属性操作

4.1原生属性

获取属性：node.属性名；

设置属性:node.属性名=属性值;

4.2自定义属性

获取属性:node.getAttribute(“属性名”);

设置属性:node.setAttribute(“属性名”,“属性值”);

事件与事件委派

事件四要素：

事件源：事件发生的源头

事件类型：发生的什么事件，列如click

事件处理函数：事件发生时所调用的函数

事件对象：事件发生时的相关信息都保存到事件对象中

事件注册事件：

1、标签注册事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cKdfoOI2-1675954083407)(C:\Users\仙女的admin\AppData\Roaming\Typora\typora-user-images\image-20221228194151437.png)]

2、DOM注册事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47ddtL1E-1675954083408)(C:\Users\仙女的admin\AppData\Roaming\Typora\typora-user-images\image-20221228194231701.png)]

3.W3C标准方法去注册事件

target.addEventListener("keydown",function (event){
alert(event.keyCode);
}, false);

W3C标准删除事件：

target.removeEventListener(event,function);

常用事件

鼠标事件
click	点击事件	点击鼠标左键触发
dblclick	双击事件	双击鼠标左键触发
mouseover	移入事件	鼠标指针移到一个元素上触发
mouseout	移出事件	鼠标指针移出一个元素上触发
mousemove	移动事件	鼠标在一个元素上移动持续触发
mousedown	鼠标按下	单击鼠标任何一个按键触发
mouseup	鼠标抬起	松开鼠标任何一个按键触发
键盘事件
keydown	键按下	用户按下一个键盘按键时触发
keyup	键弹起	用户在键盘按键被松开时触发
keypress	按键一次	按下且抬起一个键
表单事件
submit	表单提交	form表单提交时触发
input	输入事件	HTML5新增事件，输入内容时触发
blur	元素失去焦点	失去焦点时触发事件
focus	元素获取焦点
change	改变事件	用户改变表单元素的内容时触发
窗口事件
load	窗口加载	网页所有资源加载完毕时触发
scroll	窗口滚动事件	窗口滚动条滚动时触发

事件机制

事件机制主要分为捕捉和冒泡两种，默认情况下是事件的冒泡机制。

事件的捕获和冒泡只能够通过W3C**标准方法注册事件的方式来完成

事件委派

事件委派也称事件委托，或者事件代理。是把事件监听放在祖先元素（如父元素、爷爷元素）上。由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件委派，一般用于由用户交互产生的新元素。

自定义属性

属性获取

 <h1 id="title" class="tel" aa='自定义' data-name="自定义标准">你好</h1>
  
        let h1Node = document.querySelector('#title')
        console.log(h1Node.className); //原生属性获取
        console.log(h1Node.getAttribute('class')); //原生属性（标准）获取
        console.log(h1Node.getAttribute('aa')); //自定义属性（非标准）获取
        // h5自定义标准属性

        console.log(h1Node.dataset.name); //h5获取自定义标准属性（正规）
 

属性设置

 <h1>nini</h1>
   
        let h1Node = document.querySelector('h1')
            // 标准属性
        h1Node.id = 'title';
        // 非标准
        h1Node.setAttribute('aa', '自定义');
        // h5自定义属性
        h1Node.dataset.name = '自定义属性';
        h1Node.dataset['name2'] = '自定义2';
        console.log(h1Node);
    

wed存储技术

所以HTML5出现之前，兼容性最好的是cookie存储，但是cookie存储容量有限，而且安全性并不高。

HTML5的Web存储提供两种客户端存储技术：

sessionStorage 会话存储

localStrorage 本地存储

cookie

cookie会把web页面中的用户信息存储在电脑中的某个文本文件中,主要用于解决如何记录客户端的用户信息

sessionStorage 会话存储

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 会话是一个周期，会话开始的周期就是你打开网页的那一刻至到网页被关闭的时候；

localStorage 永久存储

​ localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

两个存储的方法

方法名	参数名	描述
setItem(key,value)	key:存储数据的键 Value:存储数据的值	指定key和value保存数据
getItem（key）	key:获取数据的键	通过key获取数据
removeItem(key)	Key:删除数据的键	通过key删除数据
clear ()		清除所有数据

例如：

localStorage.setItem(“username”,”张三”);

localStorage.getItem(“username”);

localStorage.removeItem(“username”);

localStorage.clear();

（存入web中需要把对象转为字符串对象）

localStorage.setItem(key, JSON.stringify(value))

读取存储出来把字符串对象转换成对象并获取key

JSON.parse(localStorage.getItem(key))

JSON两个核心方法

JSON.stringify(对象):将指定对象转换成字符串对象。

JSON.parse(字符串对象):将指定字符串对象转换成对象。
let h1Node = document.querySelector(‘h1’)
// 标准属性
h1Node.id = ‘title’;
// 非标准
h1Node.setAttribute(‘aa’, ‘自定义’);
// h5自定义属性
h1Node.dataset.name = ‘自定义属性’;
h1Node.dataset[‘name2’] = ‘自定义2’;
console.log(h1Node);

### wed存储技术

所以HTML5出现之前，兼容性最好的是cookie存储，但是cookie存储容量有限，而且安全性并不高。

#### HTML5的Web存储提供两种客户端存储技术：

sessionStorage 会话存储

localStrorage 本地存储

#### cookie

cookie会把web页面中的用户信息存储在电脑中的某个文本文件中,主要用于解决如何记录客户端的用户信息

#### sessionStorage 会话存储

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 会话是一个周期，会话开始的周期就是你打开网页的那一刻至到网页被关闭的时候；

#### localStorage 永久存储 

​    localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

##### 两个存储的方法

| 方法名             | 参数名                               | 描述                   |
| ------------------ | ------------------------------------ | ---------------------- |
| setItem(key,value) | key:存储数据的键  Value:存储数据的值 | 指定key和value保存数据 |
| getItem（key）     | key:获取数据的键                     | 通过key获取数据        |
| removeItem(key)    | Key:删除数据的键                     | 通过key删除数据        |
| clear  ()          |                                      | 清除所有数据           |

例如：

localStorage.setItem(“username”,”张三”);

localStorage.getItem(“username”);

localStorage.removeItem(“username”);

localStorage.clear();

（存入web中需要把对象转为字符串对象）

localStorage.setItem(key, JSON.stringify(value))

读取存储出来把**字符串对象**转换成对象并获取key

JSON.parse(localStorage.getItem(key))

### JSON两个核心方法

JSON.stringify(对象):将指定**对象**转换成**字符串对象**。

JSON.parse(字符串对象):将指定**字符串对象**转换成对象。