1.let声明变量和var的区别
var 定义的变量可以被修改,不初始化会输出undefined,不会报错
let 定义的变量是块级作用域,函数内部使用let定义,对函数外部无影响
//1.在同一个作用域中,var可以重复定义一个变量,但是let不可以
//2.let一定是定义了变量再使用,let只在定义它的作用域中才可使用
{
var a = 1;
var a = 2;
//1.不可以
let b = 1;
let b = 2;
//2.不可以
c = 1;
let c = 2;
}
//3.d不加任何修饰,就是全局变量(在语句块里也是全局变量)
d = 1;
2.const 常量
{
//1.定义后不可以改变
const a = 1;
//不可以
a = 2;
//2.引用类型的可以改变(数组,对象)
const array = [1,2,3,4,5];
array.push(6);
console.log(array);
//[1,2,3,4,5,6]
const obj = {name:"张三"};
obj["age"] = 18;
console.log(obj);
//{userName : "张三",age : 18}
}
3.es6委托
{
//带参数的委托方法
function delegateFunc(func,val){
func(val);
}
//普通方法
function testFunc(val){
console.log(val+" this is delegate");
}
delegateFunc(testFunc,"Hello");
//Hello this is delegate
}
{
//委托方法(带参数)
function delegateFunc(func,val){
func(val);
}
delegateFunc(function(val){
console.log(val+"this is delegate");
},"123");
//匿名方法赋给委托方法的变量
var func1 = delegateFunc(function(val){
console.log(val+" this is delegate");
});
delegateFunc(func1,"123");
//123 this is delegate
//箭头函数
delegateFunc((val=>{
console.log(val+" this is delegate");
},"hahaha");
//hahaha this is delegate
}
c#中的委托
{
//委托方法
function delegateFunc(func){
func();
}
delegateFunc(delegate(){
console.log("this is delegate");
});
//lambda表达式
delegateFunc(()=>{
console.log("this is delegate");
});
}
4.es6字符串
{
let userName = "张三"
let str = userName+ " say hello "+"world";
console.log(str);
/*
//C#7中 ""外$占位符拼串
$"{userName} say hello world"
//张三 say hello world
*/
//字串换行
let str2 = "adsasdasdasdas"+
"dasdasdasdasdasd"+
"asdasd";
//字串 `` 保留原格式输出
let str3 = `asdasdasdasdasdasdasdasfcas
asdasdasdasdasdasd
asdasdasdasdasd
asdasdasdasdf`
//${userName} 占位符
let str4 =`${userName} say hello world`
console.log(str4);
//张三 say hello world
}
5.es6 Filter ==> 类比c#中的FindAll 或者 Where
{
let array = [1,2,3,4,5,6,7,8];
let newArray = array.filter(m => m>5);
console.log(newArray);
//[6,7,8]
let objArray = [
{userName : "张三",age : 18},
{userName : "李四",age : 20}
];
//返回的还是一个数组,即使只有一个对象
let newobjArray = objArray.filter(m=>m.userName=="张三");
console.log(newobjArray);
// {userName : "张三",age : 18}
}
6.es6 concat 拼接数组
{
var list1 = [1,2,3,4];
var list2 =[5,6,7,8];
list1 = list1.concat(list2);
console.log(list1);
//[1,2,3,4,5,6,7,8]
}
7.es6 扩展运算符 (…)①可变参数 类比c#的Params关键字
②解构字符串
{
var [list1,...list2]=[1,2,3,4,5,6];
console.log(list1);//1
console.log(list2);//[2,3,4,5,6]
function func(...list){
console.log(list);
}
func(1,2,3,4,5);//[1,2,3,4,5]
func(1);//[1]
var [list1, ...list2] = [];
console.log(list1);//undefined
console.log(list2);//[]
var [list1, ...list2] = [1];
console.log(list1);//1
console.log(list2);//空
//展开数组
var value = [..."Hello"];
console.log(value);
//["H","e","l","l","o"]
//使用展开符来结合数组
const A = ["a", "b", "c"];
const B = ["d", "e", "f"];
const res= [...A,...B];
console.log(res);
//["a","b","c","d","e","f"]
}
//对于参数不固定的函数,ES6之前是使用参数对象(arguments)处理:
function sum() {
let total = 0;
for(const argument of arguments) {
total += argument;
}
return total;
}
//在ES6中使用剩余参数运算符则更为简洁,可读性提高
function sum(...nums) {
let total = 0;
for(const num of nums) {
total += num;
}
return total;
}
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</body>
<script>
{
var nodeList = document.getElementsByTagName("div");
var value = [...nodeList];//节点集合转换为数组
console.log(nodeList);//html 集合
console.log(value);//标签数数组
}
</script>
{
//初始化map [[键,值],[键,值],[键,值]]
let map = new Map([
[1,'a'],//数组 键值对
[2,'b'],
[3,'c'],
])
console.log(map);
//{1=>"a",2=>"b",3=>"c"}
//map 字典转为数组
let arr = [...map];
let arrKey = [...map.keys()];
let arrValue = [...map.values()];
console.log(arr);
//[Array(2),Array(2),Array(2)]
//[1,"a"] [2,"b"] [3,"c"]
console.log(arrKey);
//[1,2,3]
console.log(arrValue);
//["a","b","c"]
}
- Map 字典对象
类比于c#中的Dictionary
{
//key value 的键值对
var userMap = new Map();
userMap.set("userName", "张三");
userMap.set("age", 18);
console.log(userMap);
//{"username"=>"张三","age"=>18}
//key:"username" (键值对)
//value:"张三"
console.log(userMap.get("userName"));
//张三
//遍历Map for..of
for (const [key,value] of userMap) {
console.log(key);//username age
console.log(value);//张三 18
}
//普通对象
var user = {}
user["userName"] = "张三";
user.age = 18;
console.log(user);
//{"username":"张三","age":18}
//"username":"张三"
//"age":18
}
9.class类
{
//ES5中类的使用
function Class(){ //类 大写
function func(){ //方法 小写
}
}
//ES6中类的使用
class Person{ //类
constructor(){ //构造方法
this.A = "a"; //原型属性
this.AA = "aa";
}
A = "a"; //成员属性
run(){ //方法
console.log("person can run");
}
}
var person = new Person();
console.log(person.A); //a
console.log(person.AA); //aa
person.run(); //person can run
//ES6中类的继承
class Student extends Person{
eat(){
console.log("student can eat");
}
run(){
console.log("student can run");
}
}
//可以使用父类的属性和方法
var student = new Student();
student.run(); //student can run
//方法名和父类的方法相同,调用子类自己的方法
student.eat(); //student can eat
}