es6数组方法总结，es6对数组操作是非常方便的，当你掌握ES6操作数组方法后，对于处理数据是非常快的。
Set方法返回类数组对象（ 伪数组） Set方法不允许有重复的值
var arr = [1, 2, 1, 2, 3];
let set = new Set(arr);
console.log([...set]); // [1, 2, 3]
console.log(set); //Set(3) {1, 2, 3} 类数组
set.add(4) //添加一个
console.log(set); //Set(4) {1, 2, 3, 4}多增加一个4
console.log(set.has(5)); //判断是否有5 false
// set.clear() 清空
// set.delete(4) //删除
console.log([...set]); // [1, 2, 3, 4] 数组形式
//引用数据类型去重不起作用
let arr = [{
name: '张三'
}, {
name: '张三'
}]
let set = new Set(arr)
console.log(set);
Map数据 key可以指定为对象也可以dom
<div id="div"></div>
let obj = {
name: '张三',
age: 156
}
let el = document.getElementById('div')
let map = new Map()
console.log(map); //Map(0) {size: 0}
map.set(obj, "aaa") //指定key为对象
console.log(map); //Map(1) {{…} *=>* 'aaa'}
map.set(el, 'div') //指定key为dom
console.log(map); //Map(2) {{…} => 'aaa', div#div => 'div'}
Symbol是es6提供一种新的基础类型数据 他声明的是一个唯一的数据 Symbol不是一个构造函数 所以不能写new Symbol
//用Symbol声明一个唯一值等下往obj里面添加
let a = Symbol('a')
let s = Symbol('s')
// console.log(a == s);false
var obj = {}
obj[a] = "德玛西亚"
obj[s] = "诺克萨斯"
console.log(obj);
//{Symbol(a): '德玛西亚', Symbol(s): '诺克萨斯'}
obj.a = "德玛西亚"
obj.a = "诺克萨斯" //只填加一个 下覆盖上面的
console.log(obj); //{a: '诺克萨斯', Symbol(a): '德玛西亚', Symbol(s): '诺克萨斯'}
startsWith方法检测字符串中是否以某个片段开头 如果包含返回true 否则返回false
var str = 'hello world'
let bool = str.startsWith('h')
console.log(bool); //true
endsWith方法检测字符串中是否以某个片段结束 如果包含返回true 否则返回false
var str = 'hello world'
let bool = str.endsWith('world')
console.log(bool); //true
repeat方法返回一个新字符串，表示将原字符串重复n次
var str = 'hello' let str2 = str.repeat(2) console.log(str2); //hellohello
padStart将字符串从前面补全到某个长度 第一个参数是要补全到的长度 第二个是要用什么片段补全 返回值是补全后的字符串
var str = 'abc' let str2 = str.padStart(5, 'ad') console.log(str2); //adabc
padEnd将字符串从后面补全到某个长度 第一个参数是要补全到的长度 第二个是要用什么片段补全 返回值是补全后的字符串
var str = 'abc' let str2 = str.padEnd(5, 'de') console.log(str2); //abcde
.trim清除字符串前后的空格
let str = ' 德玛西亚 ' console.log(str); // 德玛西亚 前后都有空格 let str2 = str.trim() console.log(str2); //德玛西亚
trimStart清除字符串前面的空格
let str = ' 德玛西亚' console.log(str); // 德玛西亚 前面有空格 let str2 = str.trimStart() console.log(str2); //德玛西亚
trimEnd清除字符串后面的空格
let str = '德玛西亚 ' console.log(str); //德玛西亚 后面有空格 let str2 = str.trimEnd() console.log(str2); //德玛西亚
matchAll()遍历指定的值,要使用正则/xxx/g,它返回一个迭代器,用for of遍历
let str = "abcasa"
let match = str.matchAll(/a/g)
console.log(match); //Iterator 返回一个迭代器
for (let a of match) {
console.log(a);
}
/*
使用for of 将包含'a'遍历出来
['a', index: 0, input: 'abcasa', groups: undefined]
['a', index: 3, input: 'abcasa', groups: undefined]
['a', index: 5, input: 'abcasa', groups: undefined] */
过滤替换字符
var str = '15305869472' let str2 = str.replace(/0586/g, '****') console.log(str2); //153****9472
es6分页怎么切割数组和this指向问题
1 es6 rest参数可以将剩余参数全部接受
function fn(name, ...rest) {
console.log(name); //张三
console.log(rest); // [16, '男']
}
fn('张三', 16, "男")
2 对象属性添加和删除
let obj = {
name: '张三',
age: 15
}
delete obj.age; //在对象里删除一个
obj.sex = '男' //给对象增加一个 如果对象里面没有就是添加,有就是赋值
console.log(obj);
3 在使用了严格模式的作用域内使用不声明是不允许的
'use strict' a = 2; console.log(a); //不写严格'use strict' 模式可以使用不声明,是全局变量在window上
4 name属性可以用来获取函数的名字
function fn() {}
console.log(fn.name); //fn
function fn666() {}
console.log(fn666.name); //fn666
5 this的指向问题
function fn() {
console.log(this); //普通函数this指向window
}
fn()
5.1 箭头函数的this永远指向箭头函数声明时所在的对象
let obj = {
info: {
name: '张三',
fn() {
//this指向调用函数的对象 谁调用的fn() //是info 打印出来里面有name fn()
console.log(this);
// setTimeout(function() {
// console.log(this); //不使用箭头函数 function 指向window
// obj.name = '李四'
// console.log(this); //function 指向window
// }, 1000)
//箭头函数的this永远指向箭头函数声明时所在的对象 //是info
setTimeout(() => {
console.log(this);
obj.name = '李四'
console.log(this);
}, 1000)
}
}
}
obj.info.fn() //指向调用函数的对象 //info 里面有name fn()
6 切割数组 //splice 会改变原数据 // slice 不会改变原数组
let list = [{
"uid": 1539789,
"mobile": "18761800011",
"avatar": "https:\/\/baijiayun-wangxiao.oss-cn-beijing.aliyuncs.com\/uploads\/avatar.jpg",
"nickname": "121z",
"status": 1,
"created_at": "1592223461",
"updated_at": "1592224051"
}, {
"uid": 1539786,
"mobile": "18761800012",
"avatar": "https:\/\/baijiayun-wangxiao.oss-cn-beijing.aliyuncs.com\/uploads\/avatar.jpg",
"nickname": "121",
"status": 1,
"created_at": "1592223031",
"updated_at": "1592224058"
}, {
"uid": 1539785,
"mobile": "16598745622",
"avatar": "https:\/\/baijiayun-wangxiao.oss-cn-beijing.aliyuncs.com\/uploads\/avatar.jpg",
"nickname": "\u5565\u4e8b",
"status": 1,
"created_at": "1592222732",
"updated_at": "1592224082"
}, {
"uid": 1539784,
"mobile": "18761800000",
"avatar": "https:\/\/baijiayun-wangxiao.oss-cn-beijing.aliyuncs.com\/uploads\/avatar.jpg",
"nickname": "\u5f20\u4e09\u75af",
"status": 1,
"created_at": "1592222732",
"updated_at": "0"
}, {
"uid": 1539768,
"mobile": "18435790000",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/FbVbPSmw9yKm5rhn8OUx3Av2HLlFuUFCzNWZD3WB.png",
"nickname": "pipi",
"status": 1,
"created_at": "1592215722",
"updated_at": "1592223738"
}, {
"uid": 1539767,
"mobile": "13233333333",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
"nickname": "123",
"status": 0,
"created_at": "1592215623",
"updated_at": "1592223746"
}, {
"uid": 1539766,
"mobile": "12345678901",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
"nickname": "123323",
"status": 1,
"created_at": "1592215568",
"updated_at": "1592219482"
}, {
"uid": 1539765,
"mobile": "11781781231",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
"nickname": "hia",
"status": 0,
"created_at": "1592215567",
"updated_at": "1592223751"
}, {
"uid": 1539764,
"mobile": "13698545698",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/jDRI8OIeqtcKcwtx37re4NC2or4ARGNXcticUiq6.png",
"nickname": "212",
"status": 1,
"created_at": "1592215546",
"updated_at": "1592217842"
}, {
"uid": 1539763,
"mobile": "13526978456",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/XdQsU85SZCnakZBaJn0TjC5DFS87dPzFUj3JohL2.png",
"nickname": "1212",
"status": 1,
"created_at": "1592215422",
"updated_at": "1592215422"
}, {
"uid": 1539754,
"mobile": "15697856212",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/EuMTfekVXYCkFp1gIwsvgMYX3Uj9sZsnwwRZNnOj.png",
"nickname": "121333",
"status": 0,
"created_at": "1592212853",
"updated_at": "1592213495"
}, {
"uid": 1539753,
"mobile": "18888888888",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/PbaW7AwkOQV8OQrGR6Wa6lkv8vbdPxaJ3BGOSQ5I.jpeg",
"nickname": "ZhuZhuXia",
"status": 0,
"created_at": "1592212196",
"updated_at": "1592215708"
}, {
"uid": 1539751,
"mobile": "16455895622",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/BcAZREdBiudJa5yP3qBf4fb7qA9LAcCk0AmvGgWn.png",
"nickname": "sgdhs",
"status": 0,
"created_at": "1592211471",
"updated_at": "1592211856"
}, {
"uid": 1539749,
"mobile": "16854695765",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
"nickname": "qwqw",
"status": 1,
"created_at": "1592211134",
"updated_at": "1592211134"
}, {
"uid": 1539747,
"mobile": "13556544589",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/avatar.jpg",
"nickname": "dhs",
"status": 1,
"created_at": "1592210639",
"updated_at": "1592210639"
}, {
"uid": 1539745,
"mobile": "13592659843",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/SYFiU4ynHjnph2mO70TU47LiDs5l8rRqHmZBG292.png",
"nickname": "\u5b59\u6684\u660e",
"status": 1,
"created_at": "1592203037",
"updated_at": "1592209832"
}, {
"uid": 1539744,
"mobile": "18555555555",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/qPLUfwlDqSExyFcZmP3cnQQKW8xMUN0kcND10n5n.png",
"nickname": "???",
"status": 0,
"created_at": "1592201979",
"updated_at": "1592207529"
}, {
"uid": 1539743,
"mobile": "13786456732",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/Llt2dKz9hIhoTPtfSY863QEvk3dYnll4UlfOxSFc.png",
"nickname": "\u6f02\u4eae\u56fd",
"status": 0,
"created_at": "1592201929",
"updated_at": "1592204762"
}, {
"uid": 1539742,
"mobile": "16532488596",
"avatar": "http:\/\/120.53.31.103:84\/uploads\/image\/2020-06-15\/YHsyO4j0a8bXtfVWD5DsgeeXcUlKfTeNULzD0X2F.png",
"nickname": "lop",
"status": 0,
"created_at": "1592200528",
"updated_at": "1592223701"
}]
function subList(pageNum = 0, pagesize = 10) {
// 1 splice会改变原数据 用法(从下标位置开始删,删除几个),
//这里是删除10条,总数据就剩9条了,list一共是19条数据
// return list.splice(pageNum, pagesize)
// 2 slice 不会改变原数组 就单纯截取数组用 用法(从下标哪里开始截取,截取几个)
return list.slice(pageNum, pagesize)
}
// let s = subList(); //这里实参可以传参,假如不传参,按照形参的默认值0-10
// console.log(s); //10条
// console.log(list); // 还是总数19条
// -----------------------------------
let s = subList(0, 5); //这里实参可以传参
console.log(s); //5条
console.log(list); // 还是总数19条
Array.from
1 Array.from 是一个可以将类数组对象转化为真正的数组的方法
<ul> <li></li> <li></li> <li></li> <li></li> </ul>
// 1 Array.from 是一个可以将类数组对象转化为真正的数组的方法
let list = document.getElementsByTagName("li"); //得到的是HTMLCollection合集伪数组
console.log(list); //得到类数组,不可用数组方法 比如forEach循环会报错
list.forEach((item) => {
return console.log(item);//报错,因为是一个伪数组
})
console.log(list); //得到类数组,不可用数组方法 比如forEach循环会报错
list = Array.from(list) //将类数组转化为真正的数组
list.forEach(item => {
console.log(item); //转化后我可以使用数组循环方法
})
2 使用es6的new Set()方法,得到的也是类数组,可以用Array.from()将其转化为真正的数组
var arr = [1, 2, 1, 3, 2]; console.log(new Set(arr[2])); //报错 不可以使用数组方法 let setResult = Array.from(new Set(arr)) console.log(setResult[2]); //3
3 自定义的数组也可以转化成真正的数组
let obj = {
0: 1,
1: 2,
2: 3,
length: 3
}
let arr = Array.from(obj)
console.log(arr);
4 Array.of用来解决使用Array声明数组时 ,如果括号里参数只有一个,返回的是数组空数组长度,
用Array.of声明数组,参数只有一个不会是空数组的长度个数
//第1种声明数组方式 let arr = [1, 2, 3]; //第2种声明数组方式,使用Array声明数组时 ,如果括号里参数只有一个,那么就表示数组空数组长度 let arr1 = Array(1, 2, 3) //例如: // let arr = Array(3) // console.log(arr); //[empty × 3] //第3种声明数组方式 let arr2 = new Array(1, 2, 3) //使用Array.of声明数组,参数只有一个不会是空数组的长度个数,这就是和Array的区别 // let arr = Array.of(3); // console.log(arr); //[3]
5 find方法能够找到第一个满足条件的数组数据 并返回这个数据,找不到返回undefined
let arr = [1, 2, 3, 3]
let a = arr.find((item, index, ar) => {
return item > 2
})
console.log(a); //3
5.1 找到元素返回下标,找不到返回-1
let a = arr.findIndex((item, index, ar) => {
return item > 1
})
console.log(a);
5.2 fill填充替换数组 语法:(填充的值,从下标哪里开始,到下标哪里结束)
let arr = ['a', 'b', 'c'] arr.fill(7, 0, 2) //填充7,从0下标开始,到下标2接受,所以返回是77c console.log(arr);// 7 7 "c"
5.3 keys方法以数组的形式返回对象的所有的key
var obj = {
name: '张三',
age: 16,
sex: '男'
}
console.log(Object.entries(obj)) //打印key和value
console.log(Object.keys(obj)); //['name', 'age', 'sex']
console.log(Object.values(obj)) //['张三', 16, '男']
6 Math.trunc //返回数字的整数部分和parseInt的区别一个是es6的数组方法一个是js的
let num = 12.123 let num2 = Math.trunc(num) console.log(num2); //12 console.log(parseInt(99.336));//99
7 sign方法 如果参数是正数则返回1 如果是负数则返回-1 如果参数是0返回值也是0 如果是-0返回值也是-0
//如果参数不是数字 就会返回NaN 非数字的意思 not a number
console.log(Math.sign(9)); //1
console.log(Math.sign(-5)); //-1
console.log(Math.sign(0)); //0
console.log(Math.sign(-0)); //-0
console.log(Math.sign('好好学es6')); //NaN
8 Ts编译的时候就会提示语法错误,不需要向js一样运行起来才知道错误,ts将数据类型定义好,如果和"="后面不一样就会报错
//前面的bool是变量:后面是类型 = 如果等号后面的和定义的类型不同代码直接报错, let bool:boolean = false //定义的类型和等号类型不一样就,代码就爆红 let str:string = '' let num:Number = 2
