一、常量

不允许重复定义

 const a='HELLO'
 const a='world'//报错Uncaught SyntaxError: Identifier 'a' has already been declared
  const a='HELLO'
    a='world'//Uncaught TypeError: Assignment to constant variable.

二 let使用

  let:定义一个块级作用域的变量
    需要先定义再使用；(不存在变量提升)
    不能重复定义

普通变量(var 定义的)：

这叫做变量提升:先使用变量，然后在定义变量

 console.log(a);//不报错 undefined
     var a=100

相当于

var b;
console.log(b);b=100;
console.log(b)

let定义的(Es6新增)

不存在变量提升

  console.log(c);//报错:Uncaught ReferenceError: c is not defined
    let c=10;

let是一个块级作用域的变量：

        let c = 100;
        if(10> 9){
            let c=200;
            console.log(c);
        }
         console.log(c);
        // var  c = 300

结果:200,100

var 定义的话

 var  c = 100;
if(10> 9){
var  c=200;
 console.log(c);
}
onsole.log(c);

结果:200,200

  var i=10;
        var arr = [22,33,44,55]
        for(let i=0;i< arr.length;i++){

        }

        if(i>9){
            console.log(i+10);
        }

结果:20

三，js基本数据类型

 js的数据类型：
    string array number null undefined boolean object
    基本数据类型：string number null undefined boolean
    引用类型：array object
 const obj = {
            name: "谢小二",
            age: 22
        }
        var obj2 = obj;
        obj2.age = 90

        console.log(obj.age);

结果:90

基本数据类型引用只是引用了值，改变互不影响
a=10
b=a
b=20
a根本没变

而引用类型的引用引用的是内存地址，一个改变另一个也跟的改变，如上述代码

四  模板字符串

通过反引号来使用，字符串当中可以使用变量
    可以当作普通字符串来处理
    可以使用多行字符串
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

</head>
<body>
<ul id="ul">

</ul>
</body>
 <script>
     var name='陈太章'
     console.log(`我的名字叫${name}`)

     document.getElementById('ul').innerHTML=`
      <li>赵俊明喜欢搞基</li>
      <li>肖博雅喜欢被搞</li>
      <li>路宁喜欢我给他戴帽子</li>
     `
    </script>
</html>

示例

五 解构变量

类型要一致，如果是对象的话字段名称要一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script>
//        let [a,b,c,d]=[11,22,33,44];
//        console.log(a);//11
//        console.log(d);//44

//        let [a,b,c,[d]] = [89,90,99,[100]];
//        console.log(a);//89
//        console.log(c);//99
//        console.log(d);//100

        let obj={
            name:'aaa',
            sex:'male'
        }

        let {name,sex}=obj;
        console.log(name);//aaa
        console.log(sex);//male

    </script>
</head>
<body>

</body>
</html>

六对象的扩展

对象的扩展
    对象当中的属性可以简写
    对象当中的方法也可以简写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>

    <script>
        var username = '长安大学';
        var addr = '陕西西安';

        function fun() {
            alert('it is very beautiful')
        }

        //注意字段要保持一致
        var obj = {
            username,
            addr,
            fun,
        };

        console.log(obj.username);
        obj.fun()

        //        var useranme = $("#text1").val();
        //        var password = $("#text2").val();

        //        $.get(url,{useranme,password},function(){
        //
        //
        //        })
    </script>
</head>
<body>

</body>
</html>

七、函数的扩展

函数的扩展
    可以给函数默认参数
    剩余参数：function fun(a,...b ){
    }
    fun(11,22,33)
    则：b = [22,33]

默认参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script>
        function aa(name='渣渣辉') {
            console.log(name)
        }
        aa()
    </script>
</head>
<body>

</body>
</html>

剩余参数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script>
//        function aa(name='渣渣辉') {
//            console.log(name)
//        }
//        aa()

        function bb(a,...b) {
            console.log(a);
            console.log(b);
        }

        bb('渣渣辉','古天乐','陈小春','贪玩蓝月')
    </script>
</head>
<body>

</body>
</html>

结果:

a=渣渣辉
b=["古天乐","陈小春","贪玩蓝月"]

八、数组的扩展

1)判断数组当中是否存在某个数值

indexOf  有就找出索引，没有则输出-1

 <script>
        aa=[11,22,33,44,55,66];
        console.log(aa.indexOf(55));//4
        console.log(aa.indexOf(45))//-1
    </script>

includes 有则显示true没有则显示false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script>
        aa=[11,22,33,44,55,66];
//        console.log(aa.indexOf(55));
//        console.log(aa.indexOf(45))

        console.log(aa.includes(55));//true
        console.log(aa.includes(45))//false
    </script>
</head>
<body>

</body>
</html>

2）对数组的遍历

aa=[11,22,33,44,55,66];
aa.forEach(function (item,index) {
            console.log(item,'----',index)
        })

3)map操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script>
        aa=[11,22,33,44,55,66];
//        console.log(aa.indexOf(55));
//        console.log(aa.indexOf(45))
//
//        console.log(aa.includes(55));//true
//        console.log(aa.includes(45))//false

//
//        aa.forEach(function (item,index) {
//            console.log(item,'----',index)
//        })

        arr=aa.map(function (item,index) {
            return  item+1
        });
        console.log(arr)//[12,23,34,45,56,67]
    </script>
</head>
<body>

</body>
</html>

4)对数组的过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script>
        aa=[11,22,33,44,55,66];
//        console.log(aa.indexOf(55));
//        console.log(aa.indexOf(45))
//
//        console.log(aa.includes(55));//true
//        console.log(aa.includes(45))//false

//
//        aa.forEach(function (item,index) {
//            console.log(item,'----',index)
//        })

//        arr=aa.map(function (item,index) {
//            return  item+1
//        });
//        console.log(arr)//[12,23,34,45,56,67]

        arr1=aa.filter(function (item,index) {
            return item>50
        });

        console.log(arr1)//[55,56]
    </script>
</head>
<body>

</body>
</html>

九、类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script>
     Object.prototype.hobby='play game';
     function Person(name,age) {
         this.name=name;
         this.age=age;
         this.sayhello=function () {
             console.log('hello')
         }
     }
     Person.prototype.sayhello=function () {
         console.log('哈哈哈哈')
     };
     Person.prototype.addr='北京';
     var p=new Person('ctz',21);
     p.sayhello();
     console.log(p.addr);
     console.log(p.hobby)

    </script>
</head>
<body>

</body>
</html>
hello
北京
play game

大佬地址链接:

github:

https://github.com/ruanyf/es6tutorial/tree/gh-pages/docs

ES6 新增的一些东西的更多相关文章

  1. ES6 有什么新东西

    ES6 有什么新东西? 你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本 ...

  2. ES6新增的 Set 和 WeakSet 是什么玩意?在此揭晓

    现在的章节内容会更加的紧密,如果大家看不懂可以先去看以前的文章,当然看了的忘了,也可以去看一下,这样学习后面的内容才会更加容易. 什么是Set结构 Set是ES6给开发者带来的一种新的数据结构,你可以 ...

  3. es6新增

    首先要说let,他是只在代码块中执行的变量,例如: {    let a = 10;    var b = 1;}console.log(a);//definedconsole.log(b);//1 ...

  4. ECMAScript简介以及es6新增语法

    ECMAScript简介 ECMAScript与JavaScript的关系 ECMAScript是JavaScript语言的国际化标准,JavaScript是ECMAScript的实现.(前者是后者的 ...

  5. ES6新增的常用数组方法(forEach,map,filter,every,some)

    ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...

  6. ES6新增对象方法的访问描述符：get(只读)、set(只写)

    Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...

  7. 浅谈ES6新增数据类型：Symbol

    面试中喜闻乐见的问题就是问我们的ES6新增了哪些个新特性 这篇文章一起学习一下新增的数据类型:Symbol JS的原始数据类型:6种Boolean,String,Undefined,NULL,Numb ...

  8. ES6新增的数据类型Map和Set。

    Javascript的默认对象表示方式 {} ,即一组键值对. 但是Javascript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...

  9. es6 新增字符串方法

    es6新增了4个字符串处理的方法:startsWith,endsWith,includes,repeat. 1.简单使用 includes()返回布尔值,表示是否找到了参数字符串 startsWith ...

随机推荐

  1. Python35 升级 pip

    使用pip安装插件的时候报错: You are using pip version 8.1.1, however version 9.0.1 is available.You should consi ...

  2. Delphi Dataset CurValue

    TField.CurValue Property Represents the current value of the field component including changes made ...

  3. Eclipse闪退解决方案

    1. 找到Eclipse目录下的eclipse.exe,右键点击->发送到桌面快捷方式,然后右键点击快捷方式,选择属性,修改“目标”(或target),其中红色代表eclipse的路径,绿色代表 ...

  4. 【bzoj4195】[Noi2015]程序自动分析 离散化+并查集

    题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3,…代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变量 ...

  5. 【bzoj1707】[Usaco2007 Nov]tanning分配防晒霜 贪心+Treap

    题目描述 奶牛们计划着去海滩上享受日光浴.为了避免皮肤被阳光灼伤,所有C(1 <= C <= 2500)头奶牛必须在出门之前在身上抹防晒霜.第i头奶牛适合的最小和最 大的SPF值分别为mi ...

  6. BZOJ 3040最短路

    题目描述 给定一个 NN 个点, MM 条有向边的带权图,请你计算从 SS 出发,到每个点的距离. 数据保证你能从 SS 出发到任意点. 输入输出格式 输入格式: 第一行两个整数 NN . MM ,表 ...

  7. BZOJ2301：[HAOI2011]Problem b——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2301 https://www.luogu.org/problemnew/show/P2522 对于给 ...

  8. Java 匿名内部类 只能访问final变量的原因

    文章来源:http://blog.sina.com.cn/s/blog_4b6f8d150100qni2.html 1)从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方 ...

  9. android脱壳之DexExtractor原理分析[zhuan]

    http://www.cnblogs.com/jiaoxiake/p/6818786.html内容如下 导语: 上一篇我们分析android脱壳使用对dvmDexFileOpenPartial下断点的 ...

  10. 【单调队列】【P2627】 修剪草坪

    传送门 Wa这次竟然不是Uva的题 Description 在一年前赢得了小镇的最佳草坪比赛后,Farm John变得很懒,再也没有修剪过草坪.现在,新一轮的最佳草坪比赛又开始了,Farm John希 ...