首页 > 其他分享 >ES6常见语法

ES6常见语法

时间:2023-03-06 16:23:05浏览次数:37  
标签:ES6 const log ... 常见 语法 let 数组 console

ECMAScript 6.0(也可以称为ECMAScript2015),ECMAScript 6.0简称 ES6,是语言的标准。

出来的时间已经很久了,但是我们在工作中,有时候也不会使用。今天我们就来介绍一下。

1、块级作用域(let、const)

块级作用域,就是有{}括号中可用范围,不像之前var定义的变量都是函数作用域。
let定义的变量可以改变值,const定义的都是静态变量,不可以修改的。但是像数组,只对数据进行push操作的话,也可以定义成const的。

2、模版字符串

反引号(``),变量(${})

const msg = 'hello world';
const str =`你好,
${msg}
再见`;
console.log(str);
12345

3、解构赋值

从数组和对象中提取值 ,对变量进行赋值 ,这被叫作解构赋值。

// 数组解构
let [a,b,c]=[1,2,3];
console.log(c);
// 对象解构
let {name:myname,age}={name:'lily',age:12};
console.log(myname,age)
// 字符串解构
let str = 'qaz';
let [a,b,c]=str;
console.log(a,b,c);
12345678910

4、箭头函数

箭头函数作为普通函数的一个补充,将this指向了函数体之外最近一层的this,而不是向普通JS一样将this指向window变量。

 function fn(){
    console.log('real',this)     //{a:100}
    var arr = [1,2,3]
    //普通JS
    arr.map(function (item){
      console.log('js',this)     //window
      return item + 1
    })
    //箭头函数
    arr.map(item => {
      console.log('es6',this)     //{a:100}
      return item + 1
    })
  }
  fn.call({a:100})     //将{a:100}设置为this
123456789101112131415

5、函数默认参数

  function(a, b=0){   //如果b为空,默认b等于0
  }
12

6、剩余参数&扩展运算符

语法都是...arr。不同在于,剩余参数是将一个不定数量的参数表示为一个数组。扩展运算符是将数组(对象)转为用逗号分隔的参数序列。

//剩余参数是把参数转成数组
function func(arg1, ...args){
    // arg1 == 1,   args == [2,3,4]
}
func(1,2,3,4);

const sum = (...args) =>{
    let total = 0;
    arrgs.foreach(item => total += item);
    return total;
}
1234567891011
//扩展运算符,合并数组
let arr1 = [1,3,5];
let arr2 = [2,4,6];
let arr3 = [...arr1, ...arr2];   // arr3 == [1,3,5,2,4,6];

// 或者
arr1.push(...arr2);     // arr1 = [1,3,5,2,4,6];
1234567

剩余参数是把参数转成数组,扩展运算符是把数组转成非数组。

7、对象新增方法,Object.assign()

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(target); // Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // Object { a: 1, b: 4, c: 5 }
123456

8、Set和Map数据结构

Set类似于数组,但是成员的值都是唯一的,没有重复的值。

const s = new Set([1,2,3,4,5,5]); // 会剔除重复的值,实际上 s=={1,2,3,4,5}
s.size;       // 5, 数据结构的大小
12

add(value):添加某个值,返回Set结构本身
delete(value):删除某个值,返回一个布尔值,表示删除是否成功
has(value):返回一个布尔值,表该值是否为Set的成员
clear(value):清除所有成员,没有返回值

s.add(6).add(7);++

s.delete(7);   //true
s.delete(8);   //false

s.has(6);     //true
s.has(7);     //false

s.clear()      // s.size === 0

s.forEach( value => console.log(value));    //遍历s数据结构的值 
1234567891011

Map是类似Object的一种键值对集合

9、最后其他es6常用的语法

es6模块化 中 import和export 用法
(前端工程化以及如何通过Node.js中babel来编译es6模块化代码)

es6的 promise对象 (JavaScript进阶之Ajax的问题和什么是promise)

asyn 和 await 函数 (fetch和axios接口调用方式的用法)

(Es6简化操作的一些数组方法使用及原理)

标签:ES6,const,log,...,常见,语法,let,数组,console
From: https://www.cnblogs.com/crispyChicken/p/17184298.html

相关文章

  • 常见问题
    1、vue2和vue3区别1)组合式api(其实就是用函数的方式写vue组件)2)语法糖setup(组件实例创建时会立即调用一次)3)teleport组件(用来将组件放到指定的dom元素......
  • JAVA执行es6脚本
    publicstaticvoidmain(String[]args){System.setProperty(ClientLogger.CLIENT_LOG_LEVEL,"OFF");//SpringApplication.run(SrmSettleAccountAppli......
  • 字符串长度【语法题】【字符串的多种输入方式】
    字符串长度给定一行长度不超过100的非空字符串,请你求出它的具体长度。输入格式输入一行,表示一个字符串。注意字符串中可能包含空格。输出格式输出一个整数,表示它的......
  • 左旋转字符串【剑指Offer, 语法题】
    左旋转字符串字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部。请定义一个函数实现字符串左旋转操作的功能。比如输入字符串"abcdefg"和数字2,该函数......
  • Yaml语法
    ##Yaml语法编程免不了要写配置文件,怎么写配置也是一门学问。YAML是专门用来写配置文件的语言,非常简洁和强大,远比JSON格式方便YAML语言的设计目标,就是方便人类读......
  • markdown语法
    一级标题二级标题三级标题列表无序列表列表1列表2引用这是一条引用行内代码intmian(){printf("helloworld");}代码块intmain(){printf......
  • DjangoORM中常见字段和参数
    DjangoORM常见字段和参数 常见字段 AutoFieldint自增列,必须填入参数primary_key=True。当model中如果没有自增列,则自动会创建一个列名为id的列。 IntegerField一......
  • ES6-ES11 Set集合实践(去重交并差)
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • ES6-ES11 Promise实践练习-多个文件内容读取
    原视频//引入fs模块constfs=require("fs");//fs.readFile('./resources/为学.md',(err,data1)=>{//fs.readFile('./resources/插秧诗.md',(err,data2)......
  • ES6-ES11 Set集合介绍与API
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......