ES6新特性教程(一)

ES6新特性教程(一)

1.ES6历史
2.部署进度:各大浏览器对ES6的支持度达到90%。
3.ES6的开发环境搭建:如果是vue的项目,webpack可以自动编译转换功能的,不是vue的项目,可以使用Babel转码器转化
4.Babel转码器:是ES6转ES5语法的一个转码器,从而在现有环境执行,可用ES6的语法进行编程。

  • 简述过程:首先创建两个文件夹,dist/src
    src:写es6的语法,
    dist:通过环境搭建后(通过Babel转码器)可将es6的文件打包好成es5的放在dist下,自动生成ES5的语法形式,在index.html中引入的是dist/html,因为大部分浏览器还不支持es6.
  • 步骤:(没有webpack的情况下,自己创建的项目)
    A.npm init,初始化项目,创建package.json文件(命令执行完成后,会在项目根目录下生产package.json文件,也可执行npm init -y-y代表全部默认同意,就不用一次次按回车了)
    B.npm install -g babel-cli,全局安装babel-cli(虽然已经安装了babel-cli,只是这样还不能成功进行转换,如果你不相信可以输入下边的命令试一下babel src/index.js -o dist/index.js在dist目录下确实生产了index.js文件,但是文件并没有变化,还是使用了ES6的语法在dist目录下确实生产了index.js文件,但是文件并没有变化,还是使用了ES6的语法)
    C.npm install --save-dev babel-preset-es2015 babel-cli,本地安装babel-preset-es2015和babel-cli,这是安装包转换。安装后可发现package.json文件,已经多了devDependencies选项。
    "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
    }

    D.在目录新建.babelrc文件,录入下面的代码
    {
    "presets":[
    "es2015"
    ],
    "plugins":[]
    }

    E.最后在命令行执行:babel src/index.js -o dist/index.js,配置环境完成。在各个浏览器都可以正常显示了。
  • Traceur 转码器 :Google 公司的Traceur转码器,也可以将 ES6 代码转为 ES5 代码。
  • ES6开发环境搭建的目的:目前ES5还是开发的主流,除了chrome等主流浏览器支持ES6写法外,其余浏览器想要正常显示,要搭建ES6开发环境,将ES6转换成ES5的语法形式,浏览器才能正式显示。

    ES6语法学习:

  • var,let和const命令
    var: 全局声明,会污染外部代码(var在ES6里是用来升级全局变量的)
    let:局部声明,所声明的变量,只在let命令所在的代码块内有效。和var用法一样。(防止数据被污染)
    const: 常亮声明,声明了之后就不能变了,const声明一个只读的常量。一旦声明,常量的值就不能改变。对于const来说,只声明不赋值,就会报错。
    例子:
var声明的循环
for(var i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);  //循环体外的i变量被污染, 打印出 循环体外:10
let声明的循环
for(let i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);  //你执行时会发现控制台报错了,找不到循环体外的i变量
const声明常量
const a="JSPang";
var a='技术胖';
console.log(a);  //报错,const声明的变量是不可以改变
  • 变量的解析赋值
    ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解析。

    • 数组的解构赋值:
      数组模式和赋值模式统一:
      let [a,b,c]=[1,2,3]; let [a,[b,c],d]=[1,[2,3],4] //等号左边和等号右边的形式要统一
      let [foo = true] =[]; //解析的默认值
      console.log(foo); //控制台打印出true

      let [a,b="Hello"]=['哈喽']
      console.log(a+b); //控制台显示“哈喽Hello” // 默认值

      let [a,b="Hello"]=['哈喽'',undefined];
      console.log(a+b); //控制台显示“哈喽'Hello” //undefined相当于什么都没有,b是默认值

      let [a,b="Hello"]=['哈喽',null];
      console.log(a+b); //控制台显示“哈喽null” //null相当于有值,但值为null。所以b并没有取默认值,而是解构成了null
    • 对象的解构赋值
      let {foo,bar} = {foo:'Hello',bar:'哈喽'};
      console.log(foo+bar); //控制台打印出了“Hello哈喽”

      圆括号的使用:
      如果在解构之前就定义了变量,这时候你再解构会出现问题。下面是错误的代码,编译会报错。
      let foo;
      {foo} ={foo:'JSPang'};
      console.log(foo); //报错,因为先定义了变量

      要解决报错,使程序正常,我们这时候只要在解构的语句外边加一个圆括号就可以了
      let foo;
      ({foo} ={foo:'JSPang'});
      console.log(foo); //控制台输出jspang

      注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

    • 字符串解构
      字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象
      const [a,b,c,d,e,f]="JSPang";
      console.log(a);
      console.log(b);
      console.log(c);
      console.log(d);
      console.log(e);
      console.log(f);

    注意:在实战项目中解构Json数据格式还是很普遍的

  • 扩展运算符和rest运算符
    rest参数的形式为:…变量名;扩展运算符是三个点(…)
    • 对象扩展运算符(…)
      当编写一个方法时,我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数。
 function hello(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);    //分别打印出 1,2,3,undefined。可以传入多个值,并且就算方法中引用多了也不会报错
  }      
hello(1,2,3);

扩展运算符的用处:
我们声明两个数组arr1和arr2,然后我们把arr1赋值给arr2,然后我们改变arr2的值,你会发现arr1的值也改变了,因为我们这是对内存堆栈的引用,而不是真正的赋值。

let arr1=['www','jspang','com'];
let arr2=arr1;
console.log(arr2);  //["www", "jspang", "com"]
arr2.push('shengHongYu');  
console.log(arr1);  //["www", "jspang", "com", "shengHongYu"]
let arr1=['www','jspang','com'];
//let arr2=arr1;
let arr2=[...arr1];  //对象扩展运算符的写法
console.log(arr2); //["www", "jspang", "com"]
arr2.push('shengHongYu');
console.log(arr2);  //["www", "jspang", "com", "shengHongYu"]
console.log(arr1);//["www", "jspang", "com"],arr1并没有跟着改变。所以推荐这种写法。
  • rest运算符:
    rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中
function jspang(first,...arg){  //rest运算符写法
    console.log(arg.length);  
}
jspang(0,1,2,3,4,5,6,7);
function add(...values) {
 let sum = 0;
 for (var val of values) {
 sum += val;
 }
 return sum;
} 
add(1, 2, 3) // 6

例子
合并数组:

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3) // [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]

与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5] 
const [first, ...rest] = [];
first // undefined
rest // []
const [first, ...rest] = ["foo"];
first // "foo"
rest // []

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5]; // 报错 
const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 报错

将字符串转为数组

var str = 'hello'; 
// ES5 
var arr1 = str.split(''); // [ "h", "e", "l", "l", "o" ] 
// ES6 
var arr2 = [...str]; // [ "h", "e", "l", "l", "o" ]
  • 字符串模版
    字符串拼接 ${}:
    es5下:
    let jspang='技术胖';
    let blog = '非常高兴你能看到这篇文章,我是你的老朋友'+jspang+'。这节课我们学习字符串模版。';
    document.write(blog);


    es6下
    let jspang='技术胖';
    let blog = '非常高兴你能看到这篇文章,我是你的老朋友${jspang}。这节课我们学习字符串模版。';
    document.write(blog);

    对运算的支持:
    let a=1;
    let b=2;
    let result='${a+b}';
    document.write(result);

    字符串查找 includes:

    es5下:
    let jspang='技术胖';
    let blog = '非常高兴你能看到这篇文章,我是你的老朋友技术胖。这节课我们学习字符串模版。';
    document.write(blog.indexOf(jspang)); //返回的是索引值20


    es6下:
    let jspang='技术胖';
    let blog = '非常高兴你能看到这篇文章,我是你的老朋友技术胖。这节课我们学习字符串模版。';
    document.write(blog.includes(jspang));

    判断开头是否存在 startsWith:
    blog.startsWith(jspang);
    判断结尾是否存在 endsWith:
    blog.endsWith(jspang);
    复制字符串 repeat:
    document.write('jspang|'.repeat(3));
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Amanda_wmy/article/details/80336803
文章标签: es6
个人分类: es6
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭