正文 

当前位置： 首页 > 代码 > java教程

es6简单小复习(代码片段)

ygjzs ygjzs     2023-04-24     294

关键词：

Ecmascript 6

  • ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。
  • Ecmascript 是 JavaScript 语言的标注规范
  • JavaScript 是 Ecmascript 规范的具体实现
    • 具体实现取决于各大浏览器厂商的支持进度
  • Ecmascript 6 也被称作 Ecmascript 2015
  • 各大浏览器厂商对于最新的 Ecmascript 6 标准支持可以参照：
  • 对于不支持 ES6 的环境，可以使用一些编译转码工具做转换处理再使用
    • 例如 babel

let 和 const

let：

  • let 类似于 var，用来声明变量
  • 通过 let 声明的变量不同于 var，只在 let 命令所在的代码块内有效（块级作用域）
  • let 声明的变量不存在变量提升
  • let不允许在相同作用域内，重复声明同一个变量

const：

  • const声明一个只读的常量。一旦声明，常量的值就不能改变
  • const 声明必须初始化
  • const的作用域与let命令相同：只在声明所在的块级作用域内有效
  • const命令声明的常量也是不提升，必须先声明后使用
  • const声明的常量，也与let一样不可重复声明

解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

数组解构：

let [a, b, c] = [123, 456, 789]
console.log(a, b, c) 123 456 789

对象解构：

let  name, age  =  name: 'Jack', age: 18 
console.log(name, age) Jack 18

函数参数解构：

function f (p1,  p2 = 'aa', p3 = 'bb' ) 
  console.log(p1, p2, p3)


f('p1',  p2: 'p2' ) p1 p2 bb

字符串解构：

let [a, b, c, d, e] = 'hello'
console.log(a, b, c, d, e) h e l l o

字符串

实用方法：

includes(String)：返回布尔值，表示是否找到了参数字符串。
startsWith(String)：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith(String)：返回布尔值，表示参数字符串是否在源字符串的尾部。
repeat(Number)：repeat方法需要指定一个数值，然后返回一个新字符串，表示将原字符串重复Number次。

模板字符串：

let basket =  count: 5, onSale: true 
$('#result').append(`
  There are <b>$basket.count</b> items
   in your basket, <em>$basket.onSale</em>
  are on sale!
`);
  • 模板字符串（template string）是增强版的字符串，用反引号（`）标识
  • 它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
  • 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中
  • 模板字符串中嵌入变量，需要将变量名写在 $ 之中
    • 大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性
    • 大括号内部还可以调用函数

数组

方法：

Array.from() 将一个伪数组转为一个真正的数组
              实际应用中，常见的类似数组的对象是DOM操作返回的NodeList集合，
              以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。
Array.of() Array.of方法用于将一组值，转换为数组
           这个方法的主要目的，是弥补数组构造函数Array()的不足。
           因为参数个数的不同，会导致Array()的行为有差异。
find() 查找数组中某个元素
findIndex() 查找数组中某个元素的索引下标
includes() 返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似

实例方法：

ES6提供三个新的方法——entries()，keys()和values()——用于遍历数组.
可以用 for...of 循环进行遍历，唯一的区别是 keys() 是对键名的遍历、
values() 是对键值的遍历，entries() 是对键值对的遍历。

entries() 
keys()
values()

函数的扩展

函数参数的默认值：

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x, y = 'World') 
  console.log(x, y);


log('Hello') Hello World
log('Hello', 'China') Hello China
log('Hello', '') Hello
  • 通常情况下，定义了默认值的参数，应该是函数的尾参数
    • 因为这样比较容易看出来，到底省略了哪些参数
    • 如果非尾部的参数设置默认值，实际上这个参数是没法省略的。
  • 指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数
    • 也就是说，指定了默认值后，length属性将失真

rest 参数：

function add(...values) 
  let sum = 0;

  for (var val of values) 
    sum += val;
  

  return sum;


add(2, 5, 3) 10

扩展运算符：

console.log(...[1, 2, 3]) 1 2 3
console.log(1, ...[2, 3, 4], 5) 1 2 3 4 5

箭头函数：

var f = v => v

上面的箭头函数等同于：

var f = function(v) 
  return v
  • 箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象
  • 箭头函数不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
  • 箭头函数内部不可以使用arguments对象，该对象在函数体内不存在
    • 如果要用，可以用Rest参数代替

对象

属性的简洁表示法：

var foo = 'bar';
var baz = foo;
baz foo: "bar"

等同于
var baz = foo: foo

除了属性简写，方法也可以简写:
var o = 
  method() 
    return "Hello!"
  


等同于

var o = 
  method: function() 
    return "Hello!"

js小复习2

1、数组　　findIndex() indexOf()//findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。　　functionisBigEnough(element){returnelement>=15;}[12,5,8,130,44].findIndex(isBigEnough);//3console.log([12,5,8,130,44] 查看详情

小复习

数组去重1、functiontoObject(arr)varobj=;for(vari=0,i<arr.length;i++)obj[arr[i]]=true;returnobj;functiontoArray(obj)vararr=[];for(varattrinobj)if(obj.hasOwnProperty(attr))arr.push(attr);//把obj每一 查看详情

小复习

1、数组 　　　reverse()排倒序　　　splice()删除某个元素返回数组 　　　connat()　　　substr()  （m,n）n长度　　　substring() 不接受负数　　 slice() 　　　from()数组迭代的对象　　 isArray()是否为数组　... 查看详情

hcia小复习(代码片段)

目录标题OSI7层参考模型（开放式系统互联参考模式）MTU：最大传输单元UDP：用户数据报文协议TCP：传输控制协议TCP三次握手常见端口号和服务名词注解：1.OSI与TCP/IP区别2.ARP地址解析协议3.DNS域名解析服务4.... 查看详情

小复习类的继承

本周复习了一下类的继承，类的继承是指在一个现有类的基础上去构建一个新的类，构建出来的新类被称为子类，现有类被称作父类，子类会自动拥有父类所有可继承的属性和方法。关键字：extends语法： 修饰符classSubClassexte... 查看详情

蒟蒻林荫小复习——带权并查集(代码片段)

实际上很早之前林荫是有这个技能的。(废话！要不直接叫小学习好了）众所周知，并查集可以用来维护一些元素之间相连的关系（不知道的出门右转幼儿园）而状态压缩可以使得并查集查询一对元素的关系的速度变快（O1）状态... 查看详情

简单谈谈es6的十大特性(代码片段)

                                简单谈谈ES6的十大特性  本文转载自AlloyTeam：点击打开链接  鹅厂美丽的前端小编，文章总结的超棒。  附一篇我最敬佩的大神阮叔的一本ES6入门书籍《ECMAScript6入门》 ... 查看详情

es6简单扩展和单文件组件(代码片段)

  es6简介ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现ES6新特性多样化的声明方式1.var2.let3.const4.function5.import6.classBabelBabel 是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。... 查看详情

htmljs.objects.classes.javascriptoop：一个简单的es6类(代码片段)

查看详情

蒟蒻林荫小复习——关于有限制区间元素查询的一些解法

如题：本文主要说明对于区间有限制查询的一些解法（其实就两种）问题1：给定一个数列，要求查询区间L—R中所有大于等于Va小于等于Vb的元素和解法：1.线段树套权值线段树第一维维护区间，第二维作为权值线段树，维护... 查看详情

es6promise简单实现(代码片段)

基本功能实现：functionPromise(fn)//需要一个成功时的回调vardoneCallback;//一个实例的方法，用来注册异步事件this.then=function(done)doneCallback=done;functionresolve()doneCallback();fn(resolve);参考文章：1、手把手教你实现一个完整的Promise2、教你一... 查看详情

es6proxy简单使用(代码片段)

es6的Proxy是什么？可以理解为，是在访问对象前的一层拦截。只要访问的该对象，就要通过这个一层拦截。这一层的拦截，可以进行数据的过滤和更改比如下面这个varp=newProxy(,get:function()return‘没有这个属性‘)p.name=‘张三‘p.age/... 查看详情

es6中promise的简单理解(代码片段)

一个函数参数：newPromise(function(resolve,reject))每个Promise构造函数可接受一个参数，该参数为一个函数，该函数又有两个参数resolve和reject，分别表示为成功之后的回调函数和失败之后的回调函数。当异步操作执行成功后，会将异步... 查看详情

解决es6中webstrom不支持import的一个简单方法(代码片段)

代码如下：export_one.js的代码如下：exportfunctionone()console.log(‘one‘);exportfunctiontwo()console.log(‘two‘);functionthree()console.log(‘three‘);functionfour()console.log(‘four‘);functionfive()console 查看详情

es6之promise简单理解及使用(代码片段)

promise1.promise是解决异步的一种方案，也就是让promise帮我们去处理异步，最终promise会返回异步处理的结果。2.有了promise之后，让异步处理更加灵活，还能够解决之前的回调地狱的问题。promise的使用我们需要用promise帮我们处理异... 查看详情

京东面经学习----答案整理(代码片段)

...]介绍下ThreadLocal和使用场景7.[JVM]jvm优化工具8.[设计模式]简单工厂和抽象工厂的区别9.[设计模式]熟悉的设 查看详情

es6ecmascript6_简单介绍(代码片段)

ECMAScript6ECMA组织 前身是欧洲计算机制造商协会指定和发布脚本语言规范，标准在每年的6月份正式发布一次，作为当年的正式版本这样一来，就不需要以前的版本号了，只要用年份标记就可以了.ES6既是一个历史名词，也是一... 查看详情

三言两语之简单上手sass

背景：  初次接手公司的项目,虽然之前草草的看过一些sass的基础知识，但是因为久未征战，知识也早已随风飘散，现在小复习一下记下一些常识中的重点。。sass是使用ruby写的，所以使用前请先确保自己的机子中有了ruby... 查看详情