1. let & const

1.1. let

声明变量用let

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>let</title>
</head>
<body><script>// define variableslet a;let b,c,d;let e = 100;let f = 521, g = 'iloveyou', h = [];//1. can not state variables repeatedly// let star = 'michael';// let star = 'father';//2. block level scope  global, function, eval// if else while for // {//     let girl = 'lisa from blackpink';// }// console.log(girl);//3. there is no variable promotion// console.log(song);// let song = 'love the way you lie';//4. the scope chain is not affected{let school = 'school w3';function fn(){console.log(school);}fn();}</script>
</body>
</html>

1.2. cont

tips:

对象属性修改和数组元素变化不会发出const错误
声明对象类型使用const，非对象类型声明选择let

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>const 定义常量</title>
</head>
<body><script>// state constant variablesconst SCHOOL = 'school w3';// 1. must assign an initial value// const A;// 2. normal constants use uppercase (defaul rule)// const a = 100;// 3. vale of constant can not be changed// SCHOOL = 'school w3';// 4. block level scope{const PLAYER = 'michael jordan';}console.log(PLAYER);//5. it is not counted as changes to constancts to change the values of elements of arrays and objects, and no error is reportedconst TEAM = ['UZI','MXLG','Ming','Letme'];// TEAM.push('Meiko');      </script>
</body>
</html>

2. 模板字符串

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template string</title>
</head>
<body><script>// ES6 introduces a new way to declare string 『``』 '' "" //1. statement// let str = `here is the string`;// console.log(str, typeof str);//2. a newline character can appear directly in the contentlet str = `<ul><li>michael</li><li>harry</li><li>lisa</li><li>allen</li></ul>`;//3. variables splicelet lovest = 'michael';let out = `${lovest} is the best developer in my heart!!`;console.log(out);</script>
</body>
</html>

3. 解构赋值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>decontractive assignment of a variable</title>
</head>
<body><script>//ES6 allows to extract values from arrays and objects and assign to variales in a certain pattern，//assignment of decontruction。//1. array  deconstructionconst F4 = ['Lisa','Jennie','Rose','Jisoo'];let [lisa, jennie, rose, jisoo] = F4;console.log(lisa);console.log(jennie);console.log(rose);console.log(jisoo);//2. object deconstructionconst zhao02 = {name: 'lisa',age: '18',dance: function(){console.log("Lisa is good at dancing!!!");}};// let {name, age, dance} = zhao02;// console.log(name);// console.log(age);// console.log(dance);// dance();// let {dance} = zhao02;dance();</script>
</body>
</html>

4. 对象的简化写法

//ES6 allows to write variables and functions directly inside curly braces as properties and methods of objects
//makes it simple and specific
var nameWold = 'michael'
var change = function(){console.log('michael can change the world!!!')
}const michael = {nameWold,change,dance: function(){console.log('michael can dance in the object!!!')}}console.log('nameWold: ', nameWold)
michael.change()
michael.dance()

5. 箭头函数

basic information about arrow function

// ES6 allows to define a function by =>// 1. define arrow function
// define a funtion by traditional way
function fun1(){console.log('here is the logging from fun1!!!')
}
fun1()var fun2 = function(para){console.log('here is the log from fun2 with param!!!')
}
fun2()// arrow functon
var arrowFun = () => {console.log('here is the log from arrow fun !!!')}
arrowFun()var arrowFunWithParam = (a, b) => {return a + b
}
console.log('a + b: ', arrowFunWithParam(6, 10))// abbreviated form of arrow function
var arrowFunWithAbbr = a => a * a
console.log('a * a: ', arrowFunWithAbbr(10))// 2. this in the arrow function
// in arrow function: this is static, this always points to the value of this in the scope in which the function is declared
function getThisFromFunction(){console.log('this from traditional function:', this);
}
getThisFromFunction()  // <ref *1> Object [global]var getThisFromArrowFunc = () => {console.log('this from arrow function:', this)
}
getThisFromArrowFunc()  // {}const MICHAEL = {price: '$99'
}// call the function by keyword key
getThisFromFunction.call(MICHAEL)   // { price: '$99' }
getThisFromArrowFunc.call(MICHAEL)  // {}// 3. arrow function can not instantiate an object as a construct
let Product = (count, price) => {this.count = countthis.price = price
}// let product = new Product(100, 200)
// console.log('product: ', product)  // TypeError: Product is not a constructorlet CommonProduct = function(count, price) {this.count = countthis.price = price
}let commonProduct = new CommonProduct(100, 200)
console.log('common product: ', commonProduct) // CommonProduct { count: 100, price: 200 }// 4. arrow function can not use arguments variables
let commonFun = function(){console.log('arguments from function: ', arguments)
}
commonFun(1, 3, 5, 9)let arrowFunction = () => {console.log('arguments from arrow function: ', arguments)
}
// arrowFunction(1, 3, 5, 9)  //

arrow function practice

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>arrow function practice</title><style>div {width: 200px;height: 200px;background: #58a;}</style>
</head>
<body><div id="ad"></div><script>// requirement 1: the color is changed to be pink after  2 seconds since click the div// get the elementlet ad = document.getElementById('ad')// bind event// implement by common function// ad.addEventListener("click", function(){//     // save this//     let _this = this//     console.log('_this: ', _this)   // ad//     setTimeout(function(){//         console.log('this: ', this) // window w//         // this.style.background = 'pink'//         _this.style.background = 'pink'//     }, 2000)// })// implement by arrow functionad.addEventListener('click', function(){setTimeout(() => {console.log('this: ', this)this.style.background = 'pink'}, 2000)})// requirement 2: return the odd elements from an arrayconst arr = [1,6,9,10,100,25];const result = arr.filter(function(item){if (item % 2 === 0){return true}else{return false}})const result2 = arr.filter(item => item % 2 === 0)console.log('result: ', result)console.log('result2: ', result2)</script>
</body>
</html>

6. rest 参数

ES6 引入rest参数，用于获取函数的实参，用来替代arguments
rest参数非常适合不定个数参数函数的场景

// ES6 introduces rest arguments, which take arguments to functions instead of arguments
// rest arguments are well suited to scenarios where functions with an indefinite number of arguments are used// ES5
function girlGroup(){console.log(arguments)
}
girlGroup('Lisa', 'Rose', 'Jennie', 'Jisoo')  // [Arguments] { '0': 'Lisa', '1': 'Rose', '2': 'Jennie', '3': 'Jisoo' }// rest arguments
function newGirlGroup(...args){console.log(args)
}
newGirlGroup('Lisa', 'Rose', 'Jennie', 'Jisoo') // [ 'Lisa', 'Rose', 'Jennie', 'Jisoo' ]// rest param must be placed at the end of the parameters
function newGirlGroupFromKorean(member1, member2, ...args){console.log(member1)console.log(member2)console.log(args)
}
newGirlGroupFromKorean('Lisa', 'Rose', 'Jennie', 'Jisoo')
// Lisa
// Rose
// [ 'Jennie', 'Jisoo' ]

7.spread 扩展运算符

扩展运算符(spread)也是三个点(…), 好比rest参数的逆运算, 讲一个数据准尉用逗号分割的参数序列，对数组进行解包

// ... expansion operator converts an array to a comma-separated sequence of arguments
// 1. expand array
// state an array
const blackpink = ['lisa', 'rose', 'jennie', 'jisoo']// state a function
function girlGroup(){console.log(arguments)
}girlGroup(...blackpink) // [Arguments] { '0': 'lisa', '1': 'rose', '2': 'jennie', '3': 'jisoo' }// 2. expand object
// state objects first
const object1  = {field1:'fieldVaule',field2:'field2Value'
}const object2  = {field3:'fieldVaule',field4:'field2Value'
}const contactObject = {...object1, ...object2}
console.log('contactObject: ', contactObject)// array concat
const part1 = ['lisa', 'rose']
const part2 = ['jennie', 'jisoo']
const concatArray = part1.concat(part2).concat(part2)
console.log('concatArray: ', concatArray)// array clone
const cloneArray = [...blackpink]
console.log('cloneArray: ', cloneArray)

JavaScript-ES6-基础语法相关推荐

Part2：面向对象、原型链、函数、ES6基础语法
一.面向对象标记语言:HTML5/CSS3 编程语言:编程思想面向过程 C 面向对象 JAVA.PHP.C#(ASP.NET).JavaScript- 1.单例设计模式 let name='和冉' ...
Javascript - ES6新语法概览
Javascript - ES6新语法概览简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联 ...
JS：JavaScript编程语言基础语法总结
JS:JavaScript编程语言基础语法总结目录常用基础语法一.变量 1.声明变量var 二.语句 1.if判断语句 2.for循环语句三.函数 1.定义一个函数常用基础语法 consol ...
JavaScript(1)——基础语法部分（CSDN）
前言:本篇文章原文为我在语雀上的学习笔记Javascript(1)--基础语法部分 web 发展史 Mosaic,是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器.于 1993年问世. 199 ...
javascript es6常用语法
1.ECMAScript 和 JavaScript 的关系(小小的说明) 一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? 要讲清楚这个问题,需要回顾历史.1996 ...
Javascript的基础语法（标识符/变量）
1.书写方面的语法: 1)区分大小写 javascript中的一切,包括变量,函数名和操作符都是区分大小写的. eg:text和Text表示两种不同的符号. 2)行结束符 ;可以没有(为养成良好的写代 ...
JavaScript核心基础语法
1 什么是JavaScript? 是一种嵌入在网页中的程序段. 是一种解释型语言,被浏览器解释执行. 由Netscape发明,ECMA(欧洲计算机制造商协会)将其标准化. JavaScript借用了J ...
Web前端开发笔记——第四章 JavaScript程序设计第一节 JavaScript的基础语法
目录一.JavaScript的定义二.代码的创建和使用 (一)内嵌JavaScript代码 (二)引用JavaScript文件三.代码的注释四.输出数据 (一)alert()弹出警告框 (二) ...
JavaScript之基础语法整理
1.数据类型(number,boolean,string,null,undefined,symbol,object) es是动态语言,弱类型语言,虽然先声明了变量,但是变量可以重新赋值任意类型弱类型 ...
ES6基础语法（let、const、解构赋值、模板字符串、简化对象、箭头函数、扩展运算符）（一）
系列文章目录第二章:ES6深入(Symbol.类.迭代器.Set.Map)(二) 第三章:ES6深入(生成器.Promise.async/await)(三) 第四章:ES6+新增API拓展(对象AP ...

JavaScript-ES6-基础语法

ES6-基础语法

1. let & const

1.1. let

1.2. cont

2. 模板字符串

3. 解构赋值

4. 对象的简化写法

5. 箭头函数

basic information about arrow function

arrow function practice

6. rest 参数

7.spread 扩展运算符

JavaScript-ES6-基础语法相关推荐

最新文章

热门文章