es6常用语法

最新推荐文章于 2024-07-28 01:00:00 发布
最新推荐文章于 2024-07-28 01:00:00 发布
阅读量420 收藏
点赞数
分类专栏： es6 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duansamve/article/details/80469860
版权

一、let和const申明变量和常量：

//作用域只限于当前代码块

//使用let申明的变量作用域不会提升

//在相同的作用域下不能申明相同的变量

//for循环体现let的父子作用域

如下示例可以看出let的优势：

    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <script>
        window.onload = function(){
            const buttons = document.getElementsByTagName("button");
            for(var i = 0; i<buttons.length; i++){
                (function(i){
                    buttons[i].onclick = function(){
                        alert(i);
                    }
                })(i);
            }
        }
    </script>
        window.onload = function(){
            const buttons = document.getElementsByTagName("button");
            for(let i = 0; i<buttons.length; i++){
                    buttons[i].onclick = function(){
                        alert(i);
                    }
            }
        }

 二、es6的解构赋值：一一对应

数组：

let [name, age, sex] = ["Samve", 30, "men"];

console.log(name);

console.log(age);

console.log(sex);

对象：

let {name, age, sex} = {name: "张三" , age: 30, sex: "men"};

console.log(name);

console.log(age);

console.log(sex);

字符：

let [a, b, c, d, e] = "我是中国人！";

console.log(a);

console.log(b);

console.log(c);

console.log(d);

console.log(e);

三、Spread Operator 展开运算符：

ES6中另外一个好玩的特性就是Spread Operator 也是三个点儿...接下来就展示一下它的用途。

组装对象或者数组

//数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    
    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"
}

有时候我们想获取数组或者对象除了前几项或者除了某几项的其他项

//数组
    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest) //{"address": "peking", "age": 19, "gender": "female"
}

对于 Object 而言，还可以用于组合成新的 Object 。(ES2017 stage-2 proposal) 当然如果有重复的属性名，右边覆盖左边

const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total) // { a: 1, b: 2, c: 3, d: 4 }

四、面向对象Class：

构造函数的另一种写法，作用在于对象原型的写法更加清晰，更加面向对象的编程方式

    //1、构造函数
    function Person(name, age){
        this.name = name;
        this.age = age;
    }

    Person.prototype = {
            constructor: Person,
            print(){
                    console.log("我叫：" + this.name + ",今年：" + this.age + "!");
            }
    };

    let person = new Person("张三", 19);
    console.log(person);

    //2、通过Class面向对象
    class Person{
        constructor(name, age){
            this.name = name;
            this.age = age;
        }

        print(){
            console.log("我叫：" + this.name + ",今年：" + this.age + "!");
        }
    }

    let person = new Person("张三", 19);
    console.log(person);
    person.print();

五、字符串扩展：

1、模板字符串：

    let str = '适合敲代码';
    let html = `
                    <html>
                        <head></head>
                        <body>
                            <p>今天天气不错</p>
                            <div>${str}</div>
                        </body>
                    </html>
                `;
    console.log(html);

2、endsWith()：

3、startsWith()：

4、includes()：

5、repeat()：

六、对象扩展：

1、Object.assign()这个方法来实现浅复制：

Object.assign() 可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象。一般会把目标对象传为{}

const objA = { name: 'cc', age: 18 }
    const objB = { address: 'beijing' }
    const objC = {} // 这个为目标对象
    const obj = Object.assign(objC, objA, objB)

    // 我们将 objA objB objC obj 分别输出看看
    console.log(objA)   // { name: 'cc', age: 18 }
    console.log(objB) // { address: 'beijing' }
    console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
    console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }

    // 是的，目标对象ObjC的值被改变了。
    // so，如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}
    Object.assign({}, objC, objA, objB)

2、Object.is()：判断两个值是否相等

        console.log(NaN === NaN); //false
        console.log(-0 === 0); //true
        console.log(Object.is(NaN, NaN));//true
        console.log(Object.is(0, -0));//false

3、Object.keys()：

4、Object.values()：

5、Object.entries()：

6、对象中使用变量作为key：

        const str = "name";
        const obj = {
            ["my" + str]: "hello"
        }
        console.log(obj);

七、对象初始化简写：

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：

    function people(name, age) {
        return {
            name: name,
            age: age
        };
    }

键值对重名，ES6可以简写如下：

    function people(name, age) {
        return {
            name,
            age
        };
    }

同样，key和value一样的，写一个就够了：

    let name = "张三";
    let age = "李四";
    let person = {
        name,
        age
    }
    console.log(person);

ES6 同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：

    const people = {
        name: 'lux',
        getName: function() {
            console.log(this.name)
        }
    }

ES6通过省略冒号与 function 关键字，将这个语法变得更简洁

    const people = {
        name: 'lux',
        getName () {
            console.log(this.name)
        }
    }

八、箭头函数：

箭头函数最直观的三个特点。

不需要 function 关键字来创建函数

省略 return 关键字

继承当前上下文的 this 关键字

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

//例如：
    [1,2,3].map(x => x + 1)
    
//等同于：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this))

说个小细节。

当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{} 和 return；例如:

    var people = name => 'hello' + name
    //参数name就没有括号

作为参考

    var people = (name, age) => {
        const fullName = 'hello' + name
        return fullName
    } 
    //如果缺少()或者{}就会报错

九、函数默认参数：

在ES5我们给函数定义参数默认值是怎么样？

    function action(num) {
        num = num || 200
        //当传入num时，num为传入的值
        //当没传入参数时，num即有了默认值200
        return num
    }

但细心观察的同学们肯定会发现，num传入为0的时候就是false，但是我们实际的需求就是要拿到num = 0，此时num = 200 明显与我们的实际想要的效果明显不一样。

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

    function action(num = 200) {
        console.log(num)
    }
    action(0) // 0
    action() //200
    action(300) //300

十、import 和 export：

import导入模块、export导出模块

//全部导入
import people from './example'

//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'

// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

总结：

1.当用export default people导出时，就用 import people 导入（不带大括号）

2.一个文件里，有且只能有一个export default。但可以有多个export。

3.当用export name 时，就用import { name }导入（记得带上大括号）

4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } 

5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

十一、数组扩展：

使用console.dir(Array)和console.dir(Array.prototype)查看es6中新增的属性的方法，比较常用的有：

1、Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组：

那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。

1）将类数组对象转换为真正数组：

let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

那么，如果将上面代码中length属性去掉呢？实践证明，答案会是一个长度为0的空数组。

这里将代码再改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：

let arrayLike = {
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

会发现结果是长度为4，元素均为undefined的数组

由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

a、 该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组；

b、该类数组对象的属性名必须为数值型或字符串型的数字。

ps: 该类数组对象的属性名可以加引号，也可以不加引号。

2）将Set结构的数据转换为真正的数组：

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

3）将字符串转换为数组：

let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

4）Array.from参数是一个真正的数组：

console.log(Array.from([12,45,47,56,213,4654,154]))

像这种情况，Array.from会返回一个一模一样的新数组。

2、Array.of()：

把一组织转换成数组。

3、arr.find()与arr.findInex()：

arr.find()：找出第一个符合条件的数组成员，如果没有找到则返回undefined。

arr.findIndex()：找到位置，没有则返回-1。

4、.map()：

5、.reduce()：

6、.filter()：

7、forEach()：

8、.copyWithin：

9、every()：

10、some()：

11、map()：

12、filter()：

13、reduce()：

14、reduceRight()：

15、forEach()：

16、find()：

17、findIndex()：

18、includes()：

19、keys()：

20、values()：

21、entries()：

十二、Promise：

十三、Generator：

十四、async：

duansamve
关注
专栏目录
es6 语法标准
baidu_39157075的博客
03-14 402
简介 ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。 你也可以先看 ECMAScript 6 简明教程 来...
es6常用的语法
m0_63760882的博客
04-23 1178
es6一些最基本的语法 1.变量声明const和let 我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如: function aa() { if(bool) { var test = 'hello man' } else { console.log(test) } } 以上的代码实际上是： function aa() { var
ES6语法规范
qq_53324833的博客
11-21 3897
啥是ES6 ES的全程ECMAScript，是由ECMA国际标准化组织指定的一项脚本语言的标准化规范。 ES6实际上是一个泛指，泛指ES2015及后续的版本。 为啥要学ES6 废话。 ES6 新增语法 let ES6中新增的用于声明变量的关键字。 let声明的变量只在所处于的块级作用域有效。 上面的代码中。if后面的大括号即一个块级作用域。所以所谓的块级作用域就是一个大括号所囊括的作用域即块级作用域。 注意： 使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。 上
ES6------语法规范
qq_41377857的博客
06-05 725
学习的网址:阮一峰 ------ http://es6.ruanyifeng.com/
ECVMScript-------ES6语法规范简单了解
weixin_44123671的博客
12-21 360
1.es6定义变量使用let 如果在代码块或函数里面定义let变量，只能在代码块和函数中使用 使用var一个变量可以进行多次定义 使用let不能多次定义一个变量 <script> { var a = 10; let b = 20; console.log(a); // √ console.log(b); // √ } console.
ECMAScript--》 ES6语法规范 ## Day1
ztK63LrD的博客
05-25 761
ES6语法规范学习
ES6常用语法之箭头函数
箭头函数（Arrow Function）是ES6中的一种新的函数声明方式。它不仅语法简洁，而且在使用上具有一些特殊的优势。本章节将介绍箭头函数的基本概念以及其优势。 ## 1.1 什么是箭头函数 箭头函数是一种没有自己的this...
ES6常用语法和API
qq_47633695的博客
12-08 393
ES6常用语法和API
ES6 语法糖（一）
lucky_ferry的博客
09-08 561
一、为什么要学习ES6？ ES6是JavaScript的下一代标准，解决了es5中存在的问题。 二、语法 1、let const let 1、只在所处的块级有效，而var 不具有块级作用域，防止循环变量变成全局变量， 2、不存在变量提升，只能先声明再使用 3、具有暂时性死区，不会在上一级中查找 const 作用：用于声明变量，就是内存（地址）不变的量 具有块级作用域 使用时必...
es6新语法.快速上手 搬运与掘金三心哥md
11-29
基础和常用的东西 适合新人快速上手
ES6语法
最新发布
weixin_62789590的博客
07-28 1220
ECMAScript是浏览器脚本语言的规范，基于javascript来制定的。为什么会出现这个规范呢？
nodejs中对es6语法规范讲解
qq_64970126的博客
06-28 199
nodejs中对es6语法规范讲解 1、var的弊端及let关键字 2、用const定义常量
ES6基本语法
ttttsuki的博客
06-13 3万+
ES6 一、let、const let：ES6中新增的用于声明变量的关键字 let声明的变量只在所处于的块级有效{} 不存在变量提升 暂时性死区 const：声明量，常量就是值（内存地址）不能变化的量 具有块级作用域 声明常量时必须赋值 常量赋值后，值不能修改 二、解构赋值 ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构。 对象解构 三、箭头函数 ES6中新增的定义函数的方式 ()=>{} 在箭头函数中，如果函数体中只有一句代码，并且代码的执行结果就是函数的返回值，
ES6基础语法
weixin_46178009的博客
08-11 231
概念：ES6全称ECMAScript6，是ES5的升级版本，在原有ES5基础之上增加一些新的语法规范。 作用：目前所有流行的前端架构都是基于ES6语法进行的项目构建，因此要想学习好流行框架，就必须提前掌握好常用的ES6语法。 ES6常用语法结构如下： 块级作用域变量 使用ES6 let关键字定义的变量，被称为块级作用域变量。 在ES5中定义变量用var关键字，但是var关键字定义的变量不存在块级范围，即该变量作用范围属于全局。 { var name = "张三"; //name变量被定义在一个块级.
ES6规范
LANGZI7758521的专栏
08-19 422
1.let 取代 var ES6提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。 2.全局常量和线程安全 在let和const之间，建议优先使用const；const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。 3.字符串 静态字符串一律使用单引号或反...
ES6基本全部语法
热门推荐
qq_40322724的博客
02-21 4万+
一,变量声明： let声明变量： 1.变量不可重复声明， let star = '罗志祥' let star = '小猪' 结果报错 2.块级作用域， { let girl = '周扬青' } 在大括号内的都属于作用域内 3.不存在变量提升 4.不影响作用域链 const声明常量： const SCHOOL = ‘学校’;一般习惯把常量全用大写字母 1.一定要赋初始值 2.一般常量使用大写（潜规则） 3.常量值不能修改 4.块级作用域 5.对数组和对象的元素修改，不算对常量的修改，不会报错 变量的结构.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值