前端开发ES6核心内容学习

前端游戏开发的背景
游戏开发前端薪资
开发狼人杀游戏前端

ECMAScript6的特点
ES6即ES2015增添了许多必要的特性,例如模块和类,块级作用域,常量与变量…还有很多便利的功能如:箭头的功能和简单的字符串拼接等。其实ES6的某些”新”的特点并不是真的新,只是试图简化语法,这样就无需使用老式的方法编写代码,让我们编程更容易。
浏览器的支持程度 http://kangax.github.io/compat-table/es6/,可以通过Babel转码器把ES6写的代码转成ES5的,就不用担心运行环境是否支持。
编写注意:
chrome下使用ES6为保证可以正常使用大部分语法,需要使用严格模式,即在js开始部分加上’use strict’;
在firefox下使用ES6为保证可以正常使用大部分语法,需要知道测试版本,即在script标签的type属性中加上“application/javascript;version=1.7”属性值。

1.let 声明变量的关键字

(1).在相同的作用域内,let不能重复声明一个变量(不同的作用域内除外)
(2).let声明的变量不会被预解析
(3).暂时性死区,变量在let声明前都不能访问,为了防止先调用后声明这个现象
javascript 代码

‘use strict’
//es5:
console.log(a); //undefined
var a=12;
console.log(a); //12
//es6:
console.log(b); //报错 不能提前使用
let b=20;
let b=30; //报错 不能重复声明一个变量
console.log(b);
(4).let声明的变量拥有块级作用域,块级作用域指的是一个大括号就是一个作用域,以后就不要写自执行函数了。

例:给一组li添加点击事件弹出其的索引值
javascript 代码

‘use strict’
//es5实现:
var lis = document.querySelectorAll(“li”);
for (var i = 0; i < lis.length; i++) {
    (function (i) {
        lis[i].onclick = function () {
            alert(i);
        }
})(i);
}
//ES6实现:
for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        alert(i);
    }
}
2.常量const

const:声明一个常量
(1).声明一个常量再修改会报错;
(2).只声明不赋值会报错;
(3).必须先声明再使用,不会被提前解析;
(4).不能重复声明;
注意:对象中的属性是可以修改的。
javascript 代码

const str=’David’;
str = 12; //报错 声明后不能再修改
const b; //报错 没有赋值
    console.log(c); //报错 没声明就用了
const c=20;
const c=’David’; //报错 重复声明了
//声明一个对象后,可以对它里面的属性进行修改
const obj={
name:’David’
};
obj.name=’小王’;
console.log(obj);
3.解构赋值

按照一定模式,从数组或者对象中把数据拿出来,对变量进行赋值
(1).数组解构赋值
等号左边和右边都必须是数组,数组的解构赋值要一一对应,否则结果为undefined
(2).对象解构赋值
等号左边和右边都必须是对象,名字(key)要一一对应,顺序不需要对应,否则结果为undefined
javascript 代码

//数组解构赋值
var [a, b, c] = [1, 2, 3]
console.log(a, b, c)
//可以用来调换两个值
var n1 = 10
var n2 = 15
var [n1, n2] = [n2, n1]
console.log(n1, n2)
//也可以用来取函数的返回值
function fn() {
    return [‘red’, ‘green’, ‘bluae’]
}
var [d, e, f] = fn()
console.log(e) //green
//对象解构赋值
var obj = {
    name: ‘David’,
    QQ: 3569853,
    language: [‘css’, ‘html’, ‘js’],
    work: function() {
        console.log(‘js’)
    },
}
var { name, work, QQ, age } = obj
console.log(name, work, QQ, age)
4.字符串的扩展方法

(1). includes() 字符串是否包含某个字符,参数为一个字符,
(2). startsWith() 字符串的开始位置的字符是否是传入的参数,参数是一个字符串;
(3). endsWith() 字符串的结束位置的字符是否是传入的参数,参数是一个字符串;
(以上的几个方法返一个boolean值)
(4). repeat(num)复制字符串,参数为数字一定要为正数,表示复制次数;
javascript 代码

var str = ‘David’
console.log(str.includes(‘i’)) //true
console.log(str.includes(‘b’)) //false
console.log(str.startsWith(‘k’)) //true
console.log(str.endsWith(‘n’)) //true
console.log(str.repeat(2)) //DavidDavid
(5).模板字符串
 模板字符串:字符串的拼接方式,用反撇号字符 ` 代替普通字符串的引号 ' 或 " 。

1.字符串需要用一对反引号包起来,它可以定义多行字符串,只用一对反引号
2.要拼进去的数据需要放在${}里面
3.大括号里还可以进行运算
4.大括号里还可以调用函数
javascript 代码

var obj = {
    title: ‘星期一’,
    content: ‘今天要上班’,
}
function fn() {
    return ‘我爱编程,编程让我快乐’
}
var text = document.getElementById(‘text’)
//es5拼接方法
text.innerHTML = ‘<h1>’ + obj.title + ‘</h1><p>’ + obj.content + fn() + ‘</p>’
//es6拼接方法
text.innerHTML = `<h1>${obj.title}</h1><p>${obj.content + fn()}</p>`
5.Math对象的扩展方法

(1).Math.trunc(num) 去除小数部分,是直接把小数部分去掉
1.对于非数值,先调用Number方法把它转成数字
2.对于空值和无法转成数字的值,结果是NaN
(2).Math.sign(num) 判断一个数是正数还是负数还是0
1.参数为正数,返回1
2.参数为负数,返回-1
3.参数为0,返回0
4.参数为-0,返回-0
5.参数为其它值,返回NaN
(3).Math.hypot() 开平方,参数可以为多个,把所有的参数的平方加起来,然后再开平方
javascript 代码

console.log(Math.trunc(12.74)) //12
console.log(Math.trunc(0.5)) //0
console.log(Math.trunc(‘36.01’)) //36
console.log(Math.trunc(‘David’)) //NaN
console.log(Math.sign(5)) //1
console.log(Math.sign(-5)) //-1
console.log(Math.sign(0)) //0
console.log(Math.sign(-0)) //-0
console.log(Math.sign(‘David’)) //NaN
console.log(Math.hypot(3)) //3
console.log(Math.hypot(3, 4)) //5
console.log(Math.hypot(3, 4, 5)) //7.0710678118654755
6.数组:
(1).Array.from()把类数组转成真正的数组
   任何有length属性的对象就可以用这个方法转真正的数组, 对象中的key必须是0开始的数字。
(2). [...类数组] 它是一个扩展方法,在这里可以把类数组转成真正的数组。

javascript 代码

var str = ‘David’
var newStr = Array.from(str)
console.log(newStr) //[“D”, “a”, “v”, “i”, “d”]
//对象身上只要有length属性就可以调用Array.from()把对象转成数组,对象中的key必需是从0开始的数字才能转
var obj = {
    0: ‘red’,
    1: ‘green’,
    2: ‘blue’,
    3: ‘yellow’,
    length: 4,
}
var obj2 = {
    1: ‘red’,
    2: ‘green’,
    3: ‘blue’,
    4: ‘yellow’,
    length: 4,
}
console.log(Array.from(obj)) //[“red”, “green”, “blue”, “yellow”]
console.log(Array.from(obj2)) //[undefined, “red”, “green”, “blue”]
(3).Array.of()数值转数组
(4).Array.includes("z",index),查找某个数据在数组中是否存在,返回boolean
(5).for of 循环,能够直接读取键值(for in 循环,能够直接读取键名)
  它不光可以遍历数组或者对象,只要有遍历接口的对象都可以用它
(6).keys() 存储了数组的所有键名
(7).values() 存储了数组的所有键值
(8).entries() 存储了数组的所有键值对

javascript 代码

var color = [‘red’, ‘green’, ‘blue’, ‘yellow’]
//for in
for (var attr in color) {
    console.log(attr) //0 1 2 3
}
//for of
for (var value of color) {
    console.log(value) //red green blue yellow
}
//字符串也可以使用for of
var str = ‘David’
for (var value of str) {
    console.log(value) //D a v i d
}
//遍历keys
for (var key of color.keys()) {
    console.log(key) //0 1 2 3
}
// 遍历values
for (var value of color.values()) {
    console.log(value) //red green blue yellow 提示一下,chrome还不支持
}
//遍历entries
for (let [key, value] of color.entries()) {
    console.log(key, value) //0 “red” 1 “green” 2 “blue” 3 “yellow”
}
7.函数参数默认值

参数变量是默认声明的,不能用let和const声明
javascript 代码

function fn(a, b) {
    b = b || ‘David’
    console.log(a, b)
}
fn(‘hello’) //hello David
fn(‘hello’, ‘moto’) //hello moto
//参数变量是默认声明的,不能用let或者const再次声明
function fn2(a = 20, b = 10) {
    //console.log(a,b); //20 10
    //let a=12; //报错
    console.log(a + b)
}
fn2() //30
fn2(23, 45) //68

8.reset参数#####
reset参数,…变量名
reset参数是一个数组,它的后面不能再有参数,不然会报错。
扩展方法 … :
(1).后面跟类数组,加中括号,返回真数组;
(2).后面跟真数组,不加中括号,返回普通集合;
作用:1.替代apply方法;
2.替代concat方法;
3.将字符串转为数组。
javascript 代码

function fn(a,b,c,…values){
console.log(values);
fn(1,2,3,4,5,6,78);
function fn2(…values/*,a*/){
letsum=0;
for(varvalofvalues){
sum+=val;
}
//console.log(a); //报错 后面不能再跟参数
console.log(sum);
}
fn2(1,2,3,4,5); //15
//三个点的用法
var arr1=[12,34,5,28,97];
var divs=document.querySelectorAll(“div”);
console.log([…divs]); //类数组转真数组 注意:类数组以及三个点需要放在一对中括号里面
console.log(…arr1); //12 34 5 28 97,注意把数组转成集合数据,不用加中括号
//作用1:替代数组的apply方法,求最大值
console.log(Math.max(12,34,5,28,97)); //97
var arr2=[12,34,5,28,97];
//es5实现
console.log(Math.max.apply(null,arr2)); //97
//es6实现
console.log(Math.max(…arr2)); //97
//作用2:替代concat
var arr3=[1,2,3];
var arr4=[‘a’,’b’,’c’];
//es5实现:
//console.log(arr3.concat(arr4)); //[1, 2, 3, “a”, “b”, “c”]
//es6实现
arr3.push(…arr4);
console.log(arr3); //[1, 2, 3, “a”, “b”, “c”]
//作用3:把字符串转成数组
var str=’David’;
console.log([…str]); //[“D”, “a”, “v”, “i”, “d”]
9. 箭头函数

语法:
(1).function用var、let、const来表示
(2).参数要写在第一个等号后面
1.如果没有参数,需要写一对空的小括号
2.只有一个参数,那就直接写,不用加括号
3.参数有多个,需要加一个小括号,参数用逗号隔开
(3).函数的主体内容是放在箭头后面,如果语句只有一条,那就直接写。如果语句有多条,需要把它们放在一对大括号里
注意:
1.函数体内的this对象就是定义函数时所在的对象,不是调用函数时候的对象
2.不能当作构造函数来用,不能使用new
3.函数内不能使用arguments对象,如果要用的话就用reset参数来代替

javascript 代码

//es5
function fn1(){
console.log(‘David’);
}
fn1();
//es6
var fn1=()=>console.log(‘David’);
fn1();
let fn2=a=>console.log(a);
fn2(‘小王’); //小王
const fn.=(a,b)=>{
letresult=a+b;
console.log(result);
}
fn3(1,2); //3
var fn1= (…values)=>{
console.log(this);
}
fn1(1,2,3);
10.属性名表达式

把表达式放在中括号里作为属性名
javascript 代码

‘use strict’
var name = ‘abc’
let key = ‘interest’
let obj = {
    name: ‘David’,
    [key]: ‘编程’,
    [‘show’]() {
        console.log(this.name)
    },
}
console.log(obj)
11.Object.is Object.assign
 Object.is():比较两个值是否相等,与===的结果是一样的,但还是有些区别。
 返回布尔值
 区别:
        1.+0与-0比较的结果为false,===为true;
        2.NaN与NaN结果为true,===为false.

javascript 代码

console.log(Object.is(‘David’, ‘David’)) //true
console.log(+0 === -0) //true
console.log(Object.is(+0, -0)) //false
console.log(NaN === NaN) //false
console.log(Object.is(NaN, NaN)) //true
Object.assign() 将一个对象的属性复制到另一个对象身上。
        1.至少需要两个参数;
        2.第一个参数为合并后的对象;
        3.从第二个参数开始往后就是所有要合并的对象;
        4.有同名属性,后面会把前面覆盖了; 
        5.如果有嵌套,会覆盖不是添加。

javascript 代码

var obj1 = { a: 1 }
var obj2 = { b: 2 }
var obj3 = { a: 4, c: 3 }
Object.assign(obj1, obj2, obj3)
console.log(obj1) //Object{a: 4,b:2,c:3}
const merge = (target, …souce) => {
    Object.assign(target, …souce)
    return target
}
console.log(merge(obj1, obj2, obj3)) //Object {a: 4, b: 2, c: 3}
var obj4 = {
    d: {
        e: 5,
    },
}
var obj5 = {
    d: {
        f: 6,
    },
}
console.log(merge({}, obj4, obj5)) //Object{d: Object{f: 6} }
12.Symbol
  新增的第7种数据类型,表示独一无二,用来作为属性名,保证不会与其他的属性名冲突。
  1.它是通过Symbol函数生成的;
  2.它的前面不能加new,因为它生成的是一个原始类型的数据,不是对象。
  3.它可以接收一个参数,为了便于区分,即使长得一样也不相同。
  4.它不能与其他的值进行运算,没有隐式转换。
  5.它的值可以被转换成布尔值 (都为true )或者字符串,不能转成数字。

javascript 代码

let s = Symbol()
console.log(s) //Symbol()
console.log(typeof s) //symbol
//console.log(new Symbol()); //报错
var s1 = Symbol(‘David’)
var s2 = Symbol(‘David’)
console.log(s1, s2, s1 == s2) //Symbol(David) Symbol(David) false
//console.log(s1+’大卫’); //报错
console.log(String(s1)) //Symbol(David)
console.log(Boolean(s1)) //true
//console.log(Number(s1)); //报错,不能转成数字
//用法
var mySymbol = Symbol(‘j’)
var obj = {
    [mySymbol]: ‘David’,
}
console.log(obj) //Symbol(j): “David”
13.Set
  新增数据结构,类似数组。所有数据都是唯一的,没有重复的值。它本身是个构造函数。
  size  数据的长度
  add()添加一个数据
  delete()删除一个数据
  has()  查找某条数据,返回一个boolean值
  clear()删除所有数据

javascript 代码

var set = new Set([1, 3, 4, 5, 4, 3, 2])
set.add(6)
set.delete(1)
console.log(set.has(5)) //true
//set.clear();
console.log(set, set.size) //Set {3, 4, 5, 2, 6} 5
var divs = document.querySelectorAll(‘div’)
var set2 = new Set(divs)
console.log(set2)
var set3 = new Set([‘red’, ‘green’, ‘blue’, ‘yellow’])
set3.forEach(function(value, key, set3) {
    console.log(value, key, set3)
})
for (let [key, value] of set3.entries()) {
    console.log(key, value)
}
14.Map
 新增数据结构,Map接受一个数组作为构造函数的参数。该数组的成员是一个个表示键值对的数组。所有数据都是唯一的,没有重复的值。
 size 数据的长度
 set() 添加一条数据
 delete() 删除一条数据
 get() 获取一条数据
 has() 查找某条数据,返回一个布尔值
 clear() 删除所有数据 

javascript 代码

var map = new Map([[‘name’, ‘David’], [‘age’, 18], [‘age’, 20]])
map.set(‘sex’, ‘男’)
map.delete(‘sex’)
console.log(map.get(‘name’)) //David
console.log(map.has(‘age’)) //true
map.clear()
console.log(map, map.size) //Map {“name” => “David”, “age” => 20}
var map2 = new Map([[‘name’, ‘David’], [‘age’, 20]])
//遍历数据
for (let [key, value] of map2.entries()) {
    console.log(key, value)
}
前端开发 游戏
前端开发小游戏制作
游戏前端和web前端开发
» 本文来自:前端开发者 » 《前端开发ES6核心内容学习》
» 本文链接地址:https://www.rokub.com/6879.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!