本文已参与『新人创作礼』活动，一起开启掘金创作之路
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
1. 函数
1.1 默认参数
可以给定义的函数接收的参数设置默认的值 在执行这个函数的时候，如果不指定函数的参数的值，就会使用参数的这些默认的值
function ajax(url,method='GET',dataType="json"){
console.log(url);
console.log(method);
console.log(dataType);
}
1.2 展开操作符
把...放在数组前面可以把一个数组进行展开,可以把一个数组直接传入一个函数而不需要使用apply
//传入参数
let print = function(a,b,c){
console.log(a,b,c);
}
print([1,2,3]);
print(...[1,2,3]);
// 可以替代apply
var m1 = Math.max.apply(null, [8, 9, 4, 1]);
var m2 = Math.max(...[8, 9, 4, 1]);
// 可以替代concat
var arr1 = [1, 3];
var arr2 = [3, 5];
var arr3 = arr1.concat(arr2);
var arr4 = [...arr1, ...arr2];
console.log(arr3,arr4);
//类数组的转数组
function max(a,b,c) {
console.log(Math.max(...arguments));
}
max(1, 3, 4);
1.3 剩余操作符
剩余操作符可以把其余的参数的值都放到一个叫b的数组里面
let rest = function(a,...rest){
console.log(a,rest);
}
rest(1,2,3);
1.4 解构参数
let destruct = function({name,age}){
console.log(name,age);
}
destruct({name:'zfpx',age:6});
1.5 函数的名字
ECMAScript 6 给函数添加了一个name属性
var desc = function descname(){}
console.log(desc.name);
1.6 箭头函数
箭头函数简化了函数的的定义方式，一般以 "=>" 操作符左边为输入的参数，而右边则是进行的操作以及返回的值inputs=>output
[1,2,3].forEach(val => console.log(val)););
输入参数如果多于一个要用()包起来，函数体如果有多条语句需要用{}包起来
箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。 正是因为它没有this，从而避免了this指向的问题。
var person = {
name:'zfpx',
getName:function(){
- setTimeout(function(){console.log(this);},1000); //在浏览器执行的话this指向window
+ setTimeout(() => console.log(this),1000);//在浏览器执行的话this指向person
}
}
person.getName();
1.7 数组的新方法
1.7.1 from
将一个数组或者类数组变成数组,会复制一份
let newArr = Array.from(oldArr);
1.7.2 Array.of
of是为了将一组数值,转换为数组
console.log(Array(3), Array(3).length);
console.log(Array.of(3), Array.of(3).length);
1.7.3 copyWithin
Array.prototype.copyWithin(target, start = 0, end = this.length) 覆盖目标的下标 开始的下标 结束的后一个的下标
[1, 2, 3, 4, 5].copyWithin(0, 1, 2);
1.7.4 find
查到对应的元素和索引
let arr = [1, 2 ,3, 3, 4, 5];
let find = arr.find((item, index, arr) => {
return item === 3;
});
let findIndex = arr.findIndex((item, index, arr) => {
return item === 3;
});
console.log(find, findIndex);
1.7.5 fill
就是填充数组的意思 会更改原数组 Array.prototype.fill(value, start, end = this.length);
let arr = [1, 2, 3, 4, 5, 6];
arr.fill('a', 1, 2);
console.log(arr);
1.7.5 map
map可以理解为数组的映射，两个形参（item，i）item是每一项，i是索引,返回值是新的数组
let arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.map((item,i) => {
return item
})
1.7.6 reduce
定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
| 参数 | 描述 |
|---|---|
| total | 必需。初始值, 或者计算结束后的返回值。 |
| currentValue | 必需。当前元素 |
| currentIndex | 可选。当前元素的索引 |
| arr | 可选。当前元素所属的数组对象。 |
| -------------- | ------- |
1.7.7 filter
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let res = nums.filter((num) => { return num > 5; });
console.log(res); // [6, 7, 8, 9, 10]
1.7.8 forEach
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的
const num = [9,8,7,6,5,4,3,2,1]
num.forEach((item,i)=>{
console.log(item) // 一次打印 9, 8, 7, 6, 5, 4, 3, 2, 1
})
6. 对象
6.1 对象字面量
如果你想在对象里添加跟变量名一样的属性，并且属性的值就是变量表示的值就可以直接在对象里加上这些属性
let name = 'zfpx';
let age = 8;
let getName = function(){
console.log(this.name);
}
let person = {
name,
age,
getName
}
person.getName();
6.2 Object.is
对比两个值是否相等
console.log(Object.is(NaN,NaN));
6.3 Object.assign
把多个对象的属性复制到一个对象中,第一个参数是复制的对象,从第二个参数开始往后,都是复制的源对象
var nameObj = {name:'zfpx'};
var ageObj = {age:8};
var obj = {};
Object.assign(obj,nameObj,ageObj);
console.log(obj);
//克隆对象
function clone (obj) {
return Object.assign({}, obj);
}
6.4 Object.setPrototypeOf
将一个指定的对象的原型设置为另一个对象或者null
var obj1 = {name:'zfpx1'};
var obj2 = {name:'zfpx2'};
var obj = {};
Object.setPrototypeOf(obj,obj1);
console.log(obj.name);
console.log(Object.getPrototypeOf(obj));
Object.setPrototypeOf(obj,obj2);
console.log(obj.name);
console.log(Object.getPrototypeOf(obj));
6.5 proto
直接在对象表达式中设置prototype
var obj1 = {name:'zfpx1'};
var obj3 = {
__proto__:obj1
}
console.log(obj3.name);
console.log(Object.getPrototypeOf(obj3));
6.6 super
通过super可以调用prototype上的属性或方法 javascript
let person ={
eat(){
return 'milk';
}
}
let student = {
__proto__:person,
eat(){
return super.eat()+' bread'
}
}
console.log(student.eat());
7. 类
7.1 class
使用class这个关键词定义一个类,基于这个类创建实例以后会自动执行constructor方法,此方法可以用来初始化
class Person {
constructor(name){
this.name = name;
}
getName(){
console.log(this.name);
}
}
let person = new Person('zfpx');
person.getName();
7.2 get与set
getter可以用来得获取属性，setter可以去设置属性
class Person {
constructor(){
this.hobbies = [];
}
set hobby(hobby){
this.hobbies.push(hobby);
}
get hobby(){
return this.hobbies;
}
}
let person = new Person();
person.hobby = 'basketball';
person.hobby = 'football';
console.log(person.hobby);
7.3 静态方法-static
在类里面添加静态的方法可以使用static这个关键词，静态方法就是不需要实例化类就能使用的方法
class Person {
static add(a,b){
return a+b;
}
}
console.log(Person.add(1,2));
7.4 继承extends
一个类可以去继承其它的类里的东西
class Person {
constructor(name){
this.name = name;
}
}
class Teacher extends Person{
constructor(name,age){
super(name);
this.age = age;
}
}
var teacher = new Teacher('zfpx',8);
console.log(teacher.name,teacher.age);
8.生成器(Generator)与迭代器(Iterator)
Generator是一个特殊的函数，执行它会返回一个Iterator对象。 通过遍历迭代器， Generator函数运行后会返回一个遍历器对象，而不是普通函数的返回值。
8.1 Iterators模拟
迭代器有一个next方法，每次执行的时候会返回一个对象 对象里面有两个属性，一个是value表示返回的值，还有就是布尔值done,表示是否迭代完成
function buy(books) {
let i = 0;
return {
next(){
let done = i == books.length;
let value = !done ? books[i++] : undefined;
return {
value: value,
done: done
}
}
}
}
let iterators = buy(['js', 'html']);
var curr;
do {
curr = iterators.next();
console.log(curr);
} while (!curr.done);
8.2 Generators
生成器用于创建迭代器
function* buy(books){
for(var i=0;i<books.length;i++){
yield books[i];
}
}
let buying = buy(['js','html']);
var curr;
do {
curr = buying.next();
console.log(curr);
} while (!curr.done);
9.集合
9.1 Set
一个Set是一堆东西的集合,Set有点像数组,不过跟数组不一样的是，Set里面不能有重复的内容
var books = new Set();
books.add('js');
books.add('js');//添加重复元素集合的元素个数不会改变
books.add('html');
books.forEach(function(book){//循环集合
console.log(book);
})
console.log(books.size);//集合中元数的个数
console.log(books.has('js'));//判断集合中是否有此元素
books.delete('js');//从集合中删除此元素
console.log(books.size);
console.log(books.has('js'));
books.clear();//清空 set
console.log(books.size);
9.2 Map
可以使用 Map 来组织这种名值对的数据
var books = new Map();
books.set('js',{name:'js'});//向map中添加元素
books.set('html',{name:'html'});
console.log(books.size);//查看集合中的元素
console.log(books.get('js'));//通过key获取值
books.delete('js');//执照key删除元素
console.log(books.has('js'));//判断map中有没有key
books.forEach((value, key) => { //forEach可以迭代map
console.log( key + ' = ' + value);
});
books.clear();//清空map
10.模块
可以根据应用的需求把代码分成不同的模块 每个模块里可以导出它需要让其它模块使用的东西 在其它模块里面可以导入这些模块导出的东西
10.1 模块
在浏览器中使用模块需要借助 导出
export var name = 'zfpx';
export var age = 8;
导入
//import {name,age} from './school.js';
在页面中引用
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="index.js"></script>
10.2 重命名
导出时重命名
function say(){
console.log('say');
}
export {say as say2};
导入时重命名
import {say2 as say3} from './school.js';
10.3 默认导出
每个模块都可以有一个默认要导出的东西 导出
export default function say(){
console.log('say');
}
导入
import say from './school.js';
一次性全部导入
import * as Info from './school.js';
console.log(Info.name);
console.log(Info.age);
Info.say();
文章有错误或者遗漏地方的小伙伴可以在评论区评论哦~~
