一、fromCharCode() 方法

定义和用法

将 Unicode 编码转为一个字符
fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串。
注意:该方法是 String 的静态方法,字符串中的每个字符都由单独的 Unicode 数字编码指定。使用语法: String.fromCharCode()

语法

String.fromCharCode(n1, n2, ..., nX)

参数值

参数 描述
n1, n2, …, nX 必需。一个或多个 Unicode 值,即要创建的字符串中的字符的 Unicode 编码。

返回值

参数 描述
String 返回代表 Unicode 编码的字符。

示例

// 将 Unicode 编码转为一个字符
var n1 = String.fromCharCode(65);
// 输出结果 n1: A

// 将 Unicode 编码转换为一个字符串:
var n2 = String.fromCharCode(72,69,76,76,79);
// 输出结果 n1: HELLO

将数字转换对应的字母

效果图

在这里插入图片描述

将数字转换对应的字母代码

/**
 * @param num 将数字转换对应的字母
 */
function numberToLetterUnicode(num) {
	if (num == null || num == "" || num < 65 || (num > 90 && num < 97) || num > 122) {
		console.log(`${num} 不合法`)
		return ''
	}
	// A: 65, Z: 90, a: 97, z: 122
	const letter = String.fromCharCode(num)
	console.log(`num:${num} -> letter:${letter}`)
	
	document.getElementById('result').innerText = num + " 转换对应的字母是:"+letter

	// const mapUpper = new Map()
	// for (let index = 65; index < 91; index++) {
	//     const str = String.fromCharCode(index)
	//     mapUpper.set(str, index)
	// }
	// console.log(`mapUpper:${JSON.stringify([...mapUpper])}`)
	// mapUpper:[["A",65],["B",66],["C",67],["D",68],["E",69],["F",70],["G",71],["H",72],["I",73],["J",74],["K",75],["L",76],["M",77],["N",78],
	// ["O",79],["P",80],["Q",81],["R",82],["S",83],["T",84],["U",85],["V",86],["W",87],["X",88],["Y",89],["Z",90]]

	// const maploss = new Map()
	// for (let index = 97; index < 123; index++) {
	//     const str = String.fromCharCode(index)
	//     maploss.set(str, index)
	// }
	// console.log(`maploss${JSON.stringify([...maploss])}`)
	// maploss[["a",97],["b",98],["c",99],["d",100],["e",101],["f",102],["g",103],["h",104],["i",105],["j",106],["k",107],["l",108],["m",109],
	// ["n",110],["o",111],["p",112],["q",113],["r",114],["s",115],["t",116],["u",117],["v",118],["w",119],["x",120],["y",121],["z",122]]
	
	return letter
};

二、slice() 方法

定义和用法

slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意: slice() 方法不会改变原始数组。

语法

array.slice(start, end)

参数 Values

参数 描述
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回值

Type 描述
Array 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

示例

// slice() 方法可从已有的数组中返回选定的元素。
// slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
// 注意: slice() 方法不会改变原始数组。
const fruits = ["Banana", "Apple", "Orange", "Lemon",  "Mango"];
var partFruits = fruits.slice(1,3);
console.log("通过 slice 方法 提取的数组 partFruits:", partFruits)
//通过 slice 方法 提取的数组 partFruits: [ "Apple", "Orange" ] 

const strTxt = "这是测试文案"
var newstr2 = strTxt.slice(2, 4);
console.log("通过 slice 方法 提取的字符串 newstr2:", newstr2);
//通过 slice 方法 提取的字符串 newstr2: 测试

显示指定数量的字符串,超出后面显示…

效果图

在这里插入图片描述

显示指定数量的字符串,超出后面显示…,代码

/**
*  显示指定数量的字符串,超出后面显示...
*/
function subListToStr() {
// 最多展示11个汉字,其他用…展示
const fontMaxCount = 11
  let arr = ["测试文案","这是前端的函数实现方式","显示指定数量的字符串"]
  let tempStr = ""
  let tempStrReuslt = ""
let index = 0;
  for (; index < arr.length; index++) {
if (index > 0 && tempStr.length == fontMaxCount) {
  tempStrReuslt += "..."
  console.log("显示指定数量的字符串:", tempStrReuslt)
  document.getElementById('txtFixed').innerText = tempStrReuslt
  return tempStrReuslt
}
let txt = arr[index]
if (tempStr.length + txt.length > fontMaxCount) {
  let endIndex = fontMaxCount - tempStr.length
  let tempLabel = txt.slice(0, endIndex)
  tempStrReuslt += tempLabel + "..."
  console.log("显示指定数量的字符串:", tempStrReuslt)
  document.getElementById('txtFixed').innerText = tempStrReuslt
  return tempStrReuslt
} else {
  tempStr += txt
  if (index == arr.length - 1) {
	tempStrReuslt += txt
	console.log("显示指定数量的字符串:", tempStrReuslt)
	document.getElementById('txtFixed').innerText = tempStrReuslt
	return tempStrReuslt
  } else {
	if (tempStr.length == fontMaxCount) {
	  tempStrReuslt += txt
	} else {
	  tempStrReuslt += txt + "、"
	}
  }
}
}
console.log("显示指定数量的字符串:", tempStrReuslt)
document.getElementById('txtFixed').innerText = tempStrReuslt
return tempStrReuslt
};

三、 join() 方法

定义和用法

join() 方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。

语法

array.join(separator)

参数值

参数 描述
separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

返回值

参数 描述
String 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。

示例

// join 方法,将数组所有元素以指定的分隔符字符串进行分隔并返回新字符串。 如果数组只有一个元素,则不使用分隔符直接返回该元素。
const arr = ["测试1", "文案", "文案2", "测试3"]
const strByJion = arr.join("、")
console.log("join()方法返回的字符串:", strByJion)
//join()方法返回的字符串: 测试1、文案、文案2、测试3 

四、concat() 方法

定义和用法

concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

语法

array1.concat(array2,array3,...,arrayX)

参数 Values

参数 描述
array2, array3, …, arrayX 必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。

返回值

Type 描述
Array 对象 返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

示例

// concat()	方法用于合并两个或多个数组。此方法不更改原有数组,而是返回一个新数组。
const arryNumb1 = ['1','2','3']
const arryNumb2 = ['4','5','6']
const arryNumb3 = ['7','8','9']

//数组合并
const newArryNumb0 = [...arryNumb1, ...arryNumb2, ...arryNumb3]
console.log("通过 ... 方式 合并 数组 newArryNumb0:", JSON.stringify(newArryNumb0))
//通过 ... 方式 合并 数组 newArryNumb0: ["1","2","3","4","5","6","7","8","9"]

const newArryNumb123 = arryNumb1.concat(arryNumb2, arryNumb3)
console.log("通过 concat 方法 合并 数组 newArryNumb123:", JSON.stringify(newArryNumb123))
//通过 concat 方法 合并 数组 newArryNumb123: ["1","2","3","4","5","6","7","8","9"]

const newArryNumb1 = arryNumb1.concat(arryNumb2)
console.log("通过 concat 方法 合并 数组 newArryNumb1:", JSON.stringify(newArryNumb1))
//通过 concat 方法 合并 数组 newArryNumb1: ["1","2","3","4","5","6"]

const newArryNumb2 = newArryNumb1.concat('7','8','9')
console.log("通过 concat 方法 合并 数组 newArryNumb2:", JSON.stringify(newArryNumb2))
//通过 concat 方法 合并 数组 newArryNumb2: ["1","2","3","4","5","6","7","8","9"]

const newArryNumb3 = newArryNumb2.concat('10',['11','12'],'13')
console.log("通过 concat 方法 合并 数组 newArryNumb3:", JSON.stringify(newArryNumb3))
//通过 concat 方法 合并 数组 newArryNumb3: ["1","2","3","4","5","6","7","8","9","10","11","12","13"]

// 注意concat方法只能拆分一层的纯数字的数组参数,如果数字数组中还嵌套了数组,那么嵌套的那个数组会被当成一个整体元素添加到新的数组中里。
var arryNum = [1,2,3,4]
var newArryNum = arryNum.concat([5,6,7,8,[9,10]])
console.log("通过 concat 方法 合并 数组 newArryNum:", JSON.stringify(newArryNum))
//通过 concat 方法 合并 数组 newArryNum: [1,2,3,4,5,6,7,8,[9,10]]

// concat() 方法用于连接两个或多个字符串。
// 该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串。
var str1 = "Hello ";
var str2 = "world!";
var newStr = str1.concat(str2);
console.log("通过 concat 方法 拼接字符串 newStr: ", newStr)
//通过 concat 方法 拼接字符串 newStr:  Hello world!

五、splice() 方法

定义和用法

splice() 方法用于插入、删除或替换数组的元素。
注意:这种方法会改变原始数组!。

语法

array.splice(index,howmany,item1,.....,itemX)

参数 Values

参数 描述
index 必需。规定从何处添加/删除元素。
该参数是开始插入和(或)删除的数组元素的下标,必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字,但可以是 “0”。
如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX 可选。要添加到数组的新元素

返回值

Type 描述
Array 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

示例

// splice() 方法用于插入、删除或替换数组的元素。
// 注意:这种方法会改变原始数组!。
var vegetables = ["西兰花", "胡萝卜", "冰草", "四季豆"]
vegetables.splice(1,0, "西红柿", "洋葱")
console.log("通过 splice 方法 给数组添加新元素 veagetables:", JSON.stringify(vegetables));
//通过 splice 方法 给数组添加新元素 veagetables: ["西兰花","西红柿","洋葱","胡萝卜","冰草","四季豆"]


// 移除数组的第三个元素,并在数组第三个位置添加新元素:
var foods = ["牛肉", "鸡蛋", "土豆", "荞麦"]
foods.splice(2,1,"香蕉","电解质饮料");
console.log("通过 splice 方法 移除数组的第三个元素,并在数组第三个位置添加新元素 foods:", JSON.stringify(foods));
//通过 splice 方法 移除数组的第三个元素,并在数组第三个位置添加新元素 foods: ["牛肉","鸡蛋","香蕉","电解质饮料","荞麦"]

var dogs = ["鹅蛋", "鸡蛋", "鸭蛋", "鹌鹑蛋"]
var newDogs = dogs.splice(2);
console.log("通过 splice 方法 移除数组的第三个元素后的 原数组 dogs:", JSON.stringify(dogs));
//通过 splice 方法 移除数组的第三个元素后的 原数组 dogs: ["鹅蛋","鸡蛋"]
console.log("通过 splice 方法 移除数组的第三个元素后的 返回的 newDogs:", JSON.stringify(newDogs));
//通过 splice 方法 移除数组的第三个元素后的 返回的 newDogs: ["鸭蛋","鹌鹑蛋"]

六、Array map() 方法

定义和用法

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。

语法

array.map(function(currentValue,index,arr), thisValue)

参数说明

参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数,函数参数:
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
如果省略了 thisValue ,“this” 的值为 “undefined”

示例

// 场景:将选项重置为默认值
const dataOptions = [
	{"name":"选项一","selected":false},{"name":"选项二","selected":true},
	{"name":"选项三","selected":true},{"name":"选项四","selected":false}
]

var newDataOptions = dataOptions.map((item) =>{
// 如果有选中的则改为未选中
if(item.selected){
	item.selected = !item.selected
}
return item
})
console.log("通过 map 方法处理数组 返回的 newDataOptions:", JSON.stringify(newDataOptions));
//通过 map 方法处理数组 返回的 newDataOptions: [{"name":"选项一","selected":false},{"name":"选项二","selected":false},{"name":"选项三","selected":false},{"name":"选项四","selected":false}]

七、Array filter() 方法

定义和用法

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
提醒:返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

参数 描述
function(currentValue, index,arr) 必须。函数,数组中的每个元素都会执行这个函数,函数参数:
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
如果省略了 thisValue ,“this” 的值为 “undefined”

示例

// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
// 注意: filter() 不会对空数组进行检测。
// 注意: filter() 不会改变原始数组。
//返回数组,包含了符合条件的所有元素。**如果没有符合条件的元素则返回空数组
const dataOptions2 = [
	{"name":"选项一","selected":false},{"name":"选项二","selected":true},
	{"name":"选项三","selected":true},{"name":"选项四","selected":false}
	]
var newDataOptions2 = dataOptions2.filter((item) =>{
	return item.selected
})
console.log("通过 filter 方法处理数组 返回的 newDataOptions2:", JSON.stringify(newDataOptions2));
//通过 filter 方法处理数组 返回的 newDataOptions2: [{"name":"选项二","selected":true},{"name":"选项三","selected":true}]

八、完整代码

test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>js常用的方法</title>
		
		<script type="text/javascript">
			
			function numberToLetterUnicodeClick(){
				var num = document.getElementById('num').value;
				numberToLetterUnicode(num)
			};
			
			/**
			 * @param num 将数字转换对应的字母
			 */
			function numberToLetterUnicode(num) {
				if (num == null || num == "" || num < 65 || (num > 90 && num < 97) || num > 122) {
					console.log(`${num} 不合法`)
					return ''
				}
				// A: 65, Z: 90, a: 97, z: 122
				const letter = String.fromCharCode(num)
				console.log(`num:${num} -> letter:${letter}`)
				
				document.getElementById('result').innerText = num + " 转换对应的字母是:"+letter
		
				// const mapUpper = new Map()
				// for (let index = 65; index < 91; index++) {
				//     const str = String.fromCharCode(index)
				//     mapUpper.set(str, index)
				// }
				// console.log(`mapUpper:${JSON.stringify([...mapUpper])}`)
				// mapUpper:[["A",65],["B",66],["C",67],["D",68],["E",69],["F",70],["G",71],["H",72],["I",73],["J",74],["K",75],["L",76],["M",77],["N",78],
				// ["O",79],["P",80],["Q",81],["R",82],["S",83],["T",84],["U",85],["V",86],["W",87],["X",88],["Y",89],["Z",90]]
		
				// const maploss = new Map()
				// for (let index = 97; index < 123; index++) {
				//     const str = String.fromCharCode(index)
				//     maploss.set(str, index)
				// }
				// console.log(`maploss${JSON.stringify([...maploss])}`)
				// maploss[["a",97],["b",98],["c",99],["d",100],["e",101],["f",102],["g",103],["h",104],["i",105],["j",106],["k",107],["l",108],["m",109],
				// ["n",110],["o",111],["p",112],["q",113],["r",114],["s",115],["t",116],["u",117],["v",118],["w",119],["x",120],["y",121],["z",122]]
				
				return letter
			};
			
			
			
			/**
			 *  显示指定数量的字符串,超出后面显示...
			 */
			function subListToStr() {
				// 最多展示11个汉字,其他用…展示
				const fontMaxCount = 11
			    let arr = ["测试文案","这是前端的函数实现方式","显示指定数量的字符串"]
			    let tempStr = ""
			    let tempStrReuslt = ""
				let index = 0;
			    for (; index < arr.length; index++) {
					if (index > 0 && tempStr.length == fontMaxCount) {
					  tempStrReuslt += "..."
					  console.log("显示指定数量的字符串:", tempStrReuslt)
					  document.getElementById('txtFixed').innerText = tempStrReuslt
					  return tempStrReuslt
					}
					let txt = arr[index]
					if (tempStr.length + txt.length > fontMaxCount) {
					  let endIndex = fontMaxCount - tempStr.length
					  let tempLabel = txt.slice(0, endIndex)
					  tempStrReuslt += tempLabel + "..."
					  console.log("显示指定数量的字符串:", tempStrReuslt)
					  document.getElementById('txtFixed').innerText = tempStrReuslt
					  return tempStrReuslt
					} else {
					  tempStr += txt
					  if (index == arr.length - 1) {
						tempStrReuslt += txt
						console.log("显示指定数量的字符串:", tempStrReuslt)
						document.getElementById('txtFixed').innerText = tempStrReuslt
						return tempStrReuslt
					  } else {
						if (tempStr.length == fontMaxCount) {
						  tempStrReuslt += txt
						} else {
						  tempStrReuslt += txt + "、"
						}
					  }
					}
				}
				console.log("显示指定数量的字符串:", tempStrReuslt)
				document.getElementById('txtFixed').innerText = tempStrReuslt
				return tempStrReuslt
			};
			
			function testSomeMethod(){
				// join 方法,将数组所有元素以指定的分隔符字符串进行分隔并返回新字符串。 如果数组只有一个元素,则不使用分隔符直接返回该元素。
				const arr = ["测试1", "文案", "文案2", "测试3"]
				const strByJion = arr.join("、")
				console.log("join()方法返回的字符串:", strByJion)
				//join()方法返回的字符串: 测试1、文案、文案2、测试3 
				
				// concat()	方法用于合并两个或多个数组。此方法不更改原有数组,而是返回一个新数组。
				const arryNumb1 = ['1','2','3']
				const arryNumb2 = ['4','5','6']
				const arryNumb3 = ['7','8','9']
				
				//数组合并
				const newArryNumb0 = [...arryNumb1, ...arryNumb2, ...arryNumb3]
				console.log("通过 ... 方式 合并 数组 newArryNumb0:", JSON.stringify(newArryNumb0))
				//通过 ... 方式 合并 数组 newArryNumb0: ["1","2","3","4","5","6","7","8","9"]
				
				
				const newArryNumb123 = arryNumb1.concat(arryNumb2, arryNumb3)
				console.log("通过 concat 方法 合并 数组 newArryNumb123:", JSON.stringify(newArryNumb123))
				//通过 concat 方法 合并 数组 newArryNumb123: ["1","2","3","4","5","6","7","8","9"]

				const newArryNumb1 = arryNumb1.concat(arryNumb2)
				console.log("通过 concat 方法 合并 数组 newArryNumb1:", JSON.stringify(newArryNumb1))
				//通过 concat 方法 合并 数组 newArryNumb1: ["1","2","3","4","5","6"]
				
				const newArryNumb2 = newArryNumb1.concat('7','8','9')
				console.log("通过 concat 方法 合并 数组 newArryNumb2:", JSON.stringify(newArryNumb2))
				//通过 concat 方法 合并 数组 newArryNumb2: ["1","2","3","4","5","6","7","8","9"]
				
				const newArryNumb3 = newArryNumb2.concat('10',['11','12'],'13')
				console.log("通过 concat 方法 合并 数组 newArryNumb3:", JSON.stringify(newArryNumb3))
				//通过 concat 方法 合并 数组 newArryNumb3: ["1","2","3","4","5","6","7","8","9","10","11","12","13"]
				
				// 注意concat方法只能拆分一层的纯数字的数组参数,如果数字数组中还嵌套了数组,那么嵌套的那个数组会被当成一个整体元素添加到新的数组中里。
				var arryNum = [1,2,3,4]
				var newArryNum = arryNum.concat([5,6,7,8,[9,10]])
				console.log("通过 concat 方法 合并 数组 newArryNum:", JSON.stringify(newArryNum))
				//通过 concat 方法 合并 数组 newArryNum: [1,2,3,4,5,6,7,8,[9,10]]

				// concat() 方法用于连接两个或多个字符串。
				// 该方法没有改变原有字符串,但是会返回连接两个或多个字符串新字符串。
				var str1 = "Hello ";
				var str2 = "world!";
				var newStr = str1.concat(str2);
				console.log("通过 concat 方法 拼接字符串 newStr: ", newStr)
				//通过 concat 方法 拼接字符串 newStr:  Hello world!
				
				// slice() 方法可从已有的数组中返回选定的元素。
				// slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
				// 注意: slice() 方法不会改变原始数组。
				const fruits = ["Banana", "Apple", "Orange", "Lemon",  "Mango"];
				var partFruits = fruits.slice(1,3);
				console.log("通过 slice 方法 提取的数组 partFruits:", partFruits)
				//通过 slice 方法 提取的数组 partFruits: [ "Apple", "Orange" ] 
				
				const strTxt = "这是测试文案"
				var newstr2 = strTxt.slice(2, 4);
				console.log("通过 slice 方法 提取的字符串 newstr2:", newstr2);
				//通过 slice 方法 提取的字符串 newstr2: 测试
				
				
				// splice() 方法用于插入、删除或替换数组的元素。
				// 注意:这种方法会改变原始数组!。
				var vegetables = ["西兰花", "胡萝卜", "冰草", "四季豆"]
				vegetables.splice(1,0, "西红柿", "洋葱")
				console.log("通过 splice 方法 给数组添加新元素 veagetables:", JSON.stringify(vegetables));
				//通过 splice 方法 给数组添加新元素 veagetables: ["西兰花","西红柿","洋葱","胡萝卜","冰草","四季豆"]
				
				
				// 移除数组的第三个元素,并在数组第三个位置添加新元素:
				var foods = ["牛肉", "鸡蛋", "土豆", "荞麦"]
				foods.splice(2,1,"香蕉","电解质饮料");
				console.log("通过 splice 方法 移除数组的第三个元素,并在数组第三个位置添加新元素 foods:", JSON.stringify(foods));
				//通过 splice 方法 移除数组的第三个元素,并在数组第三个位置添加新元素 foods: ["牛肉","鸡蛋","香蕉","电解质饮料","荞麦"]
				
				var dogs = ["鹅蛋", "鸡蛋", "鸭蛋", "鹌鹑蛋"]
				var newDogs = dogs.splice(2);
				console.log("通过 splice 方法 移除数组的第三个元素后的 原数组 dogs:", JSON.stringify(dogs));
				//通过 splice 方法 移除数组的第三个元素后的 原数组 dogs: ["鹅蛋","鸡蛋"]
				console.log("通过 splice 方法 移除数组的第三个元素后的 返回的 newDogs:", JSON.stringify(newDogs));
				//通过 splice 方法 移除数组的第三个元素后的 返回的 newDogs: ["鸭蛋","鹌鹑蛋"]
				
				
				// map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
				// map() 方法按照原始数组元素顺序依次处理元素。
				// 注意: map() 不会对空数组进行检测。
				// 注意: map() 不会改变原始数组。
				
				const dataOptions = [
					{"name":"选项一","selected":false},{"name":"选项二","selected":true},
					{"name":"选项三","selected":true},{"name":"选项四","selected":false}
					]
				// 场景:将选项重置为默认值
				var newDataOptions = dataOptions.map((item) =>{
					// 如果有选中的则改为未选中,
					if(item.selected){
						item.selected = !item.selected
					}
					return item
				})
				console.log("通过 map 方法处理数组 返回的 newDataOptions:", JSON.stringify(newDataOptions));
				//通过 map 方法处理数组 返回的 newDataOptions: [{"name":"选项一","selected":false},{"name":"选项二","selected":false},{"name":"选项三","selected":false},{"name":"选项四","selected":false}]
				
				
				
				// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
				// 注意: filter() 不会对空数组进行检测。
				// 注意: filter() 不会改变原始数组。
				//返回数组,包含了符合条件的所有元素。**如果没有符合条件的元素则返回空数组
				const dataOptions2 = [
					{"name":"选项一","selected":false},{"name":"选项二","selected":true},
					{"name":"选项三","selected":true},{"name":"选项四","selected":false}
					]
				var newDataOptions2 = dataOptions2.filter((item) =>{
					return item.selected
				})
				console.log("通过 filter 方法处理数组 返回的 newDataOptions2:", JSON.stringify(newDataOptions2));
				//通过 filter 方法处理数组 返回的 newDataOptions2: [{"name":"选项二","selected":true},{"name":"选项三","selected":true}]
				
				
				
				// includes()方法是ES6新增的一个方法
				// 第一个参数:该参数为需要判断是否存在于数组中的元素
				// 第二个参数:表示搜索的起始位置,默认为0,即从头开始搜索。若为负数,则表示从倒数第几个开始搜索,若输入的位置超出了数组长度,则默认还是为0
				// const animals = ["狮子", "老虎", "鹦鹉", "大象", "长颈鹿", "孔雀"]
				// console flag1 = animals.includes("豹子")
				// console flag2 = animals.includes("长颈鹿", 3)
				// console flag3 = animals.includes("长颈鹿", -3)
				// console.log("通过 includes 方法 判断数组是否存在指定元素 flag1 = ", flag1)
				// console.log("通过 includes 方法 从指定的位置开始 判断数组是否存在指定元素 flag2 = ", flag2)
				// console.log("通过 includes 方法 从指定的倒数位置开始判断数组是否存在指定元素 判断数组是否存在指定元素 flag3 = ", flag3)
				
				
			};
			
		</script>
		
	</head>
	<body>
		<div class="itme-wrap">请输入数字:<input id="num" type="number"/></div>
		<div class="btn" onclick="numberToLetterUnicodeClick()">执行将数字转换对应的字母</div>
		<div class="txt2" id="result">转换结果:</div>
		<div class="txt" onclick="subListToStr()">执行显示指定数量的字符串</div>
		<div class="txt2" id="txtFixed"></div>
		<div class="txt" onclick="testSomeMethod()">测试js常用的方法</div>
	</body>
	
	<style type="text/css">
		body {
			background-color: #f5f5f5;
			padding: 20px;
			margin: 0;
			display: flex;
			flex-direction: column;
		}
		.itme-wrap {
			display: flex;
			flex-direction: row;
		}
		.btn {
			color: black;
			font-size: 16px;
			font-weight: 500;
			margin-top: 20px;
		}
		.txt {
			color: black;
			font-size: 16px;
			font-weight: 500;
			margin-top: 20px;
		}
		.txt2 {
			color: black;
			font-size: 14px;
			font-weight: 700;
			margin-top: 20px;
		}
		
	</style>
</html>
Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐