2017 复习 

ul{}
li:nth-of-type(2n+1){flex:1} // 1倍宽度
li:nth-of-type(2n){flex:2}   // 2倍宽度


string.split() 
arr.join()

样式用中划线
.index-banner{}
js用驼峰法
var userName = 'abc'
图片名用下划线
icon_index.png

flex样式 
ul{
    justify-content: center; //水平居中
    alignItems: center; 垂直居中
}

 js 调试  代码中添加 debugger ，按F10向下一行，按F8停止调试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  (function () {
    debugger
    var a = 1;
    var b = 2;
    var c ;
    c = a+b;
    document.write(c)
  })();

</script>
</body>
</html>

url 编码、解码

/* 先编码，再解码，解决微信浏览器修改url链接的问题
*  encodeURIComponent() 编码   ;/?:@&=+$,#
*  decodeURIComponent() 解码
*
*  encodeURI() 编码的字符比较少
*  decodeURI() 解码
* */
function fixUrl (url) {
  var index = url.search('#')
  return decodeURIComponent(encodeURIComponent(url.substring(index)))
}
console.log(fixUrl('https://static.wanhuizulin.com/car_wechat_test/#!/oneStepInvite?phone=13723401234'))

 ES6 ... 运算符

/**
 * Created by kangjiawei on 2017/3/7.
 */

/*
* 函数定义时表示一堆参数
* rest参数
* val 是一个数组*/
function add(...val) {
  let sum = 0;
  for(let i of val){
    sum+=i;
  }
  return sum;
}
console.log(add(1,3,5,7,9))
console.log(add(1,3,5))

/*
* 扩展运算符 ...
* rest参数的逆运算，将数组转为用逗号分隔的参数序列
* */
console.log(...[1,2,3,4,5])

function add(x, y) {
  return x+y;
}
var nums=[4,3,5];   
console.log(add(...nums)) // 函数调用时，把数组转换成一堆参数

/* 应用
*  ...合并数组
* */
let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [7,8,9]
console.log([...arr1,...arr2,...arr3])

/* 其他应用
* 
*  http://es6.ruanyifeng.com/#docs/function#扩展运算符
* */

 ES6 变量的解构赋值

/**
 * Created by kangjiawei on 2017/3/7.
 */
/* ES6 变量的解构赋值
* */
let [x,y]=[1,2,3]; // 支持不完全匹配，右边一般是数组，可以为字符串，匹配不到就是 undefined
console.log(x);
console.log(y);
let [a,b,c]=[4,5];
console.log(c);  // undefined

/* 解构赋值 默认值 */
let[d=11,e=22]=[1];
console.log(d);  // 默认值11 被覆盖为 1
console.log(e);

/* 对象解构赋值 */
let {test,other}={test:'abc',one:'this is one'}
console.log(test);    // abc
console.log(other);  // undefined 没有对应的 other 值

/* 字符串的解构赋值 */
const [f,g,h]='hello';
console.log(f);
console.log(g);
console.log(h);
/*
*
other
http://es6.ruanyifeng.com/#docs/destructuring
* */
字符串截取 tr.substring(str.length - 2)  合并数组 concat  flex简单布局
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  // 截取最后两个字符串
  var str = '中国在有人民基要'
  console.log(str.length)
  console.log(str.substring(str.length - 2))

  // 合并数组 concat
  var arr = [{name: 'abc', age: 12}, {name: 'ddd', age: 13}];
  var arr2 = [{name: 'a', age: 1}, {name: 'b', age: 2}, {name: 'c', age: 3}];


  var arr4 = arr.concat(arr2)  // 数组连接
  console.log(typeof arr4);
  for (let i of arr4) {
    console.log(i.age)
  }
</script>
flex 简单布局
<div style="width:300px;border: 1px solid green;height: 200px;padding:10px;">

  <button>btn</button>
  <button>btn</button>
  <button>btn</button>
</div>
<style>
  div{
    display: flex;
    justify-content: space-between;
  }
  button {
    flex:1;  /* 占据剩余空间*/
    background: red;
    height: 30px;
    margin: 10px;  /*需要自己写边距*/

  }
</style>
</body>
</html>

 Object.keys() foreach()

var obj = {name:'kang',age:12}
var arr = []
Object.keys(obj).forEach(val=>{
  arr.push(obj[val])
})
console.log(arr); // ['kang',12]

 

============ require import ===========

ES6 import 引入 export 导出 所有的引擎都还没有实现import
nodejs 采用 commonJS require引入 module.exports 导出
在node中使用babel支持ES6，仅仅是将ES6转为ES5，import语法会被转码为require

 // 把值放入数组

var str = '中国'
var arr =[]
arr.push(str)
console.log(arr);

// Array.of 值转数组
var arr2 = Array.of("人民")
console.log(arr2);

 

posted @ 2017-03-02 09:05  gyz418  阅读(149)  评论(0)    收藏  举报