前言
开发中，经常会用到js的Array数组的各种迭代函数map()，filter()，some()，every()，forEach()，find() findIndex()，也是在ES6中新增一些遍历函数。同样是不是也是一道面试题，说说ES6新增的一些新特性？？？？
✍开始正文some()函数
✍一、对some()函数的定义：
some()：用于检测数组中的元素是否满足指定条件（函数提供）；
some()方法会依次执行数组中的每一个元素：
如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意：
some()不会对空数组进行检测。
some() 不会改变原始数组。
✍二、浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
✍三、语法
array.some(function(currentValue,index,arr),thisValue)
1
参数说明：
✍三、示例
<script>
var ages = [4, 12, 16, 20];
function checkAdult(age) {
return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
</head>
<body>
<table id="mytable" align="center" width="80%" border="1">
<tr bgcolor="#cccccc">
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function(){
//获取mytable中标签名为tr的字节点
mytable=document.getElementById("mytable");
trs=mytable.getElementsByTagName("tr");
len=trs.length;
flag=true;
for(i=0;i<len;i++){
if(flag){
//每隔一行设置背景色
var tr=document.getElementsByTagName("tr")[i].setAttribute("bgcolor","#cccccc");
flag=false;
}else{
flag=true;
}
}
}
</script>
</body>
</html>
JS中数据类型转换
目前为止，我了解到的JavaScript中共有6种类型。通过typeof关键字可以查看类型名称。
数据的类型：
字符串：若值为字符串，则显示为String。字符串使用单引号或双引号括起来。在控制台显示为黑色。
数字：若值为数字，则显示为Number。在控制台显示为蓝色。
布尔值：若值为布尔值，则显示为Boolean。它的值只有”true”和”false”。
对象：若值为对象，则显示为Object。
未定义：若值未定义，也就是仅仅声明，但未进行赋值，则显示为Undefined。
空值：若值为指向不引用对象的指针，则显示为Null，它与Undefined不同，以后慢慢深入了解。
以下表格详细写出了各种情况下相互转换的结果，可作为辅助记忆。
值 转换为字符串 转换为数字 转换为布尔值 转换为对象
undefined “undefined” NaN false throw TypeError
null “null” 0 false throw TypeError
true “true” 1 new Boolean(“true”)
false “false” 0 new Boolean(“false”)
“” 0 false new String("")
“1.2” 1.2 true new String(“1.2”)
“1.2a” NaN true new String(“1.2a”)
“aaa” NaN true new String(“aaa”)
0 “0” false new Number(0)
1 “1” true new Number(1)
NaN “NaN” false new Number(NaN)
Infinity “Infinity” true new Number(Infinity)
[] “” 0 true
[9] “9” 9 true
[“a”“b”] “a,b” NaN true
在Js中，数据类型可以相互转换，转换的方式有两种，隐式转换和强制转换，首先来说一些隐式转换。在进行代码书写时，要经常提醒自己所使用的元素是什么数据类型，在进行某些操作后是否会导致数据类型的变化，原因就是Js会对数据进行类型的隐式转换。
隐式转换举例：
（+）加法运算的隐式转换：加号两边只要出先了字符串，就自动将两者均转化为字符串，使两个字符串发生“拼接”，最后生成的结果也是一个字符串；如果前后都不是字符串，则转化为数字类型进行计算。
（-、*、/、%）其他算数运算的隐式转换：前后都转化为数字类型进行计算。
（！）逻辑非的隐式转换：他会将他后面的变量或表达式转换为布尔值。
（<，>）比较运算符的转换：如果前后存在一个数字，会对另一个转化为数字进行比较；如果前后均为字符串，会依次比较对应字符的编码大小，老大比老大，老二比老二，依次进行。
（&&，||）逻辑运算符的转换：先将前后都转化为布尔值再进行判断，要记住的是，只有undefined,null,0,””,NaN会转化成为false，其他都是true。
（== 、===）这里作为补充说明，null与Undefined相等但不全等，NaN与任何都不相等。
强制转换的方式：
1.转化为字符串
String（里面写待转化的内容）：没什么好解释的，就是强制将你所看到的转化为你所看到的。
toString（里面写目标数字是几进制），写法为：待转化内容.toString（目标内容是几进制）。括号内不写时默认为10。
toFixed（保留小数的位数），写法为待转化内容.toFixed（保留小数的位数），存在精度误差。
2.转化为数字
Number（），只有所转化内容在肉眼看到的全是数字，才会正常转化；false会转化为0，true会转化为1；null会转化为0；undefined会转化为NaN；其他情况均为NaN。
parseInt（待转化内容，待转化内容的进制方式），与toString互为逆运算，不写的话默认为10。如果待转化内容为字符串，若以数字开头，可以从开始转换到字符前为止变成数值。布尔值，undefined，null经过转化均为NaN。
ParseFloat（），与上面一致，不赘述。
3.转化为布尔值
书写方式为Boolean（），如果上面的隐式转换你有好好看，这里很得不需要再写了。
环境准备
创建项目
npx create-react-app my-react
进入项目并启动
cd my-react && npm start
1
src/index.js
先把src里面的东西全部删掉，重写了index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
return (
<div>Hellow, World</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
JSX
一个React组件中，render方法中return出去的内容就是这个组件将要渲染的内容，然后Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
React.createElement(
'div',
{},
'Hello, World'
)
React.createElement() 接收三个参数：
第一个参数是必填，传入的是似HTML标签名称: ul, li, div;
第二个参数是选填，表示的是属性: className;
第三个参数是选填, 子节点: 要显示的文本内容;
React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：
// 注意：这是简化过的结构
const element = {
type: 'div',
props: {
className: '',
children: 'Hello, world!'
}
};
元素渲染
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
render方法接收两个参数，第一个参数为我们的 React 根级组件，第二个参数接收一个 DOM 节点，代表我们将把和 React 应用挂载到这个 DOM 节点下，进而渲染到浏览器中。
组件 & props
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
函数组件：
function Welcome(props){
renter (
<h1> Hello, {props.name} </h1>
)
}
<Welcome name="World"/>
该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。
class组件：
class Welcome extends React.Component {
render(){
renter (
<h1> Hello, {thhis.props.name} </h1>
)
}
}
<Welcome name="World"/>
组件名称必须以大写字母开头。
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
State & 生命周期
State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。
class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date : new Date()
}
}
componentDidMount() {
//这里是Clock组件第一次被渲染到DOM时会调用，也就是挂载
}
componentWillUnmount() {
//当DOM组件Clock被删除时，会调用，也就是卸载
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}
修改state中数据：
class Clock extends React.Component {
constructor(props){
super(props)
this.state = {
date: new Date()
}
}
componentDidMount() {
//这里是Clock组件第一次被渲染到DOM时会调用，也就是挂载
this.timer = setInterval(()=>{
this.tick()
},1000)
}
tick(){
this.setState({
date: new Date()
})
}
componentWillUnmount() {
//当DOM组件Clock被删除时，会调用，也就是卸载
clearInterval(this.timer)
}
render(){
return (
<div>
<h1>Hello, World</h1>
<h2>It's {this.state.date.toLocaleTimeString()}</h2>
</div>
)
}
}
不要直接修改 State,构造函数是唯一可以给 this.state 赋值的地方
this.setState({name: 'World'})
1
State 的更新可能是异步的,要解决这个问题，可以让setState接受一个函数而不是一个对象，这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
事件处理
React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
在 React 中一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：
<a href="#" onclick="console.log('The link was clicked.'); return false">
Click me
</a>
在 React 中，可能是这样的：
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
class函数中绑定this
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// 此语法确保 handleClick 内的 this 已被绑定。
return (
<button onClick={() => this.handleClick()}>
Click me
</button>
);
}
}
在循环中，通常我们会为事件处理函数传递额外的参数
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
1
2
列表和key
function ListItem(props) {
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
语法
在 JSX 中所有的属性都要更换成驼峰式命名，比如 onclick 要改成 onClick，唯一比较特殊的就是 class，因为在 JS 中 class 是保留字，我们要把 class 改成 className 。
CSS 函数大家多多少少都使用过，比如 rgb() , rgba() , linear-gradient(), radial-gradient() , 等。
今天小编给大家介绍几个特殊的 css 函数。
attr() 这是一个很强的函数，他可以让数据传输到你的 css 中，不需要借助其他东西。
用法：
<style>
div::before {
content : attr(data-abc);
}
</style>
<div data-abc='我是attr'></div>
calc() 用与动态计算长度值
给大家展示快速让子盒子在父盒子中居中的另一种方法：
<style>
.father {
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
.child {
position: absolute;
/ 这里的 50px 为子盒子宽（高）的一半 /
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div class="father">
<div class="child"></div>
</div>
cubic-bezier() 定义了一个贝塞尔曲线(Cubic Bezier)。在这我就不多描述了，关于贝塞尔曲线，感兴趣的同学可以自行去了解。
var() 用于插入自定义的 css 属性值。
用法：和 sass，less 中定义变量的语法相似
<style>
:root {
--abc-- : red;
}
div {
width: 100px;
height: 100px;
background-color: var(--abc--);
}
</style>
<div></div>
counters() 这是一个古老但实用的属性，用与 css 中计数
用法：
counter-reset : item 1；
给定计数器 item 的初始值1，也可用与复位。参数 ‘item’ 为计数器的名称，后面的 ‘1’ 参数如果不写，默认是 0。
counter-increment: item 2;
设定当一个 item 计算器发生时计数器增加的值。参数 ‘2’为每次计数增长 2。
counters(item,’-’);
写在content中，显示计数器的值，‘-’ 设定俩计算器拼接时中间的符号为’-‘。它还有第三个参数，是list-style-type , 与 css 属性 list-style-type 是一模一样的。用与设定计数器以什么形式显示（阿拉伯数字，英文大小写，等）
<style>
ul {
counter-reset: item 1;
}
li:before {
counter-increment: item 2;
content: counters(item, "-");
}
</style>
<ul class="test">
<li> html
<ul>
<li> css</li>
<li> js</li>
</ul>
</li>
<li> Node</li>
<li> ts</li>
</ul>
bootstrap-multiselect动态加载数据，首先要引用bootstrap-multiselect.css和bootstrap-multiselect.js
<select id="demo" name="demo" multiple></select>
JS代码
$("#demo").multiselect({
// 自定义参数，按自己需求定义
nonSelectedText : '--请选择--',
inheritClass : true,
maxHeight : 350,
includeSelectAllOption : true,
numberDisplayed : 5,
//下拉回调函数
onDropdownShow : function(event) {
$.ajax({
url : "${ctx}/xx/xx",
async : false,
type : "get",
dataType : "json",
success : function(data) {
var mark = new Array();
for (var i = 0; i < data.length; i++) {
mark.push({
value : data[i].markId,
label : data[i].markName
});
}
$("#demo").multiselect('dataprovider', mark);
}
})
},
});
获取选中的值的集合
var selectList = $('#demo option:selected');
1
遍历集合得到选中的value和label
for (var i = 0; i < selectList.length; i++) {
value = siteList[i].value;
label = siteList[i].label;
}
希望这篇文章可以帮助到你
一、首先找到第一次发起网络请求的地址，将服务器返回set-cookie当全局变量存储起来
wx.request({
......
success: function(res) {
console.log(res.header);
//set-cookie:PHPSESSID=ic4vj84aaavqgb800k82etisu0; path=/; domain=.fengkui.net
// 登录成功，获取第一次的sessionid,存储起来
// 注意：Set-Cookie（开发者工具中调试全部小写）（远程调试和线上首字母大写）
wx.setStorageSync("sessionid", res.header["Set-Cookie"]);
}
})
三、后台获取cookie中的PHPSESSID，将PHPSESSID当作session_id使用
<?php
// 判断$_COOKIE['PHPSESSID']是否存在，存在则作session_id使用
if ($_COOKIE['PHPSESSID']) {
session_id($_COOKIE['PHPSESSID']);
}
session_start();
echo session_id();html5的新特点
1.语法更简单
a) 头部声明
<!doctype html>
b) 简化了字符集声明
<meta charset="utf-8">
2.语法更宽松
a) 可以省略结束符的标签
li、dt、dd、p、optgroup、option、tr、td、th
b) 可以完全省略的标签
html、head、body
3.标签语义化
增加了很多标签，在作页面的时候更加具有语义（定义了一些原本没有语义的div模块为有鲜明结构的语义模块）
a) <header>标记定义一个页面或一个区域的头部
b) <nav>标记定义导航链接
c) <article>标记定义一篇文章内容
d) <section>标记定义网页中一块区域
e) <aside>标记定义页面内容部分的侧边栏
f) <footer>标记定义一个页面或一个区域的底部
语义化标签图示
4.表单新增常用属性------要求掌握
required：必填
placeholder：输入内容提示
autofocus：自动获取焦点-----自动帮我们将光标点进去
<form method="post" action="http://www.baidu.com">
<!-- required 必填，必须的 -->
<!-- 自动获取焦点----自动将光标定位到表单中 -->
<input type="text" placeholder="请输入用户名" autofocus="autofocus" required="required" />
<input type="submit" />
</form>
5.input新增type属性值
a) type=“email”，文本框中只能输入email地址
b) type=“date”，日期控件
c) type=“time”
d) type=“month”
e) type=“week”
f) type=“number”，唤醒数字键盘
g) type=“range”，滑块
h) type=“color”
最近在做一个手机站，要求点击分享可以直接打开微信分享出去。而不是jiathis，share分享这种的点击出来二维码。在网上看了很多，都说APP能唤起微信，手机网页实现不了。也找了很多都不能直接唤起微信。
总结出来一个可以直接唤起微信的。适应手机qq浏览器和uc浏览器。
下面上代码，把这些直接放到要转发的页面里就可以了：
html部分：
-
<script src="mshare.js"></script>//引进mshare.js
-
<button data-mshare="0">点击弹出原生分享面板</button>
-
<button data-mshare="1">点击触发朋友圈分享</button>
-
<button data-mshare="2">点击触发发送给微信朋友</button>
js部分：
-
<script>
-
var mshare = new mShare({
-
title: 'Lorem ipsum dolor sit.',
-
url: 'http://m.ly.com',
-
desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.',
-
img: 'http://placehold.it/150x150'
-
});
-
$('button').click(function () {
-
// 1 ==> 朋友圈 2 ==> 朋友 0 ==> 直接弹出原生
-
mshare.init(+$(this).data('mshare'));
-
});
-
</script>
下面是mshare.js的代码分享，把这些代码新建一个js文件放进去，然后在页面中引进就ok了。
-
/**
-
* 此插件主要作用是在UC和QQ两个主流浏览器
-
* 上面触发微信分享到朋友圈或发送给朋友的功能
-
*/
-
'use strict';
-
var UA = navigator.appVersion;
-
-
/**
-
* 是否是 UC 浏览器
-
*/
-
var uc = UA.split('UCBrowser/').length > 1 ? 1 : 0;
-
-
/**
-
* 判断 qq 浏览器
-
* 然而qq浏览器分高低版本
-
* 2 代表高版本
-
* 1 代表低版本
-
*/
-
var qq = UA.split('MQQBrowser/').length > 1 ? 2 : 0;
-
-
/**
-
* 是否是微信
-
*/
-
var wx = /micromessenger/i.test(UA);
-
-
/**
-
* 浏览器版本
-
*/
-
var qqVs = qq ? parseFloat(UA.split('MQQBrowser/')[1]) : 0;
-
var ucVs = uc ? parseFloat(UA.split('UCBrowser/')[1]) : 0;
-
-
/**
-
* 获取操作系统信息 iPhone(1) Android(2)
-
*/
-
var os = (function () {
-
var ua = navigator.userAgent;
-
-
if (/iphone|ipod/i.test(ua)) {
-
return 1;
-
} else if (/android/i.test(ua)) {
-
return 2;
-
} else {
-
return 0;
-
}
-
}());
-
-
/**
-
* qq浏览器下面 是否加载好了相应的api文件
-
*/
-
var qqBridgeLoaded = false;
-
-
// 进一步细化版本和平台判断
-
if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
-
qq = 0;
-
} else {
-
if (qq && qqVs < 5.4 && os == 2) {
-
qq = 1;
-
} else {
-
if (uc && ((ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2))) {
-
uc = 0;
-
}
-
}
-
}
-
/**
-
* qq浏览器下面 根据不同版本 加载对应的bridge
-
* @method loadqqApi
-
* @param {Function} cb 回调函数
-
*/
-
function loadqqApi(cb) {
-
// qq == 0
-
if (!qq) {
-
return cb && cb();
-
}
-
var script = document.createElement('script');
-
script.src = (+qq === 1) ? '//3gimg.qq.com/html5/js/qb.js' : '//jsapi.qq.com/get?api=app.share';
-
/**
-
* 需要等加载过 qq 的 bridge 脚本之后
-
* 再去初始化分享组件
-
*/
-
script.onload = function () {
-
cb && cb();
-
};
-
document.body.appendChild(script);
-
}
-
/**
-
* UC浏览器分享
-
* @method ucShare
-
*/
-
function ucShare(config) {
-
// ['title', 'content', 'url', 'platform', 'disablePlatform', 'source', 'htmlID']
-
// 关于platform
-
// ios: kWeixin || kWeixinFriend;
-
// android: WechatFriends || WechatTimeline
-
// uc 分享会直接使用截图
-
var platform = '';
-
var shareInfo = null;
-
// 指定了分享类型
-
if (config.type) {
-
if (os == 2) {
-
platform = config.type == 1 ? 'WechatTimeline' : 'WechatFriends';
-
} else if (os == 1) {
-
platform = config.type == 1 ? 'kWeixinFriend' : 'kWeixin';
-
}
-
}
-
shareInfo = [config.title, config.desc, config.url, platform, '', '', ''];
-
// android
-
if (window.ucweb) {
-
ucweb.startRequest && ucweb.startRequest('shell.page_share', shareInfo);
-
return;
-
}
-
if (window.ucbrowser) {
-
ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
-
return;
-
}
-
}
-
/**
-
* qq 浏览器分享函数
-
* @method qqShare
-
*/
-
function qqShare(config) {
-
var type = config.type;
-
//微信好友 1, 微信朋友圈 8
-
type = type ? ((type == 1) ? 8 : 1) : '';
-
var share = function () {
-
var shareInfo = {
-
'url': config.url,
-
'title': config.title,
-
'description': config.desc,
-
'img_url': config.img,
-
'img_title': config.title,
-
'to_app': type,
-
'cus_txt': ''
-
};
-
if (window.browser) {
-
browser.app && browser.app.share(shareInfo);
-
} else if (window.qb) {
-
qb.share && qb.share(shareInfo);
-
}
-
};
-
if (qqBridgeLoaded) {
-
share();
-
} else {
-
loadqqApi(share);
-
}
-
}
-
/**
-
* 对外暴露的接口函数
-
* @method mShare
-
* @param {Object} config 配置对象
-
*/
-
function mShare(config) {
-
this.config = config;
-
this.init = function (type) {
-
if (typeof type != 'undefined') this.config.type = type;
-
try {
-
if (uc) {
-
ucShare(this.config);
-
} else if (qq && !wx) {
-
qqShare(this.config);
-
}
-
} catch (e) {}
-
}
-
}
-
// 预加载 qq bridge
-
loadqqApi(function () {
-
qqBridgeLoaded = true;
-
});
-
if (typeof module === 'object' && module.exports) {
-
module.exports = mShare;
-
} else {
-
window.mShare = mShare;
-
}
好了，这样就可以直接唤起微信进行分享啦
1.文字滚动
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
<marquee behavior="scroll" direction="up" height="30" style="overflow:hidden;" scrollamount="1" width="300" onMouseOver="stop()" onMouseOut="start()">
雷电黄色预警！<br />
大雨黄色预警！<br />
</marquee>
</body>
</html>
direction：方向
up:上 down：下 left：左 right：右
scrollamount:滚动速度-----------------scroll：滚动 amount：数值
width：宽度 height：高度
onmouseover：当鼠标移上去
onmouseout：当鼠标离开
stop()：停止
start()：开始
behavior：
scroll 循环滚动
alternate 来回滚动
slide 滚动一次停止
蓝蓝设计的小编 http://www.lanlanwork.com