let

关键字是用来声明变量的 ，只要遇到大括号就形成作用域
【注】let关键字声明的变量，所在的作用域叫做块级作用域
let声明的变量不会在作用域中提升，而var声明的变量则会在作用域中提升
在let声明之前的执行瞬间被称为”暂时性死区”，在此之前调用任何后面声明的变量都会抛出异常
let在全局作用域声明的变量不会成为window对象的属性（var声明的变量则会）

  1. console.log(name);//undefined
  2. var name = 'xxx';
  3. //以上代码等同于
  4. var name;
  5. console.log(name);//undefined
  6. name ='xxx'
  8. console.log('name');//抛出异常  ReferenceError:name未定义
  9. let name = 'xxx';
  12. var name = 'xxx'
  13. console.log(window.name) //xxx
  15. let age = 18
  16. console.log(window.age) //undefined

var 关键字声明变量 将变量或者形参所在函数的大括号作为作用域处理

  1. if(1){
  2.     var a = 10
  3. }
  4. alert(a)
  6. if(1){
  7.     let a = 10;
  8.   alert(a);//输出10
  9. }
  10. alert(a)//a为underfined

const

声明变量，变量值只能在声明时确定，后续无法修改
声明对象，修改对象内部属性的值并不违反const 的限制

  1. const a = PI;
  2. a = 10;
  3. alert(a)//输出PI
  5. const obj = {}
  6. obj.name = 'xxx'
  7. console.log(obj.name)

新增数据类型

symbol 表示值为符号

箭头函数

新的函数写法
【注】适当的省略函数中function和return关键字

各种形式的箭头函数

  1. 无参数，无返回值 ```javascript function show() { alert(‘helloworld’) }

var show = () => { alert(‘helloworld’) }

  2. 2. 有一个参数，无返回值
  3. ```javascript
  4. function show(num){
  5.     alert(num)
  6. }
  7. var show = num => {
  8.     alert(num)
  9. }

  1. 有一个参数，有返回值

    1. function show(num){
    2. return num+2
    3.  alert(num)
    4. }
    5. var show = num => {
    6. return num+2
    7.  alert(num)
    8. }

  2. 有多个参数，有返回值

    1. function show(x,y){
    2. alert(x+y)
    3. }
    4. var show = (x,y) => {
    5. alert(x+y)
    6. }
    1. filter 过滤
    2. var arr = [10,20,30,40,50]
    3. //var newArr = arr.fliter(function(item){return item > 30 })
    4. var newArr = arr.fliter(item => {item > 30})
    5. alert(newArr)

    箭头函数需要注意的部分

  3. 箭头函数不能用new

  4. 箭头函数如果返回值时一个对象，一定要加（）
  5. 箭头函数中的this,指向的时上一层函数的主人
    1. var person = {
    2.  username:'钢铁侠',
    3. show:function() {
    4.    alert(person.username)
    5.  alert(this.username)
    6. }
    7. show: => {(
    8.    alert(person.username)
    9.  alert(this)//window
    10. )}
    11. }

    解构

    大括号解构
    中括号解构 ```javascript var x = 10, y = 20, z = 30;

var [x,y,z] = [10,20,30] alert(x +’,’+ y +’,’+ z) var [x,[y,z]] = [10[20,30]] alert(x +’,’+ y +’,’+ z)

var {name,age,sex} = { age:18, name:’张三’, sex:’男’ }

  1. 使用解构的好处：
  3. 1. 交换两个数
  4. 1. 函数可以返回多个值
  5. 1. 函数定义参数，和传入参数的顺序改变
  7. 【注】参数可以带默认值
  9. 4. 快速取出数组中的某一个元素
  10. ```javascript
  11. var arr = [10,20,30,40,50]
  12. var {0:first,4:last} = arr;
  13. alert(first)
  14. alert(last == 4)

字符串

传统字符串：所有单引号，双引号括起来的都叫做字符串
ECMA6字符串：反引号

  1. ECMA6字符串想怎么写就怎么写，换行，代码缩进，都能在字符串中体现出来
  2. ${变量/表达式/函数调用}
    1. var str = ` hello world`
    2. var showSelf = (name,age,sex) => {
    3.  alert(我叫${name},今年${age}岁,是一名${sex}性)
    4. }
    5. showSelf({
    6.  name:'小明',
    7. age:18,
    8. sex:'男'
    9. })

    新增数组方法

    Array.form(伪数组) 将伪数组转成真数组

    1. var li = document.getElementsByTagName('li')
    2. li = Array.form(li)
    3. li.push('hello')
    4. alert(li)

    find()

    【功能】：在数组中查找符合条件的元素，只要找到第一个符合条件的元素，就终止遍历
    返回值： 查找到的元素 ```javascript var arr = [10,20,30,40,50] alert(arr.find(function(item){ //查找条件 return item>30 }))

alert(arr.find((item) => { item > 30 }))

  1. <a name="Hb5Kj"></a>
  2. ### findIndex()
  3. 返回值： 查找到的元素的下标
  4. ```javascript
  5. var arr = [10,20,30,40,50]
  6. alert(arr.findIndex(function(item){
  7.   //查找条件
  8.     return item>30
  9. }))
  11. alert(arr.findIndex((item) => {
  12.   item > 30
  13. }))

arr.copyWithin()

参数：
第一个参数： 是从哪个下标开始
第二和第三个参数：范围[start , end]

  1. var arr = [0,1,2,3,4,5,6,7,8,9]
  2. arr.copyWithin(0,7,9)
  3. alert(arr)//[7,8,9,3,4,5,6,7,8,9]

合并对象

Object.assign() 合并对象

【注】将所有传入的对象都合并到第一个对象中去
浅拷贝：只拷贝地址
深拷贝：将复合数据类型重新生成一份，进行拷贝

  1. var obj1 = {a:10}
  2. var obj2 = {b:10}
  3. var obj3 = {c:30}
  4. Object.assign(obj1,obj2,obj3)
  5. consloe.log(obj1)//{a:10,b:10,c:30}

集合

  1. 不重复
  2. 无顺序

set map

  1. let img = new Set()
  2. //添加元素
  3. img.add(100);
  4. img.add('hello');
  5. img.add('world');
  6. img.add('true');
  7. img.add(100);
  8. img.add('hello');
  9. img.add('world');
  10. console.log(img)//自动去重

集合遍历

for … of遍历集合

  1. for (let item of imgs.keys()){
  2.     console.log(item)
  3. }
  5. for (let item of img.values()){
  6.     console.log(item)
  7. }
  9. for (let item of imgs.entries()){
  10.     console.log(item)
  11. }

数组变集合

  1. var set = new set([10,20,30,40,50,40,30,20,10])
  2. concole.log(set)

集合变数组 将数据结构展开成数组

  1. var arr = [10,20,30,40,60,40,50,10]
  2. arr = [...new Set(arr)]

map 映射

  1. let map = new Map()
  2. //添加数据
  3. map.set('张三','打鱼的')
  4. map.set('李四','种地的')
  5. map.set('王五','挖煤的')
  6. map.set('李四','打猎的')
  7. console.log(map)
  9. /* 
  10.         取值
  11. */    
  12. console.log(map.get('王五'))

map遍历 通过for of

  1. for(let [key,value] of map){
  2.     console.log(key,value)
  3. }

补充内容

数组

for循环
for……in
foreach
for…of

对象

for…in

set for…of
map for…of

  1. var arr = [10,20,30,40,50]
  2. for(var i = 0; i < arr.length; i++){
  3. document.write('for循环' + arr[i] + ',' +  i + <br>)
  4. }
  6. var arr = [10,20,30,40,50]
  7. for(var i in arr){
  8. document.write('for...in循环' + arr[i] + ',' +  i + <br>)
  9. }
  12. var arr = [10,20,30,40,50]
  13. arr.foreach(function (item , index){
  14. document.write('foreach循环' + item + ',' +  index + <br>)
  15. })
  17. var arr = [10,20,30,40,50]
  18. for(item of arr){//item是当前遍历到的元素
  19. document.write('for...of循环' + item  <br>)
  20. }
  23. var person = {
  24.   username: '钢铁侠',       
  25.   age: 18,
  26.   sex: '男'
  27. }  ;
  28. for(var attr in person){
  29. //attr   遍历到的对象的属性
  30. document.write('对象': + attr + O + <br>)
  31. }