javascript基础(第四天)

编程入门行业动态更新时间:2024-10-11 13:19:02

javascript基础(<a href=https://www.elefans.com/category/jswz/34/1765803.html style= 第四天)"/>

javascript基础(第四天)

ECMAScript6预计将在 2015年6月正式发布

chrome测试语法需要引入Traceur编辑器

了解未来的语法和趋势, 未来1年内估计也用到不, 这里只做基本的了解.

let 变量声明

{
let a = 10; //只在代码块内有效,适用于for,if等方法体
var b = 20;
}
console.log(a); // ReferenceError a is not defined
console.log(b); // 20

const 声明常量, 一旦声明, 不可修改.

const PI = 3.1415;

变量的解构赋值

//es3
var a = 1;
var b = 2;
var c = 3;
console.log(a); //1
console.log(b); //2
console.log(c); //3
//es6
var [x,y,z] = [4,5,6];
console.log(x); //4
console.log(y); //5
console.log(z); //6

对象的解构赋值

var {foo,bar} = {foo:'foo',bar:"bbb"}; //有没有脑残的感觉?

(1)作用1,交换变量的值

[x,y] = [y,x];

(2)作用2,从函数返回多个值

function f(){ return [4,5,6] }
var [x,y,z] = f();
console.log(x); //4
console.log(y); //5
console.log(z); //6

(3)遍历Map,这是我见过最简洁的语法,后面会讲到Map,for of

var map = new Map();
map.set('first','hello');
map.set('second','world');

for(let [key,value] of map){
console.log(key+','+value);
}

字符串的扩展

'母字符串'.contains(待查找的字符串); //返回true,false, 和indexOf差不多,就返回值不太一样

'母字符串'.startWith(待查找的字符串); //返回true,false,是否以什么开头

'母字符串'.endsWith(待查找的字符串); //返回true,false,是否以什么结尾

'母字符串'.repeat(重复次数);//返回字符串,是新字符串?还是就旧字符串? 当然是新字符串啦

console.log( 'x'.repeat(3) ); //xxx

//下面这2个方法支持4个字节存储的unicode字符

'母字符串'.codePointAt(字符索引) ; //返回编码,用来处理大于\uFFFF的unicode字符

'母字符串'.fromCodePoint(unicode编码); //返回字符,用来处理大于\uFFFF的unicode字符

/匹配字符串/imgu.test(待匹配的) //支持unicode, 用来处理大于\uFFFF的unicode字符

/匹配字符串/imy.test(待匹配的) //隐式^

/abcd/img.test('xabcd') === true

/abcd/imy.test('xabcd') === false;

模板字符串!!!最重要的!!!

需要反引号标示`` 支持多行输出, 支持变量嵌入

`This is 'abcd' ha ha ha`;

`he he

ha ha

hei hei `

var a = 'aaa', b='bbb'

`this is ${a} and ${b}` // this is aaa and bbb

数值的扩展

0b111110111 === 503; //支持2机制, 前缀0b

0o767 === 503; //支持8进制, 前缀0o

Number.isFinite(); //非数值,一律返回false

Number.isNaN();

Number.parseInt();

Number.parseFloat();

Number.isInteger(); //25 === true, 25.0 === true, 25.1 === false

Number.trunc(); 去掉小数部分 // 4.1 >> 4 , 4.9 >>4, -4.1 >> -4, -4.9 >> -4;

Math补充了一堆数学运算方法

数组的扩展

Array.from(); //讲可遍历(set,map),或者类似数组(array-like object)转换成真正的数组

let ps = document.querySelectorAll('p');

Array.from(ps) == >> 转成数组了

Array.of(); //讲一组值转换数组,

Array.of(3,11,8); //[3,11,8];

数组实例.find(); //找到第一个符合的数组元素

数组实例.findIndex(); //找到第一个符合数字元素的索引

[1,5,10,15].findIndex(function(value,index,arr){
return value > 9;
}); // 2

数组实例.fill(); //使用给定值填充一个数组

new Array(3).fill(7); //[7,7,7]

数组实例.entries() .keys() .values()

for(let index of ['a','b'].keys()){
console.log(index);
}
for(let elem of ['a','b'].values()){
console.log(elem);
}
for(let [index,elem] of ['a','b'].entries()){
console.log(index+','+elem);
}

数组推导

var a1 = [1,2,3,4];
var a2 = [for (i of a1) i*2]; //[2,4,6,8]

数组监听(add,update,delete,splice)

Array.observe(); Array.unobserve();

对象的扩展

Object.is(); 用来比较2个值是否相等

console.log(+0 === -0);
console.log( Object.is(+0,-0) ); //false
console.log(NaN === NaN);
console.log( Object.is(NaN,NaN) ); //true

Object.assign(target,source1,source2,....); 将源可枚举的属性赋值到目标对象

var target = {a:1,b:1};
var source1 = {b:2,c:2};
var source2 = {c:3};
Object.assign(target,source1,source2);
target; //{a:1,b:2,c:3}

Object.__proto__ 用于读取当前对象的prototype对象, 有了这个属性,实际上不再需要通过Object.create()来生成对象了? 阮一峰<ECMAScript6入门>61页

吐槽点,这个__proto__ 是否稳定? 欢迎探讨

Object.setPrototypeof(); //设置原型对象

function f(obj,proto){
obj.__proto__ = proto;
return obj;
}
var o = f({},obj);
var o = Object.setPrototypeOf({},null); //和上面的效果一样

Object.getPrototypeOf(待取的对象); //取得对象原型

Symbol, 一种新的原始数据类型, 最大的特点,就是Symbol都是不相等的

Proxy

var proxy = new Proxy({name:"aaaa"},{
get:function(target/*代理对象*/,property/*属性*/){
return 35;
}
});
proxy.name; //35
proxy.time; //35

Object.observe().Object.unobserve();监听对象的变化

函数的扩展

function Point(x=0,y=0){ //默认值
this.x=x;
this.y=y;
}
var p = new Point(); //{x:0,y:0}

function add(...values){ //用于获取函数的多余参数
let sum = 0;
for(var val of values){
sum += val;
}
return sum;
}

function push(array,...items){ // ...的用法
array.push(...items);
}

var sum = (a,b) => a+b; //箭头函数
sum(3,4); //7

[1,2,3].map(x=>x*x);

Set和Map数据结构

var s = new Set(); //都是唯一的,没有重复的值
[1,2,2,2,2,2,3].map(function(val,idx,arr){ s.add(val) });
for(var i of s){
console.log(i);
} //1,2,3

add(value) delete(value) has(value) clear() size

var m = new Map(); //对键的限制不限于字符串,对象也可以当键

var a = {b:'bbb',c:'ccc'};
m.set(a,'content');

size, set(key,value) get(key) has(key) delete(key) clear() 三种遍历器 keys() values() entries();

var map = new WeakMap(); //只接受对象作为键名

Iterator和for of循环

Iterator遍历器是一种规定, 有next()方法, 该方法返回{value:'当前遍历位置的值',done:布尔值,表示是否遍历结束}

function mkIterator(array){
var nextIndex = 0;
  return {
      next:function(){
          return nextIndex < array.length ?
          {value:array[nextIndex++],done:false},
          {value:undefined,done:true};
      }
  }
}

for of循环一个对象

只要部署了next方法, 就被视为具有iterator接口,就可以for of遍历

Array, 类数组(arguments Dom NodeList对象), Set, Map, 字符串, Generator(内部状态的遍历器)

Generator(内部状态的遍历器)

Generator函数就是普通函数, 有2个特征, 函数名后面有星号,函数体内使用yield(产出)定义遍历器的每个成员,即不同的内部状态

function* hellWorldGenerator(){
yield 'hello'; //这个地方可以替换成函数
yield 'world';
return 'ending';
}
var h = hellWorldGenerator();
h.next(); //{value: 'hello', done:false};
h.next(); //{value: 'world', done:false};
h.next(); //{value: 'ending', done:true};
h.next(); //{value: 'undefined', done:true}; //以后再调用和这个一样

Promise对象 !!!!这个是最好玩的!!!! 它可以将异步的操作用同步的写法表达出来,避免了层层嵌套的回调函数 (PromiseJS 第三方模拟库)

Class 和 Module

class Point{
constructor(x,y){
      this.x = x;
      this.y = y;
  }
  toString(){
      return '('+this.x+','+this.y+')';
  }
}
var point = new Point(2,3);
point.toString() // (2,3)

class ColorPoint extends Point{
  constructor(x,y,color){
      super(x,y); //super.constructor(x,y)
      this.color=color;
  }
  toString(){
      return this.color+super();
  }
}

export 和 import

a.js

export var aaa = 'aaa';

exprot var bbb = 'bbb';

b.js

import {aaa,bbb} from './a'

console.log(aaa+','+bbb);

es6语法还没有经过最佳技术实践的检验, 用法不统一, 以上代码仅供熟悉.