理解ES6

L_sk11

于 2024-07-20 09:58:04 发布

阅读量418

点赞数 6

文章标签： es6

本文链接：https://blog.csdn.net/L_sk11/article/details/140566349

版权

ES6语法讲解

1, 认识ES

全称: ECMAScript
js语言的规范
js的组成

ECMAScript(js基础)
扩展-->浏览器端
- BOM
- DOM
扩展-->服务器端
- Node.js egg(否) koa(否) express(否) mongdb(了解)

2, ES5扩展（重点）

2.1严格模式(常用)

运行模式: 正常(混杂)模式与严格模式
应用上严格式: 'strict mode';

作用:

使得Javascript在更严格的条件下运行
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
消除代码运行的一些不安全之处，保证代码运行的安全
需要记住的几个变化
- 声明定义变量必须用var
- 禁止自定义的函数中的this关键字指向全局对象window
- 创建eval作用域, 更安全，避免全局变量污染

案例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_严格模式</title>
</head>
<body>
<!--
1. 理解:
  * 除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）。
  * 顾名思义，这种模式使得Javascript在更严格的语法条件下运行
2.  目的/作用
    * 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
    * 消除代码运行的一些不安全之处，为代码的安全运行保驾护航
    * 为未来新版本的Javascript做好铺垫
3. 使用
  * 在全局或函数的第一条语句定义为: 'use strict';
  * 如果浏览器不支持, 只解析为一条简单的语句, 没有任何副作用
4. 语法和行为改变
    * 必须用var声明变量
    * 禁止自定义的函数中的this指向window
    * 创建eval作用域
    * 对象不能有重名的属性
-->

<script type="text/javascript">
    'use strict';
    // var age = 12;
    // console.log(age);
    // function Person(name, age) {
    //     this.name = name;
    //     this.age = age;
    // }
    // Person('kobe', 39); //这样写法是错误的，因为自定义的函数中的this指向window
     // var s=new Person('kobe', 39);//这样写法没有问题，因为new的话 指向的是实例对象
    // console.log(s);
    // console.log(Person.name);
    // console.log(s.name);
    // setTimeout(function () {
    //     console.log(this);//window
    // }, 1000);

    // //* 创建eval作用域  在eval作用域里创建的变量不会污染全局变量（ajax里需要注意,返回的数据在eval作用域里，如果不开启严格模式，那么返回的值会侵入脚本 致使项目瘫痪），可以把字符串转换为js对象
    var name = 'kobe';
    eval('var name = "anverson";alert(name)');
    alert(name);

</script>

</body>
</html>

2.2 JSON对象(常用)

作用: 用于在json对象/数组与js对象/数组相互转换
JSON.stringify(obj/arr) js对象(数组)转换为json对象(数组)

JSON.parse(json) json对象(数组)转换为js对象(数组)

案例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_JSON对象</title>
</head>
<body>
<!--
1. JSON.stringify(obj/arr)
  * js对象(数组)转换为json对象(数组)
2. JSON.parse(json)
  * json对象(数组)转换为js对象(数组)

-->
<script type="text/javascript">
    var obj = {
        name : 'kobe',
        age : 39
    };
    obj = JSON.stringify(obj);
    // console.log(obj);
    // console.log( typeof obj);
    obj = JSON.parse(obj);
    console.log(obj);

</script>
</body>
</html>

2.3 Array扩展(常用)

Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
Array.prototype.forEach(function(item, index){}) : 遍历数组
Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组
Array.prototype.filter(function(item, index){}) : 遍历过滤出一个子数组

实例代码:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_Array扩展</title>
</head>
<body>
<!--
1. Array.prototype.indexOf(value) : 得到值在数组中的第一个下标
2. Array.prototype.lastIndexOf(value) : 得到值在数组中的最后一个下标
3. Array.prototype.forEach(function(item, index){}) : 遍历数组
4. Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
5. Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
-->
<script >


    // //Array.prototype.map(function(item, index){}) : 遍历数组返回一个新的数组，返回加工之后的值
    // var arr1 = arr.map(function (item, index) {
    //     return item + 10
    // });
    // console.log(arr, arr1);

    // //Array.prototype.filter(function(item, index){}) : 遍历过滤出一个新的子数组， 返回条件为true的值
    // var arr2 = arr.filter(function (item, index) {
    //     return item > 4
    // });
    // console.log(arr, arr2);
</script>
</body>
</html>

L_sk11

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
理解ES6

全称: ECMAScriptjs语言的规范js的组成ECMAScript(js基础)扩展-->浏览器端BOMDOM扩展-->服务器端Node.js egg(否) koa(否) express(否) mongdb(了解)
复制链接

扫一扫