js学习总结-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67466364/article/details/137756099

这里写目录标题

前情提要
一. JavaScript书写位置
- 1. 内部javaScript ==(不常用)==
- 2. 外部javaScript ==(常用)==
- 3.内联javaScript ==(常用)==
二.js中的输入和输出
- 输出语法
- 输入语法
- - prompt('')
三. 变量的声明及命名规范
- let声明变量
- 变量的命名规范
四. 常量
小练习
五. 数据类型
- 基本数据类型和引用数据类型
- NaN 和 Infinity
- typeof获取数据类型
- string
- - 转义字符
  - 模版字符串
- 数据类型的转换
练习
六. js中的运算符
七. 流程控制语句
练习 ---- 简单计算器
八. 数组
- 创建数组
- Array数组内置对象
小案例的实现
九. 函数
- 具名函数
- 匿名函数
- 立即执行函数
逻辑中断
对象
- 对象的声明和调用
- 遍历对象
内置对象
- Math
- - Math.random()
DOM
- 获取DOM对象常用方法
- 其他获取DOM对象的方法
- - querySelector() 和 querySelectorAll()
- 获取对象的时机
- DOM对象中常用的属性
ES6
- ES6基础语法
- ES6新增--->let命令
- const命令
- 模板字符串
- 箭头函数
- 扩展运算符(...)
- - 扩展运算符的应用
- Symbol
- 迭代器 Iterator
- 数组中的map方法
- - map

前情提要

1. 在javaScript中的 分号 是可以省略的
2. 在js中, 单引号,双引号,反引号 几乎是没有区别的

一. JavaScript书写位置

1. 内部javaScript (不常用)

直接写在html文件里 , 用script标签包住

	可以将js代码放在html文件中的任何位置
	1. [放在head部分 ]: 最常用的方式是在页面中head部分放置script元素,
	   head部分会先加载 , 浏览器解析head部分 就会执行这个代码,然后才解析页面的其余部分 . 
	   所以进行页面显示初始化的js必须放在head里面.
	2. 放在body部分 : js代码在网页读取到该语句时就会执行(也就是按顺序执行)
	3. script标签可以有多个.

<script type="text/javascript">
	console.log('hello word!');
</script>

全部 .html 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
    <script type="text/javascript">
      console.log('hello word!');
    </script>
	</head>
	<body>
	</body>
</html>

运行结果

2. 外部javaScript (常用)

单独创建一个后缀名为.js的文件把js代码都写在这个文件中

创建一个 .js文件 (用来书写js代码)

js文件不能直接运行 , 需要嵌入到html文件中执行 , 我们需要再html中添加如下代码,就可以将js文件嵌入到html文件中

<script type="text/javascript" src="js/js01.js"></script>

html文件代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
    <script type="text/javascript" src="js/js01.js"></script>
	</head>
	<body>
	</body>
</html>

js文件代码

(注意 : 在js文件中 , 不需要写script标签 , 直接编写js代码就可以了)

console.log('hello wwwww');

运行结果

3.内联javaScript (常用)

代码写在标签内部

<button onclick="alert('啊哈哈哈')">点一下</button>

完整 .html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	
    <button onclick="alert('啊哈哈哈')">点一下</button>
    
	</body>
</html>

运行结果

二.js中的输入和输出

输出语法

1. document.write(‘’)

作用 : 向body内输出内容
注意 : 如果输出的内容写的是标签 , 也会被解析成网页元素(也就是说 , 可以在write中直接写标签)

.js 文件

document.write('这是document.write');
document.write('<h1>这是一个h1的标签</h1>');

上面的js代码相当于在html中这么写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	
    这是documen.write
    <h1>这是一个h1标签</h1>
    
	</body>
</html>

运行结果

2. alert(‘’)

作用 : 页面弹出警告对话框

3. console.log(‘’)

作用 : 在控制台输出内容 (一般是程序员调试用的)

这两个在上面的js书写位置中用到了 , 就不做过多赘述了

输入语法

prompt(‘’)

作用 : 显示一个对话框 , 对话框中包含一条文字信息 , 用来提示用户输入文字
js代码

prompt('请输入一个信息');

运行结果

三. 变量的声明及命名规范

let声明变量

现在常用let—> var 声明变量有点太随便了(不规范)

主要区别在于作用域和变量提升：

var 声明的变量存在变量提升，即在声明之前就可以访问到变量，而且 var 是函数作用域。
let 声明的变量不存在变量提升，只能在声明后才能访问到变量，而且 let 是块级作用域。

因此，推荐在现代 JavaScript 开发中优先使用 let 来声明变量，以避免变量提升和更好地控制变量作用域。

js代码

let a = 18;
let b = 20;
console.log(a,b); //控制台输出 : 18 20

变量的命名规范

不能使用关键字和保留字
变量可以使用任意多个字母,数字,下划线(_) 或者美元符($) 但数字不能开头
变量名严格区分大小写

四. 常量

使用const声明的变量称为"常量"
注 : 使用const声明后 , 这个值不会再改变

常量不允许重新赋值 , 声明的时候必须赋值(初始化)

const PI = 3.14;
console.log(PI);

小练习

要求 : 用户输入姓名 , 年龄 , 性别 ----> 输入后在页面显示输入的内容

js文件

let name = prompt('请输入您的姓名');
let age = prompt('请输入您的年龄');
let gender = prompt('请输入您的性别');
document.write(name,age,gender);

五. 数据类型

基本数据类型和引用数据类型

js中的数据类型有六种:

名称	类型	说明
undefined	未定义类型	未被赋值的变量 , 值为undefined
boolean	布尔类型	值为true/false
number	数字类型	任何数字(NaN也是number类型 , 表示"非数")
String	字符串类型	值用引号(单引号或双引号)括起来
function	函数类型	function函数
object	对象类型	null,数组,Date等

其中object为引用类型 , 其他为基本数据类型(function也不是基本数据类型)

NaN 和 Infinity

NaN((not a number) 即非数值是一个特殊的值
用于表示一个本来要返回数值的操作未返回数值的情况(这样就不会抛出错误了)

任何number类型的与 NaN做计算 , 都会返回NaN
因此 , 想要判断一个变量是不是NaN时 , 要用 isNaN()函数[isNaN函数在接收到一个值之后,会尝试将这个值转为数值 , 如果可以转就返回true , 反之返回false

console.log(isNaN(5));	//false
console.log(isNaN('5'));	//false
console.log(isNaN('a'));	//true

console.log(NaN == NaN);  //output: false

Infinity 即无穷 , 是一个特殊的值

console.log(10/0);	//Infinity

typeof获取数据类型

可使用typeof获取变量的数据类型

let num;
console.log(typeof num);	//返回undefined --> 因为在js中,只有给变量赋值之后 , 才能知道这个变量是干什么的
num = 10;
console.log(typeof num);	//返回number

function getDate(){};
console.log(typeof getDate);	//返回function

string

转义字符

在string变量中,可能会有如下情况:

//我想要嵌套一个单引号的内容 , 可这种情况实际上是不允许的
let s = 'eofjsi'jfs'' ; 
//加上转义符就可以了
let s = 'eofjsi\'jfs\'';

模版字符串

外面用反引号里面是 ${…}

let age = 18;
console.log(`我今年${age}岁了`); //我今年18岁了
console.log(`我今年${age+1}岁了`); //我今年19岁了

数据类型的转换

隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换成为隐式转换

 + : 加号两边只要有一个是字符串 ,, 都会把另一个转成字符串
 除了 + 以外的算数运算符 如 - / * 等都会把数据转成数字类型

但+有一个用法:

console.log(+"123"); 	//output : 123 (数字类型的)

显示转换
可以用 Number , parseInt() , parseFloat()

使用表单,prompt 获取过来的数据默认是字符串类型的 , 因此不能直接用来计算

let num = prompt('输入年薪');
//方式一:
let num = (Number)(prompt('输入年薪'));
//方式二:
let num = +prompt('输入年薪');

console.log(parseInt('10') + parseFloat('10.5'));	//20.5

练习

实现 : 可以动态输出三年后的年龄
思路:需要把年龄转为数字类型 , 才能进行计算

let name = prompt('请输入姓名');
let age = +prompt('请输入年龄:');
let gender = prompt('请输入您的性别:');

document.write(`
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr>
      <th>${name}</th>
      <th>${age+3}</th>
      <th>${gender}</th>
    </tr>
    </table>
`)

六. js中的运算符

运算符	优先级
算数运算符	`++` `--` `*` `/` `%` `+` `-`
比较预算符	`<` `<=` `>` `>=` `==` `!=` `===` `!==`
逻辑运算符	`!` `&&` `或`
赋值运算符	`=` `+=` `-=` `*=` `/=`

或 || (在表格里写不出来)

==和===的区别
== 相等运算符运行时 ,==操作符会自动将两端的操作数转换为同一种数据类型后再比较

console.log(1 == '1');	// true

===严格相等(等同运算符) ===是严格意义上的相等 , 两个值和他们的类型完全一致时才返回true

console/log(1==='1');	//false

七. 流程控制语句

if语句
switch语句

let level = 1;
switch(level){
	case 1:
		console.log('第一名')
		break;
	case 2:
		console.log('第二名')
		break;
	case 3:
		console.log('第三名')
		break;
	default:
		console.log('重考')
		break;
}

while语句

let i = 0
while(i<5){
	console.log(i);
	i++;
}

do while语句

let num = 123456;
do{
	console.log(num%10);
	num = Math.trunc(num/10);	//Math.trunc() 方法去除数字的小数部分 , 保留整数部分
}while(num!=0);

for循环语句

练习 ---- 简单计算器

需求: 用户输入2个数字 , 然后输入±*/任何一个, 然后输出计算结果

注意 : 模板字符串要用反引号反引号反引号！！！

let a = +prompt('请输入第一个数字:');
let b = +prompt('请输入第二个数字');
let c = prompt('请输入+ - * / 中的一种运算符号:')

switch (c){
  case '+':
    alert(`${a+b}`);	//也可以写成alert(a+b);
    break;
  case '-':
    alert(`${a-b}`);
    break;
  case '*':
    alert(`${a*b}`);
    break;
  case '/':
    alert(`${a/b}`);
    break;
}

八. 数组

创建数组

//1. 创建时直接给值
let arr = [1,2,3,4,5];
//2. 创建数组时不指定长度
let arr = new Array();
//3. 创建数组时直接赋值
let arr = new Array(1,2,3,4,5);
//4. 创建数组时指定长度(一般不用)
let arr = new Array(5);

Array数组内置对象

属性 :

名称	描述
length	设置返回数组中元素的数目

方法 :

名称	描述
push(el)	将新元素添加到一个数组的尾部,并返回数组的新长度值
unshift(el)	将新元素添加到一个数组的头部,并返回数组的新长度值
pop()	删除数组中的最后一个元素并返回该元素
shift()	删除数组中的第一个元素并返回该元素
sort()	对数组进行排序
reverse()	对数组进行反转(注意:不是倒着排序)
concat(el)	返回一个新数组,这个新数组是由多个数组组合而成的
join(str)	把数组的所有元素放入一个字符串中,通过一个分隔符(字符)进行连接,返回一个新字符数据
splice(…)	可以对数组元素做删除,插入,更新等多种操作
slice(…)	返回一个数组片段

length()

let arr = new Array(1,5,4,3,7);
console.log('arr.length:'+arr.length);  //返回数组的长度

push() 和 unshift()

console.log('push:'+arr.push(10));  //返回新数组的长度
console.log('unshift:'+arr.unshift(12));  //返回新数组的长度
console.log('arr:'+arr);

pop() 和 shift()

console.log('pop:'+arr.pop());  //返回删除的元素
console.log('arr:'+arr);

console.log('shift:'+arr.shift());  //返回删除的元素
console.log('arr:'+arr);

reverse()

arr.reverse();  //翻转
console.log('reverse:'+arr);

sort()

//sort()方法
arr.sort();
console.log('arr.sort:'+arr);
  //也可以自定义排序规则
let arr2 = [55,4,3,8,90];
arr2.sort(rule);
function rule(a,b){
  return b-a;//按照降序排列
  // return a-b;//按照升序排列
}
console.log('arr2.sort(rule):'+arr2);

concat()—>用于连接两个或多个数组,并返回一个新的数组,而不会改变原始数组

//concat()方法  --> 用于连接两个或多个数组,并返回一个新的数组,而不会改变原始数组
let b = new Array(9,8,7,5);
let c = arr.concat(b);
console.log('c:'+c);

join()

//join(str)方法 
let result = arr.join('-');
console.log('arr.join:'+result);

splice()

let arr = new Array(1,5,4,3,7);
//splice()方法
//从数组中间删除元素:splice(开始位置,删除元素长度)
arr.splice(2,3);
console.log(arr); //output : [1,5]
//在数组中间插入元素 : splice(开始位置,删除元素长度,新插入的元素... ...)
arr.splice(2,0,33,34,35);
console.log(arr); //output : [1,5,33,34,35]
//替换数组中某个元素:splice(开始位置,要替换的元素长度,替换元素... ...)
arr.splice(2,1,99);
console.log(arr); //output : [1,5,99,34,35]

小案例的实现

实现效果
.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="../js/js01.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/demo1.css">
  </head>
  <body>
  </body>
</html>

.css文件

.box{
    display: flex;
    width: 700px;
    height: 300px;
    border-left: 1px solid pink;
    border-bottom: 1px solid pink;
    margin: 50px auto;
    justify-content: space-around;
    align-items: flex-end;
    text-align: center;
  }
  .box>div{
    display: flex;
    width: 50px;
    background-color: pink;
    flex-direction: column;
    justify-content: space-between;
  }
  .box div span{
    margin-top: -20px;
  }
  .box div h4{
    margin-bottom: -35px;
    width: 70px;
    margin: left -10px;
  }

.js文件

//1.四次弹窗效果
//声明一个新的数组
let arr = [];
for(let i=1;i<=4;i++){
  arr.push(prompt(`请输入第${i}季度的数据:`));
}

//盒子开头
document.write(`<div class = "box"?>`);

//盒子中间
for(let i = 0;i<arr.length;i++){
  document.write(`
    <div style = "height : ${arr[i]}px;">
      <span>${arr[i]}</span>
      <h4>第${i+1}季度</h4>
    </div>
  `)
}
//盒子结尾
document.write(`</div>`);

九. 函数

函数分为具名函数和匿名函数

具名函数

具名函数的调用可以写在任何位置

fun();	//可以在函数体前调用
function fun(){
	console.log("这是一个函数");
}
fun();	//可以在函数体后调用

匿名函数

就是没有 命名 的函数

fn();	//不可以在let声明前调用--->let语法本来就是 先声明,后调用
let fn = function(){
	console.log("这是一个匿名函数");
}
fn();	//可以正常执行

立即执行函数

(function(){
	console.log(11);
})();
(function(){
	console.log(22);
})();

其实最后一个小括号就代表—>调用函数

(function (x,y){
	console.log(x+y);
})(1,2);	//output: 3

逻辑中断

用到的逻辑运算符 : && 和 ||

function getSum(x,y){
	x = x || 0;
	y = y || 0;
	console.log(x + y);
}
getSum(1,2);	//output: 3
getSum();		//output: 0

对象

对象的声明和调用

let 对象名 = {
属性名: 属性值,
方法名: 函数,
}

let obj = {
	username: '姓名',
	age: 18,
	gender: '女',
	fn: function(){
		console.log("这是一个对象的方法");
	},
}

//调用:
console.log(obj.username);
obj.fn();

遍历对象

遍历数组也可以用for in

	 let obj = {
      	username: 'xiaodu',
      	age: 20,
      	sex: '女',
      }
      
      //遍历对象
      for(let i in obj){
      //	console.log(i);	//遍历属性名
      //	console.log(obj[i]); //遍历属性值
      	console.log(i+" "+obj[i]);
      }

在这里插入图片描述

内置对象

Math

Math.random()

Math.random()是 [0,1)中随机取一个数

// 0~10之间的整数
let random = Math.floor(Math.random() * 11);
console.log(random);

//从数组中随机抽取一个
let arr = ['red','green','pink'];
let random = Math.floor(Math.random() * arr.length);
console.log(arr[random]);

DOM

通过DOM , 可以获取html中的标签—>在DOM中 , 获取的标签是 DOM对象

获取DOM对象常用方法

方法	获取什么	得到什么
getElementBuId()	通过元素的ID属性获取DOM对象	一个DOM对象
getElementsByTagName()	通过元素的标签名获取	一组DOM对象
getElementsByClassName()	class属性	一组DOM对象
getElementsByName()	name属性	一组DOM对象

  <p id="one">这是一个p标签</p>
  <p class="first">这是一个p标签</p>
  <p class="first">这是一个p标签</p>
  <p name="username">这是一个p标签</p>
  <p name="username">这是一个p标签</p>
  <script>
      let oneObj = document.getElementById('one');
      oneObj.style.color = 'red';     //只有第一个p标签字体变红色
      let pArr = document.getElementsByTagName('p');
      console.log(pArr.length);       //获取所有p标签对象，是数组，长度为5
      let firstArr = document.getElementsByClassName('first');
      console.log(firstArr.length);   //获取所有class为first的对象，是数组，长度为2
      let userArr = document.getElementsByName('user');
      console.log(userArr.length);    //获取所有name属性为user的对象，是数组，长度为2
  </script>

其他获取DOM对象的方法

方法	获取
document.documentElement	获取html对象
document.body	获取body对象
document.querySelector()	通过选择器获取`一个DOM对象`
document.querySelectorAll()	通过选择器获取`一组DOM对象`

<div>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
</div>
<script>
    let htmlObj = document.documentElement;
    htmlObj.style.backgroundColor = 'red';       //设置html背景色
    let bodyObj = document.body;
    bodyObj.style.fontSize = '36px';             //设置body中所有元素的字体大小
    let pObj = document.querySelector('div p');
    pObj.style.color = 'blue';                   //第一个p标签有效
    let pArr = document.querySelectorAll('div p');
    console.log(pArr.length);                    //数组长度为2
</script>

querySelector() 和 querySelectorAll()

语法:
document.querySelector(css选择器);
document.querySelectorAll(css选择器)

//html
<body>
	<div class="box">123</div>
	<div class="box">abc</div>
	<p id="nav">111</p>
	<ul>
		<li>测试1</li>
		<li>测试1</li>
		<li>测试1</li>
	</ul>

	<script>
		document.querySelector('div');	//获取的是<div class="box">123</div>
		document.querySelector('.box');	//获取的是<div class="box">123</div>
		document.querySelector('#nav');	//获取的是<p id="nav">111</p>
	
		//获取第一个 li
		document.querySelector('ul li:first-chirld');

		//获取所有的 li
		document.querySelectorAll('ul li');
<body>

获取对象的时机

js代码要写在body的最后—>因为必须保证html代码全部加载完毕之后 , 才执行js代码 , 才能获取DOM对象
如果一定要将js代码放在html之前 : 那要这么写

window.onload()事件 : 浏览器完成页面加载(包括图片等资源)后立即触发 , 此事件的处理函数就叫做"文档就绪函数" .
如果使用window.onload事件的话 , 我们就可以将js代码写在网页的任何一个部分 , 或者是任何一个外部.js文件中

<script>
	//文档就绪函数
	window.onload = function(){
		var obj = document.getElementById("one");
		obj.innerHTML = 'hello world!';
	}
</script>

//.html
<p id="one"></p>

DOM对象中常用的属性

注意:
在使用js操作DOM对象的CSS样式时 , 由于js不能识别 " - " 字符 , 所以 , 所有CSS样式的书写 , 要一律改为小驼峰式 (例如: user-name ----> userName)

innerText

元素innerText属性

显示纯文本 , 不解析标签

修改html中的文本内容

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      window.onload = function(){
        let box = document.getElementById('one');
        console.log(box.innerText);
        box.innerText = '<strong>我是js中的一个盒子</strong>';
      }
    </script>
  </head>
  <body>
    <div id='one' class="box">我是html中的一个盒子</div>
  </body>
</html>

在这里插入图片描述

innertHTML

元素innerHTML属性

会解析标签 , 多标签建议使用模板字符

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      window.onload = function(){
        let box = document.getElementById('one');
        console.log(box.innerText);
        box.innerText = '<strong>我是js中的一个盒子</strong>';
        
        let boxHTML = document.getElementById('two');
        console.log(boxHTML.innerHTML);
        boxHTML.innerHTML = '<strong>我是js中的第二个盒子</strong>';
      }
    </script>
  </head>
  <body>
    <div id='one' class="box">我是html中的一个盒子</div>
    <div id='two' class="boxHTML">我是html中的第二个盒子</div>
  </body>
</html>

在这里插入图片描述

操作常用属性 (如中的src属性)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
      window.onload = function(){
        let img = document.querySelector('img');
        img.src = "../img/01.jpeg"
      }
    </script>
  </head>
  <body>
    <img src="../img/02.jpg" alt=""/>
  </body>
</html>

通过style修改样式属性

语法: 对象.style.样式属性 = ‘值’
eg. box.style.width = ‘300px’;

<style>
	.box{	
		width: 200px;
		height: 200px;
		background-color: pink;
	}
</style>

<body>
	<div class="box"></div>

	<script>
		let box = document.querySelector('.box');
		box.style.width = '300px';
	</script>
<body>

通过className修改样式属性

语法 : 元素.className = ‘新css类名’

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    	.first{
    		width: 300px;
    		height: 200px;
    	}
    	.two{
    		width: 200px;
    		height: 20px;
    		background-color: green;
    	}
    </style>
  </head>
  <body>
    <div id="one" class="first">这是一个盒子</div>
    
    	<script>
    		let obj = document.getElementById('one');
    		console.log(obj.className);	//output: first
    		obj.className = 'two';
    
    		//或者
    		let obj1 = document.querySelector('.first');
    		console.log(obj1.className);
    		obj1.className = 'two';
        
      </script>
  </body>
</html>

通过classList 追加和删除类名

语法 : (注意是类名 —>不加.)
//追加一个类
元素.classList.add(‘类名’)
//删除一个类
元素.classList.remove(‘类名’)
//切换一个类
元素.classList.toggle(‘类名’)

元素.classList.toggle(‘类名’)
有就删除 , 没有就加上

<div class="box">文字1</div>
<div class="box active">文字2</div>
<script>
	let box = document.querySelector('.box');
	//原来没有active --> 加上active
	box.classList.toggle('active');		//变为<div class="box active">文字1</div>
	//原来有active --> 删除active
	box.classList.toggle('active');		//变为<div class="box">文字2</div>
</script>

ES6

ES6基础语法

ES6新增—>let命令

(前面有提到 , 这里不赘述)

const命令

const声明一个只读的常量 .

const PI = 3.14;
PI = 3; //会报错TypeError: Assignment to constant variable.

模板字符串

传统的js是采用拼接的形式 —>这样的代码比较乱可读性不好, 写起来也乱套

<p id="result"></p>
<script>
    let basket = {
        count: 100,
        onSale: 80
    }
    document.getElementById('result').innerHTML =
        'There are <b>' + basket.count + '</b> ' +
        'items in your basket, ' +
        '<em>' + basket.onSale +
        '</em> are on sale!';
</script>

ES6引入了模板字符串的概念:
注意：ES6模板字符串中必须要使用反引号。

<p id="result"></p>
<script>
    let basket = {
        count:100,
        onSale:80
    }
    document.getElementById('result').innerHTML =
        `There are <b>${basket.count}</b> items
         in your basket, <em>${basket.onSale}</em>
        are on sale!`;
</script>

箭头函数

ES6 允许使用"箭头"(=>) 定义函数 :

//ES5定义函数 :
var f = function(v){
	return v;
}

//ES6定义箭头函数 :
var f = v =>  v;

1. 如果箭头函数不需要参数或需要多个参数 , 就使用一个圆括号代表参数部分

let f = () => 5;
//等同于
let f = function(){ 
	return 5; 
}


let sum = (num1,num2) => {
	return num1 + num2;
}
//等同于
let sum = function(num1,num2){
	return num1 + num2;
}

2. 如果只有一个参数 , 那么圆括号就可以省略了

let f = str => {
	console.log(str);
}
f('hello');

3. 如果函数体中的代码只有一句 , 那么大括号可以省略

let f = str => console.log(str);
f('hello');

4 如果函数体中的代码只有一个return语句 , 那么return关键词也必须省略

//这是错误的
let sum = (num1, num2) => return num1 + num2;
//这是正确的
let sum = (num1, num2) => num1 + num2;

5. 由于大括号被解释为代码块 , 所以如果箭头函数直接返回一个对象 , 必须在对象外面加上括号

let getTempItem = id => ({id:id , name:'Temp'})

扩展运算符(…)

扩展运算符的应用

数组的合并

const a = ['张三','李四'];
const b = ['王五','宋七'];
//es5
const c = a.concat(b);
//es6--->扩展运算符
const d = [...a,...b];

console.log(c);
console.log(d);

运行结果 :
在这里插入图片描述
数组的克隆

const a = ['E','D','G'];
const b = [...a];
console.log(b);		//['E', 'D', 'G']

可以将其他转为数组(之后就可以进行数组形式的操作 , 如迭代等)

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];	// 将nodeList转为数组

Symbol

ES6 引入了一种新的原始数据类型 Symbol , 表示独一无二的值 .
他是js的第七种数据类型 , 是一种类似于字符串的数据类型

Symbol的特点:
1. Symbol的值是唯一的 , 用来解决命名冲突的问题
2. Symbol值 不能与其他数据进行运算
3. Symbol 定义的对象不能使用 for...in 循环遍历 , 但是可以使用Reflect.ownKeys来获取对象的所有键名

//创建
let s1 = Symbol();
//也可以在 括号 里添加个字符串--->但只起一个说明注释的功能
let s2 = Symblo('这是一个Symbol类型');
let s3 = Symbol('这是一个Symbol类型');
console.log(s2 === s3);	//false

let s4 = Symbol.for('这是一个Symbol类型');
let s5 = Symbol.for('这是一个Symbol类型');
console.log(s4 === s5);	//true

迭代器 Iterator

迭代器用的是 for…of

const xiyou = ['唐僧','孙悟空','猪八戒','沙悟净'];
    //使用for...of遍历数组
    for(let v of xiyou){
      console.log(v);   //打印的是 value值
    }
    //使用for...in遍历数组
    for(let v in xiyou){
      console.log(v);	//打印的是 索引值
    }

在这里插入图片描述

数组中的map方法

map

使用场景
map可以遍历数组处理数据 , 并且返回新的数组
map是有返回值的

let arr = ['red','green','blue'];
let newArr = arr.map(function (ele,index){
	console.log(ele);
	console.log(index);
	return ele + '颜色';
});
console.log(newArr)