【学习】前端开发怎么用es6-总结

前端开发中es规范是什么? | 前端开发es6是什么? | es6前端开发环境
ECMAScript 6.0( 以下简称ES6) 是JavaScript语言的下一代标准, 已经在2015年6月正式发布了。 它的目标, 是使得JavaScript语言可以用来编写复杂的大型应用程序, 成为企业级开发语言。 现在主流浏览器使用的仍然是ECMAScript5。
1 作用域变量
1.1
var
    var没有块级作用域, 定义变量是通过闭包进行隔离的, 定义后在当前闭包中都可以访问, 如果变量名重复, 就会覆盖前面定义的变量。
if (true) {
    var a = “hello world”;
}
console.log(a); //hello world
for (var i = 0; i < 3; i++) {
    setTimeout(function () {
        console.log(i); //输出三次 3
    }, 0);
}
1.2 let指令
1.2 .1 实现块级作用域
使用let定义变量不仅可以通过闭包隔离, 也可以通过块级作用域。 块级作用域用一组大括号定义一个块。
if (true) {
    let name = ‘zfpx’;
}
console.log(name); // ReferenceError: name is not defined
1.2 .2 不会污染全局对象
if (true) {
    let name = ‘zfpx’;
}
console.log(window.name); //undefined
1.2 .3 for循环中也可以使用
嵌套循环不会相互影响
for (let i = 0; i < 3; i++) {
    console.log(“outter:”, i);
    for (let i = 0; i < 2; i++) {
        console.log(“inner:”, i); //outter: 0 inner: 0 inner: 1 outter: 1 inner: 0 inner: 1 outter: 2
    }
}
1.2 .4 重复定义会报错
if (true) {
    let a = 1;
    let a = 2; //Identifier ‘a’ has already been declared
}
1.2 .5 不存在变量的预解释
console.log(‘inner’, i); //ReferenceError: i is not defined
let i = 100;
1.3 闭包的新写法
;
(function () {
})();
现在
{}
常量
使用const我们可以去声明一个常量, 常量一旦赋值就不能再修改了
2.1 常量不能重新赋值
const MY_NAME = ‘vicky’;
MY_NAME = ‘hello’; //TypeError: Assignment to constant variable.
2.2 变量值可改变
注意const限制的是不能给变量重新赋值, 而变量的值本身是可以改变的
const names = [‘vicky’];
names.push(‘lily’);
console.log(“names:” + names); //names:vicky,lily
2.3 不同的块级作用域可以多次定义
const A = “0”; {
    const A = “A”;
    console.log(A) //A
} {
    const A = “B”;
    console.log(A) //B
}
console.log(A) //0
解构
3.1 解构数组
3.1 .1
var [name, age] = [‘lily’, 8];
console.log(name, age); //lily 8
3.1 .2 嵌套赋值
let [x, [y], z] = [1, [2.1, 2.2]];
console.log(x, y, z); //1 2.1 undefined
let [x, [y, z]] = [1, [2.1, 2.2]];
console.log(x, y, z); //1 2.1 2.2
3.1 .3 省略赋值
let [, , x] = [1, 2, 3];
console.log(x); //3
3.2 解构对象
var {
    name,
    age
} = obj;
console.log(name, age); //lily 18
var {
    name: myName,
    age: myAge
} = obj;
console.log(name, myName, age, myAge); //lily lily 18 18
3.3 默认值
在赋值和传参的时候可以使用默认值
let [a = “a”, b = 2, c = new Error(“C must be pointed! “)] = [1, , ];
console.log(a, b, c); //1 2 Error: C must be pointed!
字符串
4.1 模板字符串
模板字符串用反引号(数字1左边的那个键) 包含, 其中的变量用$ {}
括起来
let name = “lily”,
    age = 18;
let desc = $ {
    name
}
is $ {
    age
}
years old;
console.log(desc); //lily is 18 years old
var a = “hello”,
    b = “world”;
var htmlStr = < ul > < li > $ {
    a
} < /li> <li>${b}</li > < /ul>;
console.log(htmlStr);
//所有模板字符串的空格和换行,都是被保留的,书写很方便
结果为:
    <
    ul >
    <
    li > hello < /li> <
    li > world < /li> <
    /ul>
var htmlStr = ‘<ul>’ +
    ‘<li>’ + a + ‘</li>’ +
    ‘<li>’ + b + ‘</li>’ +
    ‘</ul>’;
//或者
var htmlStr2 = ‘<ul>\
<li>’ + a + ‘</li>\
<li>’ + b + ‘</li>\
</ul>’;
console.log(htmlStr); //<ul><li>hello</li><li>world</li></ul>
console.log(htmlStr2); //<ul><li>hello</li><li>world</li></ul>
4.2 字符串新方法
includes(): 返回布尔值, 表示是否找到了参数字符串, 功能类似indexOf。
startsWith(): 返回布尔值, 表示参数字符串是否在源字符串的头部。
endsWith(): 返回布尔值, 表示参数字符串是否在源字符串的尾部。
第二个参数, 表示开始搜索的位置
var str = “hello world”;
console.log(str.startsWith(‘e’, 2)); //false
console.log(str.includes(‘w’, 3)); //true
console.log(str.endsWith(‘o’, 5)) //true
注意: endsWith的行为与其他两个方法有所不同。 它针对前n个字符, 而其他两个方法针对从第n个位置直到字符串结束
4.3 repeat
repeat方法返回一个新字符串, 表示将原字符串重复n次。
console.log((‘ha’).repeat(2)); //haha
5 函数
5.1 默认参数
可以给定义的函数的参数设置默认值
var desc = function (name = “lily”, age = 18) {
    console.log($ {
            name
        }
        is $ {
            age
        }
        years old);
}
desc(“xiao ming”); //xiao ming is 18 years old
5.2 展开操作符
把…放在数组前面可以把一个数组进行展开
let print = function (a, b, c) {
    console.log(a, b, c);
}
print([1, 2, 3]); //[ 1, 2, 3 ] undefined undefined
print(…[1, 2, 3]); //1 2 3
// 可以替代apply
var maxVal = Math.max.apply(null, [1, 2, 3, 4, 5]);
var maxVal2 = Math.max(…[1, 2, 3, 4, 5]);
console.log(maxVal, maxVal2); //5 5
// 可以替代concat
var arr1 = [1, 2],
    arr2 = [3, 4],
    arr3 = arr1.concat(arr2),
    arr4 = […arr1, …arr2];
console.log(arr3); //[ 1, 2, 3, 4 ]
console.log(arr4); //[ 1, 2, 3, 4 ]
//类数组的转数组
function max(a, b, c) {
    console.log(Math.max(…arguments));
}
max(1, 3, 4); //4
5.2 剩余操作符
剩余操作符可以把其余的参数的值都放到一个叫b的数组里面
let rest = function (a, …b) {
    console.log(a, b);
}
rest(1, 2, 3); //1 [2, 3]
5.3 函数的名字
ECMAScript 6 给函数添加了一个name属性
var desc = function descname() {}
console.log(desc.name); //descname
5.4 箭头函数
箭头函数简化了函数的的定义方式, 一般以 “=>”
操作符左边为输入的参数, 而右边则是进行的操作以及返回的值inputs => output
输入参数如果多于一个要用() 包起来, 函数体如果有多条语句需要用 {}
包起来
    [‘a’, ‘b’, ‘c’].forEach(item => console.log(item)); //a b c
//之前的写法
[‘a’, ‘b’, ‘c’].forEach(function (item) {
    console.log(item); //a b c
});
箭头函数根本没有自己的this, 导致内部的this就是外层代码块的this。 正是因为它没有this, 从而避免了this指向的问题。
var Person = {
    name: ‘lily’,
    getName: function () {
        setTimeout(function () {
            console.log(this)
        }, 1000); //在浏览器执行的话this指向window
        setTimeout(() => console.log(this), 1000); //在浏览器执行的话this指向Person
    }
}
Person.getName();
5.5 函数新方法
5.5 .1 from
将一个数组或者类数组变成数组, 会复制一份
var oldArr = [1, 2, 3];
var newArr = Array.from(oldArr);
console.log(newArr); //[ 1, 2, 3 ]
5.5 .2 Array.of
of是为了将一组数值, 转换为数组
console.log(Array(3, 4), Array(3, 4).length, Array.of(3, 4), Array.of(3, 4).length); //[ 3, 4 ] 2 [ 3, 4 ] 2
5.5 .3 copyWithin
console.log([1, 2, 3, 4, 5].copyWithin(0, 1, 2)); //[ 2, 2, 3, 4, 5 ]
console.log([1, 2, 3, 4, 5].copyWithin(0, 1, 4)); //[ 2, 3, 4, 4, 5 ]
5.5 .4 find / findIndex
let arr = [0, 1, 2, 3, 4, 5];
let find = arr.find((item, index, arr) => {
    return item === 3;
});
let findIndex = arr.findIndex((item, index, arr) => {
    return item === 3;
});
console.log(find, findIndex); //3 3
5.5 .5 fill
就是填充数组的意思 会更改原数组 Array.prototype.fill(value, start, end = this.length);
let arr = [1, 2, 3, 4, 5, 6];
arr.fill(‘a’, 1, 2);
console.log(arr); //[ 1, ‘a’, 3, 4, 5, 6 ]
前端集成开发环境 | 搭建前端es6开发环境 | es6前端开发书籍
» 本文来自:前端开发者 » 《【学习】前端开发怎么用es6-总结》
» 本文链接地址:https://www.rokub.com/3996.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!