当前位置：首页 > news >正文

JavaScript6

news 2025/9/19 2:26:24

一、概念

ES6是JavaScript语言的标准。

新特性：let和const命令、变量的解构赋值、字符串函数对象数组等扩展。

环境准备：需要安装NodeJs。

二、新特性

1、let

let命令用来声明变量。他的用法类似var，但所声明的变量，只在let命令所在的代码块内有效

var特性：作用域是函数级的、存在变量提升。

let特性：作用域是块级的(花括号级)、不存在变量提升。

例子：

<script>/************************作用域**************************/ {var i=1;let j=2;}//打印：1console.log(i);//打印：Uncaught ReferenceError: j is not definedconsole.log(j);/************************变量提升**************************/ //打印：undefinedconsole.log(a);//打印：Uncaught ReferenceError: b is not definedconsole.log(b);var a=1;let b=1;/************************特殊作用域**************************/var c=[];// for(var d=0;d<10;d++){for(let d=0;d<10;d++){c[d]= function(){console.log(d);}}//当d用var定义是打印：10；当d用let定义时打印：6；c[6]();
</script>

2、const

一旦声明，常量的值不可改变。

const一旦声明时就必须赋值。

const为块级作用域。

const声明的常量不能提升。

<script>/****************声明后值不可变*****************/const a=1;//1console.log(a);a=2;//报错console.log(a);/****************声明时就必须赋值*****************///报错// const b;// b=2;/****************块级作用域*****************/{const c=1}//报错console.log(c);/****************常量不能提升*****************///报错console.log(d);const d=1;</script>

3、对象解构赋值

解构赋值可以用于对象，对象的属性没有次序，变量名必须与属性同名。

对象的解构赋值，可以很方便的将现有对象的方法，赋值到，某个变量。

<script>/**************用于对象******************/var uer={name:"11",age:22}const {age,name}=uer;//22 "11"console.log(age,name);/**************现有对象的方法******************/let {log} =consolelet {max,min,random}=Math;//3log(max(1,2,3));
</script>

4、字符串扩展

ES6加强了对Unicode的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码。

 /**************unicode******************///aconsole.log("\u0061");

字符串遍历器接口

/**************遍历器接口******************/for(let a of "1bsefewf"){console.log(a);}

模板字符串

    /**************模板字符串******************/var url="http://www.baidu.com";//以前var a1="<a href='"+url+"'>111</a>";log(a1)//现在var a2=`<a href='${url}'>111</a>`;log(a2)

新增方法：includes()、startsWith()、endsWith()。

    var c="asdefdwe";//truelog(c.includes("a"));log(c.startsWith("a"));log(c.endsWith("e"));//带参数 truelog(c.includes("f",2));log(c.startsWith("d",2));//第二个参数代表第几个结束log(c.endsWith("s",2));

repeat()：返回一个新字符串，重复字符串N次

    //asdefdweasdefdwelog(c.repeat(2));//""log(c.repeat(0));

padStart()、padEnd()：自动补全，参数一：字符补全后所处位置，参数二：补全用的字符串

    //ababaxlog("x".padStart(6,"ab"));//axlog("x".padStart(2,"ab"));//xababalog("x".padEnd(6,"ab"));//xalog("x".padEnd(2,"ab"));

trimStart()、trimEnd()：分别去掉前后空格。都会返回新的字符串。

    //aalog(" aa ".trim())//aa空格log(" aa ".trimStart())//空格aalog(" aa ".trimEnd())

at()：接受一个整数作为参数，返回参数指定位置的字符。正数：从下标0开始。负数：倒叙从下标-1开始。

//blog("abc".at(1));//blog("abc".at(-2));

5、数组扩展

扩展运算符是三个点组成(...)。将一个数组转为用逗号分隔的参数序列。

    let {log}=console;//1 1 2 3 log(1,...[1,2,3]);

替代函数的appply方法。

    let {log}=console;var a=[1,2,43,66];//66log(Math.max.apply(null,a));//66log(Math.max(...a));

合并数组

    let {log}=console;var a=[1,2,43,66];var b=[11,22,432,665];var c=a.concat(b);var d=[...a,...b];//1, 2, 43, 66, 11, 22, 432, 665log(c);//1, 2, 43, 66, 11, 22, 432, 665log(d);

Array.from()：用于将类数组转为真正的数组。

常见类数组：arguments、元素集合、类似数组的对象。

类数组只能使用数组的读取方式和length属性。

<body><p>1</p><p>2</p><p>3</p>
</body>
<script>let {log}=console//argumentfunction acc(){//2log(arguments[1]);//[1, 2, 3]log(Array.from(arguments))}acc(1,2,3)//元素数组let ps=document.getElementsByTagName("p");//HTMLCollection(3) [p, p, p]log(ps);//<p>1</p>log(ps[0])//[p, p, p]log(Array.from(ps));//对象var user={"10":1,"2":2,'name':"22"}//1log(user[10]);log(Array.from(user));
</script>

Array.of：用于将一组值转换为数组。

6、对象的扩展

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。

方法也可简写。

函数返回值也可用。

    let {log} = console;let name="hell"var user={name,age:22,//老的// getName: function(){//     log(this.name);// }getName(){log(this.name);}}log(user.name);user.getName();/*************函数返回值**************/function meth(){let x=21;let y=22;return { x , y}}log(meth().x)

属性名表达式

ES6允许字面量定义对象时，用表达式作为对象的属性名，即把表达式放在方括号内。

    let a="abc";var b={[a]:22,name:222}//{abc: 22, name: 222}log(b);

对象的扩展运算符

    let d={a:1,b:2}let f={...d}// {a: 1, b: 2}log(f);

7、箭头函数

在ES6中允许“箭头”(=>)定义函数

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

    let {log}=console//参数var a=x=>{log(x)};//1a(1);var b=()=>{log("111");}//111b();var c=(x,y)=>{log(x+y);}//3c(1,2);

如果箭头函数的代码部分多于一条语句，就要使用大括号将他们括起来，并且使用return语句返回。

    var d=(x,y)=>{let aa=1;log(x+y+aa);}//4d(1,2);

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

    var e=()=>({X:1,y:2})//{X: 1, y: 2}log(e());

箭头函数的一个用处就是简化回调函数。

    var f=[1,2,3]//1 2 3f.map((element,index)=>{log(element);})

对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域总的this。

    var name="222";var user={name:"111",getName(){// setTimeout(function(){//     //222//     log(this.name)// })//111setTimeout(()=>{log(this.name)})}}user.getName();

8、set数据结构

ES6提供了新的数据结构set。他类似数组，但是成员的值都是唯一的。没有重复的值。

set数组用法：数组去重、字符去重。

                add("值")：添加值
                delete("值")：删除值
                has("值")：判断set里面是否有这个值
                clear()：清除所有成员
                size：属性返回长度

<script>let {log}=consolevar setNUm=new Set();var num=[1,2,3,4,5,5,6]num.forEach(n=>{setNUm.add(n);})//去重：1，2，3，4，5，6log(setNUm)var setA=new Set([1,2,3,4,4,54,5])//使用扩展预算符展示，变为数组： 1,2,3,4,54,5log(...setA)//字符串去重var str=new Set('嘤嘤嘤呃呃呃')//转换成字符串：嘤呃log([...str].join(''))//返回长度:2log(str.size)</script>

9、Promise

promise是异步编程的一种解决方案。他是一个对象，从它可以获取异步操作的消息。promise提供统一的API，各种异步操作都可以用同样的方法进行处理
有了promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

用法：promise对象是一个构造函数，用来生成promise实例。promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。

    const promise=new Promise((resolve,reject)=>{if("成功"){resolve(true)}else{reject(false)}})

10、Async

async可以将异步操作变为同步操作。

在函数前面添加Async，是异步的前面添加await

实际运用：在发请求时，需要另一个请求获取到数据后，在拿着这个数据去发送请求。

    /*------------------------异步---------------------*/function print() {//定时器是异步的，setTimeout(() => {console.log("异步11")}, 10);//先执行console.log("异步222")}// 先：222，在：11print();/*------------------------同步---------------------*/async function setTimess() {//定时器是异步的，return new Promise((resolve,reject)=> {setTimeout(() => {console.log("11")//返回一定放着里面！！！！！！！！！！！！！！！resolve(true);}, 10);})}async function prints(){let res=await setTimess();console.log(res);}// 先：222，在：11prints();

11、class

        ES6提供了接近传统语言的class概念，作为模板对象
        constructor方法是类的默认方法，通过new命令生成对象实例，自动调用该方法。一个类必须有constructor方法，没有定义显式的，就会添加一个空的。
        生成类的实例使用new 对象();

    class User{constructor(name,age){this.name=name;this.age=age;}getName(){console.log(this.name);}getAge(){return this.age}}var user=new User("11",22);user.getName();

属性与方法：

1、实例方法；

    class People{say(){console.log("say something")}}var people=new People();people.say();

2、实例属性

    class People{constructor(name,age){this.name=name;this.age=age;}say(){console.log(this.name+"say something"+this.age)}}var people=new People("name",22);people.say();console.log(people.age+people.name)

3、静态方法

类相当于实力的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上关键字static，就表示该方法不会被实例继承。
如果静态方法包含this关键字，这this指的是类，而不是实例。

    class Abc{static abc(){console.log("静态方法")}static getSay(){this.say();}static say(){console.log("static")}say(){console.log("not static")}}Abc.abc();//staticAbc.getSay();var a=new Abc();//not statica.say();//不能，报错a.abc();

12、Module

Js一直没有模块体系，无法将一个大型程序拆分成相互依赖的小文件。ES6模块是通过export命令显示指定输出的代码，在通过import命令输入。

//导出
export getName(){console.log("name");
}//引用。name.js是上方方法的文件
import {geName} from "./name.js"