- A+
JSON
parse(): 以文本字符串形式接受 JSON 对象作为参数，并返回相应的对象。
stringify(): 接收一个对象作为参数，返回一个对应的 JSON 字符串。
口语化理解：JSON.stringify()将不同数据类型的数据转为JSON字符串，JSON.parse()将JSON数据转换为他原本的数据类型。
JSON的数格式，首先必须是一个字符串，其次属性必须也是字符串形式，值可以是任意形式。 '{"student": "小米","id":18}' 如果一条数据是JSON形式，我们可以直接用parse将他外围的引号和属性的引号去掉，返回一个新类型的数据。 Object
Object.assign():通过复制一个或多个对象来创建一个新的对象。
Object.entries():返回给定对象自身可枚举属性的 [key, value] 数组。
Object.is():比较两个值是否相同。所有 NaN 值都相等（这与== 和 === 不同）。
Object.keys():返回一个包含所有给定对象自身可枚举属性名称的数组。
Object.values():返回给定对象自身可枚举值的数组。
var obj = { foo: 'bar', baz: 42 }; console.log(Object.values(obj)); // ['bar', 42] # 如果对象属性是 Number 则从小到大输出 var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.values(an_obj)); // ['b', 'c', 'a'] console.log(Object.values('foo')); // ['f', 'o', 'o'] Math
Math.floor() 函数总是返回小于等于一个给定数字的最大整数。(向下取整)
Math.max() 函数返回作为输入参数的最大数字，如果没有参数，则返回 -Infinity。
Math.min() 函数返回作为输入参数的数字中最小的一个，如果没有参数，则返回 Infinity。
Math.random() 函数返回一个浮点数，伪随机数在范围从0 到小于1，也就是说，从 0（包括 0）往上，但是不包括 1（排除 1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。
Math.round() 函数返回一个数字四舍五入后最接近的整数。
Math的妙用
?四舍五入保留两位小数
方法一：使用Math.round()方法+除法
Math.round((3.6666)*100)/100 //3.67 方法二：直接使用数字类型自带的方法toFixed(n)
let num = 3.66666 num.toFixed(2) //3.67 Array
1.join (原数组不受影响)
该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。
返回值:返回一个新的字符串
//将数组用 - 符号连接起来
let arr = [1,2,3,4,5]; let str = arr.join('-'); console.log(str)//str = 1-2-3-4-5; join('拼接符号')，拼接符号可以是任意值(代码，表情，符号 ...)
2.split (原数组不受影响)
该方法是用过指定的分隔符,将字符串分割成数组。
返回值:返回一个新的数组
let str = 'wqz-ttj'； let arr = str.split('-'); console.log(arr);// arr=['wqz','ttj']; let arr = str.split(''); console.log(arr);// arr=['w','q','z','t','t','j']; 数组的增删操作(直接改变原数组)
3.push
该方法可以在数组的最后面,添加一个或者多个元素
结构: arr.push(值)
返回值:返回的是添加元素后数组的长度.
4.pop
该方法可以在数组的最后面,删除一个元素
结构: arr.pop()
返回值:返回的是刚才删除的元素.
5.unshift
该方法可以在数组的最前面,添加一个或者几个元素
结构: arr.unshift(值)
返回值: 返回的是添加元素后数组的长度
6.shift
该方法可以在数组的最前面,删除一个元素
结构: arr.shift()
返回值: 返回的是刚才删除的元素.
数组的翻转和排序(改变数组)
7.reverse 翻转数组
结构:arr.reserse(),修改的是原数组。
8.sort
该方法可以对数组进行排序，修改的是原数组。
let arr = [1,3,5,2,4,23,122,34]; //没有参数:时按照首字符的先后排序 arr.sort()//arr=[1,122,2,23,3,34,4,5]; //有参数 arr.sort(function(a,b){ return a-b;//从小到大排序 return b-a;//从大到小排序 }) 数组的拼接与截取(原数组不受影响)
9.concat
该方法可以把两个数组里的元素拼接成一个新的数组
返回值: 返回拼接后的新数组
let arr1 = [1,2,3]; let arr2 = [4,5,6]; let arr = arr1.concat(arr2);//arr = [1,2,3,4,5,6]; arr1.push(arr2);//arr1 = [1,2,3,[4,5,6]]; 该方法和push的区别: push是直接把后一个元素原封不动的添加到第一个数组的后面;
10.slice 截取 出来
该方法可以从数组中截取指定的字段,返回出来
返回值:返回截取出来的字段,放到新的数组中,不改变原数组
结构1: arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end
let arr = [0,1,2,3,4,5,6,7]; let newArr = arr.slice(0,3)//newArr = [0,1,2]; 结构2: arr.slice(start) ;从start下标开始截取,一直到最后
let arr = [0,1,2,3,4,5,6,7]; let newArr = arr.slice(2)//newArr = [2，3，4，5，6，7]; 结构3: arr.slice( ) ;全部截取
let arr = [0,1,2,3,4,5,6,7]; let newArr = arr.slice()//newArr = [0,1,2,3,4,5,6,7]; 删除或增加元素(任意在任何位置,直接改变原数组,返回的是被删除元素组成的新数组或者空数组)
11.splice
结构1: arr.splice(start,deletedCount) 纯删除
从start下标开始,删除几个
结构2: arr.splice(start,deletedCount,item) 替换
从start下标开始,删除几个,并在该位置添加item
结构3: arr.splice(start,0,item) 纯添加
从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动
let arr = [1,2,6,7,8]; arr.splice(2,0,3,4,5);//arr = [1,2,3,4,5,6,7,8]; 查找元素在数组中出现的位置
12.indexOf
该方法用来查找元素在数组中第一次出现的位置
结构: arr.indexOf(元素)
特殊用法:
(1) arr.indexOf (ele,fromIndex),从fromIndex这个下标开始,元素第一次出现的位置
用来判断元素是否存在于数组中!
if (arr.indexOf(ele) === -1){//说明元素不存在!! console.log('元素不存在!) } else { console.log(' 元素存在! ') } 13.lastIndexOf()
该方法用来查找元素最后一次在数组中出现的位置
14.includes()
数组是否包含指定值。返回值为true 或 false
// 参数1：包含的指定值 [1, 2, 3].includes(1); // true // 参数2：可选，搜索的起始索引，默认为0 [1, 2, 3].includes(1, 2); // false // NaN 的包含判断 [1, NaN, 3].includes(NaN); // true 数组方法的巧妙运用
1.字符串翻转
const src = 'abcd' // 将字符串分割成数组 const arrSrc = src.split('') //['a','b','c','d'] // 利用数组的reverse方法翻转数组 const chuange = arrSrc.reverse() //['d','c','b','a'] // 再利用数组的join方法将数组拼接成字符串 const newSrc = change.join('') //'dcba' // 可缩写为 const newSrc = src.split('').reverse().join('') ES6新增的遍历数组方法
1.forEach( )
该方法等同于for循环,没有返回值
用法:
arr.forEach(function(item,index,arr){ //里面的function是一个回调函数, //item: 数组中的每一项; //index:item 对应的下标索引值 (一般情况不用到) //arr: 就是调用该方法的数组本身 (一般情况不用到) }) 2.for of
const array1 = ['a', 'b', 'c']; for (const element of array1) { console.log(element); } // Expected output: "a" // Expected output: "b" // Expected output: "c" 3.map( )
映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等
//里面的function是一个回调函数, //item: 数组中的每一项; //index:item 对应的下标索引值 (一般情况不用到) //arr: 就是调用该方法的数组本身 (一般情况不用到) 用法: //基本函数 const arr = [1,2,3,4,5]; const res = arr.map(function(item,index,arr){ return item*2; }) //箭头函数 const res = arr.map(item =>item*2) //res[2,4,6,8,10] 4.filter( )
filter方法: 有返回值(返回一个新数组), 过滤出符合条件的元素
const arr = [1, 3, 5, 2, 4, 6]; //基本函数 const res = arr.filter(function(item, index) { return item % 2 === 0; }); //箭头函数 const res = arr.filter(item => item %2 === 0) console.log(res); //[2,4,6] 过滤出布尔类型为true的项
const arr = [0, "", false, 1, 3, 4]; const res = arr.filter(function(item, index) { return item; }); console.log(res); 5.some
判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false
const arr = [ { name: "zs", age: 18}, { name: "ls", age: 20}, { name: "ww", age: 22} ]; // 基本函数 const res = arr.some(function(item) { return item.name === 'ww'; }); // 箭头函数 const res = arr.some(item =>item.name === 'ww') console.log(res); 6.every
判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false
const arr = [ { name: "zs", age: 18}, { name: "ls", age: 20}, { name: "ww", age: 22} ]; // 基本函数 const res = arr.every(function(item) { return item.age === 18; }); // 箭头函数 const res = arr.every(item => item.age === 18) console.log(res); 7.find
找到符合条件的项,并且返回第一项，修改这一项的数据就是修改原数组数据
const arr = [ { id: 3, name: "ls", done: false }, { id: 1, name: "zs", done: true }, { id: 2, name: "ww", done: true } ]; // 基本函数 const res = arr.find(function(item) { return item.name === zs; }); // 箭头函数 const res = arr.find(item => { return item.name === zs; }); console.log(res); // { id: 1, name: "zs", done: true } 8.findIndex
找到符合条件的项，并且返回第一个的下标
const arr = [ { id: 3, name: "ls", done: false }, { id: 1, name: "zs", done: true }, { id: 2, name: "ww", done: true } ]; var res = arr.findIndex(function(item) { return item.done; }); console.log(res); 9.reduce
1.求和计算
*第一次：pre–>1 next–>2 index–>1 pre+next=1+2=3 *第二次：pre–>3 next–>3 index–>2 pre+next=3+3=6 *第三次：pre–>6 next–>4 index–>3 pre+next=6+4=10 *第四次：pre–>10 next–>5 index–>4 const arr = [1,2,3,4,5] ; // 基本函数 const newArr = arr.reduce(function(pre,next,index){ return pre+next ; //pre+next=10+5=15 }) // 箭头函数 const newArr = arr.reduce((pre,item)=>pre+item) console.log(newArr); 2.扁平化数组(拼接数组)
var arr2 = [[1,2,3],[4,5],[6,7]] ; var new2 = arr2.reduce(function(pre,next,index){ return pre.concat(next); //前数组拼接后数组 .concat() }) console.log(new2); 对象数组叠加计算 var arr3 = [ {price:10,count:1}, {price:15,count:2}, {price:10,count:3} ]; var new3 = arr3.reduce(function(pre,next,index){ return pre+next.price*next.count; },0) //pre是数组的第一项，是一个对象，不能算术运算.我们在后面自定义pre为0，next为数组第一项 console.log(new3); 应用 : 利用数组拼接的方法实现遍历添加html元素
具有和for-in，map相同的功能
const res = data.reduce((pre, item) => { return pre + ` <tr> <th scope="row">${item.id}</th> <td>${item.name}</td> <td>${item.age}</td> <td>${item.sex}</td> <td>${item.group}</td> <td>${item.phone}</td> <td>${item.salary}</td> <td>${item.truesalary}</td> <td>${item.province + item.city + item.county}</td> <td> <button type="button" class="btn btn-primary btn-sm">修改</button> <button type="button" class="btn btn-danger btn-sm">删除</button> </td> </tr> ` }, '') 最后一行的''就是自定义的第一项，下一次pre是上一次return的结果，res获取return的pre总和。
item是data数组的每一项，data是数组里面保存的是很多对象
