ES6常用语法:

1.变量声明let与const(注意与var的区别)

/**
 * 声明变量let和const
 */

//let声明的变量不存在预解析
//报错 flag is not defined
 console.log(flag);
 let flag = 123;

 //let声明的变量不允许重复(在同一个作用域内)
 //报错Identifier ‘flag‘ has already been declared
let flag = 123;
let flag = 456;
console.log(flag);

//ES6引入了块级作用域,而之前在浏览器中的JS是不存在块级作用域的
if (true) {
    //var flag = 123;   //用var声明的flag变量在for循环外也可以正常打印出来
    let flag = 123;     //用let声明的flag变量在for循坏外面打印报错:flag is not defined
}
console.log(flag);
//const用来声明常量
//const声明的常量不允许重新赋值
//报错:Assignment to constant variable.
const n = 1;
n = 2;

//const声明的常量必须初始化
//报错:Missing initializer in const declaration
const a;
2.变量的解构赋值
/**
 * 变量的解构赋值
 */
/*
var a = 1;
var b = 2;
var c = 3;
 */    //或者var a = 1, b = 2, c = 3;

//ES6中数组的解构赋值
//var [a,b,c] = [1,2,3];      //打印结果:1 2 3
//let [a,b,c] = [,123,];      //打印结果:undefined 123 undefined
let [a = 111,b,c] = [,123,];  //打印结果:111 123 undefined
console.log(a,b,c);

//对象的解构赋值
//对象的赋值与顺序没有关系,是通过对象的名称进行赋值
//let {foo,bar} = {foo:‘hello‘,bar:‘hi‘};
let {foo,bar} = {bar:‘hi‘,foo:‘hello‘};
console.log(foo,bar);

//对象的属性别名(如果有了别名,那原来的名字就无效了)
let {foo:abc,bar} = {bar:‘hi‘,foo:‘hello‘};  //打印结果:hello hi
//let {foo:abc,bar} = {bar:‘hi‘,abc:‘hello‘};   //打印结果:undefined ‘hi‘
console.log(abc,bar);   //正常打印
//console.log(foo,bar);     //报错:foo is not defined

内置对象Math(Math是对象,不是函数)
let {cos,sin,random} = Math;

//字符串的解构赋值
//[]里面声明的叫变量,这种方法不能获取字符串的长度
let[a,b,c,d,e] = "hello";
console.log(a,b,c,d,e);   //打印结果:h e l l o

let[a,b,c,d] = "hello";
console.log(a,b,c,d);      //打印结果:h e l l

//{}里面声明的是对象,即对象的解构赋值
let {length} = "hello";
console.log(length);    //打印结果:5

//对象的解构赋值指定默认值
let {foo:abc = ‘hello‘,bar} = {bar:‘hi‘};
console.log(abc,bar);
3.字符串扩展
/**
 * 字符串相关扩展
 * 几个常用的API:
 * includes():判断字符串中是否包含指定的子串,有的话返回true,否则返回false
 *              参数一:匹配的字符串;参数二:从第几个开始匹配
 * startsWith():判断字符串是否以特定的字符串开始
 * endsWith():判断字符串是否以特定的字符串结束
 *
 * 模板字符串
 */

/* console.log(‘hello world‘.includes(‘world‘));  //true
console.log(‘hello world‘.includes(‘world1‘));  //false
console.log(‘hello world‘.includes(‘world‘,6));  //true
console.log(‘hello world‘.includes(‘world‘,7));  //false */

/* let url = ‘admin/index.php‘;
console.log(url.startsWith(‘admin‘));
console.log(url.endsWith(‘php‘)); */

let obj = {
    username:‘xiaoming‘,
    age:‘24‘,
    gender:‘male‘
}

let tag = ‘<div><span>‘+obj.username+‘</span><span>‘+obj.age+
            ‘</span><span>‘+obj.gender+‘</span></div>‘;
console.log(tag);

//模板字符串:注意:用的是反引号(键盘上数字1左边的)
//反引号表示模板,模板中的内容可以有格式,通过${}方式填充数据
//支持一些简单的表达式运算,也支持函数调用
let fn = function(info){
    return info;
}
let tpl = `
    <div>
        <span>${obj.username}</span>
        <span>${obj.age}</span>
        <span>${obj.gender}</span>
        <span>${1+1}</span>
        <span>${fn(‘hello‘)}</span>
    </div>
`;
console.log(tpl);

4. 函数扩展

/**
 * 函数扩展:
 * 1.参数默认值
 * 2.参数解构赋值
 * 3.rest参数
 * 4.扩展运算符:...
 */

 //参数默认值
 //以前的写法:
function foo(param){
    let p = param || ‘hello‘;
    //let p = ‘hello‘ || param;   //注意,如果把‘hello‘赋值放在前面,则不管参数是什么都将打印hello
    console.log(p);
}
//foo();   //打印结果:hello
foo(‘hi‘);   //打印结果:hi

//ES6的写法:在原来的基础上做了精简
function foo(param = ‘hello‘){
    console.log(param);
}
//foo();   //打印结果:hello
foo(‘hi‘);   //打印结果:hi

//参数的解构赋值(传入的参数就是一个对象了)
function foo({name=‘xiaoming‘,age=24} = {}){
    console.log(name,age);
}
foo();    //打印结果:xiaoming 24
foo({name:‘zhangsan‘,age:22});   //打印结果:zhangsan 22

//rest参数(剩余参数):将单个数据转化成数组
function foo(a,b,...param){
    console.log(a);
    console.log(b);
    console.log(param);   //剩余的参数用数组的形式打印出来
}
foo(1,2,3,4,5,6);

//扩展运算符 ... :将数组转化成单个数据
function foo(a,b,c,d,e){
    console.log(a+b+c+d+e);
}
foo(1,2,3,4,5);     //打印结果:15
let arr = [1,2,3,4,5];
foo.apply(null,arr);    //打印结果:15
foo(...arr);      //打印结果:15

//合并数组:rest参数的应用
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1,...arr2];
console.log(arr3);         //打印结果:[ 1, 2, 3, 4, 5, 6 ]
/**
 * 箭头函数
 */
//普通函数:
function foo(){
    console.log(‘hello‘);
}
//箭头函数:
let foo = () => console.log(‘hello‘);

//带一个参数的普通函数:
function foo(v){
    return v;
}
//带一个参数的箭头函数:
let foo = v => v;

//多个参数的箭头函数参数必须用()包住,函数体内有多行代码的必须用{}包住
let foo = (a,b) => {let c=a+b; console.log(c);}

/**
  * 箭头函数的注意事项
  */
 //1.箭头函数中的this取决于函数的定于,而不是调用
 function foo(){
     //使用call调用foo时,这里的this其实就是call的第一个参数
     console.log(this);     //打印结果:{ num: 1 }
     setTimeout(() => {console.log(this.num)},100);    //打印结果:1
 }
 foo.call({num:1});

//2.箭头函数不可以new
 let foo = () => {this.num = 123;}
 new foo();  //报错:foo is not a constructor

//3.箭头函数不可以使用arguments获取参数列表,可以使用rest参数代替
let foo = (a,b) => {
    console.log(arguments);   //打印出来的对象
}

let foo = (...param) => {
    console.log(param);     //打印结果:[ 123, 456 ]
}
foo(123,456);

原文地址:https://www.cnblogs.com/zcy9838/p/11582832.html

时间: 2024-11-08 21:48:31

ES6常用语法:的相关文章

ES6常用语法

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. 虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.所以就算你现在不打算使用ES6,但为了看懂别人的你也该懂点ES6的语法了... 在我们正式讲解ES6语法之前,我们得先了解下Babel. Babel Babel是一个广泛使用的ES6转码器,可以将

ES6常用语法总结

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015.也就是说,ES6就是ES2015.虽然目前并不是所有浏览器都能兼容ES6全部特性,但越来越多的程序员在实际项目当中已经开始使用ES6了.今天就来总结一下在工作中es6常用的属性方法 1.let ES6新增了let命令,用来生命变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 1 2 3 4 for (l

ES6常用语法简介import export

let与var用法区别 //var var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 ------------------------------ //let var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); //

ES6常用语法简介

//var var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 10 ------------------------------ //let var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i); }; } a[6](); // 6 ---------

ES6 常用语法

ECMAScript 6 简称ES6, 在2015年6月正式发布~  ECMAScript 是JavaScript语言的国际标准. 一, 变量声明 const  let  var ES6以前 var关键字来声明变量,无论声明在何处都存在变量提升这个事情,会提前创建变量: 作用域也只有全局作用域以及函数作用域~ 所以变量会提升在函数顶部或全局作用域顶部: let 关键字表示变量,const 表示常量.都是块级作用域,比如一个函数内部,代码块{}内部: // var 变量提升 console.log

ES6常用语法(二)

arrow functions (箭头函数) 函数的快捷写法.不需要 function 关键字来创建函数,省略 return 关键字,继承当前上下文的 this 关键字 // ES5 var arr1 = [1, 2, 3]; var newArr1 = arr1.map(function(x) { return x + 1; }); // ES6 let arr2 = [1, 2, 3]; let newArr2 = arr2.map((x) => { x + 1 }); 注意:当你的函数有且

2-6 ES6常用语法

原文地址:https://www.cnblogs.com/ZHONGZHENHUA/p/9153706.html

第79篇 Vue第一篇 ES6的常用语法

01-变量的定义 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // var somedody; // console.log(somebody); // var somebody = &qu

总结常见的ES6新语法特性

总结常见的ES6新语法特性 ES6给我们带来了更"甜"的语法糖(一种语法,使得语言更容易理解和更具有可读性,也让我们编写代码更加简单快捷),如箭头函数(=>).class等等.用一句话来说就是: ES6给我们提供了许多的新语法和代码特性来提高javascript的体验 不过遗憾的是,现在还没有浏览器能够很好的支持es6语法,点这里查看浏览器支持情况,所以我们在开发中还需要用babel进行转换为CommonJS这种模块化标准的语法. 因为下面我会讲到一些es6新特性的例子,如果想要