一、常量

不允许重复定义

 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. Django 2.0 学习(10)：Django 定制化

    定制化admin表单 通过使用admin.site.register(Question)注册Question模型,Django可以构造默认的表单.通常,可以通过对象的注册机制来告诉Django我们想要 ...

  2. 基于jquery的移动端JS无缝切换

    Html: <div id="slide-box-1"> <ul> <li> <a href="javascript:void( ...

  3. （一）MySQL学习笔记

    1.MySQL安装 下载地址:https://dev.mysql.com/downloads/mysql/ 启动mysql服务 net start mysql 停止mysql服务 net stop m ...

  4. Python_css选择器

    1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...

  5. 洛谷3258：[USACO2012 MAR]Flowerpot 花盆——题解

    https://www.luogu.org/problemnew/show/P2698#sub 老板需要你帮忙浇花.给出N滴水的坐标,y表示水滴的高度,x表示它下落到x轴的位置. 每滴水以每秒1个单位 ...

  6. HDOJ.1263 水果（map）

    水果 点我跳转到题面 点我一起学习STL-MAP 题意分析 给出多组测试数据,每组数据有多条信息.分别是水果种类,地点,和水果数目.每组信息要按照样例输出,并且输出要按照地点->水果种类的字典序 ...

  7. Linux之socket套接字编程20160704

    介绍套接字之前,我们先看一下传输层的协议TCP与UDP: TCP协议与UDP协议的区别 首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UD ...

  8. @RequestParam 注解的使用

    @RequestParam 注解的使用 前言 在SpringMvc后台进行获取数据,一般是两种. 1.request.getParameter(“参数名”) 2.用@RequestParam注解获取 ...

  9. 二叉树中和为某一值得路径 java实现

    本题来自<剑指offer> 路径为从根节点到叶节点一条路径,路径经过的各节点数值之和等于某一给定数值,则打印路径上的节点 因为需要打印满足条件的路径节点信息和各节点之和,需要栈记录经过的节 ...

  10. syslog大小限制

    位置 /etc/logrotate.d/rsyslog 相关配置信息察看man logrotate size k/M/G /var/log/syslog { rotate daily missingo ...