资讯专栏INFORMATION COLUMN

es6的一些知识点

cnio / 2642人阅读

摘要:的一些知识点前言标准的一些区别块级作用域全局作用域函数作用域全局作用域函数作用域变量提升的问题例子块级作用域例如在一个函数,循环。。。

es6的一些知识点

前言:es6(ECMAscript2015)标准

let、const、var的一些区别

let、const 块级作用域、全局作用域、函数作用域

var 全局作用域、函数作用域

变量提升的问题:
var        :  true
let、const : false

例子:

console.log(a);//undefind
let a=1;                     

块级作用域:例如在一个函数,for循环。。。区块之内!
const 常量,值不可更改。
let、var 变量,值可以更改

严格模式

消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

消除代码运行的一些不安全之处,保证代码运行的安全;

提高编译器效率,增加运行速度;

为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。

“use strict”
模板字符串(Template Strings)

规定了一种新的string方法可用 `` 斜引号来创建字符串的代码块

绑定变量用${}来绑定。

let name="xiaosan";
        let age=22;
        let home="china"
        let str1=`she"s name ${name},
        she age ${age},
        she homes"s ${home}`
        alert(str1)

字符串内可直接换行

let str1=`she"s name ${name},
        she age ${age},
        she homes"s ${home}`
        alert(str1)

标签模板字符串。

function tag(strings,...args){    //...扩展运算符
           //console.log(strings);
           //console.log(args);
           let str="";
           for(var i=0,l=strings.length-1;i
增强的对象字面量(自变量)

对象属性能够简写;

对象方法可以简写function关键字

let name="张三";
        let age=22;
        let zhangshan={
            name,
            age,
            runing(){
                console.log("我会跑")
            }
        }

对象属性名可以书写自动计算形式

原型继承__proto__

 let people={
            eat(){
                console.log("我会吃")
            },
            speak(){
                console.log("我会说话")
            },
            feeling(){
                console.log("我有感情")
            }
        }
        let caowei={
            name:name,
            __proto__:people,//设置对象原型,用来继承
            study(){
                console.log("I have sutying ok!")
            }
        }
        console.log("my name"s"+caowei.name)
        caowei.study();
        caowei.eat();
        caowei.speak();
        caowei.feeling();
         console.log(caowei)
解构赋值

es6允许我们按照一定结构提取数组与对象里的值,赋给变量

函数的解构赋值

说的明白一点解构赋值它的类型就是数组跟对象
例子

//数组
        let [a,,c]=[1,2,3];
        console.log(a,c)
//对象
        let obj={
            x:1,
            y:2
        }
        let {x,y}=obj
        console.log(x,y)//1 2
//函数操作
//函数传对象

        function fn(person){
            let name=person.name;
            let age =person.age;
            console.log(name,age)
        }
        let aa={name:"xiaosan",age:18}
        fn(aa)*/
       /* function fn({uname:name,age,sex="女人"}){
            console.log(name,age,sex)
        }
        let bb={uname:"xiaosan",age:18}
        fn(bb)*/
        //es5 函数传数组
        /*function fn(Arr){
            let x=Arr[0];
            let y=Arr[1];
            let z=Arr[2];
            console.log(x,y,z)
        }*/
        /*function fn([x,y,z,d=22]){
           
            console.log(x,y,z,d)
        }
        let arr=[9,5,8]
        fn(arr)
//字符串解构赋值

        let str="123456";
        let [a,b,c,d,e,f,g=50]=str;
        console.log(a,b,c,d,e,f,g)
扩展运算符

扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值
操作数组操作对象(自变量对象ps:兼容问题)

 //展开数组 
    let arr=[1,2,3]
    let arr2=arr;
   // console.log(arr2);
   document.write(arr2)  //1,2,3
   let arr3=[...arr]   //也可以看做是拷贝
   console.log(arr3)//( 3) [1 2 3]
   //展开对象

let obj={
    name:"zhangsan",
    age:19,
}
let obj1={
    ...obj,
    sex:"man"
}
console.log(obj1)  //报错 现在浏览器不支持但是方法确实可行可以采用babel编译一下使用

//展开函数
function myFunction(x, y, z) {
    console.log(x,y,z)//0 1 2
 }
var args = [0, 1, 2];
myFunction(...args);


function myFunc(a, b, ...rest) {
    console.log(rest.length);//3
}

myFunc(1,2,3,4,5); // => 3

function myFunction(x, y, z,...l) {
    console.log(x,y,z,l)//0 1 2
 }
var args = [0, 1, 2,4,5,6];//0 1 2 (3) [4,5,6]
myFunction(...args);
//数组 与 扩展运算符结合
let c = ["abc",11,12]
let a = [1, 3, 4, 5,c],
    b = [...a, 6, 7, 8, 9]
  // b=a;
console.log(b)//(8) [1,2,3,4,5,6,7,8,9];
箭头函数=>

ES6允许使用“箭头”(=>)定义函数

var f = v => v

上边的函数可以书写为

var f = function(v) {
  return v;
};

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

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

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

var sum = (num1, num2) => { return num1 + num2; }

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

var getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + " " + last;

// 等同于
function full(person) {
  return person.first + " " + person.last;
}
默认参数,剩余参数,扩展参数

参数的默认参数,剩余参数,拓展参数

//默认参数
         let sayHello=(name,age=25)=>{
             let str=`my name"s ${name},age"s ${age} old`
            //console.log(name,age)
            console.log(str)//my name"s chenxu,age"s 25 old
        }
        sayHello("chenxu")

        //扩展参数
        let sum=(a,b,c)=>{
            console.log(a,b,c)
        } 
        let arr=[4,5]          //扩展
        sum(1,...arr)


        //剩余参数
        let sum1=(a,b,...c)=>{
            console.log(c);
            console.log(a,b)

> 引用文字

;  //剩余
        }
        sum1(1,2,3,4,5,7,9)
*/
        let sum2=(a,b,...c)=>{
            console.log(c);
            var result=c.reduce((a,b)=>a+b);
            console.log(result);
            console.log(a,b);
        }
        sum2(1,2,3,4,5,7,9)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87113.html

相关文章

  • ES6-7

    摘要:的翻译文档由的维护很多人说,阮老师已经有一本关于的书了入门,觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中,显得越来越重要。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书(中文版) 超详细介绍promise的gitbook,看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

    mudiyouyou 评论0 收藏0
  • 工作中常用es6+特性

    摘要:结合工作中使用情况,简单对进行一些复习总结,包括常用的语法,等,以及短时间内要上手需要重点学习的知识点不同工作环境可能有一些差别,主要参考链接是阮一峰的博客以及外文博客阮老师大部分文章是直接翻译的这个博客简介先说一下,是一个标准化组织,他们 结合工作中使用情况,简单对es6进行一些复习总结,包括常用的语法,api等,以及短时间内要上手需要重点学习的知识点(不同工作环境可能有一些差别),...

    xcold 评论0 收藏0
  • 学习ES6

    摘要:学习定稿有两年多的时间了,断断续续通过一些博客,书籍也学到了很多知识。将各个部分的知识整理成一篇篇博文,以便于自己系统掌握和复习。整个系列主要参考了的深入理解,可以看作是对这本书的一个学习总结,也向大家强烈推荐这本书作为的学习书籍。 学习es6 es6定稿有两年多的时间了,断断续续通过一些博客,书籍也学到了很多es6知识。可以说,es6给js语言带来了非常大的改进,引进了很多好用的特性...

    wpw 评论0 收藏0
  • ES6 常用识点总结

    摘要:常用知识总结之前总结了中的一些知识点。在年正式发布了,简称,又称为。作为构造函数的语法糖,同时有属性和属性,因此同时存在两条继承链。子类的属性,表示构造函数的继承,总是指向父类。 ES6常用知识总结 之前总结了es5中js的一些知识点。这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点,基本没有什么创新...

    leap_frog 评论0 收藏0
  • ES6 常用识点总结

    摘要:常用知识总结之前总结了中的一些知识点。在年正式发布了,简称,又称为。作为构造函数的语法糖,同时有属性和属性,因此同时存在两条继承链。子类的属性,表示构造函数的继承,总是指向父类。 ES6常用知识总结 之前总结了es5中js的一些知识点。这段时间看了石川blue老师讲解的es6课程,结合阮一峰老师的es6教程,随手做了一些笔记和总结分享给大家。内容还是es6主要的知识点,基本没有什么创新...

    CODING 评论0 收藏0

发表评论

0条评论

cnio

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<