JavaScript:常用的方法
一、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>
更多推荐


所有评论(0)