文章目录
一、用过的
function fu() {} <==> const fu = () =>{}
listStu.find((item)=>{
return item.id === 5
})
find和findin
var users = [
{id:1, name: 'a'},
{id:1, name: 'a'},
{id:1, name: 'a'},
{id:1, name: 'a'},
{id:1, name: 'a'},
]
--------------------------------------------------
//前端每一个数据类型都有prototype原型
/*1我们需要牢记两点:①__proto__和constructor属性是对象所独有的;② prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__和constructor属性。
__proto__属性的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(父对象)里找,一直找,直到__proto__属性的终点null,再往上找就相当于在null上取值,会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法,即f1.__proto__ === Foo.prototype。
constructor属性的含义就是指向该对象的构造函数,所有函数(此时看成对象了)最终的构造函数都指向Function。
*/
Array.prototype.myfind = function (conditionFunc){
for(var i = 0; i< this.length;i++){
if(conditionFunc(this[i],i)){
return [i]
}
}
}
---------------------------------------------------
var ret = users.myfind(function(item, index){
return item.id===4
})
- 牢记两点:①__proto__和constructor属性是对象所独有的;② prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__和constructor属性。
- __proto__属性的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(父对象)里找,一直找,直到__proto__属性的终点null,再往上找就相当于在null上取值,会报错。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。
- prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法,即f1.proto === Foo.prototype。
- constructor属性的含义就是指向该对象的构造函数,所有函数(此时看成对象了)最终的构造函数都指向Function。
*/
二、新增Symbol数据类型
- 作用:
- 生成一个独一无二的值
var str1= Symbol()
var str2= Symbol()
console.log(str1==str2)
== false
二、新增Set集合
- 作用: 数组去重 var arr = new Set(Arr) 去重后返回数组
- 语法: add/delete/has/clear
var set = new Set([1,2,3])
co
三、map类型
- 概念:类似与对象,但键不限于字符串(对象的键一定是字符串)
- 语法: m.add(k,v) & m.get(k)/delete/has & m.clear()
四、循环
var arrs = [4,8,1]
--------------------
// for、while、do... while
for (var i=0; i< arrs.length; i++){
console.log(arrs[i])
}
----------------------
//for .. in .. (推荐用来遍历对象)
// forEach 只能遍历数组
arrs.forEach(function(item, index) {
console.log(item)
})
// for ... in 推荐遍历对象
for (var index in arrs){
console.log(arr[index])
}
// for ... of // 更强, 可以便利新的数据类型、数组、对象
for(var val in arrs){
console.log(val)
}
五、声明变量
在ES6(ES2015)出现之前,JavaScript中声明变量就只有通过 var 关键字,函数声明是通过 function 关键字,而在ES6之后,声明的方式有 var(具备函数作用域, 全局作用域, 在块作用域中使用不安全) 、 let 、 const 、 function 、 class
- var a,函数作用域 vs 全局作用域
块作用域
{
let a= 'dfdf';
console.log(a);
}
var a = 1; //此处声明的变量a为全局变量
var a = 3; //覆盖了前面的
function fn(){
var a = 2;//此处声明的变量a为函数foo的局部变量
console.log(a);//2
}
fn();
console.log(a);//1
注意:var 声明的变量存在提升(hoisting)。
- let b 具有块作用域的特征。
- let 声明的变量不存在变量提升
- 在同一个作用域同名变量只能声明一个
let a = 1;
console.log(a);//1
console.log(b);//Uncaught ReferenceError: b is not defined
let b = 2;
function foo(){
let a = 1;
let a = 2;//Uncaught SyntaxError: Identifier 'a' has already been declared
}
- const 声明方式,除了具有 let 的上述特点外,其还具备一个特点,即 const 定义的变量,一旦定义后,就不能修改,即 const 声明的为常量。
const a = 1;
console.log(a);//1
a = 2;
console.log(a);//Uncaught TypeError: Assignment to constant variable.
但是,并不是说 const 声明的变量其内部内容不可变,如:
const obj = {a:1,b:2};
console.log(obj.a);//1
obj.a = 3;
console.log(obj.a);//3
所以准确的说,是 const 声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的,只是变量标识符不能重新分配。
var 声明的变量属于函数作用域,let 和 const 声明的变量属于块级作用域;
var 存在变量提升现象,而 let 和 const 没有此类现象;
var 变量可以重复声明,而在同一个块级作用域,let 变量不能重新声明,const 变量不能修改。
六、函数的扩展
- 函数可以添加默认值
function fn (name="二大爷", age=88){
}
- 函数体声明(箭头函数)
var fn = (args1... args)-> {
console.log("没有function了")
}
var fn0 = () -> console.log("看好了") // 大括号有时可以省略
var fn1 = name -> console.log("看好了") // 一个入参没小括号
var fn2 = (name,age) -> console.log("看好了")
------------------------------------------------
fn0()
fn1("张三")
fn2("zha", 19)
- argments获取所有参数,不确定参数数量
function fn () {
console.log(argments)
}
------------
fn(1,2,3,4)
- 多参数
var fn = function(arg1, ... args ){}
fn(1,2,3,4) 时 arg1 = 1, args2 = [2,3,4]
七、字符串的扩展
str.repeat(3) 拼接3次
模板字符串
旧版:var a = "asdddd" + name + "dsfdsfds"
-------------------------------------
新版: var a = "asdddd${name}dsfdsfds"
八、模块化module(export/import)
旧:闭包是最简单的模块化(function () {xxx})
新:使用es6的模块化 或者 CommonJS(node),下面是ES6的模块化
通过 export和import 实现导出导入
- exportsDemo.js
var name = "武松"
var age ="9"
var fn = () => console.log('hello')
exports {name, age, fn}
- importDemo.html在html页面导入
<body>
<script type="module">
//规范了使用js的标准
import {name,age,fn} from './js/exportsdemo.js'
console.log(name)
console.log(age)
console.log(fn)
</script>
</body>
- export default
//一个文件即模块中只能存在一个export default语句,导出一个当前模块的默认对外接口
export default var i = 0;
------------------------
import variable from './exportDemo';
console.log(variable); // 0;
上述import语句仅仅导入了exportDemo.js文件中定义为默认的接口即i = 0,所以打印输出0
import和export只能出现在模块的最外层(顶层)结构中,否则报错
由于es6模块是静态加载的,因此import和export不能出现在判断等动态语句中
九、数组的扩展
-
find() 方法返回通过测试函数的第一个数组元素的值。
此例查找(返回)第一个大于 18 的元素(的值):
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
- findIndex() 方法返回通过测试函数的第一个数组元素的索引。此例确定大于 18 的第一个元素的索引:
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);
function myFunction(value, index, array) {
return value > 18;
}
十、class类创建对象
- 旧版(ES5)的定义一个学生类
function Stu(name, age){
this.name=name
this.age = age
this.sayName = function () {
return this.name
}
}
---------------------------------
var stu1 = new Stu("张三", 15)
console.log(stu1.sayName());
console.log(stu1.name)
- ES6写法
class Stu {
constructor (name, age){
this.name = name
this.age = age
}
sayName() {
return this.name
}
}
//---------------------------------
const stu1 = new Stu("张三",15)
console.log(stu1.sayName());
console.log(stu1.name)
定义 Class 私有属性
私有属性与公共属性的定义方式几乎是一样的,只是需要在属性名称前面添加 # 符号:
class不存在变量提升,所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部,但是ES5就不一样,ES5存在变量提升,可以先使用,然后再定义。
十一、新的全局方法
- isNan() 如果参数是 NaN,则全局 isNaN() 方法返回 true。
isNaN("Hello"); // 返回 true
- isFinite() 如果参数为 Infinity 或 NaN,则全局 isFinite() 方法返回 false。
isFinite(10/0); // 返回 false
isFinite(10/1); // 返回 true
十二、Number扩展
ES6 为 Number 对象添加了 2 个新方法:
Number.isInteger() 是否是整数
Number.isSafeInteger() 安全整数是可以精确表示为双精度数的整数。
十三、Promise 对象
- 主要解决异步编程回调地狱的问题
node.js养成计划(七)异步执行、回调函数、promise、await、async
十四、对象属性和方法的增强写法
var name = "zhang"
var obj = {
name, //键和值相同省略键
age: 999,
say: function () {
console.log("dsffds")
}
hello () {
console.log("增强写法")
}
}