新引入let命令
相对于之前的var命令 let的作用域更加清晰,他的作用域只在自己的代码块范围内,并且不可以重复定义变量名相同的变量
const常量
const data = 10;
const list = 【10,20,30】;
常量不可以修改赋值,但是数组常量可以修改数组元素 ,不能整体修改数组。
字符串嵌入
let name = "geddy"
let mystr1 = `你好,${name} !` //此处不是单引号,是反单引号,数字1前面的按键
分解嵌入式字符串
let name = "geddy"
function tagged(formats,...args){
console.log(formats);
console.log(args)
}
tagged`你好,${name} !再见`
输出结果
['你好,','!再见']
[‘geddy’]
symbol新类型
解构赋值
//解构赋值
let [a,b,c] = [10,20,30]
console.log(a,b,c);//Lesson1.html:29 10 20 30
let [x,y,...other] = [1,2,3,4,5,6,7]
console.log(x,y,other)//Lesson1.html:32 1 2 (5) [3, 4, 5, 6, 7]
let {name,age} = {name:'geddy',age:30}
console.log(name,age);
//函数赋值
function func1(){
return[10,20]
}
let [num1,num2] = func1()
console.log(num1+"/"+num2)//Lesson1.html:41 10/20
//函数参数名指定
function func2({x=1,y=2}){
return x+y;
}
console.log(func2({}))//3
console.log(func2({x:10}))//12
console.log(func2({x:10,y:20}))//30
数组循环
//数组循环(for...of)
let list = [10,20,30];
Array.prototype.Len = function(){}//给数组添加一个扩展函数
for (let val of list){
console.log(val);//10,20,30
}
for (let val in list){
console.log(val);//0,1,2,LEN
}
/*
* for...of只关心数组的里面的值
* for...in会输出数组里面值的index和所有其他属性值及函数
* */
函数的默认值
function sayHello(name="lfj"){
console.log(`hello ${name}`);//嵌入字符串
}
sayHello();//hello lfj
sayHello("Geddy")//hello Geddy
function add(a=1,b=a){
return(a+b)
}
console.log(add())//2
console.log(add(10))//20
console.log(add(10,22))//32
//必须指定参数
function required(){
throw new Error("参数未指定");
}
function sayBye(name=required()){
console.log(`${name} bye`)
}
// sayBye();//抛出异常
sayBye("Geddy");
可变长参数
// 可变长参数
//定义函数时,可以将参数指定为可变数组
function sum(...args){
let result = 0
args.forEach(value => {
result+=value;
})
return result;
}
console.log(sum(1,2,3))
console.log(sum(1,2,3,4,5,6,7,8,9,10))
箭头函数
//箭头函数
//通过箭头函数简化代码
let list = [10,20,30]
//es5
let newList = list.map(function (value,index){
return value*value
})
console.log(newList)//100,400,900
//es6写法
newList = list.map((value,index)=>{
return value*value;
})
console.log(newList)//100,400,900
//es6简化写法
newList = list.map(value => {
return value*value
})
console.log(newList)//100,400,900
基本对象定义
//基本对象定义
//js基本对象定义
let title = "ES6从入门到学会";
let price = 25;
let publish = "ABC"
let book = {
title,price,publish,
toString(){
console.log(`《${title}》 is ${price}元 ${publish}出版社出版`)
}
}
book['lang']="简体中文"//添加属性
console.log(book)//{title: "ES6从入门到学会", price: 25, publish: "ABC", lang: "简体中文", toString: ƒ}
console.log(book.toString())//《ES6从入门到学会》 is 25元 ABC出版社出版
类定义Class
//类定义Class
//ES6的类定义
class Player{
constructor(name,sex) {
this.name = name;
this.sex = sex;
}
show(){//普通方法 实例变量可调用
console.log(`${this.name} 的性别是 ${this.sex}`)
}
static info(){//静态方法,类可调用
console.log("这是这个人的详细信息")
}
}
let player = new Player("Geddy","男")
console.log(player.name,player.sex)//Geddy 男
player.show()//Geddy 的性别是 男
Player.info()//这是这个人的详细信息
setter/getter的定义
// setter/getter的定义
//在类中定义getter/setter方法
class Player{
constructor(name,sex) {
this.name = name;
this.sex = sex;
}
get age(){
return this._age;
}
set age(val){
this._age = val;
}
}
let player = new Player("geddy","男")
player.age = 28;
console.log(player)//Player{name: "geddy", sex: "男", _age: 28}
console.log(player.age)//28
类继承
//类继承
// ES6面向对象的编程之类继承
class Car{
constructor(brand) {
this.brand = brand
}
show(){
console.log(`这台车的品牌是${this.brand}`)
}
}
class Lexus extends Car{
constructor(brand,lineup) {
super(brand);
this.lineup = lineup;
}
getPrice(){
switch (this.lineup){
case "RX":
return 60;
case "NX":
return 40;
default:
throw new Error("位置车型")
}
}
}
let car = new Lexus("Lexus","RX");
car.show();
console.log(`价格是${car.getPrice()}万`)
循环我的对象
//循环我的对象
//可迭代的对象、迭代的方法
let list = [10,20,30]
let myStr = "你好啊";
let myMap = new Map();
myMap.set('js','javascript')
myMap.set('pl','perl')
myMap.set('py','python')
for (let val of list){
console.log(val)
}
for (let val of myStr){
console.log(val)
}
for (let val of myMap){
console.log(val)
}
for (let [key,value] of myMap){
console.log(key,value)
}
let it = myMap.values()//.value方法会返回对象内所有的值
let tmp
while (tmp=it.next()){//.next方法是取出对象内的下一个值
if (tmp.done) break;//.next方法调用下一个值为空时 会返回.done 这是直接结束循环
console.log(tmp.value,tmp.data)//输出对象内对应的值和是否done
console.log(tmp)
/*
* {value: "javascript", done: false}
Lesson1.html:232 perl undefined
Lesson1.html:233 {value: "perl", done: false}
Lesson1.html:232 python undefined
Lesson1.html:233 {value: "python", done: false}
* */
}
可迭代对象
//可迭代对象
//制作一个可迭代对象 Symbol.iterator
class Player{
constructor(list) {
this.list = list
}
//迭代器 固定格式
[Symbol.iterator](){
let current = 0
let that = this
return{
next(){
return current<that.list.length?{value:that.list[current++],done:false}:{done:true}
}
}
}
}
let player = new Player(["curry","harden","lebron"])
for (let val of player){
console.log(val);
}
简单迭代生成器
//简单迭代生成器
//function*{}:迭代生成器、yueld:迭代返回
function * myGenerator(){
yield '1'
yield '2'
yield '3'
yield '4'
yield '5'
}
for (let val of myGenerator()){
console.log(val)
}
function * conutdown(begin){
while (begin>0){
yield begin--
}
}
for (let val of conutdown(5)){
console.log(val)
}
简单的迭代类
//简单的迭代类
//建立一个简单的迭代类(yield)
class MyList{
constructor(list) {
this.list = list;
this[Symbol.iterator]=function *(){
let current = 0
let that = this
while (current<that.list.length){
yield that.list[current++];
}
}
}
}
let mylist = new MyList([100,200,300,400,500,600])
for (let val of mylist){
console.log(val)
}