JS 类型分类
JS内置数据类型有 8 种类型，分别是：undefined、Null、Boolean、Number、String、BigInt、Symbol、Object。
其中又可分为「基础类型」和「引用类型」。
「基础类型」：undefined、Null、Boolean、Number、String、BigInt、Symbol
「引用类型」：统称为 Object 类型。细分的话，有：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型等。
依据「存储方式」不同，数据类型大致可以分成两类：
「基础类型」存储在「栈内存」，被引用或拷贝时，会创建一个完全相等的变量。
「引用类型」存储在「堆内存」，在「栈内存」存储的是地址，多个引用指向同一个内存地址。
常用遍历
for 数组循环遍历
let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i])
}
for each 数组/对象循环遍历
let arr = [1, 2, 3, 4, 5];
arr.forEach(function(element, index) {
console.log(`Index: ${index}, Element: ${element}`);
});
let obj = { a: 1, b: 2, c: 3 };
Object.keys(obj).forEach(function(key) {
console.log(`Key: ${key}, Value: ${obj[key]}`);
});
for in 数组/对象循环遍历
let array = ["admin","manager","db"]
for(var i in array){
console.log(i);//0 1 2
}
let obj = {name: '张三', age: 18, city: '上海'};
for (var key in obj) {
console.log(key + ': ' + obj[key]);
}
//name: 张三
//age: 18
//city: 上海
for of 数组/对象/字符串循环遍历
一文带你了解javascript中的for...of循环
const arr = [1, 2, 3, 4, 5]
for(const element of arr){
console.log(element);//0 1 2
}
let obj = {name: '张三', age: 18, city: '上海'};
for (var key key of Object.keys(obj)) {
console.log(key + ': ' + obj[key]);
}
//name: 张三
//age: 18
//city: 上海
const str = "Hello, World!";
for (const char of str) {
console.log(char);
}
map,返回一个新数组，需要变量接收，map()不会改变原始数组，只能用来遍历数组
let arr = [1,2,3];
let newArr = arr.map(function(i){
return i*2;
})
console.log(newArr)
// [2,4,6]
fifter返回一个新数组，需要变量接收，不会改变原始数组，只能用来遍历数组
let arr = [1,2,3];
let newArr = arr.filter(function(i){
return i>1;
})
console.log(newArr)
// [2,3]
switch, while,do while等，可以参考：JS中的18种相关循环遍历的方法
数组常用方法
1.join 拼接
//拼接，拼接之后是个字符串类型
let arr=[1,2,3,4,5]
arr.join('+')//1+2+3+4+5
2.push，向数组的末尾添加元素并返回数组长度
let arr=[1,2,3,4,5]
arr.push(6)
3.unshift 向数组的开头添加元素并返回数组长度
let arr=[1,2,3,4,5]
let unshift_arr=arr.unshift("Tom");//['Tom',1,2,3,4,5]
4.concat 拼接数组
let arr=[1,2,3,4,5]
let arr1=[6]
let arrConcat=arr.concat(arr1)//[1,2,3,4,5,6]
5.slice 数组截取
//数组截取 arr.slice(start , end);
//start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
//end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
//返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arr 中的元素。
let arr = [1,4,6,8,12];
let arrCopy1 = arr.slice(1); // [4, 6, 8, 12]
let arrCopy2 = arr.slice(0,4); // [1, 4, 6, 8]
let arrCopy3 = arr.slice(1,-2); // [4, 6]
let arrCopy4 = arr.slice(-5,4);// [1, 4, 6, 8]
let arrCopy5 = arr.slice(-4,-1) // [4, 6, 8]
6.splice() （数组更新,增删改）
// arr.splice(index , howmany , item1,…..,itemX)
//index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//howmany：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
//item1, …, itemX：可选。向数组添加的新项目。
//返回值：含有被删除的元素的数组，若没有删除元素则返回一个空数组。
let arr = ["张三","李四","王五","小明","小红"];
/**************删除"王五"****************/
let arrReplace1 = arr.splice(2,1); // ["王五"]
console.log(arr); // ["张三", "李四", "小明", "小红"] (原数组改变)
//删除多个
let arrReplace2 = arr.splice(1,2); // ["李四", "小明"]
console.log(arr); // ["张三", "小红"]
/**************添加"小刚"****************/
let arrReplace3 = arr.splice(1,0,"小刚"); // [] (没有删除元素，所以返回的是空数组)
console.log(arr); // ["张三", "小刚", "小红"]
//添加多个
let arrReplace4 = arr.splice(3,0,"刘一","陈二","赵六");// []
console.log(arr); // ["张三", "小刚", "小红", "刘一", "陈二", "赵六"]
/**************"王五"替换"小刚"****************/
let arrReplace5 = arr.splice(1,1,"王五");// ["小刚"]
console.log(arr); // ["张三", "王五", "小红", "刘一", "陈二", "赵六"]
//替换多个
let arrReplace6 = arr.splice(1,4,"李四"); // ["王五", "小红", "刘一", "陈二"]
console.log(arr); // ["张三", "李四", "赵六"]
7.indexOf()查找的项在数组中首次出现的位置，在没找到的情况下返回-1
let arr = [1,4,7,10,7,18,7,26];
console.log(arr.indexOf(7)); //2
8.includes()用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
//arr.includes(searchElement , fromIndex)
//searchElement ： 必须。需要查找的元素值。
//fromIndex：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
let arr = ["a","b","c","d"];
let result1 = arr.includes("b");//true
let result2 = arr.includes("b",2);//false
字符串常用方法
- charAt返回子字符串
let str="hello world";
console.log(str.charAt(1));//e
- concat拼接
let str='123'
let str2=str.concat('78','01')//1237801
3.截取字符串 slice方法、substring方法、substr方法：
//slice(start, end) start开始的位置，end结束的位置（不包括）,两个参数可正可负，负值代表从右截取
let str = "Hello";
let s = str.slice(1, 2);//e
let s = str.slice(1);//ello
//substring(start, end)start开始的位置，end结束的位置（不包括），可选,两个参数都为正数
let str = "Hello";
let s = str.substring(1, 2);//e
let s = str.substring(1);//ello
//substr(start, num)start开始的位置,num个数，可选,start参数可正可负，负数代表从右截取
let str = "Hello";
let s = str.substr(1, 2);//He
let s = str.substr(1);//ello
- indexOf 根据指定子串,从左向右查询字符，查询索引
//参数：1要查询的子串，2从哪个索引开始查询，可选
//返回值：索引 或 -1（没有查找到）
let str = "Hello";
let s = str.indexOf("e");//1
- trim 删除字符串的头尾空白符，空白符包括：空格、制表符 tab、换行符等其他空白符等
let str = " Hello ";
let s = str.trim();//Hello
- split 分割成字符串数组
let str = "Hello";
let s = str.split("e");[ 'H', 'llo' ]
- replace/replaceAll 替换
//替换一个
let s = str.replace("l", "o"); //Heolo
//全局替换
let str = "Hello";
let s = str.replaceAll("l", "o"); //Heooo
dom的常用操作
js
1.获取元素
document.getElementById(id): 根据元素的id属性获取元素。
document.getElementsByName(name): 根据元素的name属性获取元素。
document.getElementsByClassName(className): 根据元素的class属性获取元素。
document.getElementsByTagName(tagName): 根据元素的标签名获取元素。
document.querySelector(selector): 根据选择器获取第一个匹配的元素。
document.querySelectorAll(selector): 根据选择器获取所有匹配的元素。
var a = document.getElementById("dom");
var b = a.childNodes; //获取a的全部子节点
var c = a.parentNode; //获取a的父节点
var d = a.nextSbiling; //获取a的下一个兄弟节点
var e = a.previousSbiling; //获取a的上一个兄弟节点
var f = a.firstChild; // 获取a的第一个子节点
var g = a.lastChild; //获取a的最后一个子节点
2.创建元素
document.createElement(tagName): 创建一个指定标签名的元素节点。
document.createTextNode(text): 创建一个包含指定文本内容的文本节点。
3.修改元素属性和内容
element.setAttribute(name, value): 设置元素的属性值。
element.getAttribute(name): 获取元素的属性值。
element.innerHTML: 设置或获取元素的HTML内容。outerHTML
element.innerText: 设置或获取元素的文本内容。
4.添加和删除元素
parentElement.appendChild(newChild): 将一个新的子节点添加到指定父节点的子节点列表的末尾。
parentElement.removeChild(child): 从指定父节点的子节点列表中删除一个子节点。
网友评论