一、 let 和const变量声明
1. let 声明块级作用域的变量:
let 声明的变量不存在变量提升。
let 在同一代码块不能重复。
for(let i=0;i<10;i++){
}
// console.log(i);
let name = 1;
name = "a";
{
let name = 2;
console.log(name);
}
// console.log(name);
2. const 声明一个只读的常量。
声明后不能去修改值(对基础数据类型有效,引用数据类型赋值的是一个地址,修改数据也可以修改到值)。
const name1 = "zhang san";
// name1 = "lisi";
const peo = {name:'lisi',age:22};
peo.age = 33;
//console.log(peo);
二、 变量的解构赋值
1, 数组的解构赋值, 左右两边的解构相同,就可以解构赋值。
// let a = 1;
// let b = 2;
// let c = 3;
let [a,b,c] = [1,,3];
let [,,s3] = ["a","b","c"];
//console.log(b);
let [b1,b2,b3] = ["a1","a2"]; // 左右变量不够解构,默认值是undefined
let [c1,...c2] = [1,2,3,4,5]; // ...c2,把剩下的值都赋值给c2
//console.log(c2);
2. 对象的解构
let { name2, age } = {name2:"s1",age:12};
//console.log(name2, age);
let { namea: nameTest, agea: ageTest, go="default" } = {namea:"s1",agea:12};// 对象解构根据key值把value赋值在对应的变量位置,解构可以设置默认值。
//console.log(nameTest,go);
3.字符串解构
let [d1,d2,d3] = "hello";
console.log(d1,d2);//h e
4.函数的参数也可以解构
function f1([x,y,z = 10]){
console.log(x,y,z);
}
f1([1,2]);//1 2 10
三.字符串的扩展
1.模板字符串
{
let name = "zhang san";
let age = 10;
let str = "姓名:"+ name +"年龄:" +age;
let str1 = `姓名${name}"年龄:"${age}`;
console.log(str1);//姓名zhang san"年龄:"10
}
2.includes() 返回bool,表示是否找到传递的参数
{
let str = " hello world ";
console.log(str.includes("a"));//false
}
3.trimStart()去掉头部空格 trimEnd()去掉尾部空格
{
let str = " hello world ";
console.log(str.trimStart());//hello world
console.log(str.trimEnd());// hello world
}
4.matchAll()
{
let str = " hello world ";
console.log(str.matchAll("o").next());// 返回一个遍历器,需要用.next()方法去取结果。一般还是用match配合正则。
}
5.replaceAll()
{
let str = " hello world ";
str1 = str.replace(/o/g,"-");
str2 = str.replaceAll("o","-")
console.log(str2);
}
6.at()接受一个位置索引参数,返回指定位置的字符
{
let str = " hello world ";
console.log(str.at(3));//l
}
四,数值的扩展
1.Number.isFinite()检测一个值是否有限
console.log(Number.isFinite(1/3));//true
2. Number.isNaN() 检测一个值是否为NaN。
console.log(Number.isNaN("a"/10));//true
3. Number.parseInt(),Number.parseFloat();
es6把这两个方法移到了Number对象上,window对象上的还保留了
五.Math
Math.trunc()返回去除小数的整数部分
{
var num = -2.344;
console.log(Math.trunc(num));//-2
}
2.sing()返回数字是正数(1),还是负数(-1) 还是0(0,-0)
{
let num = -0;
console.log(Math.sign(num));//-0
console.log(Math.sign("A"));//NaN
}
3.BigInt(大整数)
js最大能表示的数值是2的1024次方。
console.log(Math.pow(2,1023));
{
let num = 333343434n;
let num1 = 2222222n;
console.log(num + num1);
}
六.函数扩展
1.rest参数,获取函数的所有参数,与arguments类似,rest是一个数组。
{
function f1(...values){
console.log(values,arguments)
}
f1(1,3,4,5,6);
}
2.箭头函数
1. 不能作为构造函数
2. arguments对象,获取所有参数只能用(...values)
普通函数的this是最近调用该函数的对象。
箭头函数的this 代表的上层对象,没有自己的this对象
{
function f1(){
return 10;
}
let f2 = () => 10;//相当于return 10
let f3 = (...values) => {
let x = 10;
let y = 15;
return x + y;
};
let f4 = () =>(//直接返回一个对象
{a:1,c:2}
)
let peo = {
name:"zhang san",
go:() =>{
console.log(this.name);
}
}
console.log(f4);
}
箭头函数与普通函数this区别
{
let dom = {
name:"dom",
click1:function(){
document.addEventListener("click",function(){
// 普通函数谁调用,this就指向谁
console.log(this);
});
},
click2:function(){
document.addEventListener("click",()=>{
// 箭头函数this指向上一级
console.log(this);
});
}
}
dom.click1();//#document
dom.click2();//{name: 'dom', click1: ƒ, click2: ƒ}
}
3.尾调用
{
function g(x){
return x + 10;
}
function f(x){
return g(x);
}
}
七.数组扩展
1. ...扩展运算符
可把数组转为用,分隔的序列
可合并多个数组
可以拷贝数据
{
var arr1 = [1,2,3,4,{a:1}];
var arr2 = ["a","b"];
var arr3 = [...arr1,...arr2];
var arr4 = [...arr1];//只能深拷贝一层
console.log(arr3);//[1, 2, 3, 4, {a:1}, 'a', 'b']
console.log(arr4);//[1,2,3,4,{a:1}]
console.log(arr4 === arr1);//false
}
2.from()//把类似数组对象转为数组
{
let o1 = {
0:"a",
1:"b",
length:2
}
o1 = Array.from(o1);
console.log(o1);// ['a', 'b']
}
3.of()把一组值转为数组
{
let a = Array.of(1,2,3);
console.log(a);// [1, 2, 3]
}
4.find()找出符合条件参数的成员,返回第一个符合条件的值
findIndex()返回索引
{
let arr = [1,3,5,6];
let b = arr.find((n)=>n>3);
console.log(b);//5
let c = arr.findIndex((n) => n > 3);
console.log(c);//2
}
5.keys()遍历数组的下标,values()遍历数组的元素
{
let arr = [1,3,5,7];
for(let item of arr.keys()){
console.log(item);
}
}
6.includes()返回一个bool,表示数组是否包含此值
{
let arr = [1,2,3,4];
console.log(arr.includes(9));//false
}
7.flat()把嵌套数组拉平
{
let arr = [1,[2,3]];
let b = arr.flat();
console.log(b);//[1, 2, 3]
}
8.at()根据数组索引返回对应元素,可以支持倒序
{
let arr = ["a","b","c","d"];
console.log(arr.at(-1));//d
}
七.对象扩展
1.属性名表达式
{
let o = {};
o.aa = "aa";
let test = "ss";
o[test] = "bb";
let c = {[test]:"cc"};
console.log(c);
}
2. ...对象扩展运算符
{
let o = {name:"test1",age:10};
let o1 = {a:1,b:2};
let b = {...o,...o1};
console.log(b);//{name: 'test1', age: 10, a: 1, b: 2}
}
3.Object.assign(target,source)//把source对象合并到target上
{
let t = {a:1};
let s = {b:2};
Object.assign(t,s);
console.log(t);//{a: 1, b: 2}
}
4.keys() 返回对象的key为一个数组 values() 把对象的value值返回为一个数组
{
let o = {a:1,b:2,c:3};
console.log(Object.keys(o));//['a', 'b', 'c']
console.log(Object.values(o));//[1, 2, 3]
}
5.entries(),把对象转为数组(二维)
{
let o = {a:1,b:2,c:3};
console.log(Object.entries(o).flat());//['a', 1, 'b', 2, 'c', 3]
}
八.Symbol 数据类型 独一无二的值
{
let s = Symbol();
console.log(typeof(s));
let a = {};
a[s] = "hhh";
console.log(a);//{Symbol(): 'hhh'}
}
九.Set 数据结构 ,和数组类似,内部数据不会重复。
1.数组去重
{
let s = new Set([1,2,2,3,3,4]);
console.log(s);//Set(4) {1, 2, 3, 4}
let arr =[1,2,2,3,3,4];
let s1 = [...new Set(arr)];
console.log(s1);//[1, 2, 3, 4]
}
2.add()添加数据,返回set对象,delete()删除,has()判断是否有此成员,clear()清除所有成员
{
let s = new Set();
s.add("a").add("b").add("c");
s.delete("b");
// s.clear();
console.log(s.size)//2
console.log(s);//{'a', 'c'}
}
十。Map数据结构 键值对的集合
set,get
has(key) 返回一个bool值,表示当前键是否存在
delete(key) 删除某个键
clear() 清除整个map数据
{
let o={a:1};
let b={[o]:"bb"}; // 如果键不是字符串,会自动转为字符串。
let m = new Map();
m.set(o,"bb");
console.log(m.get(o));//bb
}
{
let map = new Map([["name","zhang san"],["age",10]]);
console.log(map.get("name"));
console.log(map.size);
for(let [key,value] of map){
console.log(key,value);
}
}