美文网首页
前端(ES6)

前端(ES6)

作者: dylancc | 来源:发表于2020-03-10 19:16 被阅读0次
1.块级作用域的引入

在ES6之前,js只有全局作用域和函数作用域,ES6中let关键字为其引入了块级作用域。

{
var a = 5;
let  b = 6;
}
console.log(a);     //5
console.log(b);     //b is undefined

let声明的变量只能在其所在的代码块内才能访问,var声明的变量由于是全局变量,因此可以在代码块外访问

2.暂时性死区

var声明的变量可以在声明之前使用,相当于默认为其声明其值为undefined了;
但是,let声明的变量一旦用let声明,那么在声明之前,此变量都是不可用的,术语称为“暂时性死区”。

console.log(a);                     //undefined
var a=8;
console.log("----------");
console.log(b);                     //控制台报错
let b=9;
3.const命令

const用来定义常量,相当于java中的final关键字。
并且const声明常量之后就必须立即初始化!

4.解构赋值
let [a,b,c] = [1,2,3];
let{x1,x2} = {x2:5,x1:6};
const [a,b,c,d,e]= "hello";
function  add([i,j]) {}---add([5,6]);
5.字符串
let str = "abcde";
str.codePointAt(0).toString(16);    //返回字符的码点并由十进制转到16进制
String.fromCodePoint(0xxxxx);       //返回码点对应的字符
for (let a of str){
   console.log(a);
}                                   //for...of循环遍历字符串中每个字符挨个输出字符
str.at(0);                          //返回指定位置的字符,目前只是提案
str.startsWith('a',0);             //从指定位置往后开始检查,是否以“a”开始,位置参数可省略,默认为0
str.endsWith('b',1);               //从指定位置向前检查,是否以“b”结束
str.includes('c',1);               //是否包含c
str.repeat(2);                      //字符串重复指定次数“abcdeabcde”,小数取整,Infinity和负数报错
str.padStart(8,'ab');               //指定字符从前开始补直到字符串长度符合要求,"abaabcde"
str.padEnd(8,'ab');                 //指定字符从后开始补直到字符串长度符合要求,"abcdeaba",若长度小于原长度,返回原字符串,上同

6.模板字符串

模板字符串采用反引号(`)标识,并且模板字符串中的空格、换行将在输出时有所保留。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量${xx},其中xx可以是表达式、运算、对象属性还可以是函数,若是字符串将直接输出该字符串。
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
7.含参函数的调用
//等同于say('hello')。
function say(something){
    console.log("she say"+" '"+something+"'" );
}
say`hello`;                             //she say 'hello'
8.数值拓展

和字符串对象类似的,ES6也为数值类对象例如Number、Math添加了新的方法以及属性(常量)。

9.函数function
function show(name="jack",sex="boy"){
    console.log(name+" is a "+sex+"!");
}
show();                                  //jack is a boy!
show('judy');                            //judy is a boy!
show('judy','girl');                     //judy is a girl!
//为函数的参数添加默认值,执行函数时如果不传该参数,那么就用默认值代替。

\color{#FF0000}{箭头函数:}

var 变量名/函数名 = (参数,参数)=>{代码块}

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;
};
10.数组的扩展(...可变参数)

扩展运算符为三个点(...),将一个数组转化为参数序列,通常与函数一起使用,show(...['judy','girl'])。
数组合并:[...arr1,...arr2,...arr3]
字符串转字符数组:[..."hello"]--------------["h","e","l","l","o"]
将实现Iterator接口的对象转化为真正的数组:[...nodelist],这里的nodelist是一个类似于数组的nodelist对象
Generator 函数:该函数执行后返回一个遍历器对象,拓展运算符也可将其转化为数组。

let a =function*(){
    yield 3;
    yield 4;
    yield 5;
    return 6;
};
console.log([...a()]);              //[3,4,5]
11.数组的方法

\color{#FF0000}{Array.from}(对象,对新数组各项的改动规则)
这里的对象只适合①类数组对象②实现Iterator接口的对象;后面的规则可选

Array.from([1, 2, 3], (x) => x * x)          //这里将数组每项按一定规则改变生成新数组[1,4,9]

\color{#FF0000}{Array.of}(数据1,数据2,数据3)
将一组数据转化为数组

Array.of(1,2,3,4,5)                               //[1,2,3,4,5]

\color{#FF0000}{copyWithin}(被覆盖起始位置,选取的数据起始位置,选取额数据结束位置)
截取数组的一段数据,并覆盖到指定位置

[1,2,3,4,5].copyWithin(0,2,4)               //被截取数据位置为[2,4)---[3,4],替换起始位置是0,所以结果是[3,4,3,4,5]

\color{#FF0000}{find}(规则)、\color{#FF0000}{findIndex}(规则)
这里的规则是一个回调函数,找到了就返回这个数组项/索引,找不到返回undefined/-1

[9,8,7,6,5,4,3].find(n=>n<5)                //返回4

还可以添加第二个参数,如下

function f(v){
    return v > this.age;
}
let  c =function(v){
    return v > this.age;
}
let person = {name: 'John', age: 20};
let a  =[10, 12, 26, 15].find(c, person);            //c、f都可以  
console.log(a);                                      //26

\color{#FF0000}{fill}(被填充数据,起始位置,结束位置)

如果起始位置、结束位置不写,那么就默认全部填充

[2,2,2,2,2,2].fill(8,2,4)                                //将8覆盖原[2,4)位置上的数据,[2,2,8,8,2,2]

\color{#FF0000}{注意},如果给每项赋值的是一个对象,那么实际上只是一个指针,若改变一个位置的对象内容,那么所有项的对象内容都会改变。

let b = {name:'jack'};
let a =[2,2,2,2,2,2].fill(b,1,4) ;
console.log(a);               //[ 2, { name: 'jack' }, { name: 'jack' }, { name: 'jack' }, 2, 2 ]
a[1].name = "echo";
console.log(a);               //[ 2, { name: 'echo' }, { name: 'echo' }, { name: 'echo' }, 2, 2 ]

\color{#FF0000}{for...of遍历数组的键、值、以及各项键值对信息}

for (let index of ['a', 'b'].keys()) {
    console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
    console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
    console.log(index, elem);
}
// 0 "a"
// 1 "b"

备注:有的浏览器没有实现数组的values()方法,比如:Chrome!

12:对象的拓展

对象里面可以直接写入变量和函数

//before:
var person = {
    name:'eco',
    age:18,
    say:function(something){
        console.log("hello "+something);
    }
};
person.say('world');

//now:
var firstname='jack';
var man = {
    firstname,
    say(something){
        console.log(this.firstname);
        console.log("hello "+something);
    }
};
man.say('world');

\color{#FF0000}{属性名/方法名}:可以用中括号里面加上表达式的方式

var a = 'age';
person.age=person['age']=person[a]

方法的name属性返回方法名
person.say.name //"say"
\color{#FF0000}{Object.is}(值1,值2)用于比较两个值是否相等,返回布尔值
\color{#FF0000}{Object.assign}(targetobject,sourceobject1,sourceobject2)
用于对象的合并,将源对象合并到目标对象,若有相同属性源对象属性覆盖目标对象属性
如果源对象是其他数据类型,只有字符串会以字符数组形式拷到目标对象,其他类型不会有效果。

const v1 = 'abc';
const v2 = true;
const v3 = 10;
const obj = Object.assign({}, v1, v2, v3);
console.log(obj);           // { "0": "a", "1": "b", "2": "c" }

对象的属性描述:Object.getOwnPropertyDescriptors(obj)
对象的继承相关:
Object,setPrototypeOf(obj,proto) //为obj对象设置一个原型对象,那么obj继承了proto对象的所有属性
Object.getPrototypeOf(obj) //不难看出,这是读取一个对象的原型对象
super //指向当前对象的原型对象,相当于java中的超类

13.Symbol函数

为了防止不同人员书写代码造成变量名/方法名的冲突

let a = Symbol();
let b = Symbol();
//函数可以添加带有描述性语言的字符串参数
a === b ;          
//false
14.Set和Map数据结构

Set:成员不重复的类数组结构
Set属性:size---返回成员总数
Set操作方法:add(value)---返回Set、delete(value)---返回布尔、has(value)---返回布尔、clear()---无返回值
Set遍历方法:keys()---返回键(索引)的遍历器、values()---返回值的遍历器、 entries---返回键值对的遍历器、forEach(callback())---遍历每个成员,并通过回调函数基于数据做点什么
WeakSet:类似于Set,只是它的成员只能是对象,没有size,不能遍历
Map:广义上的键值对集合,键的范围不局限于字符串,对象也可以当作键
Map操作方法:set(key,value)---设置成员、get(key)---读取指定键的值,若无返回undefined

const set = new Set([1, 2, 3, 4, 4]);
//[...set]---[1,2,3,4]

const map = new Map([
    ['name', '张三'],
    ['title', 'Author']
]);

相关文章

  • 前端H5 SPA选型

    前台规范 ES6语法ES6前端代码规范 前端模块化管理 webpack 构建工具 vue-loader 前端CSS...

  • ReactNative开发必备ES6知识

    引言 现代前端应用通常都会使用ES6进行开发,ReactNative项目同样也会使用ES6进行开发,对于现代前端项...

  • 前端模块化:ES6,CommonJS

    前端模块化 共有四种规范 ES6 Module CommonJS AMD CMD ES6 Module ES6模块...

  • 大白话,讲编程之《ES6系列连载》汇总-转载

    本文仅用于查看前端君的微信公众号“web前端教程”-《ES6系列连载》等一系列文章。 ES6教程链接:放在超链接里...

  • es6—>es5 babel

    index es6—>es5 babel __veblen 前端构建工具,内置解析es6语法,核心在于babel ...

  • es6常用基础合集

    es6常用基础合集 ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大。值得高兴的是,如果你熟悉ES5,...

  • ECMAScript 6 初尝试

    最近在梳理大前端的知识,发现我对前端的知识真的欠缺了,连ES6都不了解,那就尝试一下ES6。 创建 common....

  • es6基础知识3(迭代)

    title: es6基础知识3(迭代)tags: 迭代categories: 前端 1. 迭代器 es6中新增了迭...

  • 前端模块化

    前端模块化标准 AMD: define + require CMD: exports + require ES6:...

  • mini路由

    es6实现mini路由 参考文章:面试官: 你了解前端路由吗?

网友评论

      本文标题:前端(ES6)

      本文链接:https://www.haomeiwen.com/subject/djugdhtx.html