新增字符串操作方法
let str="hello word!!!";
console.log(str.includes("h"));//判断字符串有没有h返回true
console.log(str.startsWith("e"));//判断字符串头部有没有e返回false
console.log(str.endsWith("d"));//判断字符串尾部有没有d返回false
console.log(str.repeat(6));//将字符串遍历6次
console.log(str.padStart(20,"你好"));//第一个参数是总长度 第二个是补到该长度的文字 补在开头
console.log(str.padEnd(20,"你好"));//第一个参数是总长度 第二个是补到该长度的文字 补在尾部
console.log(str.trimStart());//消除开头的空格
console.log(str.trimEnd());//消除结尾的空格
数组的扩展 …arr
let arr=[];
arr.push(...[1,2,3,4,5,6])
console.log(arr)//[1, 2, 3, 4, 5, 6]
arr.push(1)
console.log(arr)// [1, 2, 3, 4, 5, 6, 1]
arr.push([4,2,3,6])
console.log(arr)//[1, 2, 3, 4, 5, 6, 1, Array(4)]
console.log(1,2,...[3,4,5,6,7]);
console.log(...(1>2?[1]:[2]));//2 可放置表达式
console.log([...[],1]);//[1]
//可作为函数调用
function add(x,y){
return x+y;
}
let arr1=[8,9]
console.log(...arr1);//8 9 将数组遍历出来
console.log(add(...arr1))
Array.from()方法
将类数组对象转换为真正的数组
from()还可以接受第二个参数,用来对每个元素进行处理
let arr=document.querySelectorAll("li"); //获取到所有的li标签
console.log( Array.from(arr));
let a=Array.from(arr,ele=>ele.textContent);
console.log(a)
of方法
0f()将任意的数据类型转换成数组
console.log(Array.of(3,11,20,[1,2,3],{id:1}));
数组的遍历方法
//对键名的遍历
let arr=[1,2,3,4];
for(let a of arr.keys()){
console.log(a); // 0123
}
//对键值的遍历
for(let a of arr.values()){
console.log(a);// 1234
}
//对键值对的遍历
for(let a of arr.entries()){
console.log(a);// 01 12 23 34
}
对象的扩展
const name="填",age=1;
//普通的写法
const obj={
this.name=name;
this.age=age;
show:function(){
console.log(this.name)
}
}
//简写
const obj={
name, //这种简写 需属性跟原本属性相符 才可进行匹配数据 要不然会找不到
age,
show(){
console.log(this.name)
}
}
obj.show()
对象的新增方法
Object.is()方法
console.log('abc'==="abc"); //true
console.log(Object.is('abc','abc'));//true
console.log({}==={});//false 想必这里有点疑问 为什么两个都是[]会返回false呢 因为这里的两个对象 都引用了不同的内存地址 所有才会返回false
console.log(Object.is({},{}));//false
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true
console.log(+0===-0);//true
console.log(Object.is(-0,+0));//false
区别:===和Object.is的区别就是 ===在进行NaN判断时会等于false Object在判断-0+0是否相等会返回false
Object.assign()方法
const target={a:1}
const source1={b:2}
const source2={c:3}
Object.assign(target,source1,source2) //target为目标对象 source1为源对象 source2为源对象 可以为多个源对象
console.log(target) //a:1 b:2 c:3
const target1={a:1,b:1,c:2}
const source3={b:2}
const source4={c:3}
Object.assign(target1,source3,source4)
console.log(target1);//a:1 b:2 c:3
后面的对象属性会覆盖前面的对象属性
数组的遍历方法
//对键名的遍历
let arr=[1,2,3,4];
for(let a of arr.keys()){
console.log(a); // 0123
}
//对键值的遍历
for(let a of arr.values()){
console.log(a);// 1234
}
//对键值对的遍历
for(let a of arr.entries()){
console.log(a);// 01 12 23 34
}
对象的遍历方法
let object ={id:1,name:"填"}
console.log(Object.keys(object))//(2) ['id', 'name']
console.log(Object.values(object))//(2) [1, '填']
console.log(Object.entries(object))//[Array(2), Array(2)]
includes()返回布尔类型 判断数组中是否包含给的值
let a=[1,2,3,4,5,6,7,8]
console.log(a.includes(8));//true
console.log(a.includes("8"));//false
set对象
是一个无序 没有重复值的集合 (没有键)
let arr=[1,2,3];
// console.log([...arr]);
let set=new Set([...arr,6]);
console.log(set);
// let set1=new Set();
// set1.add(1)
// console.log(set1);
//返回有多少个元素
console.log(set.size);
//添加元素进去
console.log(set.add(5));//Set(5) {1, 2, 3, 4, 5}
//删除
console.log(set.delete(5));//true
//返回set里是否有该成员
console.log(set.has(5));//false
//清除所有成员 没有返回值
// console.log(set.clear())//undefined
for(let item of set.keys()){
console.log(item);//1,2,3,4 set中key方法和values方法显示的内容一样
}
for(let item of set.values()){
console.log(item);//1,2,3,4
}
for(let item of set.entries()){
console.log(item);// [1,1],[2,2],[3,3],[4,4] set没有键 因此返回的键值是这样子的
}
去重
let a=[1,2,3];
let b=[2,3,4];
let c=[5,6,7];
let set1=new Set([...a,...b,...c])
console.log(...set1);
let a1="asdfsfaa";
let set2=new Set(a1);
let a3=[...set2].join(""); //join是数组的方法 给每个序列的数字加上字符
console.log(a3);
map对象
map对象的键值都可以是任意数据类型的
let age="age1";
let map=new Map([[age,1]]);
map.set(name,"张三");
console.log(map.get("name"));//类型不对也会返回undefined
console.log(map.size); //返回个数 1
console.log(map.has(name)); //判断是否有该键 true
// console.log(map.delete(name));//删除键所对应的值 true
// console.log(map.clear(name));//清除所有对象 返回undefined
for(let i of map.keys()){
console.log(i); //这里name会返回空值 因为是个对象 为空
}
for(let i of map.values()){
console.log(i);
}
for(let i of map.entries()){
console.log(i);
}
console.log(map);
Module语法
export和import命令
export为导出对应的属性和方法
//这里定义了要导出的属性
export const name="张三";
export const age=1;
使用import导出
<script type="module">
import {name,age} from './Module.js' //不可以忽略括号
console.log(name,age) //张三 1
</script>
使用import命令时 需要知道所加载的变量名和函数名
使用export default命令
export default在模块中只能使用一次 默认导出适合导出一个值,且在导入时可以自定义名称,语法更简洁。
export default function email1(){
return "123"
}
-----------------------------------
export const email="123456789@qq.com";
export const email;
使用import导出
<script type="module">
import name from './Module.js'; //名字可以自定义 因为default只能使用一次 因此import命令后面不用加大括号
console.log(name()); //123
---------------------------------
import name from './Module.js';
console.log(name); //123456789@qq.com
</script>