JavaScript基础学习——ES6基础指令

一、认识ES6

ES6(ECMAScript 6/ECMAScript 2015)是2015年6月发布的。ES6是对ES5的一个扩展（就是在ES5的基础上添加了一些内容），最典型的内容：Class（类）、Promise（异步）、Symbol（数据类型）等。

学习参考网站：https://es6.ruanyifeng.com/。

二、ECMAScript与JavaScript的区别

前者是后者的规格，后者是前者的一种实现。JavaScript = ECMAScript + DOM + BOM

三、let

1、块级作用域

在ES5中变量只有全局和局部两种作用域，而在ES6增加了块级作用域。

2、let与var的区别（面试问题）

相同点：它们都可以用来定义一个变量。

不同点：
（1）let只在它所在的块中有效（一对｛｝就是一个块），有闭包作用；
（2）let不存在变量位置的提升，而var存在变量位置提升；
（3）let不允许在相同作用域内重复声明同一个变量，而var可以；
（4）var可能会存在变量泄漏。

{
  let x=123
  // let x=true //let不能重复定义
  console.log(x);
  // console.log(y); //y没有被定义
  {
    let y='abc'
    console.log(x);
  }
  // console.log(y); //y没有被定义，不在块级作用域内
}

四、const

用来定义一个常量，一般情况下，常量名用大写表示，以表示跟内存变量的区别。const定义的常量为只读。对于单值变量（基本变量）是不能修改它的值，但引用类型（对象、数组等）的常量可以修改值，而不能修改的是内存地址。

{
  const PI=3.14159265
  //PI=10//不能改变常量
  console.log(PI*Math.pow(10,2));

  const obj={
    name:'Tom',
    sex:'male'
  }

  // 对于单值变量（基本变量）是不能修改它的值，
  //但引用类型（对象、数组等）的常量可以修改值，而不能修改的是内存地址。
  obj.name='Teacher Hou'
  console.log(obj);
}

五、在浏览器环境中顶层对象是window，在Node.js中是global对象。

在ES6环境中，let、const、class和var定义的全局变量，它的顶层对象不再是window。

var str = 'hello'
console.log(str);//hello
//在ES6环境中，let、const、class和var定义的全局变量，它的顶层对象不再是window
console.log(window.str);//undefined

六、ES6声明变量的六种方法

var 变量声明
function 函数声明
let 变量声明
const 常量声明
import 变量导入
class 类的声明

var x=10
function fn(a,b){
  return a*b
}

let str='abc'
const Hi='Say Hi'
// import glob from 'glob'
class Person{
  constructor(x,y){
    this.x=x;
    this.y=y;
  }
}

七、解构赋值

解构赋值本质上属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

（1）数组的解构赋值：数组解构赋值就是下标的匹配模式。

let [a,b,o]=['apple','banana','orange']
console.log(a,b,o);//apple banana orange

let [a1,[b1,c1],d1]=['aa',['bb','cc']]
console.log(a1,b1,c1,d1);//aa bb cc undefined

let [a2,b2,...other]=[1,2,3,4,5,6,7]//...必须写到最后
console.log(a2,b2,other);//1 2 [3,4,5,6,7]

（2）对象的解构赋值：对象解构赋值就是键名称的匹配模式。

let {a,b}={a:'apple',b:'banana'}
console.log(a,b);//apple banana

let {a1,b1}={a1:'apple',c1:'hello',d1:'world',b1:'banana'}
console.log(a1,b1);//apple banana

let {a2,xx2:{b2}}={a2:'apple',xx2:{b1:'girl',b2:'boy'},b2:'banana'}
console.log(a2,b2);//apple boy

（3）函数参数解构赋值：函数参数的解构赋值就是形参与实参之间的匹配。

let fun = ([a, b], { o }) => [a, b, o]

let fruits = fun(['apple', 'banana'], { g: 'gap', o: 'orange' })
console.log(fruits);//['apple','banana','orange']


let apple = { name: 'apple', price: 8, num: 5 };
let getTotal = function ({ price, num }) {
  return price * num
}

console.log(getTotal(apple));//40

（4）字符串的解构赋值：字符串解构赋值跟数组类似，它匹配的是字符串的下标。

let[a,b,...rest]='banana'
console.log(a,b);//b a
console.log(rest);//["n","a","n","a"]

let [index0,name,...rest1]='ab'
console.log(index0,name);//a b
console.log(rest1);//[]

八、字符串的扩展

1、Unicode编码

unicode是一个编码方案，Unicode 是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。Unicode 编码共有三种具体实现，分别为utf-8,utf-16,utf-32，其中utf-8占用一到四个字节，utf-16占用二或四个字节，utf-32占用四个字节。Unicode 码用于信息交换。

2、新增方法

（1）String.fromCodePoint(16进制编码):获取指定unicode编码所对应的字符
（2）字符串.codePointAt(下标):获取指定字符所对应的unicode编码

var str='中国abc'

console.log(str.codePointAt(1));//将str字符串中下标为0的字符转换为所对应的unicode编码

console.log(String.fromCodePoint(0x20BB7));//ES6的写法，可以得到一个正确的结果

3、字符串遍历

for...of:遍历字符串时，解决含有四个字节的字符出现错误。

var str = '12ab中国
                
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

JavaScript基础学习——ES6基础指令

相关推荐